/* Компоненты тренажёра поверх токенов design/industrial-brutalist.css.
   Правила: border-radius 0, никаких размытых теней и градиентов, кегль из шкалы,
   отступы кратны 8px, оранжевый — только сигнал. */

/* ============ Раскладка ============ */

html { scroll-behavior: auto; }
body { min-height: 100vh; display: flex; flex-direction: column; }

.ib-shell {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--ib-space-5);
}
@media (max-width: 640px) {
  .ib-shell { padding: 0 var(--ib-space-3); }
}

.ib-header {
  border-bottom: var(--ib-rule-heavy) solid var(--ib-line);
  background: var(--ib-surface);
}
.ib-header__row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ib-space-3);
  padding: var(--ib-space-3) 0;
}
.ib-brand {
  display: flex;
  align-items: center;
  gap: var(--ib-space-2);
  font-family: var(--ib-font-display);
  font-size: var(--ib-size-s);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ib-text);
  text-decoration: none;
}
.ib-nav { display: flex; flex-wrap: wrap; gap: 0; }
.ib-nav a {
  display: inline-block;
  padding: var(--ib-space-2) var(--ib-space-3);
  border: var(--ib-rule) solid var(--ib-line);
  margin-left: calc(-1 * var(--ib-rule));
  font: var(--ib-size-3xs)/1 var(--ib-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ib-text);
  text-decoration: none;
}
.ib-nav a:first-child { margin-left: 0; }
.ib-nav a:hover { background: var(--ib-ink); color: var(--ib-plaster); }
.ib-nav a[aria-current="page"] { background: var(--ib-hazard); color: var(--ib-on-hazard); }
.ib-user {
  display: flex;
  align-items: center;
  gap: var(--ib-space-2);
  font: var(--ib-size-3xs)/1 var(--ib-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ib-text-muted);
}
.ib-user form { display: inline; }

main.ib-main { flex: 1; padding: var(--ib-space-4) 0 var(--ib-space-6); }

.ib-footer {
  border-top: var(--ib-rule) solid var(--ib-line);
  padding: var(--ib-space-3) 0;
  font: var(--ib-size-3xs)/1.4 var(--ib-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ib-text-muted);
}

/* ============ Заголовок раздела ============ */

.ib-section-head {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--ib-space-3);
  margin-bottom: var(--ib-space-4);
  padding-bottom: var(--ib-space-3);
  border-bottom: var(--ib-rule) solid var(--ib-line);
}
.ib-section-head h1 { margin: 0; font-size: var(--ib-size-l); }
@media (max-width: 640px) {
  .ib-section-head h1 { font-size: var(--ib-size-m); }
  h1 { font-size: var(--ib-size-l); }
  h2 { font-size: var(--ib-size-m); }
}
.ib-section-head .ib-stamp { align-self: flex-start; }
.ib-lead { color: var(--ib-text-muted); max-width: 68ch; }

/* ============ Кнопки и тулбар ============ */

.ib-toolbar { display: flex; flex-wrap: wrap; gap: var(--ib-space-2); align-items: center; }
.ib-toolbar form { display: inline; }
.ib-btn--small { padding: var(--ib-space-1) var(--ib-space-2); font-size: var(--ib-size-3xs); }
.ib-btn--danger { border-color: var(--ib-alarm); color: var(--ib-alarm); }
.ib-btn--danger:hover { background: var(--ib-alarm); color: var(--ib-plaster); }
.ib-btn[disabled], .ib-btn[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--ib-text-muted);
  border-color: var(--ib-line-hair);
  background: transparent;
}
.ib-btn--block { display: block; width: 100%; text-align: center; }
a.ib-btn { text-decoration: none; }

/* ============ Формы ============ */

.ib-form { display: grid; gap: var(--ib-space-3); max-width: 560px; }
.ib-form--wide { max-width: none; }
.ib-form__row { display: grid; gap: var(--ib-space-1); }
.ib-form__row--inline { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ib-space-3); }
select.ib-field { appearance: none; background-image: none; }
textarea.ib-field { min-height: 120px; resize: vertical; }
.ib-error {
  color: var(--ib-alarm);
  font: var(--ib-size-2xs)/1.4 var(--ib-font-body);
  margin: 0;
}
.ib-help { color: var(--ib-text-muted); font-size: var(--ib-size-2xs); margin: 0; }
.ib-field--error { border-color: var(--ib-alarm); }
.ib-check {
  display: flex;
  align-items: center;
  gap: var(--ib-space-2);
  font-size: var(--ib-size-2xs);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--ib-hazard); width: 16px; height: 16px; margin: 0; }

/* ============ Бейджи и статусы ============ */

