/* RU: Путеводитель «Бизнес и жизнь в Астане». Одна тема, два режима (светлый/тёмный).
   EN: "Business and life in Astana" guide. One theme, two modes (light/dark).

   RU: Палитра построена от флага Казахстана — небесно-голубой и золотой, но приглушённые:
       насыщенные версии на длинном тексте утомляют глаз, поэтому яркий голубой оставлен
       только для акцентов (ссылки, активный пункт меню, подсветка поиска).
   EN: The palette derives from the Kazakh flag — sky blue and gold — but muted: saturated
       versions tire the eye across long-form text, so vivid blue is reserved for accents
       (links, active nav item, search highlight). */

:root {
  --bg: #f7f8fa;
  --bg-panel: #ffffff;
  --bg-sunken: #eef1f5;
  --bg-hover: #e9edf3;
  --text: #1b2027;
  --text-dim: #5a6474;
  --text-faint: #8b95a5;
  --border: #dfe4ec;
  --border-strong: #c6cedb;

  --accent: #0a7ea4;
  --accent-soft: #e2f2f8;
  --accent-text: #06617f;
  --gold: #c98a06;
  --gold-soft: #fdf3dc;

  --ok: #1a7f4b;
  --ok-soft: #e3f5eb;
  --warn: #b06a00;
  --warn-soft: #fdf1de;
  --danger: #b3261e;
  --danger-soft: #fdeceb;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);

  --sidebar-w: 320px;
  --radius: 10px;
  --radius-sm: 6px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

/* RU: Тёмная тема повторяет ту же семантику токенов, а не инвертирует цвета «в лоб»:
       поверхности становятся всё светлее по мере подъёма (bg < panel < hover).
   EN: Dark mode mirrors the same token semantics rather than bluntly inverting colours:
       surfaces get lighter as they rise (bg < panel < hover). */
:root[data-theme="dark"] {
  --bg: #12161c;
  --bg-panel: #1a1f27;
  --bg-sunken: #151a21;
  --bg-hover: #242b35;
  --text: #e6eaf0;
  --text-dim: #a3adbb;
  --text-faint: #737e8d;
  --border: #2a323d;
  --border-strong: #3a444f;

  --accent: #4fc3e8;
  --accent-soft: #12313d;
  --accent-text: #7fd6f2;
  --gold: #e8b445;
  --gold-soft: #33290f;

  --ok: #4ec98a;
  --ok-soft: #10301f;
  --warn: #e0a14a;
  --warn-soft: #33260f;
  --danger: #f0837b;
  --danger-soft: #351816;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  z-index: 40;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.brand-mark {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--accent) 0%, #1aa3c9 60%, var(--gold) 160%);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.5px;
  box-shadow: var(--shadow-sm);
}

.brand-text { min-width: 0; }
.brand-title { font-weight: 650; font-size: 15px; line-height: 1.25; }
.brand-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

.search-wrap { padding: 12px 14px; position: relative; }

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  transition: border-color .15s, box-shadow .15s;
}
.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-box svg { flex: 0 0 auto; color: var(--text-faint); }
.search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 9px 0;
  outline: none;
}
.search-box kbd {
  font: 500 11px/1 var(--mono);
  color: var(--text-faint);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 5px;
}
.search-clear {
  border: 0; background: transparent; cursor: pointer; color: var(--text-faint);
  font-size: 18px; line-height: 1; padding: 0 2px;
}

.nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 24px;
  scrollbar-width: thin;
}
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.nav-group { margin-bottom: 2px; }

.nav-group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 560;
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-group-head:hover { background: var(--bg-hover); }
.nav-group-head .chev {
  margin-left: auto;
  color: var(--text-faint);
  transition: transform .18s;
  flex: 0 0 auto;
}
.nav-group[open] .chev { transform: rotate(90deg); }
.nav-ico { flex: 0 0 auto; font-size: 15px; width: 20px; text-align: center; }

.nav-sub { padding: 2px 0 8px 30px; display: none; }
.nav-group.open .nav-sub { display: block; }

.nav-link {
  display: block;
  padding: 6px 10px;
  font-size: 13.5px;
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  margin-left: -2px;
}
.nav-link:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.nav-link.active {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-left-color: var(--accent);
  font-weight: 550;
}

/* ---------- Search results ---------- */

