/* ══════════════════════════════════════════════════════════════════
   BabyBytes — харилцан үйлдлийн давхарга
   ══════════════════════════════════════════════════════════════════
   Нүүр, дэлгүүр, гарын авлага, нийтлэл дөрвүүлээ ЭНЭ НЭГ файлыг
   хуваалцана. Хуулбар үүсгэхгүй — хоёр газар зөрөх боломж үлдээхгүй.

   Энэ файл өнгийг тогтоохгүй. Хуудас бүр өөрийн палитраа --ui-accent
   гэх мэт хувьсагчаар өгнө. Ингэснээр дарах мэдрэмж, фокус, мэдэгдэл
   хаа сайгүй ижил болох ч тус бүрийн өнгө хэвээр үлдэнэ.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Хуудас дарж бичих боломжтой ─── */
  --ui-accent: #00A69C;          /* фокусын цагираг, toast, ачаалал */
  --ui-danger: #FF4B4B;
  --ui-success: #58CC02;
  --ui-surface: #1a2d35;         /* toast-ын дэвсгэр */
  --ui-on-surface: #fff;

  /* ─── Шингэн хэмжээс ───
     clamp(хамгийн бага, дасах, хамгийн их). Утас→таблет→компьютер
     хооронд ҮСРЭЛТГҮЙ өөрчлөгдөнө. Media query-ийн 9 таслалт нь
     таблетыг утасны дүрмээр орхидог байсан асуудлыг үүгээр шийднэ.

     Доод хязгаарууд нь ухралт үүсгэхгүй байхаар сонгогдсон: --ui-text-md нь
     хөтчийн анхны 16px-ээс хэзээ ч жижиг болохгүй, --ui-text-xs нь 12px-ээс
     доош унахгүй. */
  --ui-text-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);   /* 12px доошгүй */
  --ui-text-sm: clamp(0.88rem, 0.85rem + 0.18vw, 0.98rem);
  --ui-text-md: clamp(1rem,    0.96rem + 0.22vw, 1.13rem);   /* 16px доошгүй */
  --ui-text-lg: clamp(1.2rem,  1.08rem + 0.55vw, 1.5rem);
  --ui-text-xl: clamp(1.6rem,  1.30rem + 1.5vw,  2.5rem);

  --ui-gap-sm: clamp(0.4rem, 0.3rem + 0.4vw, 0.65rem);
  --ui-gap:    clamp(0.75rem, 0.55rem + 0.9vw, 1.4rem);
  --ui-gap-lg: clamp(1.25rem, 0.9rem + 1.6vw, 2.4rem);

  /* Хуруугаар дарахад тохирох доод хэмжээ (Apple HIG / Material) */
  --ui-tap: 44px;

  /* Хөдөлгөөний хурд — reduced-motion үед 0 болно */
  --ui-fast: 120ms;
  --ui-base: 200ms;
  --ui-ease: cubic-bezier(.2, .8, .3, 1);
}

/* ─────────────────────────────────────────────────────────────────
   1. ДАРСАН ТӨЛӨВ — хамгийн чухал нэмэлт
   Сайтад одоо :active дүрэм НЭГ Ч БАЙХГҮЙ. Мэдрэгч дэлгэцэнд hover
   утгагүй тул хуруугаар дархад интерфейс ямар ч хариу үзүүлдэггүй:
   «дарагдсан уу?» гэдэг нь мэдэгдэхгүй, хүн дахин дардаг.
   ───────────────────────────────────────────────────────────────── */
button:active,
[role="button"]:active,
.btn:active,
.nav-tab:active,
a.btn:active,
[onclick]:active {
  transform: scale(.96);
  filter: brightness(.92);
  transition-duration: var(--ui-fast);
}

/* Дарах бүрд утас текст сонгож эхлэхгүй байх — «удаан дарлаа» гэж
   андуурч тэмдэглэгээний цэс гаргадаг нь таагүй мэдрэмж төрүүлдэг. */
button, [role="button"], .btn, .nav-tab, [onclick] {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;   /* давхар товших үед томрохоос сэргийлнэ */
}

/* ─────────────────────────────────────────────────────────────────
   2. HOVER ЗӨВХӨН ХУЛГАНАТАЙ ТӨХӨӨРӨМЖИД
   Мэдрэгч дэлгэцэнд hover нь «наалдаж» үлддэг — дарсны дараа товч
   идэвхтэй мэт харагдсаар байдаг.
   ───────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled),
  .btn:hover:not(:disabled),
  [role="button"]:hover {
    filter: brightness(1.08);
  }
}

/* ─────────────────────────────────────────────────────────────────
   3. ФОКУСЫН ЦАГИРАГ — гар, туслах технологи
   Сайтад :focus дүрэм ганц байсан. :focus-visible ашигласнаар
   хулганаар дарахад цагираг гарахгүй, зөвхөн Tab дархад гарна.
   ───────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--ui-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ─────────────────────────────────────────────────────────────────
   4. ИДЭВХГҮЙ ТӨЛӨВ
   Одоо идэвхгүй товч идэвхтэйгээс ялгарахгүй тул хүн дарж байгаад
   юу ч болохгүйд эргэлздэг.
   ───────────────────────────────────────────────────────────────── */
