/* ============================================================
   Зам, тээврийн салбарын дэд хуудас (Төмөр зам, Автотээвэр, Авто зам)
   ------------------------------------------------------------
   Нүүр хуудасны (index.html) дотоод загвартай ижил суурь дүрэм +
   дэд хуудсанд зориулсан бүрэлдэхүүн: салбарын цэс, харьцуулах
   баганa, тээврийн төрлийн хувь. Дараа нь ui-2027.css ачаалагдана.
   ============================================================ */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);background-image:var(--page-bg);background-attachment:fixed;background-size:var(--page-bg-size);background-position:var(--page-bg-pos);background-repeat:no-repeat;
  color:var(--ink);font-family:var(--ff);font-size:15px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--ff);margin:0;text-wrap:balance}
p,dd,li,figcaption,.hint,.note,.src,.meta,.bn{text-wrap:pretty}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* ---------- толгой ---------- */
.masthead{background:var(--surface);border-bottom:1px solid var(--line)}
.masthead .in{max-width:1080px;margin:0 auto;padding:8px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.emblem{flex:none;display:block;line-height:0}
.emblem img{display:block;height:75px;width:auto}
.emblem .lg-dark{display:none}
:root[data-theme="dark"] .emblem .lg-light{display:none}
:root[data-theme="dark"] .emblem .lg-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .emblem .lg-light{display:none}
  :root:not([data-theme="light"]) .emblem .lg-dark{display:block}
}
.masthead .mh-t{padding-left:17px;border-left:1px solid var(--line)}
@media(max-width:860px){ .emblem img{height:62px} }
@media(max-width:620px){
  .emblem img{height:53px}
  .masthead .mh-t{padding-left:0;border-left:0}
}
.masthead h1{font-size:19px;font-weight:700;line-height:1.25;letter-spacing:.005em}
.masthead p{margin:3px 0 0;font-size:12.5px;color:var(--ink-3)}
.masthead .sp{flex:1}
.tbtn{font:400 12px/1 var(--ff);background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--line-strong);border-radius:4px;padding:8px 12px;cursor:pointer;text-decoration:none}
.tbtn:hover{color:var(--ink);border-color:var(--ink-3)}

/* ---------- hero ---------- */
.hero{padding:0}
.hero .in{max-width:1080px;margin:0 auto;padding:44px 22px 30px;
  display:grid;gap:44px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(190px,232px)}