.results {
  position: absolute;
  left: 14px; right: 14px; top: calc(100% - 4px);
  max-height: 62vh;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  display: none;
}
.results.open { display: block; }
.results-empty { padding: 18px 16px; color: var(--text-faint); font-size: 13.5px; }
.results-count {
  padding: 9px 14px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint); border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--bg-panel);
}
.result {
  display: block; padding: 11px 14px; border-bottom: 1px solid var(--border);
  color: var(--text); cursor: pointer;
}
.result:last-child { border-bottom: 0; }
.result:hover, .result.sel { background: var(--bg-hover); text-decoration: none; }
.result-crumb { font-size: 11.5px; color: var(--accent-text); margin-bottom: 3px; }
.result-title { font-size: 14px; font-weight: 550; margin-bottom: 3px; }
.result-snip { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
mark {
  background: var(--gold-soft); color: inherit; border-radius: 3px;
  padding: 0 2px; font-weight: 600;
}

/* ---------- Main ---------- */

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 28px;
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.burger { display: none; }
.crumbs { font-size: 13px; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-spacer { flex: 1; }

.tbtn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-dim);
  border-radius: var(--radius-sm); padding: 7px 11px; font: inherit; font-size: 13px;
  cursor: pointer; white-space: nowrap;
}
.tbtn:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.tbtn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.tbtn.primary:hover { filter: brightness(1.08); color: #fff; }

.content { padding: 34px 28px 96px; max-width: 900px; width: 100%; margin: 0 auto; }

/* ---------- Typography ---------- */

.content h1 {
  font-size: 32px; line-height: 1.22; font-weight: 680; letter-spacing: -.02em;
  margin: 0 0 10px;
}
.content h2 {
  font-size: 22px; line-height: 1.3; font-weight: 640; letter-spacing: -.01em;
  margin: 40px 0 12px; padding-top: 14px; border-top: 1px solid var(--border);
  scroll-margin-top: 70px;
}
.content h2:first-of-type { border-top: 0; padding-top: 0; }
.content h3 { font-size: 17px; font-weight: 620; margin: 26px 0 8px; scroll-margin-top: 70px; }
.content h4 { font-size: 15px; font-weight: 620; margin: 20px 0 6px; color: var(--text-dim); }
.content p { margin: 0 0 13px; }
.content ul, .content ol { margin: 0 0 14px; padding-left: 22px; }
.content li { margin-bottom: 5px; }
.content li > ul, .content li > ol { margin-top: 5px; }
.content strong { font-weight: 640; }
.content code {
  font: 500 13px/1.5 var(--mono);
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}
.content hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }

.lede { font-size: 17px; color: var(--text-dim); line-height: 1.6; margin: 0 0 26px; }

/* ---------- Tables ---------- */

/* RU: Обёртка со своим overflow-x обязательна: широкие таблицы (сравнение банков,
       налоговые режимы) иначе растягивают всю страницу и ломают вёрстку на телефоне.
   EN: The overflow-x wrapper is required: wide tables (bank comparisons, tax regimes)
       would otherwise stretch the whole page and break the mobile layout. */
.tbl-wrap {
  overflow-x: auto; margin: 0 0 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-panel);
}
.tbl-wrap table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 480px; }
.tbl-wrap th {
  text-align: left; font-weight: 620; font-size: 12.5px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--text-dim);
  background: var(--bg-sunken); padding: 10px 14px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tbl-wrap td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl-wrap tr:last-child td { border-bottom: 0; }
.tbl-wrap tbody tr:hover { background: var(--bg-sunken); }

/* ---------- Callouts ---------- */

