/* ==========================================================
   soril-stil.css — Сорил БОДОХ хуудсуудын нийтлэг загвар

   Дуудагдах хуудсууд:
     soril-junior-nu.html
     soril-1000-nu.html
     (хожим SAT, 6000 тест, ЭЕШ-ийн нu хуудсууд бас)

   <link rel="stylesheet" href="soril-stil.css">

   АНХААР: энэ хуудсууд stil.css-ийг дуудахгүй.
   Учир нь .mur, .toloh, .tovch гэсэн классууд хоёр файлд
   ӨӨР утгатай (жагсаалтын мөр ↔ нөхөх мөр гэх мэт).
   Сорил бодох хуудасны бүх загвар ЗӨВХӨН энд байна.

   Класс нэрсийг огт өөрчлөөгүй тул engine.js, bj*.js,
   sorildata*.js файлууд бүгд хэвээрээ ажиллана.
   ========================================================== */

:root {
  --gun:      #2e2a5e;   /* үндсэн дэвсгэр, текст */
  --tsailgan: #3d3876;
  --sharga:   #e3ac4f;
  --sharga-h: #f0bd63;

  --zov:   #15803d;
  --zov-d: #ecf8f0;
  --sul:   #dc2626;
  --sul-d: #fdeeee;
  --hoh:   #2563eb;

  --hurees:   #e4eaf2;   /* хариултын картын нам гүм хүрээ */
  --hurees-h: #b9c8da;   /* хулганы доорх хүрээ */
  --tsailuur: #f7f9fc;   /* хөнгөн дүүргэлт */
  --sul-text: #93a5b8;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 12px 40px;
  background: var(--gun);
  color: var(--gun);
  font-family: "Golos Text", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Толгой хэсэг ---------- */
.butsah {
  display: inline-block;
  margin: 18px 0 6px;
  color: var(--sharga);
  text-decoration: none;
  font-size: 15px;
}
.butsah:hover { color: var(--sharga-h); }

h1 {
  color: #fff;
  text-align: center;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 10px 0 4px;
}

.dedger {
  color: #9fb6cc;
  text-align: center;
  font-size: 15px;
  margin: 0 0 18px;
}

.buleg {
  color: var(--sharga);
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 34px 0 12px;
}

/* ---------- Бодлогын карт ---------- */
.bodlogo {
  background: #fff;
  border-radius: 16px;
  max-width: 720px;
  margin: 14px auto;
  padding: 22px 24px 20px;
}

.toloh {
  font-size: 16.5px;
  line-height: 1.95;
}

/* Бодлогын дугаар (engine.js-ийн <b>) — нам гүм боловч уншихад хялбар */
.toloh > b:first-child { color: var(--gun); }

.onoo {
  color: var(--sul-text);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- Сонгох хариултууд ---------- */
.songolt {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--hurees);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 9px 0;
  font-size: 16px;
  font-family: inherit;
  color: var(--gun);
  cursor: pointer;
  line-height: 1.7;
  transition: border-color .12s, background-color .12s;
}

/* Эхний бүлэг нь хариултын үсэг (A. B. C.) — товруу шиг тодруулна */
.songolt b:first-child {
  color: #46617f;
  font-weight: 700;
  margin-right: 4px;
}

@media (hover: hover) {
  .songolt:hover {
    border-color: var(--hurees-h);
    background: var(--tsailuur);
  }
}
.songolt:active { border-color: var(--gun); }

/* Сонгосон хариулт — бүхэлдээ дүүрнэ. Цайвар суурин дээр
   зөвхөн хүрээ өөрчлөгдөх нь хол зайнаас мэдэгдэхгүй байсан. */
.songolt.songogdson {
  border-color: var(--gun);
  background: var(--gun);
  color: #fff;
}
.songolt.songogdson b:first-child { color: var(--sharga); }
/* Дотор нь зурагдсан бутархайн зураас, язгуурын шугам ч цагаан болно */
.songolt.songogdson .butarhai .deed,
.songolt.songogdson .yaz .door { border-color: #fff; }
.songolt.songogdson .yaz svg { fill: currentColor; stroke: currentColor; }

.songolt.zov {
  border-color: var(--zov);
  background: var(--zov-d);
}
.songolt.zov b:first-child { color: #12803b; }

.songolt.buruu {
  border-color: var(--sul);
  background: var(--sul-d);
}
.songolt.buruu b:first-child { color: #b91c1c; }

/* Дүн гарсны дараа хариулт дарагдахгүй болно */
.songolt:disabled { cursor: default; }

/* ---------- Нөхөх мөр ---------- */
.mur {
  margin: 26px 0 10px;
  font-size: 16px;
  line-height: 3.2;
}

/* Урт өгүүлбэр мөр таслах ёстой. Математик илэрхийлэл нь MathJax-ийн
   дотоод бүтэц тул өөрөө дундуураа таслагдахгүй. */
.taslahgui { display: inline; }

/* Нэг бүхэл болох бүлэг (тоо, зэрэг, томьёо) хэзээ ч хоёр мөрөнд хуваагдахгүй */
.naalt { white-space: nowrap; }

.nud {
  width: 46px;
  height: 46px;
  margin: 0 3px;
  border: 1.5px solid #a9bcd0;
  border-radius: 10px;
  text-align: center;
  font-size: 18px;
  font-family: inherit;
  color: var(--gun);
  vertical-align: middle;
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.nud:focus {
  outline: none;
  border-color: var(--gun);
  box-shadow: 0 0 0 3px rgba(46,42,94, .12);
}
.nud.zov { border-color: var(--zov); background: var(--zov-d); }
.nud.buruu { border-color: var(--sul); background: var(--sul-d); }

/* ---------- Зэрэг ---------- */
.zereg {
  display: inline-block;
  position: relative;
  bottom: 0.95em;
  margin: 0 2px 0 -1px;
  line-height: 1;
  vertical-align: baseline;
  white-space: nowrap;
}
.zereg .nud {
  width: 28px; height: 28px; font-size: 14px;
  border-radius: 7px; border-width: 1.4px; margin: 0 1px;
}
.zereg .butarhai { margin: 0 1px; }
.zereg .butarhai .deed { padding: 0 3px 1px; border-bottom-width: 1.5px; }
.zereg .butarhai .dood { padding: 1px 3px 0; font-size: 14px; }

/* ---------- Язгуур ---------- */
.yaz {
  display: inline-flex;
  align-items: flex-start;
  vertical-align: middle;
  white-space: nowrap;
  margin: 0 2px;
}
.yaz svg { width: 18px; height: 54px; margin-right: -1px; flex: none; }
.yaz .door { border-top: 2.2px solid var(--gun); padding-top: 5px; }
.yaz .yazi {
  display: inline-block;
  position: relative;
  top: 2px;
  margin-right: -7px;
  line-height: 1;
  z-index: 1;
}
.yaz .yazi .nud {
  width: 26px; height: 26px; font-size: 13px;
  border-radius: 7px; border-width: 1.4px; margin: 0 1px;
}

/* ---------- Бутархай ---------- */
.butarhai {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  margin: 0 5px;
}
.butarhai .deed { display: block; border-bottom: 2px solid var(--gun); padding: 0 6px 3px; }
.butarhai .dood { display: block; padding: 3px 6px 0; }

/* ---------- Товчнууд ---------- */
.tovchnuud { text-align: center; margin: 32px 0 10px; }

.tovch {
  display: inline-block;
  width: 260px;
  margin: 8px auto;
  background: var(--sharga);
  color: var(--gun);
  border: none;
  border-radius: 12px;
  padding: 16px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .12s;
}
.tovch:hover { background: var(--sharga-h); }
.tovch:disabled { opacity: .55; cursor: default; }

.tovch.hoyordugaar {
  background: var(--tsailgan);
  color: #dce8f3;
  font-size: 16px;
  padding: 13px;
}
.tovch.hoyordugaar:hover { background: #4a4590; }

/* ---------- Дүн ---------- */
.dun-kart {
  background: #fff;
  border-radius: 16px;
  max-width: 720px;
  margin: 20px auto;
  padding: 26px 24px;
  text-align: center;
}
.dun-too {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--hoh);
  line-height: 1.15;
}

.aldaa-kart {
  background: #fff8e6;
  border-radius: 12px;
  max-width: 720px;
  margin: 12px auto;
  padding: 16px 20px;
  text-align: left;
  font-size: 15px;
  line-height: 1.85;
}
.aldaa-kart .gar { font-weight: 700; color: #c2185b; margin-bottom: 6px; }

.togsgol { height: 50px; }

/* ---------- Гар утас ---------- */
@media (max-width: 520px) {
  .bodlogo { padding: 18px 16px 16px; border-radius: 14px; }
  .toloh, .songolt { font-size: 15px; }
  .songolt { padding: 11px 13px; }
  .mur { font-size: 15px; }
  h1 { font-size: 20px; }
  .nud { width: 40px; height: 40px; font-size: 16px; }
  .yaz svg { height: 48px; width: 16px; }
  .zereg .nud { width: 25px; height: 25px; font-size: 13px; }
  .tovch { width: 100%; max-width: 320px; }
}

/* ---------- Хандалт ---------- */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--sharga);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Заавар (js/1000/zaavar.js) ----------
   Сорилын дээр буулгасан, анхнаасаа хаалттай хайрцаг.
   Хариуг нууцалж, зөвхөн арга/томьёо өгдөг. */
.zaavar {
  background: #fff8e6;
  border: 1px solid #f1d9a0;
  border-radius: 14px;
  margin: 0 0 18px;
  color: var(--gun);
}
.zaavar > summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 18px;
  font-weight: 700;
  font-size: 15.5px;
}
.zaavar > summary::-webkit-details-marker { display: none; }
.zaavar > summary::after { content: "▾"; float: right; color: #a07a1e; }
.zaavar[open] > summary::after { content: "▴"; }
.zaavar .zv-sedev { font-weight: 500; color: #6b5622; }
.zaavar .zv-dotor { padding: 0 18px 16px; font-size: 15px; line-height: 1.7; }
.zaavar .zv-tomyo {
  background: #fff;
  border-left: 4px solid var(--sharga);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.zaavar .zv-alham { margin: 0 0 10px; padding-left: 22px; }
.zaavar .zv-anhaar {
  background: var(--sul-d);
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 14.5px;
}
.zaavar .zv-holboos { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.zaavar .zv-onol {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: #EAF1FF;
  color: #1F4FB0;
  border: 2px solid #2C6BE0;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
}
.zaavar .zv-onol:hover { background: #2C6BE0; color: #fff; }

/* ==========================================================
   АЛХАМТ БОДОЛТ (engine.js-ийн bodoltZur) — 2026-10
   Хуучин нэг мөрт бодолтод нөлөөгүй: бүх дүрэм .bd дотор.
   ========================================================== */
.bd-san, .bd-alham, .bd-anhaar, .bd-hariu {
  border-radius: 10px;
  padding: 9px 13px;
  margin: 8px 0;
  line-height: 1.8;
}
.bd-san    { background: #eef4ff; border-left: 4px solid var(--hoh); }
.bd-alham  { background: #fff; border: 1px solid var(--hurees); }
.bd-anhaar { background: var(--sul-d); border-left: 4px solid var(--sul); }
.bd-hariu  { background: var(--zov-d); border-left: 4px solid var(--zov); font-weight: 600; }
.bd-sh { font-weight: 700; margin-right: 4px; }
.bd-san .bd-sh    { color: var(--hoh); }
.bd-alham .bd-sh  { color: var(--tsailgan); }
.bd-anhaar .bd-sh { color: var(--sul); }
.bd-hariu .bd-sh  { color: var(--zov); }

/* Алхамууд эхэндээ нуугдмал, нэг нэгээр нээгдэнэ */
.bd .bd-alham, .bd .bd-anhaar, .bd .bd-hariu { display: none; }
.bd .bd-alham.il, .bd .bd-anhaar.il, .bd .bd-hariu.il { display: block; }
/* Алхмын зураг (бодолтын SVG): төвд, гар утсанд багтана */
.bd-zurag { margin: 8px auto 2px; max-width: 260px; text-align: center; }
.bd-zurag svg { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
.bd .shine { animation: bdGarah .45s ease-out; box-shadow: 0 0 0 3px #e3ac4f66; }
@keyframes bdGarah {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.bd-tovchnuud, .bd-nemelt {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px;
}
.bd-tovchnuud button, .bd-nemelt button, .bd-onol {
  font: inherit; font-size: 14.5px; font-weight: 600;
  border-radius: 999px; padding: 9px 16px; cursor: pointer;
  border: 1.5px solid var(--hurees-h); background: #fff; color: var(--gun);
  text-decoration: none; display: inline-block; line-height: 1.3;
}
.bd-tovchnuud .bd-daraah { background: var(--hoh); border-color: var(--hoh); color: #fff; }
.bd-tovchnuud .bd-daraah span { opacity: .75; font-weight: 500; }
.bd-nemelt .bd-shine { background: var(--sharga); border-color: var(--sharga); }
.bd-nemelt .bd-tomyo { border-color: #2C6BE0; color: #2C6BE0; }
.bd-tovchnuud button:active, .bd-nemelt button:active { transform: scale(.97); }

/* «🤔 Яагаад?» карт (2026-10) — бодлогын төрлийн арга ба онол */
.bd-yagaad {
  margin: 12px 0 6px; border-radius: 14px; background: #fbf7ff;
  border: 1.5px solid #dcccf3; overflow: hidden;
}
.bd-yagaad > summary {
  list-style: none; cursor: pointer; padding: 11px 14px; min-height: 44px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-weight: 700; color: #4b2a86;
}
.bd-yagaad > summary::-webkit-details-marker { display: none; }
.bd-yagaad > summary::after { content: "▾"; margin-left: auto; color: #8a6cc0; }
.bd-yagaad[open] > summary::after { content: "▴"; }
.bd-yagaad > summary small { font-weight: 500; color: #7a68a0; font-size: 13px; }
.bd-yagaad > summary:focus-visible { outline: 3px solid #b99be8; outline-offset: -3px; }
.yg-dotor { padding: 0 12px 10px; }
.yg-heseg {
  background: #fff; border-radius: 10px; padding: 9px 12px; margin: 8px 0 0;
  border-left: 4px solid #9b7bd6; line-height: 1.75; overflow-x: auto; overflow-y: hidden;
}
.yg-heseg.yg-tanih  { border-left-color: var(--hoh); }
.yg-heseg.yg-hurdan { border-left-color: var(--sharga); background: #fffaf0; }
.yg-gar { font-weight: 700; color: var(--tsailgan); margin-bottom: 2px; font-size: 14.5px; }
.yg-ik { margin-right: 6px; }

.bd-dasgal-kart {
  margin-top: 12px; padding: 14px; border-radius: 12px;
  background: #fff; border: 2px dashed var(--sharga);
}
.bd-dasgal-gar { font-weight: 700; margin-bottom: 6px; color: var(--tsailgan); }
.bd-zov   { margin-top: 10px; font-weight: 700; color: var(--zov); }
.bd-buruu { margin-top: 10px; font-weight: 600; color: var(--tsailgan); }

@media (max-width: 520px) {
  .bd-tovchnuud button, .bd-nemelt button, .bd-onol { flex: 1 1 100%; text-align: center; }
}

/* ==========================================================
   «6000 тест» номын бодлого (2026-10)
   .nom-dug   — бодлогын эхэнд номын дугаар (📖 1.07)
   .zov-bodolt — зөв бодсон бодлогын эвхээтэй алхамт бодолт
   ========================================================== */
.nom-dug {
  display: inline-block;
  background: #fff4d6;
  color: #8a5a00;
  border: 1px solid #f5d27a;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  padding: 1px 8px;
  margin-right: 6px;
  vertical-align: 2px;
  white-space: nowrap;
}
.zov-bodolt {
  background: #f1faf4;
  border-radius: 12px;
  max-width: 720px;
  margin: 10px auto;
  padding: 12px 18px;
  text-align: left;
  line-height: 1.7;
}
.zov-bodolt summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--zov);
  list-style-position: inside;
}
.zov-bodolt[open] summary { margin-bottom: 8px; }

/* ==========================================================
   .bd-bodlogo — бодолтын өмнө бодлогыг дахин харуулах хайрцаг
   ========================================================== */
.bd-bodlogo { background: #f5f8ff; border: 1px solid #d9e3f7; border-radius: 12px; padding: 10px 12px; margin: 4px 0 12px; line-height: 1.6; color: #1f2d45; }
.bd-bodlogo-sh { font-size: 12.5px; font-weight: 700; color: #4f6ea8; letter-spacing: .02em; margin-bottom: 4px; }
.bd-bodlogo-asuult { margin: 2px 0; overflow-x: auto; }
.bd-bodlogo-asuult svg { max-width: 100%; height: auto; }
.bd-bodlogo-tanii, .bd-bodlogo-zov { margin-top: 6px; padding: 4px 10px; border-radius: 8px; font-size: 14.5px; display: block; }
.bd-bodlogo-tanii { background: #fff0f0; color: #b8392f; }
.bd-bodlogo-zov { background: #ecfbf1; color: #1d7a52; }
.bd-nud { display: inline-block; min-width: 1.2em; padding: 0 4px; margin: 0 1px; border: 1.5px solid #2e9e4f; border-radius: 5px; background: #ecfbf1; color: #1d7a52; font-weight: 700; text-align: center; }