.ib-badge {
  display: inline-block;
  padding: var(--ib-space-1) var(--ib-space-2);
  border: var(--ib-rule-hair) solid var(--ib-line);
  font: var(--ib-size-3xs)/1 var(--ib-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.ib-badge--signal { background: var(--ib-signal); color: var(--ib-plaster); border-color: var(--ib-signal); }
.ib-badge--hazard { background: var(--ib-hazard); color: var(--ib-on-hazard); border-color: var(--ib-hazard); }
.ib-badge--alarm { background: var(--ib-alarm); color: var(--ib-plaster); border-color: var(--ib-alarm); }
.ib-badge--caution { background: var(--ib-caution); color: var(--ib-ink); border-color: var(--ib-caution); }
.ib-badge--muted { color: var(--ib-text-muted); border-color: var(--ib-line-hair); }
.ib-badge--ink { background: var(--ib-ink); color: var(--ib-plaster); }

/* ============ Сообщения и предупреждения ============ */

.ib-messages { list-style: none; margin: 0 0 var(--ib-space-4); padding: 0; display: grid; gap: var(--ib-space-2); }
.ib-alert {
  border: var(--ib-rule) solid var(--ib-line);
  border-left-width: var(--ib-rule-bearing);
  padding: var(--ib-space-2) var(--ib-space-3);
  background: var(--ib-surface);
  font-size: var(--ib-size-2xs);
}
.ib-alert--success { border-left-color: var(--ib-signal); }
.ib-alert--error { border-left-color: var(--ib-alarm); }
.ib-alert--warning { border-left-color: var(--ib-caution); }
.ib-alert--info { border-left-color: var(--ib-hazard); }
.ib-alert p:last-child { margin-bottom: 0; }

/* ============ Карточки модулей ============ */

.ib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ib-space-3);
}
.ib-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--ib-rule) solid var(--ib-line);
  background: var(--ib-surface);
  color: var(--ib-text);
  text-decoration: none;
  min-height: 160px;
}
.ib-card__stamp { position: absolute; top: 0; left: 0; }
.ib-card__body { padding: var(--ib-space-5) var(--ib-space-3) var(--ib-space-3); flex: 1; }
.ib-card__title {
  font-family: var(--ib-font-display);
  font-size: var(--ib-size-s);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  margin: 0 0 var(--ib-space-2);
}
.ib-card__meta {
  border-top: var(--ib-rule-hair) solid var(--ib-line-hair);
  padding: var(--ib-space-2) var(--ib-space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ib-space-2);
  font: var(--ib-size-3xs)/1.4 var(--ib-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ib-text-muted);
}
a.ib-card:hover { outline: var(--ib-rule) solid var(--ib-hazard); outline-offset: -2px; }
.ib-card--locked { color: var(--ib-text-muted); }
.ib-card--locked .ib-card__stamp { background: var(--ib-concrete-400); }
.ib-card--current { box-shadow: var(--ib-slab); }
.ib-card--current .ib-card__stamp { background: var(--ib-hazard); color: var(--ib-on-hazard); }
.ib-card--passed { border-left: var(--ib-rule-bearing) solid var(--ib-signal); }

/* ============ Прогресс ============ */

.ib-progress-wrap { display: grid; gap: var(--ib-space-2); margin-bottom: var(--ib-space-4); }
.ib-progress-wrap .ib-progress span { min-width: 8px; }
.ib-progress-label {
  display: flex;
  justify-content: space-between;
  font: var(--ib-size-3xs)/1 var(--ib-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ib-text-muted);
}

/* ============ Слои модуля ============ */

.ib-layers { display: grid; gap: 0; }
.ib-layer {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--ib-space-3);
  align-items: center;
  border: var(--ib-rule) solid var(--ib-line);
  padding: var(--ib-space-3);
  background: var(--ib-surface);
}
.ib-layer + .ib-layer { border-top-width: 0; }
.ib-layer--locked { color: var(--ib-text-muted); }
.ib-layer--done { border-left: var(--ib-rule-bearing) solid var(--ib-signal); }
.ib-layer--open { border-left: var(--ib-rule-bearing) solid var(--ib-hazard); }
.ib-layer h3 { margin: 0 0 var(--ib-space-1); font-size: var(--ib-size-s); }
.ib-layer p { margin: 0; font-size: var(--ib-size-2xs); }
@media (max-width: 640px) {
  .ib-layer { grid-template-columns: 1fr; }
}

/* ============ Теория ============ */

