/* Компоненты. Каждое интерактивное состояние описано явно.
 * Классы .is-hover / .is-focus / .is-active существуют для демонстрационной
 * страницы состояний и дублируют настоящие псевдоклассы.
 */

/* ══ Навигация — N1b, три секции ══════════════════════════════════════════ */
.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-sm) var(--container-pad);
  min-height: 64px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 0 auto;
  color: var(--color-ink);
}
.wordmark__mark { width: 43px; height: 40px; }
.wordmark__text { display: grid; }
.wordmark__short {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display-bold);
  line-height: 1;
  letter-spacing: 0.02em;
}
.wordmark__full {
  font-size: var(--text-2xs);
  line-height: 1.25;
  color: var(--color-muted);
}

.nav__rail {
  display: none;
  gap: var(--space-lg);
  margin-inline-start: auto;
}

.nav__link {
  position: relative;
  padding-block: var(--space-2xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-body-md);
  white-space: nowrap;              /* лейбл навигации не переносится никогда */
  transition: color var(--dur-micro) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: -2px;
  inset-inline: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-short) var(--ease-out);
}
.nav__link:hover, .nav__link.is-hover { color: var(--color-ink); }
.nav__link:hover::after, .nav__link.is-hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--color-accent); }
.nav__link.is-active::after { transform: scaleX(1); }

.nav__cta { display: none; flex: 0 0 auto; }

.nav__toggle {
  display: grid;
  place-content: center;
  gap: 5px;
  margin-inline-start: auto;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav__toggle-bar {
  width: 18px; height: 2px;
  background: var(--color-ink);
  transition: transform var(--dur-short) var(--ease-out);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.nav__sheet {
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
  background: var(--color-paper-2);
}
.nav__sheet[hidden] { display: none; }
.nav__sheet nav {
  display: grid;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-xs) var(--container-pad) var(--space-md);
}
.nav__sheet-link {
  padding-block: var(--space-sm);
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--color-ink);
  font-size: var(--text-base);
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
}
.nav__sheet-link:last-child { border-block-end: 0; }

@media (min-width: 60rem) {
  .nav__rail { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__sheet { display: none !important; }
}

/* ══ Кнопки — восемь состояний ════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-body-bold);
  line-height: 1;
  white-space: nowrap;              /* лейбл кнопки не переносится никогда */
  cursor: pointer;
  text-align: center;
  /* свойства перечислены поимённо: transition: all — именованный анти-паттерн */
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}

.btn--sm { min-height: 38px; padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); }