.callout {
  display: flex; gap: 12px;
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius); padding: 13px 16px; margin: 0 0 18px;
  background: var(--bg-panel); font-size: 14.5px;
}
.callout-ico { flex: 0 0 auto; font-size: 16px; line-height: 1.5; }
.callout-body { min-width: 0; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-title { font-weight: 620; margin-bottom: 4px; }
.callout.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout.danger { border-left-color: var(--danger); background: var(--danger-soft); }
.callout.ok { border-left-color: var(--ok); background: var(--ok-soft); }
.callout.info { border-left-color: var(--accent); background: var(--accent-soft); }
.callout.gold { border-left-color: var(--gold); background: var(--gold-soft); }

/* ---------- Steps ---------- */

.steps { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: step; }
.step {
  position: relative; padding: 0 0 22px 46px; counter-increment: step;
}
/* RU: Вертикальная линия рисуется псевдоэлементом, а не border у списка, чтобы у
       последнего шага её можно было оборвать — иначе линия «висит» под финальным пунктом.
   EN: The vertical rail is a pseudo-element rather than a list border so the last step can
       cut it off — otherwise the line dangles below the final item. */
.step::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid var(--accent);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 650;
}
.step::after {
  content: ""; position: absolute; left: 15px; top: 32px; bottom: 2px;
  width: 1px; background: var(--border);
}
.step:last-child::after { display: none; }
.step-title { font-weight: 620; font-size: 16px; margin: 3px 0 6px; }
.step-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.step-body > :last-child { margin-bottom: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-sunken); border: 1px solid var(--border); color: var(--text-dim);
  /* RU: Переносы разрешены намеренно. Раньше стоял white-space: nowrap ради коротких
         меток вроде «⏱ 1 день», но в поле «где» агенты пишут длинные строки
         («Классификатор ОКЭД (stat.gov.kz), перечень запрещённых видов…»), и одна такая
         неразрывная строка в 996 px раздвигала всю страницу на телефоне. Короткие чипы
         и без nowrap не переносятся — им просто хватает места.
     EN: Wrapping is allowed deliberately. white-space: nowrap used to be here for short labels
         like "⏱ 1 day", but agents write long strings into the "where" field ("OKED classifier
         (stat.gov.kz), list of prohibited activities…"), and one such unbreakable 996px line
         pushed the whole page wide on mobile. Short chips do not wrap without nowrap anyway —
         they simply fit. */
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.chip.accent { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.chip.gold { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }
.chip.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.chip.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.chip.danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

/* ---------- Entity cards ---------- */

.card-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 14px; padding: 10px 12px;
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius);
}
.card-toolbar input {
  flex: 1; min-width: 160px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-panel); color: var(--text); font: inherit; font-size: 13.5px;
  padding: 7px 10px; outline: none;
}
.card-toolbar input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.filter-btn {
  border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-dim);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.filter-btn:hover { background: var(--bg-hover); }
.filter-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.cards { display: grid; gap: 14px; margin: 0 0 22px; }

.card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-panel); overflow: hidden; box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  cursor: pointer; user-select: none;
}
.card-head:hover { background: var(--bg-sunken); }
.card-logo {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 9px;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--bg-sunken); border: 1px solid var(--border); color: var(--text-dim);
  overflow: hidden;
}
.card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; background: #fff; }
.card-main { flex: 1; min-width: 0; }
.card-name { font-weight: 620; font-size: 15.5px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.card-chev { flex: 0 0 auto; color: var(--text-faint); transition: transform .18s; margin-top: 4px; }
.card.open .card-chev { transform: rotate(90deg); }
.card-body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--border); padding-top: 14px; font-size: 14.5px; }
.card.open .card-body { display: block; }
.card-body > :last-child { margin-bottom: 0; }

.contact-grid { display: grid; gap: 6px; margin: 12px 0 0; font-size: 13.5px; }
.contact-row { display: flex; gap: 9px; align-items: baseline; }
.contact-key { flex: 0 0 96px; color: var(--text-faint); font-size: 12.5px; }
.contact-val { min-width: 0; word-break: break-word; }

.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 0; }
.proscons ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; }
.proscons h5 { margin: 0; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
.pc-pro h5 { color: var(--ok); }
.pc-con h5 { color: var(--danger); }

/* ---------- FAQ ---------- */

.faq { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 0 0 22px; background: var(--bg-panel); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  padding: 13px 16px; border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 15px; font-weight: 560; text-align: left; cursor: pointer;
}
.faq-q:hover { background: var(--bg-sunken); }
.faq-q .card-chev { margin-top: 3px; }
.faq-item.open .card-chev { transform: rotate(90deg); }
.faq-a { display: none; padding: 0 16px 15px 42px; font-size: 14.5px; color: var(--text-dim); }
.faq-item.open .faq-a { display: block; }
.faq-a > :last-child { margin-bottom: 0; }

/* ---------- Checklist ---------- */

.checklist { list-style: none; margin: 0 0 22px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); }
.check-item { display: flex; gap: 11px; padding: 11px 15px; border-bottom: 1px solid var(--border); cursor: pointer; }
.check-item:last-child { border-bottom: 0; }
.check-item:hover { background: var(--bg-sunken); }
.check-item input { margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.check-item.done .check-text { color: var(--text-faint); text-decoration: line-through; }
.check-text { font-size: 14.5px; }
.check-note { font-size: 13px; color: var(--text-faint); margin-top: 2px; }
.check-progress { padding: 11px 15px; border-bottom: 1px solid var(--border); background: var(--bg-sunken); font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 10px; }
.check-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.check-bar span { display: block; height: 100%; background: var(--ok); transition: width .25s; }

/* ---------- Facts / sources ---------- */

.facts { display: grid; gap: 9px; margin: 0 0 22px; }
.fact {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-panel); font-size: 14px;
}
.fact-claim { color: var(--text-dim); }
.fact-value { font-weight: 620; color: var(--text); text-align: right; }
.fact-src { grid-column: 1 / -1; font-size: 12px; color: var(--text-faint); }

