/* ════════════════════════════════════════════════════════════
   INTEGRONIX — ВЕБ-ФУНДАМЕНТ · единственный источник токенов
   Закрывает находки аудита: B-05 (токены в одном файле),
   A-03 (контрастно-безопасные текстовые роли), A-04 (состояния),
   B-09 (шкала трекинга), B-11 (пол типографики 12px).
   Подключение: <link rel="stylesheet" href="integronix-web.css">
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── Палитра P-Slate (канон Brand Portal) ── */
  --navy:      #112239;
  --navy-alt:  #1A2B4A;
  --navy-deep: #0A1729;   /* легализован: фотопанели, hero-подложки */
  --steel:     #8B9BB4;   /* ТОЛЬКО декор: линии, орнамент. НЕ текст */
  --grey:      #C5CDD6;
  --hair:      #D9DDE2;
  --white:     #FAFBFC;
  --black:     #0A0E14;
  --teal:      #4A8FA3;   /* ТОЛЬКО декор: точки, линейки. НЕ текст */

  /* ── Текстовые роли (A-03: все ≥ 4.5:1 на своих фонах) ── */
  --text-primary:   #0A0E14;            /* 17:1   */
  --text-secondary: #5C6B82;            /* 5.2:1  */
  --text-accent:    #3A7488;            /* 5.0:1 — eyebrow, ссылки-акценты */
  --text-on-navy:        rgba(255,255,255,.92);  /* 14:1 */
  --text-on-navy-dim:    rgba(255,255,255,.62);  /* 7:1 — минимум для текста на navy */

  /* ── Шкала поверхностей (вместо 4 случайных --bg) ── */
  --surface-0: #FAFBFC;   /* страница, карточки */
  --surface-1: #F2F3F5;   /* подложки изображений, зебра таблиц */
  --surface-2: #EDEEF0;   /* фоновые секции */

  /* ── Служебные статусы (закон «no red») ── */
  --status-ok:    #2E7D5B;
  --status-warn:  #B5803A;
  --status-error: #B5532A;
  --status-error-text: #9A4523;  /* 5.5:1 на белом — для текста ошибок */

  /* ── Типографика ── */
  --font-sans: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Веб-шкала (десктоп; мобильные значения — в @media) */
  --t-display: 64px;  --t-display-lh: 1.05;
  --t-h1:      44px;  --t-h1-lh: 1.12;
  --t-h2:      30px;  --t-h2-lh: 1.2;
  --t-h3:      20px;  --t-h3-lh: 1.3;
  --t-body-l:  17px;  --t-body-l-lh: 1.65;
  --t-body:    15px;  --t-body-lh: 1.65;
  --t-caption: 13px;  --t-caption-lh: 1.5;   /* пол 12px */
  --t-overline:12px;  --t-overline-lh: 1.4;  /* пол 11px */
  --t-data:    14px;  --t-data-lh: 1.5;

  /* Трекинг словного знака по размерам (B-09) */
  --wm-track-large: .06em;   /* ≥ 28px */
  --wm-track-mid:   .065em;  /* 14–27px */
  --wm-track-small: .12em;   /* ≤ 13px служебные */

  /* ── Отступы: шаг 4px ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ── Motion (раздел 02 мастер-плана) ── */
  --m-instant: 100ms;
  --m-fast:    180ms;
  --m-normal:  280ms;
  --m-slow:    450ms;
  --ease-std:  cubic-bezier(.2,.8,.2,1);
  --ease-emph: cubic-bezier(.16,1,.3,1);

  /* ── Прочее ── */
  --container: 1280px;
  --hit-min: 44px;           /* минимальная зона нажатия */
  --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--navy);
  --focus-ring-dark: 0 0 0 2px var(--navy), 0 0 0 4px var(--white);
  --shadow-raised: 0 8px 32px rgba(10,14,20,.14);  /* только поднятые слои */
}

