/* «Xabar berish» — karta va suzuvchi oyna (js/xabar.js).
 *
 * Oyna navbatchilik jadvali oynasining tuzilishida: kompyuterda markazda,
 * telefonda (600px) pastdan chiqadigan varaq. Ochilish va yopilish
 * `oyna.js` da (WAAPI), bu yerda faqat tinch holat va belgining chizilishi.
 * Ranglar faqat tokens.css dan.
 */

/* ─── Karta ─────────────────────────────────────────────────────────────── */
.xabar-karta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 14px;
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  color: var(--text-secondary);
}
.xabar-karta[hidden] { display: none; }
.xabar-karta > .xabar-ikon { color: var(--accent); }
.xabar-karta-matn { margin: 0; font-size: 14px; line-height: 1.5; }
.xabar-tugma { min-height: 44px; white-space: nowrap; }
.xabar-tugma[aria-busy="true"] { opacity: .7; cursor: progress; }
.xabar-ikon { display: inline-grid; place-items: center; }
/* Mavzu va toifa: matn ustuni kengligida, sahifa oxirida. */
.xabar-karta.is-mavzu, .xabar-karta.is-toifa { max-width: 640px; margin: 28px auto 0; }
@media (max-width: 600px) {
  .xabar-karta { grid-template-columns: auto minmax(0, 1fr); }
  .xabar-tugma { grid-column: 1 / -1; justify-self: stretch; }
}

/* ─── Oyna ──────────────────────────────────────────────────────────────── */
html.xabar-ochiq { overflow: hidden; }
.xabar-fon {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--backdrop);
}
.xabar-fon[hidden] { display: none; }
.xabar-oyna {
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: min(86vh, 640px);
  padding: 8px 20px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-panel);
  background: var(--canvas);
  box-shadow: var(--shadow-float);
  color: var(--text-primary);
  overflow: auto;
}
.xabar-bosh { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.xabar-sarlavha { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.xabar-tana { display: grid; }

@media (max-width: 600px) {
  .xabar-fon { place-items: end stretch; padding: 0; }
  .xabar-oyna {
    width: 100%;
    max-height: 90vh;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  }
  .xabar-oyna::before {
    content: "";
    flex: none;
    align-self: center;
    width: 36px;
    height: 4px;
    margin: 2px 0 2px;
    border-radius: 999px;
    background: var(--border-strong);
  }
}

/* ─── Forma ─────────────────────────────────────────────────────────────── */
.xabar-forma { display: grid; gap: 12px; }
.xabar-izoh { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.xabar-label { font-weight: 700; font-size: 14px; }
.xabar-maydon {
  width: 100%;
  min-height: 132px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--canvas-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px; /* iOS zoom qilmasin */
  line-height: 1.5;
  resize: vertical;
}
.xabar-maydon:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.xabar-tuzoq { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.xabar-pastki { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xabar-hisob { color: var(--text-tertiary); font-size: 12px; font-variant-numeric: tabular-nums; }
.xabar-yubor { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.xabar-yubor[disabled] { opacity: .5; cursor: not-allowed; }
.xabar-yubor[aria-busy="true"] { cursor: progress; }
.xabar-xato { margin: 0; color: var(--danger); font-size: 14px; }
.xabar-xato[hidden] { display: none; }

.xabar-iqtibos {
  position: relative;
  margin: 0;
  padding: 10px 40px 10px 14px;
  border-left: 2px solid var(--accent);
  background: var(--canvas-raised);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}
.xabar-iqtibos-sarlavha { color: var(--text-tertiary); font-size: 12px; font-weight: 700; }
.xabar-iqtibos blockquote { margin: 4px 0 0; color: var(--text-body); font-size: 14px; line-height: 1.5; }
.xabar-iqtibos-olib { position: absolute; top: 4px; right: 4px; }

/* ─── Kirish ────────────────────────────────────────────────────────────── */
.xabar-kirish { display: grid; justify-items: center; gap: 14px; padding: 12px 0 6px; text-align: center; }
.xabar-kirish > .xabar-ikon { color: var(--accent); }
.xabar-kirish-matn { margin: 0; max-width: 34ch; color: var(--text-body); line-height: 1.55; }

/* ─── Tayyor: yashil belgi chiziladi ─────────────────────────────────────── */
.xabar-tayyor { display: grid; justify-items: center; gap: 8px; padding: 14px 0 4px; text-align: center; }
.xabar-belgi { display: inline-grid; place-items: center; margin-bottom: 6px; }
.xabar-belgi svg { overflow: visible; }
.xabar-belgi-doira { fill: var(--success); stroke: none; transform-origin: 50% 50%; animation: xabar-doira 320ms cubic-bezier(.2, .8, .2, 1) both; }
.xabar-belgi-chiziq {
  fill: none;
  stroke: var(--canvas);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: xabar-chiziq 280ms cubic-bezier(.2, .8, .2, 1) 180ms forwards;
}
.xabar-tayyor-matn { margin: 0; font-size: 17px; font-weight: 750; color: var(--text-primary); }
.xabar-tayyor-izoh { margin: 0 0 10px; max-width: 36ch; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
@keyframes xabar-doira { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes xabar-chiziq { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .xabar-belgi-doira { animation: none; }
  .xabar-belgi-chiziq { animation: none; stroke-dashoffset: 0; }
}