.linklist { display: grid; gap: 8px; margin: 0 0 22px; }
.linkrow {
  display: flex; gap: 10px; align-items: baseline;
  padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-panel);
}
.linkrow:hover { background: var(--bg-sunken); text-decoration: none; }
.linkrow-t { font-weight: 550; font-size: 14px; }
.linkrow-n { font-size: 12.5px; color: var(--text-faint); }
.linkrow-u { margin-left: auto; font-size: 12px; color: var(--accent-text); font-family: var(--mono); white-space: nowrap; }

/* ---------- Home / hero ---------- */

.hero {
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  margin: 0 0 28px; background: var(--bg-panel); box-shadow: var(--shadow-md);
}
.hero-art { height: 190px; position: relative; overflow: hidden; background: #0e2a3a; }
.hero-art svg { width: 100%; height: 100%; display: block; }
.hero-body { padding: 22px 24px 24px; }
.hero-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); font-weight: 620; }
.hero h1 { margin: 8px 0 10px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; margin: 0 0 30px; }
.tile {
  display: block; padding: 16px 17px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-panel); color: var(--text);
  box-shadow: var(--shadow-sm); transition: transform .14s, box-shadow .14s, border-color .14s;
}
.tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.tile-ico { font-size: 22px; margin-bottom: 9px; }
.tile-t { font-weight: 620; font-size: 15px; margin-bottom: 5px; }
.tile-d { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0 0 26px; }
.stat { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); }
.stat-v { font-size: 22px; font-weight: 680; letter-spacing: -.02em; }
.stat-l { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.4; }

/* ---------- Section footer nav ---------- */

.pager { display: flex; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border); }
.pager a {
  flex: 1; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-panel); color: var(--text);
}
.pager a:hover { background: var(--bg-sunken); text-decoration: none; border-color: var(--border-strong); }
.pager .dir { font-size: 12px; color: var(--text-faint); }
.pager .ttl { font-size: 14.5px; font-weight: 560; margin-top: 2px; }
.pager .next { text-align: right; }

.updated { margin-top: 30px; font-size: 12.5px; color: var(--text-faint); }

/* ---------- Mobile ---------- */

.scrim { display: none; }

@media (max-width: 980px) {
  /* RU: minmax(0, 1fr), а не 1fr: колонка grid по умолчанию не сжимается уже своего
         содержимого (min-width: auto), и широкая таблица внутри раздвигала всю страницу
         за пределы экрана телефона, хотя у самой таблицы есть своя прокрутка.
     EN: minmax(0, 1fr) rather than 1fr: a grid column will not shrink below its content by
         default (min-width: auto), so a wide table inside pushed the whole page past the
         phone's screen even though the table has its own scroller. */
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(88vw, var(--sidebar-w));
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(10, 14, 20, .45);
  }
  .burger {
    display: inline-grid; place-items: center; width: 36px; height: 36px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-panel); color: var(--text); cursor: pointer;
  }
  .content { padding: 24px 18px 80px; }
  .topbar { padding: 9px 16px; }
  .content h1 { font-size: 26px; }
  .proscons { grid-template-columns: 1fr; }
  .hero-art { height: 140px; }
}

/* ---------- Print ---------- */

@media print {
  .sidebar, .topbar, .pager, .card-toolbar, .scrim { display: none !important; }
  .app { display: block; }
  .content { max-width: none; padding: 0; }
  .card-body, .faq-a { display: block !important; }
  a { color: inherit; }
  .content h2 { break-after: avoid; }
  .card, .callout, .tbl-wrap { break-inside: avoid; }
}

/* ==================================================================
   Интерактивные виджеты: калькуляторы, конвертер, поисковый пульт
   ================================================================== */