/* ── База ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--text-primary);
  background: var(--surface-0);
  font-feature-settings: 'tnum' 1;
}

/* ── Типографические роли ── */
.t-display { font-size: var(--t-display); line-height: var(--t-display-lh); font-weight: 600; letter-spacing: -.022em; color: var(--navy); text-wrap: balance; }
.t-h1      { font-size: var(--t-h1); line-height: var(--t-h1-lh); font-weight: 600; letter-spacing: -.018em; color: var(--navy); text-wrap: balance; }
.t-h2      { font-size: var(--t-h2); line-height: var(--t-h2-lh); font-weight: 600; letter-spacing: -.012em; color: var(--navy); text-wrap: balance; }
.t-h3      { font-size: var(--t-h3); line-height: var(--t-h3-lh); font-weight: 600; letter-spacing: -.008em; color: var(--navy); }
.t-body-l  { font-size: var(--t-body-l); line-height: var(--t-body-l-lh); }
.t-body    { font-size: var(--t-body); line-height: var(--t-body-lh); }
.t-caption { font-size: var(--t-caption); line-height: var(--t-caption-lh); color: var(--text-secondary); }
.t-overline{ font-family: var(--font-mono); font-size: var(--t-overline); line-height: var(--t-overline-lh); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-accent); }
.t-data    { font-family: var(--font-mono); font-size: var(--t-data); line-height: var(--t-data-lh); font-weight: 500; color: var(--navy); }

@media (max-width: 767px) {
  :root {
    --t-display: 40px; --t-h1: 32px; --t-h2: 24px; --t-h3: 18px;
    --t-overline: 11px;
  }
}

/* ── Фокус: единое кольцо (A-04) ── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.on-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  box-shadow: var(--focus-ring-dark);
}

/* ── Кнопки ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 32px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background var(--m-fast) var(--ease-std), border-color var(--m-fast) var(--ease-std), color var(--m-fast) var(--ease-std);
  user-select: none;
}
.btn-sm { min-height: 40px; padding: 0 22px; font-size: 11px; }

.btn-primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-primary:hover  { background: var(--navy-alt); border-color: var(--navy-alt); }
.btn-primary:active { background: var(--navy-deep); border-color: var(--navy-deep); }

.btn-ghost { background: transparent; color: var(--navy); border-color: var(--grey); }
.btn-ghost:hover  { border-color: var(--navy); }
.btn-ghost:active { background: var(--surface-1); border-color: var(--navy); }

.btn-text {
  background: none; border: none; min-height: var(--hit-min); padding: 0 4px;
  color: var(--navy); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--grey); 
}
.btn-text:hover { text-decoration-color: var(--navy); }

.btn[disabled], .btn.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { pointer-events: none; }
.btn .spinner {
  width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: inx-spin .7s linear infinite;
}
@keyframes inx-spin { to { transform: rotate(360deg); } }

/* ── Формы ── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--navy); }
.field-hint  { font-size: 12px; color: var(--text-secondary); }
.input, .select, .textarea {
  font-family: var(--font-sans); font-size: 15px; color: var(--text-primary);
  min-height: 56px; padding: 0 16px;
  background: var(--surface-0); border: 1px solid var(--grey);
  transition: border-color var(--m-fast) var(--ease-std);
  width: 100%;
}
.textarea { min-height: 120px; padding: 14px 16px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-secondary); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--navy); }
.input[disabled] { background: var(--surface-1); color: var(--text-secondary); cursor: not-allowed; }
.field.is-error .input, .field.is-error .textarea, .field.is-error .select { border-color: var(--status-error); }
.field-error { font-size: 12.5px; color: var(--status-error-text); }

.check { display: inline-flex; align-items: flex-start; gap: 12px; min-height: var(--hit-min); cursor: pointer; padding: 10px 0; }
.check input { width: 20px; height: 20px; accent-color: var(--navy); margin-top: 1px; flex-shrink: 0; cursor: pointer; }
.check span { font-size: 14px; line-height: 1.5; }

/* ── Каталожные атомы ── */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 14px; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: var(--navy);
  background: var(--surface-0); border: 1px solid var(--grey);
  cursor: pointer; text-decoration: none;
  transition: border-color var(--m-fast) var(--ease-std);
}
.chip:hover { border-color: var(--navy); }
.chip.is-active { background: var(--navy); color: var(--white); border-color: var(--navy); }
.chip .x { font-size: 15px; line-height: 1; opacity: .6; }

.badge-cert {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); border: 1px solid var(--grey); text-decoration: none;
}
.badge-cert:hover { border-color: var(--navy); }
.chip-oem {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary);
}

