/* ═══ Основа: сброс, типографика, фокус, четыре утилиты ══════════════
   Здесь только то, что применяется к голым тегам. Ни одного компонента:
   компонент живёт в components.css или в pages/<страница>.css.
   ═══════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:Inter,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--t-body);
  line-height:var(--lh-base);
  color:var(--ink);
  background:var(--sunk);
  -webkit-font-smoothing:antialiased;
}

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

/* Видимый фокус для всего, по чему ходят с клавиатуры. В OND его нет ни у
   одной кнопки — и это единственная правка, которую модуль не наследует. */
:focus-visible{outline:var(--ring);outline-offset:var(--ring-gap)}

/* Ширина содержимого. Одна на весь модуль. */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-page)}

/* ── Утилиты ───────────────────────────────────────────────────────
   Их ровно пять, и каждая обходит свойство CSS или устройство браузера,
   а не сокращает стиль. Шестая заводится только записью в
   DESIGN-CODE.md: набор «.mt-16, .mb-20, .text-sm» — это те же style=
   в разметке, вид сбоку.
   ───────────────────────────────────────────────────────────────── */

/* Цифры одинаковой ширины: иначе суммы и даты в столбце пляшут. */
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Вторичный текст внутри строки, где класс компонента уже занят. */
.muted{color:var(--muted)}

/* Прижать к правому краю flex-строки. */
.push{margin-left:auto}

/* Дать flex- и grid-ячейке сжиматься: без этого длинный адрес распирает
   строку и ломает сетку. Свойство CSS, а не оформление. */
.min0{min-width:0}

/* Текст только для экранного диктора. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:768px){
  .wrap{padding:0 var(--pad-page-sm)}
}