/* =============================================================================
   FM · Base — сброс, типографика, доступность, движение
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

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

body {
  background: var(--fm-bg);
  color: var(--fm-text);
  font-family: var(--fm-font-text);
  font-size: var(--fm-fs-body);
  line-height: var(--fm-lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' 1;   /* Onest: одноэтажная «а» в интерфейсе */
}

/* Зерно поверх всей страницы. Фиксированный слой, не участвует в прокрутке
   и не ловит клики — иначе он ронял бы кадры на длинных таблицах.
   Ломает цифровую плоскость: заливки перестают выглядеть напечатанными. */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: var(--fm-z-grain);
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fm-font-display);
  font-weight: 700;
  letter-spacing: var(--fm-tr-title);
  color: var(--fm-text);
  line-height: var(--fm-lh-tight);
  text-wrap: balance;   /* заголовок не оставляет одно слово на последней строке */
}
h1 { font-size: var(--fm-fs-h1); }
h2 { font-size: var(--fm-fs-h2); }
h3 { font-size: var(--fm-fs-h3); }

p  { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--fm-brand);
  text-decoration: none;
  text-decoration-color: var(--fm-brand-line);
  text-underline-offset: 3px;
  transition: color var(--fm-t-fast), text-decoration-color var(--fm-t-fast);
}
a:hover { color: var(--fm-brand-soft); text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

img, svg { max-width: 100%; display: block; }

table { border-collapse: collapse; width: 100%; }

/* Атрибут hidden должен побеждать любой display из компонента.
   Без этого .spec-bar { display: grid } перекрывает [hidden] браузера. */
[hidden] { display: none !important; }

/* Цифры выравниваются в столбик — суммы и номера читаются как в ведомости */
.mono, .num {
  font-family: var(--fm-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;   /* перечёркнутый ноль в кодах */
  letter-spacing: -.01em;
}

::selection { background: var(--fm-brand-tint); color: var(--fm-brand-deep); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--fm-border-input);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--fm-brand-line); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Иконки ----------------------------------------------------------------
   Один штрих на весь проект: 1.5px, круглые концы и стыки. Толщина не
   меняется от размера — иконка 24px не должна выглядеть жирнее иконки 14px. */
.ico {
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.ico--bold { stroke-width: 1.9; }

/* Ромб — знак FM. Ставится перед заголовком, в маркерах списка, в марке. */
.diamond {
  width: 9px; height: 9px; flex: none;
  background: var(--fm-accent-bright);
  border-radius: 2px;
  transform: rotate(45deg);
}
.diamond--outline { background: none; border: 2px solid var(--fm-accent-bright); }
.diamond--brand   { background: var(--fm-brand); }

/* --- Доступность ---------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--fm-brand-soft);
  outline-offset: 2px;
  border-radius: var(--fm-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 999;
  background: var(--fm-accent); color: #fff;
  padding: 10px 16px; border-radius: var(--fm-radius);
  font-weight: 600; transition: top var(--fm-t-base);
}
.skip-link:focus { top: 8px; text-decoration: none; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Движение ---------------------------------------------------------------
   Элементы не возникают — они приезжают. Появление всегда через transform и
   opacity: и то и другое считает видеокарта, разметка не пересчитывается. */

@keyframes fm-fade-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fm-rise     { from { opacity: 0; transform: translateY(14px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes fm-shimmer  { from { background-position: -420px 0; } to { background-position: 420px 0; } }
@keyframes fm-slide-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes fm-spin     { to { transform: rotate(360deg); } }
@keyframes fm-pop      { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* Каскад: блоки страницы въезжают по очереди, а не все разом.
   Задержка ставится классом, чтобы не плодить инлайн-стили. */
.stagger > * { animation: fm-rise 420ms var(--fm-ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 45ms; }
.stagger > *:nth-child(3) { animation-delay: 90ms; }
.stagger > *:nth-child(4) { animation-delay: 135ms; }
.stagger > *:nth-child(5) { animation-delay: 180ms; }
.stagger > *:nth-child(n+6) { animation-delay: 220ms; }