.ib-theory { max-width: 68ch; font-size: var(--ib-size-xs); }
.ib-theory h2 { font-size: var(--ib-size-m); margin-top: var(--ib-space-4); }
.ib-theory h3 { font-size: var(--ib-size-s); margin-top: var(--ib-space-4); }
.ib-theory p, .ib-theory li { max-width: none; }
.ib-theory ul, .ib-theory ol { padding-left: var(--ib-space-4); margin: 0 0 var(--ib-space-3); }
.ib-theory blockquote {
  margin: 0 0 var(--ib-space-3);
  padding: var(--ib-space-2) var(--ib-space-3);
  border-left: var(--ib-rule-heavy) solid var(--ib-hazard);
  background: var(--ib-surface);
}
.ib-theory blockquote p:last-child { margin-bottom: 0; }
.ib-theory table { width: 100%; border-collapse: collapse; font-size: var(--ib-size-2xs); margin: 0 0 var(--ib-space-3); }
.ib-theory th { background: var(--ib-ink); color: var(--ib-plaster); text-align: left; }
.ib-theory th, .ib-theory td { border: var(--ib-rule-hair) solid var(--ib-line-hair); padding: var(--ib-space-1) var(--ib-space-2); vertical-align: top; }
.ib-theory tbody tr:nth-child(even) { background: var(--ib-surface-alt); }
.ib-theory img { display: block; max-width: 100%; height: auto; border: var(--ib-rule) solid var(--ib-line); margin: 0 0 var(--ib-space-3); }
.ib-theory code { font-family: var(--ib-font-mono); font-size: var(--ib-size-2xs); background: var(--ib-surface-alt); padding: 0 var(--ib-space-1); }
.ib-theory abbr[title] {
  text-decoration: underline dotted var(--ib-hazard);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: help;
}
.ib-table-wrap { overflow-x: auto; margin: 0 0 var(--ib-space-3); }
.ib-source {
  font: var(--ib-size-3xs)/1.4 var(--ib-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ib-text-muted);
}
.ib-source a { color: inherit; }

.ib-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ib-space-2);
  margin-top: var(--ib-space-4);
  padding-top: var(--ib-space-3);
  border-top: var(--ib-rule) solid var(--ib-line);
}

/* ============ Вопросы ============ */

.ib-question { border: var(--ib-rule) solid var(--ib-line); background: var(--ib-surface); }
.ib-question__head {
  display: flex;
  justify-content: space-between;
  gap: var(--ib-space-2);
  padding: var(--ib-space-2) var(--ib-space-3);
  border-bottom: var(--ib-rule-hair) solid var(--ib-line-hair);
  font: var(--ib-size-3xs)/1 var(--ib-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ib-text-muted);
}
.ib-question__body { padding: var(--ib-space-3); }
.ib-question__text { font-size: var(--ib-size-s); line-height: 1.3; margin: 0 0 var(--ib-space-3); max-width: none; white-space: pre-line; }
.ib-choices { display: grid; gap: 0; margin: 0 0 var(--ib-space-3); padding: 0; list-style: none; }
.ib-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--ib-space-2);
  padding: var(--ib-space-2) var(--ib-space-3);
  border: var(--ib-rule) solid var(--ib-line);
  cursor: pointer;
}
.ib-choice + .ib-choice { border-top-width: 0; }
.ib-choice:hover { background: var(--ib-surface-alt); }
.ib-choice input { margin-top: 4px; flex: none; }
.ib-choice--correct { border-left: var(--ib-rule-bearing) solid var(--ib-signal); }
.ib-choice--wrong { border-left: var(--ib-rule-bearing) solid var(--ib-alarm); }
.ib-choice--chosen { background: var(--ib-surface-alt); }
.ib-choice__key { font: var(--ib-size-3xs)/1.6 var(--ib-font-mono); text-transform: uppercase; color: var(--ib-text-muted); min-width: 16px; }

.ib-match { display: grid; gap: var(--ib-space-2); margin: 0 0 var(--ib-space-3); }
.ib-match__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ib-space-2);
  align-items: center;
  border: var(--ib-rule) solid var(--ib-line);
  padding: var(--ib-space-2);
}
@media (max-width: 640px) { .ib-match__row { grid-template-columns: 1fr; } }

.ib-order { list-style: none; margin: 0 0 var(--ib-space-3); padding: 0; display: grid; gap: 0; }
.ib-order li {
  display: flex;
  align-items: center;
  gap: var(--ib-space-2);
  border: var(--ib-rule) solid var(--ib-line);
  padding: var(--ib-space-1) var(--ib-space-2);
}
.ib-order li + li { border-top-width: 0; }
.ib-order__num { font: var(--ib-size-3xs)/1 var(--ib-font-mono); min-width: 24px; color: var(--ib-text-muted); }
.ib-order__text { flex: 1; }
.ib-order__btns { display: flex; gap: var(--ib-space-1); }

