/* Калькулятор ипотеки — ipoteka.nazritskiy.com.
 *
 * ЦВЕТА — ТОЛЬКО ИЗ БРЕНДА. Здесь нет ни одного своего значения: всё через
 * переменные из `assets/palette.css`, который сборка копирует из
 * `~/projects/brand/tokens/palette.css` как есть. Захотелось нового цвета —
 * сначала он появляется там (правит диспетчер), потом здесь.
 *
 * ДВЕ ТЕМЫ, СВЕТЛАЯ ПО УМОЛЧАНИЮ (решение владельца 23.09.2026: «нравится и
 * светлая и тёмная, сделаем переключатель, стандартно светлая»).
 * Светлая — бренд наизнанку, а не второй бренд: чернила — тёмный фон бренда
 * `--bg`, акцент — его же тихий зелёный `--accent-dim`, тихий — `--text-quiet`.
 * Новых значений четыре, `--ipo-*`, и они только у этого продукта.
 * Тёмная — основной стиль бренда без изменений.
 */

:root, [data-theme="light"] {
  --pg-bg: var(--ipo-bg);
  --pg-card: var(--ipo-card);
  --pg-line: var(--ipo-line);
  --pg-field: var(--ipo-bg);
  --pg-text: var(--bg);
  --pg-dim: var(--ipo-dim);
  --pg-quiet: var(--text-quiet);
  --pg-accent: var(--accent-dim);
  --pg-on-accent: var(--ipo-card);
  --pg-warn: var(--warn);
}
[data-theme="dark"] {
  --pg-bg: var(--bg);
  --pg-card: var(--bg-elev);
  --pg-line: var(--line);
  --pg-field: var(--bg);
  --pg-text: var(--text);
  --pg-dim: var(--text-dim);
  --pg-quiet: var(--text-quiet);
  --pg-accent: var(--accent);
  --pg-on-accent: var(--bg);
  --pg-warn: var(--warn);
}

@font-face { font-family: "Inter"; src: url("assets/fonts/InterVariable.woff2") format("woff2");
             font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");
             font-weight: 700; font-display: swap; }

* { box-sizing: border-box; }
html { background: var(--pg-bg); color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; background: var(--pg-bg); color: var(--pg-text);
       font: 16px/1.55 var(--font-sans); -webkit-text-size-adjust: 100%; }
.wrap { max-width: 680px; margin: 0 auto; padding: 16px 18px 40px; }
a { color: var(--pg-accent); }
.nb { white-space: nowrap; }

/* Шапка: знак и переключатель темы */
.top { display: flex; align-items: center; justify-content: space-between;
       gap: 12px; margin: 2px 0 22px; }
.mark { font: 700 13px/1 var(--font-mono); letter-spacing: .02em; color: var(--pg-dim);
        text-decoration: none; }
.mark b { color: var(--pg-accent); }
.theme { border: 1px solid var(--pg-line); background: var(--pg-card); color: var(--pg-dim);
         font: 700 12px/1 var(--font-mono); padding: 8px 10px; border-radius: 10px;
         cursor: pointer; }

h1 { font: 800 32px/1.1 var(--font-sans); letter-spacing: -.02em; margin: 0 0 10px; }
.lead { color: var(--pg-dim); margin: 0 0 20px; }
h2 { font: 800 23px/1.2 var(--font-sans); letter-spacing: -.01em; margin: 38px 0 12px; }
h3 { font: 700 17px/1.3 var(--font-sans); margin: 18px 0 6px; }
p { margin: 0 0 12px; }

.card { background: var(--pg-card); border: 1px solid var(--pg-line); border-radius: 16px;
        padding: 18px; margin: 0 0 14px; }

/* Поля */
.lbl { display: block; font: 700 12px/1.3 var(--font-mono); text-transform: uppercase;
       letter-spacing: .06em; color: var(--pg-dim); margin: 0 0 8px; }
.field { margin: 0 0 16px; }
.in { width: 100%; padding: 13px 14px; font: 600 20px/1.2 var(--font-sans);
      color: var(--pg-text); background: var(--pg-field); border: 1px solid var(--pg-line);
      border-radius: 12px; outline: none; }
.in:focus { border-color: var(--pg-accent); }
.in.small { font-size: 17px; padding: 11px 12px; }
.pair { display: flex; gap: 10px; }
.pair > .field { flex: 1; min-width: 0; }

.chips { display: flex; gap: 8px; }
.chip { flex: 1; padding: 12px 0; text-align: center; border-radius: 12px;
        border: 1px solid var(--pg-line); background: var(--pg-field); color: var(--pg-text);
        font: 700 16px/1 var(--font-mono); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--pg-accent); color: var(--pg-on-accent);
                             border-color: var(--pg-accent); }