button:disabled,
.btn:disabled,
[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.4);
}
button:disabled:active,
.btn:disabled:active {
  transform: none;              /* идэвхгүй бол дарагдсан мэт харагдахгүй */
  filter: grayscale(.4);
}

/* ─────────────────────────────────────────────────────────────────
   5. ДАРАХ ТАЛБАРЫН ДООД ХЭМЖЭЭ
   Хэмжилтээр нүүр хуудсанд 375px өргөнд 52 ширхэг товч 44px-ээс
   жижиг байсан (цэсний товч 22px өндөр). Хэмжээг нь харагдац
   өөрчлөхгүйгээр томсгоно: ::after-аар үл үзэгдэх талбар нэмнэ.
   ───────────────────────────────────────────────────────────────── */
.ui-tap {
  position: relative;
}
.ui-tap::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, var(--ui-tap));
  height: max(100%, var(--ui-tap));
}

/* ─────────────────────────────────────────────────────────────────
   6. ТОВЧНЫ АЧААЛЛЫН ТӨЛӨВ
   Товч дарсны дараа сүлжээ хариу өгөх хүртэл юу ч болохгүй бол хүн
   дахин дардаг — давхар захиалга, давхар татах эрсдэл үүсгэдэг.
   ───────────────────────────────────────────────────────────────── */
[data-ui-loading="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
[data-ui-loading="true"]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.1em;
  height: 1.1em;
  margin: -.55em 0 0 -.55em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--ui-on-surface);
  animation: ui-spin 600ms linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────────
   7. МЭДЭГДЭЛ (toast) — alert()-ыг орлоно
   Сайтад alert() 18 газар байна. Тэр нь хуудсыг блоклодог, брэндгүй,
   утсан дээр системийн цонх болж гарч ирдэг.
   ───────────────────────────────────────────────────────────────── */
#ui-toasts {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Утасны доод хэсэгт эрхий хуруунд ойр; дэлгэцийн аюулгүй бүсийг тооцно */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 420px);
  pointer-events: none;
}
.ui-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--ui-surface);
  color: var(--ui-on-surface);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 4px solid var(--ui-accent);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: var(--ui-text-sm);
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .38);
  pointer-events: auto;
  animation: ui-toast-in var(--ui-base) var(--ui-ease);
}
.ui-toast[data-kind="error"]   { border-left-color: var(--ui-danger); }
.ui-toast[data-kind="success"] { border-left-color: var(--ui-success); }
.ui-toast.ui-out { animation: ui-toast-out var(--ui-base) var(--ui-ease) forwards; }
.ui-toast-close {
  margin-left: auto;
  background: none;
  border: 0;
  color: inherit;
  opacity: .6;
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
  min-width: var(--ui-tap);
  min-height: var(--ui-tap);
}

@keyframes ui-toast-in  { from { opacity: 0; transform: translateY(12px); } }
@keyframes ui-toast-out { to   { opacity: 0; transform: translateY(12px); } }

/* ─────────────────────────────────────────────────────────────────
   8. ПЛАТФОРМ РУУ БУЦАХ ЗУРВАС
   Хуудсыг дангаар нь нээсэн үед л гарна (public/ui/site-bar.js).
   Social холбоосоор ирсэн хүн платформ руу орох замтай байх ёстой.
   ───────────────────────────────────────────────────────────────── */
#ui-site-bar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  padding: 0 var(--ui-gap);
  background: color-mix(in srgb, var(--ui-surface) 92%, transparent);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px);
}
.ui-site-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--ui-tap);
  padding: 0 4px;
  color: var(--ui-accent);
  font-size: var(--ui-text-sm);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .01em;
}

/* ─────────────────────────────────────────────────────────────────
   9. ХӨДӨЛГӨӨН БАГАСГАХ
   Вестибуляр эмгэгтэй хүн утасны тохиргоондоо хөдөлгөөн багасгахыг
   асаадаг. Сайт үүнийг огт хүндэтгэдэггүй байсан.
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Дарсан төлөв нь хөдөлгөөн биш, чухал буцаа мэдээлэл — үлдээнэ */
  button:active, .btn:active, [role="button"]:active { transform: none; filter: brightness(.85); }
}