.btn--primary {
  background: var(--color-paper-2);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn--primary:hover, .btn--primary.is-hover {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.btn--primary:active, .btn--primary.is-active { transform: translateY(1px); }

.btn--secondary {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-ink);
}
.btn--secondary:hover, .btn--secondary.is-hover { border-color: var(--color-ink-2); background: var(--color-paper-2); }
.btn--secondary:active, .btn--secondary.is-active { transform: translateY(1px); }

.btn--text {
  min-height: auto;
  padding: var(--space-2xs) 0;
  border: 0;
  color: var(--color-accent);
  background: none;
  border-block-end: 1px solid var(--color-accent-dim);
  border-radius: 0;
}
.btn--text:hover, .btn--text.is-hover { border-block-end-color: var(--color-accent); }

.btn:focus-visible, .btn.is-focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.btn[data-state="loading"], .btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn[data-state="loading"]::after, .btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentcolor;
  border-block-start-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn[data-state="error"], .btn.is-error { border-color: var(--color-signal-warn); color: var(--color-signal-warn); }
.btn[data-state="success"], .btn.is-success { border-color: var(--color-signal-ok); color: var(--color-signal-ok); }

@media (pointer: coarse) { .btn { min-height: 48px; } }

/* ══ Панель ═══════════════════════════════════════════════════════════════ */
.panel {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
}
/* Глубина светлотой, не тенью: тень на тёмном даёт ореол */
.panel--raised { background: var(--color-paper-3); }

/* ══ Карточка изделия ═════════════════════════════════════════════════════ */
.card {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.card:hover { background: var(--color-paper-3); border-color: var(--color-rule); }
.card:focus-within { border-color: var(--color-accent); }

.card__code { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700;
              letter-spacing: var(--tracking-label); color: var(--color-accent); }
.card__name { font-family: var(--font-display); font-size: var(--text-lg);
              font-weight: var(--weight-display-bold); color: var(--color-ink); }
.card__purpose { font-size: var(--text-sm); color: var(--color-ink-2); margin: 0; }
.card__meta { display: grid; gap: var(--space-2xs); padding-block-start: var(--space-sm);
              border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.card__meta-row { display: flex; justify-content: space-between; gap: var(--space-md);
                  font-size: var(--text-xs); }
.card__meta-key { color: var(--color-muted); }
.card__meta-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
                  color: var(--color-ink); text-align: end; }
.card__link { justify-self: start; }
/* Ссылка растянута на всю карточку, но текст ссылки остаётся осмысленным */
.card__link::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }

/* ══ Таблица характеристик ════════════════════════════════════════════════ */
.spec { width: 100%; border-collapse: collapse; }
.spec caption { text-align: start; padding-block-end: var(--space-md); }
.spec th, .spec td {
  padding: var(--space-sm) 0;
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
  text-align: start;
  vertical-align: baseline;
}
.spec th { font-weight: var(--weight-body); color: var(--color-muted); font-size: var(--text-sm); }
.spec td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.spec td.spec__unit { color: var(--color-muted); width: 6rem; }
.spec tr:hover td, .spec tr:hover th { background: var(--color-paper-2); }

/* Честная дыра вместо выдуманного числа */
.spec__pending { color: var(--color-muted); font-family: var(--font-body); }
.spec__pending::before {
  content: "—";
  margin-inline-end: var(--space-xs);
  color: var(--color-rule);
}

@media (max-width: 40rem) {
  /* Таблица перестраивается в список, а не уезжает горизонтально */
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec tr { padding-block: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule-2); }
  .spec th, .spec td { border: 0; padding: 0; }
  .spec th { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label);
             font-family: var(--font-mono); }
  .spec td.spec__unit { display: inline; width: auto; margin-inline-start: var(--space-2xs); }
  .spec td.spec__value { display: inline; font-size: var(--text-base); }
}

/* ══ Индикатор состояния ══════════════════════════════════════════════════ */
.indicator { display: inline-flex; align-items: center; gap: var(--space-xs);
             font-size: var(--text-xs); color: var(--color-ink-2); }
.indicator__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-signal-ok);
  /* единственное разрешённое свечение на сайте — светодиод диаметром 6 px */
  box-shadow: 0 0 6px var(--color-signal-ok);
  flex: 0 0 auto;
}
.indicator--warn .indicator__dot { background: var(--color-signal-warn); box-shadow: 0 0 6px var(--color-signal-warn); }
/* Цвет никогда не единственный сигнал — рядом всегда есть слово */

/* ══ Формы ════════════════════════════════════════════════════════════════ */
.form { display: grid; gap: var(--space-lg); max-width: 34rem; }
.field { display: grid; gap: var(--space-2xs); }
.field__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.field__req { color: var(--color-accent); }
.field__input, .field__area, .field__select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  min-height: 44px;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.field__area { min-height: 8rem; resize: vertical; line-height: var(--leading-body); }
.field__input::placeholder, .field__area::placeholder { color: var(--color-muted); }
.field__input:hover, .field__area:hover { border-color: var(--color-ink-2); }
.field__input:focus-visible, .field__area:focus-visible, .field__select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.field__hint { font-size: var(--text-xs); color: var(--color-muted); }
.field__error { font-size: var(--text-xs); color: var(--color-signal-warn); }
.field__error:empty { display: none; }
.field[data-invalid="true"] .field__input,
.field[data-invalid="true"] .field__area,
.input-validation-error {
  border-color: var(--color-signal-warn) !important;
}