.widget {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-panel); margin: 0 0 22px; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.widget-head {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; background: var(--bg-sunken); border-bottom: 1px solid var(--border);
}
.widget-ico { font-size: 19px; line-height: 1.3; }
.widget-title { font-weight: 640; font-size: 15.5px; }
.widget-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.45; }
.widget-body { padding: 16px; }

.field-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 12px;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-label { font-size: 12.5px; color: var(--text-dim); }
.field-input {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: inherit; font-size: 14.5px;
  padding: 9px 11px; outline: none; min-width: 0; width: 100%;
}
.field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin-bottom: 14px; }
.switch input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.seg-btn {
  border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-dim);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 13px; cursor: pointer;
}
.seg-btn:hover { background: var(--bg-hover); }
.seg-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- калькулятор --- */

.calc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin-bottom: 16px; }
.calc-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 15px; background: var(--bg);
}
.calc-card.best { border-color: var(--ok); background: var(--ok-soft); }
.calc-card.off { opacity: .55; }
.calc-card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 620; font-size: 14.5px; margin-bottom: 8px; }
.calc-total { font-size: 23px; font-weight: 690; letter-spacing: -.02em; line-height: 1.1; }
.calc-per { font-size: 12px; font-weight: 400; color: var(--text-faint); margin-left: 6px; }
.calc-eff { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.calc-lines { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.calc-lines li { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.calc-lines span { color: var(--text-dim); }
.calc-blocked { font-size: 13px; color: var(--warn); padding: 8px 0; }
.calc-note { font-size: 12px; color: var(--text-faint); margin-top: 9px; line-height: 1.45; }
.calc-details { margin: 4px 0 12px; }
.calc-details summary { cursor: pointer; font-size: 14px; font-weight: 550; padding: 8px 0; }
.calc-summary { font-size: 14px; margin-top: 8px; }
.calc-disclaimer { font-size: 12px; color: var(--text-faint); line-height: 1.5; margin: 12px 0 0; }

/* --- конвертер --- */

.conv-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.conv-row .field-input { width: auto; flex: 1 1 110px; }
.conv-eq { color: var(--text-faint); font-size: 17px; }
.conv-result {
  flex: 1 1 130px; font-size: 19px; font-weight: 660; letter-spacing: -.01em;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-sunken); text-align: right;
}
.conv-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* --- поисковый пульт --- */

.console-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.console-link {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
}
.console-link:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-soft); }
.console-name { font-weight: 620; font-size: 14.5px; }
.console-note { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.console-go { font-size: 12px; color: var(--accent-text); margin-top: 4px; }
.console-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.warnbtn { background: var(--warn-soft) !important; border-color: var(--warn) !important; color: var(--warn) !important; }

/* --- галерея --- */

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; margin: 0 0 22px; }
.ph { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-panel); }
.ph img { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--bg-sunken); }
.ph figcaption { padding: 9px 11px; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.ph-credit { display: block; font-size: 11px; color: var(--text-faint); margin-top: 3px; }

/* --- помесячный климат --- */

.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 11px; margin: 0 0 22px; }
.month { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--bg-panel); }
.month.good { border-color: var(--ok); background: var(--ok-soft); }
.month.hard { border-color: var(--warn); background: var(--warn-soft); }
.month-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.month-stars { font-size: 11px; color: var(--gold); letter-spacing: 1px; }
.month-stars .dim { color: var(--border-strong); }
.month-t { font-size: 21px; font-weight: 680; letter-spacing: -.02em; margin: 5px 0 2px; }
.month-mm { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--text-faint); margin-bottom: 7px; }
.month-v { font-size: 13px; line-height: 1.45; }
.month-more { margin-top: 8px; font-size: 12.5px; }
.month-more summary { cursor: pointer; color: var(--accent-text); }

/* ==================================================================
   Оглавление раздела (правая колонка)
   ================================================================== */

.page-toc {
  position: fixed; top: 66px; right: 22px; width: 210px; max-height: calc(100vh - 96px);
  overflow-y: auto; padding: 12px 0 20px; font-size: 12.5px; z-index: 20;
  border-left: 1px solid var(--border); padding-left: 14px;
}
.page-toc-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-faint); font-weight: 620; margin-bottom: 9px;
}
.ptoc-link { display: block; padding: 4px 0; color: var(--text-dim); line-height: 1.4; }
.ptoc-link:hover { color: var(--text); text-decoration: none; }
.ptoc-link.h3 { padding-left: 11px; font-size: 12px; }
.ptoc-link.on { color: var(--accent-text); font-weight: 600; }