@media(max-width:940px){.hero .in{grid-template-columns:1fr;gap:26px}}
@media(max-width:640px){.hero .in{padding:32px 20px 22px}}
.hero h2{margin-top:18px;font-size:clamp(26px,3.5vw,37px);font-weight:700;letter-spacing:-.01em;
  max-width:26ch;line-height:1.18;color:#fff;text-shadow:0 2px 14px rgba(2,14,26,.75),0 1px 3px rgba(2,14,26,.9)}
.hero .rule{height:3px;width:52px;background:var(--gold);margin:20px 0}
.hero p{margin:0;font-size:15.5px;line-height:1.66;max-width:52ch;color:#dfeaf6;text-shadow:0 1px 6px rgba(2,14,26,.85)}
.hero .htxt>*{animation:ineg-up .8s cubic-bezier(.22,1,.36,1) both}
.hero .htxt>*:nth-child(2){animation-delay:.08s} .hero .htxt>*:nth-child(3){animation-delay:.16s}
.hero .htxt>*:nth-child(4){animation-delay:.24s}
.masthead .emblem{animation:ineg-fade .6s ease both}
@media (prefers-reduced-motion:reduce){ .hero .htxt>*,.masthead .emblem{animation:none} }

/* Газрын зургийн давхарга — assets/sector-map.js нь .earthwrap дотор зурна */
.hero.photoband{--drop:260px;overflow:visible;background-color:transparent}
@media(max-width:760px){.hero.photoband{--drop:150px}}
.hero.photoband::before,.hero.photoband::after{display:none}
.earthwrap{position:absolute;left:0;right:0;top:0;
  height:calc(100% + var(--drop));overflow:hidden;z-index:0;pointer-events:none}
.earthwrap .veil{position:absolute;inset:0}
main{position:relative;z-index:1}

/* ---------- хэсэг ---------- */
section.blk{padding:30px 0}
.sec-h{margin:0 0 22px}
.sec-h h3{position:relative;color:var(--ink-2);font-size:clamp(17px,2.4vw,23px);font-weight:700;line-height:1.3}
.sec-h p{margin:9px 0 0;font-size:13.5px;color:var(--ink-3);max-width:80ch;text-wrap:balance}
body.night .sec-h p{color:#d9edf7;text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* ---------- үзүүлэлт ---------- */
.figs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.figs{grid-template-columns:1fr}}
.fig{background:var(--surface);padding:17px 19px;border-left:4px solid var(--gold)}
.fig dt{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.fig dd{margin:8px 0 0;font-size:26px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.1}
.fig dd small{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;font-weight:400;color:var(--ink-3);margin-top:6px;line-height:1.45}

/* ---------- самбар ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.panel>header{padding:12px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel>header h2{font-size:14.5px;font-weight:700;letter-spacing:.02em;color:var(--deep-ink);
  display:flex;align-items:center;gap:9px}
.panel>header .hint{font-size:11.5px;color:var(--ink-2);margin-left:auto}
.panel>.body{padding:16px}
.panel .note{margin:13px 0 0;padding-top:11px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--ink-3);line-height:1.6}
.panel .note b{color:var(--ink-2)}
.panel.wide{margin-top:14px}
.av2{display:grid;gap:14px;margin-top:14px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr))}
.av2>*{min-width:0}
.pico{width:20px;height:20px;flex:none;fill:none;stroke:var(--gold);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* өсөлт, бууралтын тэмдэг */
.chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;
  font-size:11.5px;font-weight:700;line-height:1.6;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip.good{background:var(--good-soft);color:var(--good)}
.chip.serious{background:var(--serious-soft);color:var(--serious)}
.chip.neutral{background:var(--surface-3);color:var(--ink-2)}

/* эрэмбэлсэн баганат жагсаалт */
.brow{display:grid;grid-template-columns:minmax(84px,30%) minmax(30px,1fr) auto auto;gap:11px;
  align-items:center;padding:8px 0;border-top:1px solid var(--line-soft);font-size:13px}
.brow:first-child{border-top:0;padding-top:1px}
.brow:hover .bt>span{filter:brightness(1.12)}
.bn{color:var(--ink-2);overflow-wrap:anywhere;line-height:1.35}
.bt{height:9px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.bt>span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.bv{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.bd{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:74px}
.bd .sh{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* сарын диаграм */
.legend{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 11px;font-size:12px;color:var(--ink-2)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:7px;vertical-align:-1px}
.chartwrap{overflow-x:auto;padding-bottom:2px}
.mchart{display:block;width:100%;min-width:640px;height:auto}
.mchart .gl{stroke:var(--line);stroke-width:1}
.mchart .yr{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 4;stroke-opacity:.55}
.mchart .ax{font:400 9.5px var(--ff);fill:var(--ink-3)}
.mchart .yl{font:700 11px var(--ff);fill:var(--ink-2)}
.mchart g rect{transition:opacity .15s ease}
.mchart:hover g:not(:hover) rect{opacity:.55}

/* хүснэгт */
.tblwrap{overflow-x:auto}
.av-tbl{width:100%;border-collapse:collapse;font-size:13px}
.av-tbl th,.av-tbl td{padding:7px 9px;text-align:right;white-space:nowrap;border-top:1px solid var(--line-soft)}
.av-tbl thead th{border-top:0;border-bottom:1px solid var(--line);font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.av-tbl th[scope=row]{text-align:left;white-space:normal;font-weight:400;color:var(--ink-2)}
.av-tbl tbody tr:not(.sub) th[scope=row]{font-weight:700;color:var(--ink)}
.av-tbl tr.sub th[scope=row]{padding-left:19px}
.av-tbl .mono{font-variant-numeric:tabular-nums}
.av-tbl td:last-child{width:1%}

/* ---------- салбарын цэс (дэд хуудас хооронд шилжих) ---------- */
.secnav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 4px}
.secnav a{display:inline-flex;align-items:center;gap:9px;padding:9px 15px 9px 12px;border-radius:999px;
  font-size:13.5px;font-weight:600;text-decoration:none;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);transition:border-color .2s,color .2s,background .2s}
.secnav a:hover{color:var(--ink);border-color:var(--line-strong)}
.secnav a[aria-current="page"]{color:#fff;background:var(--accent);border-color:var(--accent)}
.secnav a[aria-current="page"] .pico{stroke:#fff}
.secnav .pico{width:18px;height:18px}

/* ---------- 2025 / 2026 харьцуулах баганa ---------- */
.cmp{display:grid;gap:4px 12px;grid-template-columns:minmax(92px,28%) minmax(0,1fr) auto;
  align-items:center;padding:9px 0;border-top:1px solid var(--line-soft);font-size:13px}
.cmp:first-of-type{border-top:0;padding-top:2px}
.cmp .bn{grid-row:span 2}
.cmp .bar{height:10px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.cmp .bar>span{display:block;height:100%;border-radius:99px}
.cmp .bar.y25>span{background:var(--line-strong)}
.cmp .bar.y26>span{background:linear-gradient(90deg,var(--gold),#f0c45e)}
.cmp .v{font-size:12px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}
.cmp .v b{color:var(--ink);font-weight:700}
.cmp .ch{grid-column:2/4;justify-self:start;margin-top:2px}

/* ---------- тээврийн төрлөөр эзлэх хувь ---------- */
.mode-row{padding:10px 0;border-top:1px solid var(--line-soft)}
.mode-row:first-of-type{border-top:0;padding-top:2px}
.mode-row .mt{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink-2);margin-bottom:7px}
.mode-row .mt b{color:var(--ink);font-variant-numeric:tabular-nums}
.stack{display:flex;height:22px;border-radius:6px;overflow:hidden;background:var(--surface-3);gap:2px}
.stack>span{display:flex;align-items:center;justify-content:center;min-width:3px;
  font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.stack .m-rail{background:#3f7fd0}
.stack .m-road{background:#c98a2b}
.stack .m-air{background:#5b6b86}
.stack>span.cur{box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
.stack>span:not(.cur){opacity:.6}
.mlegend{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 12px;font-size:12px;color:var(--ink-2)}
.mlegend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:7px;vertical-align:-1px}

/* жижиг тэмдэглэгээ */
.src{margin:15px 0 0;font-size:11.5px;line-height:1.65;color:#cbe1ec;
  text-shadow:0 1px 2px rgba(0,0,0,.35);max-width:88ch;text-wrap:balance}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);
  color:#22180a;font-weight:700;font-size:13px;padding:10px 16px;border-radius:0 0 4px 0}
.skip:focus{left:0}
.foot-logo{display:flex;align-items:flex-start;gap:16px;margin:0 0 18px}
.foot-logo img{display:block;width:96px;height:auto;flex:none}
.foot-logo .ft{font-size:12.5px;line-height:1.55;color:#cfe4e6;max-width:46ch;align-self:center}
@media(max-width:560px){.foot-logo{flex-direction:column;gap:11px}.foot-logo img{width:82px}}

/* Дэд хуудасны газрын зураг Монголын хэлбэртэй тул бөмбөрцгөөс
   намхан — hero-гийн доод зай бага */
body.night .hero.sector .in{padding:72px 24px 56px}
@media(max-width:940px){ body.night .hero.sector .in{padding:44px 20px 230px} }
body.night .hero.sector h2{max-width:15ch}
body.night .hero .stats b small{font-size:13px;font-weight:500;color:#9eabbe;letter-spacing:0;margin-left:3px}

/* ---------- хатуу хучилттай замын зураг (assets/road-map.js) ---------- */
.rmap{display:grid;grid-template-columns:minmax(0,1fr) 300px}
@media(max-width:860px){.rmap{grid-template-columns:1fr}}
.rmap-stage{padding:14px 14px 8px;min-width:0}
.rmap-svg{display:block;width:100%;height:auto;overflow:visible}
.rm-dot{fill:none;stroke:var(--line-strong);stroke-width:4px;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:1}
.rm-town{fill:var(--surface);stroke:var(--ink-3);stroke-width:1.2px;vector-effect:non-scaling-stroke}
.rm-lbl{font:600 30px var(--ff);fill:var(--ink-2);paint-order:stroke;stroke:var(--surface);stroke-width:6px;pointer-events:none}
@media(max-width:560px){.rm-lbl{display:none}}
.rm-road{cursor:pointer;outline:none;transition:opacity .25s}
.rm-road path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rm-road .glow{stroke-width:8px;opacity:.42;filter:url(#rglow);transition:opacity .2s,stroke-width .2s}
.rm-road .core{stroke-width:2px;transition:stroke-width .2s}
.rm-road .hit{stroke:transparent;stroke-width:16px;pointer-events:stroke}
.rm-road.int path.glow,.rm-road.int path.core{stroke:#f0c45e}
.rm-road.st path.glow,.rm-road.st path.core{stroke:#7fb6ff}
.rm-road:hover .glow,.rm-road:focus-visible .glow{opacity:.9;stroke-width:12px}
.rm-road:hover .core,.rm-road:focus-visible .core{stroke-width:3px}
.rm-road.on .glow{opacity:1;stroke-width:10px}
.rm-road.on .core{stroke:#fff;stroke-width:3.4px}
.rmap.has-sel .rm-road:not(.on){opacity:.3}
@keyframes rm-pulse{0%,100%{opacity:.34}50%{opacity:.6}}
.rmap:not(.has-sel) .rm-road:not(:hover):not(:focus-visible) .glow{animation:rm-pulse 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rm-road .glow{animation:none!important}}
.rinfo{border-left:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:11px;min-width:0}
@media(max-width:860px){.rinfo{border-left:0;border-top:1px solid var(--line)}}
.rinfo h4{margin:0;font-size:17px;font-weight:700;line-height:1.3;color:var(--ink)}
.ri-k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ri-big{font-size:28px;font-weight:700;line-height:1.1;color:var(--accent);font-variant-numeric:tabular-nums}
.ri-big small{display:block;margin-top:5px;font-size:12px;font-weight:400;color:var(--ink-3)}
.ri-leg{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-2)}
.ri-leg i{display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:9px;vertical-align:3px}
.ri-leg i.int{background:#f0c45e;box-shadow:0 0 8px #f0c45e}
.ri-leg i.st{background:#7fb6ff;box-shadow:0 0 8px #7fb6ff}
.ri-hint{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.ri-top{display:flex;align-items:center;gap:8px}
.ri-code{font:700 12px/1 var(--ff);letter-spacing:.06em;padding:5px 8px;border-radius:6px;
  background:var(--gold-soft);color:var(--gold);border:1px solid rgba(224,165,38,.35)}
.ri-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 12px;margin:2px 0 0;font-size:12.5px;line-height:1.45}
.ri-dl dt{color:var(--ink-3)}
.ri-dl dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.ri-back{align-self:flex-start;font:600 12.5px/1 var(--ff);padding:8px 12px;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--accent);border:1px solid var(--line-strong)}
.ri-back:hover{border-color:var(--accent)}
.ri-sel{margin-top:auto;width:100%;font:400 13px var(--ff);padding:9px 10px;border-radius:8px;
  background:var(--surface-2);color:var(--ink);border:1px solid var(--line-strong)}