.field--check { grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: start; }
.field--check input[type="checkbox"] {
  width: 20px; height: 20px; margin: 2px 0 0;
  accent-color: var(--color-accent);
  flex: 0 0 auto;
}
.field--check label { font-size: var(--text-xs); color: var(--color-ink-2); line-height: 1.5; }

/* Ловушка для ботов: настоящему пользователю поле не видно и недоступно */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.notice {
  padding: var(--space-md) var(--space-lg);
  border-inline-start: 2px solid var(--color-accent);
  background: var(--color-paper-2);
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
}
.notice--ok   { border-inline-start-color: var(--color-signal-ok); }
.notice--warn { border-inline-start-color: var(--color-signal-warn); }

/* ══ Обязательный блок Фонда — светлая полоса ═════════════════════════════
   Логотип Фонда — чёрный текст с триколором. На графите он исчезает,
   поэтому фон здесь обязателен светлый. Это не стилистика, а физика. */
.fund {
  background: var(--color-paper-light);
  color: var(--color-ink-inverse);
  padding-block: var(--space-2xl);
}
/* Логотипы Фонда и Платформы обязательны по договору и требуют светлого фона:
   у логотипа Фонда чёрный текст, на графите он исчезает. */
.fund__inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.fund__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xl);
}
.fund__logo-fasie { height: 72px; width: auto; }
.fund__logo-platform { height: 100px; width: auto; }
.fund__text {
  margin: 0;
  max-width: 62ch;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink-inverse);
}
@media (min-width: 60rem) {
  .fund__inner { grid-template-columns: auto 1fr; gap: var(--space-2xl); }
}

/* ══ Подвал — Ft1 mast-headed ═════════════════════════════════════════════ */
.foot {
  margin-block-start: var(--space-3xl);
  padding-block: var(--space-2xl) var(--space-xl);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
  background: var(--color-paper);
}
.foot__mast { display: grid; gap: var(--space-xl); padding-block-end: var(--space-xl); }
.foot__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-display-bold);
  letter-spacing: 0.02em;
  color: var(--color-ink);
}
.foot__tagline { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.foot__link {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  white-space: nowrap;
  border-block-end: 1px solid transparent;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.foot__link:hover { color: var(--color-ink); border-block-end-color: var(--color-accent-dim); }

@media (min-width: 60rem) {
  .foot__mast { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; gap: var(--space-2xl); }
  .foot__links { justify-content: flex-end; align-content: start; }
}

/* Реквизиты — моноширинная колонка учётных данных.
   Блок используется и в широком подвале, и в узкой колонке страницы контактов,
   поэтому число колонок считает auto-fit по фактической ширине, а не медиазапрос
   по ширине окна: иначе в узком контейнере значение получало 24 px
   и рассыпалось по одной букве в строку. */
.colophon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  align-content: start;
  gap: var(--space-2xs) var(--space-xl);
  margin: 0;
  padding-block: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
  font-size: var(--text-xs);
}
.colophon__row { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--space-md); }
.colophon__key { margin: 0; color: var(--color-muted); }
.colophon__val {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-2);
  /* break-word, а не anywhere: anywhere обнуляет min-content ширины,
     и колонка грида схлопывается до одного символа. */
  overflow-wrap: break-word;
}
@media (max-width: 40rem) { .colophon__row { grid-template-columns: minmax(0, 1fr); gap: 0; } }

.foot__legal {
  margin: 0;
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ══ Хлебные крошки ═══════════════════════════════════════════════════════ */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); font-size: var(--text-xs);
          color: var(--color-muted); margin-block-end: var(--space-lg); }
.crumbs a { color: var(--color-muted); }
.crumbs a:hover { color: var(--color-ink-2); }
.crumbs__sep { color: var(--color-rule); }