.ib-verdict {
  border: var(--ib-rule) solid var(--ib-line);
  border-left-width: var(--ib-rule-bearing);
  padding: var(--ib-space-3);
  margin: 0 0 var(--ib-space-3);
  background: var(--ib-surface);
}
.ib-verdict--ok { border-left-color: var(--ib-signal); }
.ib-verdict--bad { border-left-color: var(--ib-alarm); }
.ib-verdict__title {
  font: var(--ib-size-3xs)/1 var(--ib-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--ib-space-2);
}
.ib-verdict p:last-child { margin-bottom: 0; }

/* ============ Результат теста ============ */

.ib-score {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ib-space-3);
  align-items: center;
  border: var(--ib-rule) solid var(--ib-line);
  padding: var(--ib-space-3);
  margin: 0 0 var(--ib-space-4);
  background: var(--ib-surface);
}
.ib-score__num {
  font-family: var(--ib-font-display);
  font-size: var(--ib-size-xl);
  line-height: 0.95;
  text-transform: uppercase;
}
.ib-score--ok .ib-score__num { color: var(--ib-signal); }
.ib-score--bad .ib-score__num { color: var(--ib-alarm); }
@media (max-width: 640px) { .ib-score__num { font-size: var(--ib-size-l); } }

.ib-timer {
  font: var(--ib-size-s)/1 var(--ib-font-mono);
  letter-spacing: 0.08em;
  padding: var(--ib-space-1) var(--ib-space-2);
  border: var(--ib-rule) solid var(--ib-line);
}
.ib-timer--warn { background: var(--ib-caution); color: var(--ib-ink); }
.ib-timer--over { background: var(--ib-alarm); color: var(--ib-plaster); }

.ib-qnav { display: flex; flex-wrap: wrap; gap: var(--ib-space-1); margin: 0 0 var(--ib-space-3); }
.ib-qnav a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: var(--ib-rule) solid var(--ib-line);
  font: var(--ib-size-3xs)/1 var(--ib-font-mono);
  color: var(--ib-text);
  text-decoration: none;
}
.ib-qnav a[data-answered="1"] { background: var(--ib-ink); color: var(--ib-plaster); }
.ib-qnav a[aria-current="page"] { outline: var(--ib-rule) solid var(--ib-hazard); outline-offset: -2px; }

/* ============ Данные ============ */

.ib-kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--ib-space-1) var(--ib-space-3); margin: 0 0 var(--ib-space-3); font-size: var(--ib-size-2xs); }
.ib-kv dt { font: var(--ib-size-3xs)/1.6 var(--ib-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ib-text-muted); }
.ib-kv dd { margin: 0; }

.ib-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: 0 0 var(--ib-space-4); }
.ib-stat { border: var(--ib-rule) solid var(--ib-line); padding: var(--ib-space-3); background: var(--ib-surface); }
.ib-stat + .ib-stat { border-left-width: 0; }
@media (max-width: 640px) { .ib-stat + .ib-stat { border-left-width: var(--ib-rule); border-top-width: 0; } }
.ib-stat__label { font: var(--ib-size-3xs)/1 var(--ib-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ib-text-muted); margin: 0 0 var(--ib-space-2); }
.ib-stat__value { font-family: var(--ib-font-display); font-size: var(--ib-size-l); line-height: 0.95; text-transform: uppercase; }

.ib-table td.num, .ib-table th.num { text-align: right; }
.ib-table a { color: inherit; }
.ib-table--rows tbody tr:hover { outline: var(--ib-rule) solid var(--ib-hazard); outline-offset: -2px; }
.ib-bar { display: block; height: 8px; background: var(--ib-surface-alt); border: var(--ib-rule-hair) solid var(--ib-line-hair); }
.ib-bar span { display: block; height: 100%; background: var(--ib-alarm); }

.ib-code {
  display: block;
  font: var(--ib-size-2xs)/1.5 var(--ib-font-mono);
  padding: var(--ib-space-2) var(--ib-space-3);
  border: var(--ib-rule) solid var(--ib-line);
  background: var(--ib-surface);
  word-break: break-all;
  user-select: all;
}

.ib-list { margin: 0 0 var(--ib-space-3); padding-left: var(--ib-space-4); }
.ib-list li { margin-bottom: var(--ib-space-1); }
.ib-list--plain { list-style: none; padding-left: 0; }
.ib-list--plain li { border-bottom: var(--ib-rule-hair) solid var(--ib-line-hair); padding: var(--ib-space-1) 0; }

.ib-login { max-width: 420px; margin: var(--ib-space-6) auto; }
.ib-login h1 { font-size: var(--ib-size-l); }

.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; }

.ib-theme-toggle { min-width: 40px; }