.go { width: 100%; padding: 16px; border: 0; border-radius: 14px; cursor: pointer;
      background: var(--pg-accent); color: var(--pg-on-accent);
      font: 800 18px/1 var(--font-sans); margin-top: 4px; }
.safe { color: var(--pg-quiet); font-size: 13px; margin: 12px 0 0; text-align: center; }

/* «Уточнить» живёт внутри карточки калькулятора, над кнопкой: вложенная
   панель легче карточки — фон поля, а не карточки. */
details.more { background: var(--pg-field); border: 1px solid var(--pg-line);
               border-radius: 12px; padding: 12px 14px; margin: 4px 0 16px; }
details.more summary { cursor: pointer; font: 700 14px/1.3 var(--font-mono); }
details.more[open] summary { margin-bottom: 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 15px; }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--pg-accent); flex: none; }

/* Ответ */
.tag { display: inline-block; font: 700 11px/1 var(--font-mono); padding: 5px 7px;
       border-radius: 6px; border: 1px solid var(--pg-line); color: var(--pg-dim);
       margin-bottom: 10px; }
.ans-title { font: 800 22px/1.2 var(--font-sans); margin: 0 0 8px; }
.big { font: 700 36px/1.1 var(--font-mono); color: var(--pg-accent); margin: 2px 0 4px; }
/* «м²» моноширинным шрифтом разъезжается — единица обычным. */
.big .unit { font: 800 26px/1 var(--font-sans); margin-left: 6px; }
.sub { color: var(--pg-dim); font-size: 14px; }
/* «Или не спешить»: план накопления фразой, а не строкой таблицы. */
.plan { border-left: 3px solid var(--pg-accent); padding: 2px 0 2px 12px; margin: 12px 0 0;
        font-size: 14.5px; }
/* Что ещё можно получить от государства: сумма, что сделать, условие. */
.gift { padding: 10px 0; border-bottom: 1px solid var(--pg-line); }
.gift:first-child { padding-top: 0; }
.gift:last-child { border-bottom: 0; padding-bottom: 0; }
.gift .row { border: 0; padding: 0; }
.gift .row span { font-weight: 700; }
.gift .use { margin: 4px 0 0; font-size: 15px; }
.gift .check-note { margin-top: 4px; }
.hint { border-left: 3px solid var(--pg-accent); padding: 2px 0 2px 12px; margin: 0 0 10px; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
       border-bottom: 1px solid var(--pg-line); font-size: 15px; }
.row:last-child { border-bottom: 0; }
.row b { font-family: var(--font-mono); white-space: nowrap; text-align: right; }
.check-note { color: var(--pg-dim); font-size: 13.5px; margin: 10px 0 0; }
.warn { color: var(--pg-dim); font-size: 13.5px; border-left: 3px solid var(--pg-warn);
        padding-left: 12px; margin: 8px 0; }

/* Тексты для поиска и для человека */
.prose { color: var(--pg-text); }
.prose p, .prose li { color: var(--pg-text); }
.prose .quiet { color: var(--pg-dim); }
.prog { border: 1px solid var(--pg-line); border-radius: 14px; padding: 14px 16px;
        margin: 0 0 10px; background: var(--pg-card); }
.prog .head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.prog .rate { font: 700 20px/1 var(--font-mono); color: var(--pg-accent); white-space: nowrap; }
.prog .name { font: 700 16px/1.3 var(--font-sans); }
.prog .facts { font: 13px/1.5 var(--font-mono); color: var(--pg-dim); margin: 6px 0 4px; }
.prog .cond { font-size: 14.5px; margin: 0; }
.faq details { border-bottom: 1px solid var(--pg-line); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 10px 0 0; }

footer { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--pg-line);
         color: var(--pg-quiet); font-size: 13px; }
footer p { margin: 0 0 8px; }

/* Плашка cookie: разметка и поведение — из srctag.js сайта, целиком.
 * [hidden] обязателен с !important: без него атрибут перебивается собственным
 * display плашки, и она не закрывается (грабля витрины, ловится только браузером). */
.cookie-note { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 5;
               display: flex; gap: 10px; align-items: center; background: var(--pg-card);
               border: 1px solid var(--pg-line); border-radius: 14px; padding: 10px 12px;
               font-size: 12.5px; line-height: 1.4; color: var(--pg-dim); }
.cookie-note[hidden] { display: none !important; }
.cookie-note button { flex: none; border: 0; border-radius: 10px; padding: 9px 12px;
                      background: var(--pg-accent); color: var(--pg-on-accent);
                      font: 700 13px/1 var(--font-sans); cursor: pointer; }

@media (min-width: 720px) {
  .wrap { padding-top: 28px; }
  h1 { font-size: 40px; }
  .cookie-note { left: 50%; right: auto; transform: translateX(-50%); width: 640px; }
}