/* ════════════════════════════════════════════════════════════════════
   TERAN ILDIZ — translit/translit.css   (v75 · 12-QATLAM)
   Lotin / Kirill o'giruvchi.
   ════════════════════════════════════════════════════════════════════ */
@layer translit {

  .trl-root {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; gap: 10px;
  }

  /* ── Yo'nalish tanlash ── */
  .trl-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .trl-seg {
    display: inline-flex; flex: 1 1 auto; min-width: 0;
    border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  }
  .trl-sg {
    flex: 1 1 0; min-width: 0;
    padding: 10px 8px;
    background: none; border: 0;
    color: var(--muted); font-family: inherit;
    font-size: .74rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    transition: background .12s, color .12s;
  }
  .trl-sg + .trl-sg { border-left: 1px solid var(--rule); }
  .trl-sg.on { background: rgba(10,186,181,.16); color: var(--ink); }

  .trl-b {
    flex: 0 0 auto;
    min-width: 36px; min-height: 36px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0 10px;
    background: none; border: 1px solid transparent; border-radius: 9px;
    color: var(--muted); font-family: inherit; font-size: .72rem; font-weight: 600;
    cursor: pointer;
  }
  .trl-b i { font-size: 12px; }
  .trl-pol { border-color: var(--rule); }
  .trl-pol.on { background: rgba(10,186,181,.14); border-color: rgba(10,186,181,.42); color: var(--ink); }
  .trl-b:focus-visible, .trl-sg:focus-visible, .trl-drop:focus-visible {
    outline: 2px solid #0abab5; outline-offset: 2px;
  }

  /* ── Ikki maydon ── */
  .trl-panes { display: flex; flex-direction: column; gap: 8px; position: relative; }
  .trl-pane {
    display: flex; flex-direction: column;
    border: 1px solid var(--rule); border-radius: 12px;
    overflow: hidden; background: var(--surf);
  }
  .trl-h {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px 7px 12px;
    border-bottom: 1px solid var(--rule);
    background: var(--surf-1);
  }
  .trl-h-t {
    font-size: .62rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
  }
  .trl-dir, .trl-stat {
    margin-left: auto;
    font-size: .66rem; color: var(--dim);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .trl-dir[data-d="lat"], .trl-dir[data-d="cyr"] { color: var(--aqua, #0abab5); font-weight: 600; }

  .trl-in, .trl-out {
    width: 100%; min-height: 168px;
    padding: 14px;
    background: none; border: 0; resize: vertical;
    color: var(--ink); font-family: inherit;
    font-size: 16px;              /* iOS fokusda kattalashtirmasin */
    line-height: 1.7;
  }
  .trl-in:focus, .trl-out:focus { outline: none; }
  .trl-out { color: var(--txt); }

  /* ── Almashtirish ── */
  .trl-swap {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 44px; height: 44px;
    background: var(--chrome-bg); border: 1px solid var(--chrome-bdr);
    border-radius: 50%; color: var(--chrome-ink);
    cursor: pointer; font-size: 14px;
  }
  .trl-swap:active { opacity: .6; }

  /* ── Fayl ── */
  .trl-file { display: flex; flex-direction: column; gap: 8px; }
  .trl-drop {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 22px 16px;
    border: 2px dashed var(--rule-strong); border-radius: 14px;
    background: var(--surf-1);
    cursor: pointer; text-align: center;
    transition: border-color .14s, background .14s;
  }
  .trl-drop.on { border-color: #0abab5; background: rgba(10,186,181,.08); }
  .trl-drop > i { font-size: 26px; color: var(--gold, #e8c46a); margin-bottom: 2px; }
  .trl-drop-t { font-size: .92rem; font-weight: 700; color: var(--ink); }
  .trl-drop-d { font-size: .74rem; color: var(--muted); }
  .trl-drop-n { font-size: .68rem; color: var(--dim); }

  .trl-prog {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border: 1px solid rgba(10,186,181,.4); border-radius: 10px;
    background: rgba(10,186,181,.08);
    font-size: .8rem; color: var(--ink);
  }
  .trl-prog[hidden] { display: none; }
  .trl-spin {
    width: 15px; height: 15px; flex: 0 0 auto;
    border: 2px solid rgba(10,186,181,.3); border-top-color: #0abab5;
    border-radius: 50%; animation: trlSpin .8s linear infinite;
  }
  @keyframes trlSpin { to { transform: rotate(360deg); } }

  .trl-toast {
    position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
    z-index: 9900; padding: 11px 18px; max-width: calc(100vw - 32px);
    background: var(--chrome-bg); border: 1px solid var(--chrome-bdr);
    border-radius: 999px; color: var(--chrome-ink);
    font-size: .78rem; font-weight: 600; text-align: center;
  }

  /* ── Bo'lim ochiq ── */
  body.trl-on #audioHeroBanner,
  body.trl-on .ti-rail,
  body.trl-on #ti-reco { display: none; }
  body.trl-on .ti-portal { grid-template-columns: minmax(0, 1fr); }

  /* ════════════════════════════════════════════════════════════════
     QURILMALAR
     ════════════════════════════════════════════════════════════════ */
  /* WCAG 2.5.5 — sensorli qurilmada 44x44px.
     Avval faqat balandlik berilgan edi, KENGLIK esa 36px qolib
     ketgan (sinovda 5 ta tugma chegaradan pastda chiqdi). */
  @media (pointer: coarse) {
    .trl-b, .trl-sg { min-width: 44px; min-height: 44px; }
    .trl-swap { width: 46px; height: 46px; }
    .trl-h { padding: 5px 6px 5px 12px; }
  }

  /* Telefon: maydonlar ustma-ust, almashtirish tugmasi orada */
  @media (max-width: 767px) {
    .trl-in, .trl-out { min-height: 132px; padding: 12px; }
    .trl-seg { width: 100%; }
    .trl-sg { font-size: .68rem; padding: 10px 4px; }
    .trl-pol span { display: none; }
    .trl-drop { padding: 18px 14px; }
    .trl-drop-n { display: none; }
  }
  @media (max-width: 380px) {
    .trl-sg { font-size: .63rem; letter-spacing: -.01em; }
    .trl-drop-t { font-size: .84rem; }
  }

  /* Planshet va kompyuter: yonma-yon */
  @media (min-width: 768px) {
    .trl-panes { flex-direction: row; align-items: stretch; gap: 14px; }
    .trl-pane { flex: 1 1 0; min-width: 0; }
    .trl-in, .trl-out { min-height: 300px; }
    .trl-swap { position: static; transform: none; align-self: center; margin: 0 -4px; }
  }
  @media (min-width: 1200px) {
    .trl-in, .trl-out { min-height: 380px; font-size: 17px; }
  }

  @media (hover: none) {
    .trl-b:active, .trl-sg:active, .trl-drop:active { opacity: .6; }
  }
  @media (prefers-reduced-motion: reduce) {
    .trl-spin { animation-duration: 2s; }
  }
}