/* RU: Колонку показываем только там, где для неё есть место рядом с колонкой контента
       (900px) плюс сама колонка и поля. Ниже — прячем, а не наезжаем на текст. */
@media (max-width: 1360px) { .page-toc { display: none; } }

@media print {
  .page-toc, .widget-head, .console-actions, .seg { display: none !important; }
  .widget { break-inside: avoid; }
}

/* RU: Оглавление позиционируется fixed, поэтому само по себе места в потоке не занимает
       и наезжает на широкий виджет. Резервируем полосу справа у главной колонки — только
       на тех ширинах, где оглавление вообще показывается.
   EN: The outline is fixed-positioned, so it occupies no flow space of its own and overlaps
       a wide widget. Reserve a strip on the right of the main column — only at the widths
       where the outline is shown at all. */
@media (min-width: 1361px) {
  body.has-toc .main { padding-right: 244px; }
}

/* RU: Суммы и проценты не должны переноситься: «1 080 000 ₸», разорванное между строк,
       читается как два разных числа.
   EN: Amounts and percentages must not wrap: "1 080 000 ₸" split across lines reads as
       two separate numbers. */
/* RU: nowrap только там, где содержимое гарантированно короткое — суммы и проценты
       калькулятора. На .fact-value его ставить нельзя: значения фактов бывают длинными
       фразами («5 % до 230 000 МРП, 15 % на превышение»), и запрет переноса распирал
       страницу на телефоне до 2000 px при окне 390 px.
   EN: nowrap only where content is guaranteed short — the calculator's amounts and
       percentages. It must not go on .fact-value: fact values can be long phrases
       ("5 % up to 230,000 MRP, 15 % above"), and forbidding wrap blew the mobile page
       out to 2000 px inside a 390 px window. */
.calc-lines b, .calc-total, .calc-eff, .conv-result { white-space: nowrap; }
.calc-lines li { align-items: baseline; }
.calc-lines span { min-width: 0; }

/* ---------- Мастер персонального маршрута ---------- */

.wz-questions { display: grid; gap: 16px; margin-bottom: 18px; }
.wz-q-title { font-size: 14.5px; font-weight: 600; margin-bottom: 8px; }
.wz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 8px; }
.wz-opt {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: inherit; cursor: pointer;
}
.wz-opt:hover { background: var(--bg-hover); }
.wz-opt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.wz-opt-t { font-size: 14px; font-weight: 550; }
.wz-opt-d { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; }

.wz-plan { border-top: 1px solid var(--border); padding-top: 16px; }
.wz-plan-head {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); font-weight: 620; margin-bottom: 14px;
}
/* RU: Шаг-предупреждение красится рамкой и цветом счётчика, а не только значком:
       на длинном плане значок теряется среди двадцати одинаковых кружков. */
.wz-plan .step-warn::before { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.wz-plan .step-warn .step-body { border-left: 2px solid var(--warn); padding-left: 11px; margin-left: -13px; }
.wz-plan .step .tbtn { margin-top: 6px; }

/* RU: Блок фактов ломал вёрстку на телефоне: колонка «утверждение — значение» держала
       ширину по содержимому, а длинный URL источника вообще не переносился, и страница
       уезжала вбок на 2167px при окне 390px. Разрешаем перенос в любом месте у ссылок
       и складываем факт в одну колонку на узких экранах.
   EN: The facts block broke the mobile layout: the "claim — value" columns sized to content,
       and a long source URL never wrapped at all, pushing the page to 2167px inside a 390px
       window. Allow breaking anywhere in links and collapse a fact to one column when narrow. */
.fact-src { overflow-wrap: anywhere; word-break: break-word; }
.fact-claim, .fact-value { min-width: 0; overflow-wrap: anywhere; }
.linkrow-u { overflow-wrap: anywhere; }
.contact-val { overflow-wrap: anywhere; }

@media (max-width: 620px) {
  .fact { grid-template-columns: 1fr; gap: 3px; }
  .fact-value { text-align: left; }
  .linkrow { flex-direction: column; gap: 3px; }
  .linkrow-u { margin-left: 0; }
  .conv-result { text-align: left; }
  .contact-row { flex-direction: column; gap: 1px; }
  .contact-key { flex: none; }
}