/* Карточка продукта — стандарт */
.pcard {
  display: flex; flex-direction: column;
  background: var(--surface-0); border: 1px solid var(--hair);
  text-decoration: none; color: inherit; position: relative;
  transition: border-color var(--m-fast) var(--ease-std), transform var(--m-fast) var(--ease-std);
}
.pcard:hover { border-color: var(--navy); transform: translateY(-2px); }
.pcard-img {
  aspect-ratio: 4 / 3; background: var(--surface-1);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--hair); position: relative;
}
.pcard-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pcard-cat { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-accent); }
.pcard-name { font-size: 17px; font-weight: 600; color: var(--navy); line-height: 1.3; letter-spacing: -.005em; }
.pcard-sku { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.pcard-specs { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 4px; }
.pcard-spec { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.pcard-spec .k { color: var(--text-secondary); }
.pcard-spec .v { font-family: var(--font-mono); color: var(--navy); text-align: right; }
.pcard-foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; }
.pcard-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; opacity: 0; transition: opacity var(--m-fast) var(--ease-std); }
.pcard:hover .pcard-actions, .pcard:focus-within .pcard-actions { opacity: 1; }
.pcard-act {
  min-width: var(--hit-min); min-height: var(--hit-min);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-0); border: 1px solid var(--grey);
  font-size: 12px; font-weight: 600; color: var(--navy); cursor: pointer; padding: 0 12px;
}
.pcard-act:hover { border-color: var(--navy); }

/* Строка документа */
.docrow {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center;
  min-height: 64px; padding: 10px 16px 10px 12px;
  border: 1px solid var(--hair); border-top-width: 0;
  text-decoration: none; color: inherit;
  transition: border-color var(--m-fast) var(--ease-std), background var(--m-fast) var(--ease-std);
}
.docrow:first-of-type, .docrow.is-first { border-top-width: 1px; }
.docrow:hover { background: var(--surface-1); }
.docrow-ic {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--grey);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--navy);
}
.docrow-name { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.35; }
.docrow-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.docrow-dl { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--navy); letter-spacing: .04em; white-space: nowrap; }

/* Таблица спецификаций */
.spec-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--navy); }
.spec-table .group td {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-accent);
  padding: 20px 16px 8px 0; border-bottom: 1px solid var(--grey);
}
.spec-table td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--hair); font-size: 14px; vertical-align: top; }
.spec-table .k { color: var(--text-secondary); width: 42%; }
.spec-table .v { font-family: var(--font-mono); font-size: 13.5px; color: var(--navy); }
.spec-table tr:nth-child(even):not(.group) { background: transparent; }

/* ── Навигационные атомы ── */
.crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.crumbs a { color: var(--text-secondary); text-decoration: none; min-height: var(--hit-min); display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .sep { color: var(--grey); }
.crumbs .here { color: var(--navy); font-weight: 600; }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--hair); }
.tab {
  min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer;
  transition: color var(--m-fast) var(--ease-std), border-color var(--m-fast) var(--ease-std);
}
.tab:hover { color: var(--navy); }
.tab.is-active { color: var(--navy); font-weight: 600; border-bottom-color: var(--navy); }

.lang { display: flex; gap: 2px; }
.lang a {
  min-width: var(--hit-min); min-height: var(--hit-min);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--text-secondary); text-decoration: none; text-transform: uppercase;
}
.lang a:hover { color: var(--navy); }
.lang a.is-active { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

.pager { display: flex; gap: 6px; align-items: center; }
.pager a, .pager span {
  min-width: var(--hit-min); min-height: var(--hit-min);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; color: var(--navy);
  text-decoration: none; border: 1px solid transparent;
}
.pager a:hover { border-color: var(--grey); }
.pager .is-current { border: 1px solid var(--navy); font-weight: 600; }
.pager .ellipsis { color: var(--text-secondary); }

/* ── Обратная связь ── */
.toast {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--navy); color: var(--text-on-navy);
  padding: 14px 20px; font-size: 14px; box-shadow: var(--shadow-raised);
}
.toast .dot { width: 7px; height: 7px; background: var(--teal); flex-shrink: 0; }

.empty {
  border: 1px dashed var(--grey); padding: 48px 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.skeleton {
  background: linear-gradient(90deg, var(--surface-1) 25%, var(--surface-2) 50%, var(--surface-1) 75%);
  background-size: 200% 100%; animation: inx-shimmer 1.4s ease infinite;
}
@keyframes inx-shimmer { to { background-position: -200% 0; } }

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