/*
 * AT1315 Activity Studio — палитра Carbon: White и Gray 100.
 *
 * Обе темы объявлены один раз через light-dark(): первое значение — светлая,
 * второе — тёмная. Выбор делает `color-scheme` на :root. По умолчанию там
 * `light dark`, то есть решает система; переключатель в шапке проставляет
 * жёсткое `light` или `dark` инлайном и тем самым переопределяет систему.
 *
 * Литералы цвета допустимы только в этом файле и в print.css — это проверяет тест.
 */
:root {
  color-scheme: light dark;

  --cds-background: light-dark(#ffffff, #161616);
  --cds-background-hover: light-dark(#e8e8e8, #292929);
  --cds-layer-01: light-dark(#f4f4f4, #262626);
  --cds-layer-02: light-dark(#ffffff, #393939);
  --cds-layer-03: light-dark(#e0e0e0, #525252);
  --cds-layer-hover-01: light-dark(#e8e8e8, #333333);
  --cds-layer-hover-02: light-dark(#e5e5e5, #474747);
  --cds-border-subtle-00: light-dark(#e0e0e0, #393939);
  --cds-border-subtle-01: light-dark(#c6c6c6, #525252);
  --cds-border-strong-01: #8d8d8d;
  --cds-border-interactive: #0f62fe;
  --cds-text-primary: light-dark(#161616, #f4f4f4);
  --cds-text-secondary: light-dark(#525252, #c6c6c6);
  /*
   * В тёмной теме #8d8d8d давал 3.48:1 на --cds-layer-02 — ниже AA для мелкого
   * текста, а токен используется не только для placeholder, но и для подписей
   * в контекстной панели и диагностической сетке. Поднято до #a8a8a8 (5.06:1).
   */
  --cds-text-placeholder: light-dark(#6f6f6f, #a8a8a8);
  --cds-text-disabled: light-dark(#c6c6c6, #6f6f6f);
  --cds-link-primary: light-dark(#0f62fe, #78a9ff);
  --cds-link-primary-hover: light-dark(#0043ce, #a6c8ff);
  --cds-icon-primary: light-dark(#161616, #f4f4f4);
  --cds-icon-secondary: light-dark(#525252, #c6c6c6);
  --cds-interactive: #0f62fe;
  --cds-interactive-hover: #0353e9;
  --cds-focus: light-dark(#0f62fe, #ffffff);
  --cds-support-success: light-dark(#24a148, #42be65);
  --cds-support-info: light-dark(#0f62fe, #4589ff);
  --cds-support-warning: #f1c21b;
  --cds-support-error: light-dark(#da1e28, #fa4d56);
  --cds-support-success-inverse: #24a148;
  --cds-support-warning-inverse: #f1c21b;
  --cds-support-error-inverse: #da1e28;
  --cds-chart-blue: light-dark(#0f62fe, #4589ff);
  --cds-chart-green: light-dark(#198038, #42be65);
  --cds-chart-purple: light-dark(#6929c4, #be95ff);
  --cds-chart-red: light-dark(#da1e28, #fa4d56);

  /*
   * Поверхности и текст состояний. Раньше эти значения стояли литералами по
   * девяти файлам компонентов; смысл цвета читался только из контекста правила.
   */
  --surface-shell: light-dark(#ffffff, #0b0b0b);
  --surface-page-heading: light-dark(#f4f4f4, #0f0f0f);
  --surface-notification-success: light-dark(#defbe6, #1c2b1f);
  --surface-notification-warning: light-dark(#fcf4d6, #302a12);
  --surface-notification-error: light-dark(#fff1f1, #351214);
  --surface-notification-info: light-dark(#edf5ff, #1b2738);
  --surface-tag-success: light-dark(#a7f0ba, #1c4721);
  --surface-tag-warning: light-dark(#fddc69, #5c4405);
  --surface-tag-error: light-dark(#ffd7d9, #750e13);
  --surface-selected: light-dark(#edf5ff, #1d2e4a);
  --surface-drop-active: light-dark(#edf5ff, #1c2c48);
  --surface-channel-gamma: light-dark(#edf5ff, #132238);
  --surface-channel-beta: light-dark(#f6f2ff, #251a35);

  /*
   * Плашка вердикта остаётся насыщенной в обеих темах: это не тег в таблице,
   * а единственный элемент, который оператор видит первым. Поэтому у неё
   * собственные поверхности и всегда светлый текст.
   */
  --surface-state-success: #1c4721;
  --surface-state-warning: #5c4405;
  --surface-state-error: #750e13;
  /* Совпадает с углом фотографии прибора, чтобы плита не отличалась от её фона. */
  --surface-instrument: light-dark(#d5d5d6, #0b0b0b);

  --text-on-success: light-dark(#0e6027, #a7f0ba);
  --text-on-warning: light-dark(#684e00, #fddc69);
  --text-on-error: light-dark(#a2191f, #ffb3b8);
  --text-on-color: #ffffff;
  --text-on-interactive-soft: #d0e2ff;
  --text-on-state: #f4f4f4;

  --button-secondary: #393939;
  --button-secondary-hover: #4c4c4c;
  --button-disabled: light-dark(#c6c6c6, #393939);
  --button-disabled-text: light-dark(#8d8d8d, #6f6f6f);
  --button-ghost-hover: light-dark(rgba(15, 98, 254, 0.12), rgba(69, 137, 255, 0.12));
  --button-on-color: #ffffff;
  --button-on-color-hover: #e8e8e8;
  --button-on-color-text: #161616;
  --button-on-color-disabled: #8d8d8d;
  --button-on-color-disabled-text: #525252;

  --accent-adaptive: #0043ce;
  --accent-legacy: #8a3ffc;
  --accent-self-check: #002d9c;
  --gradient-run-start: #0f3b84;
  --scrim: light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.66));
  --shadow-color: light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));

  --header-height: 48px;
  --side-nav-width: 256px;
  --mobile-nav-height: 56px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font-sans: 'IBM Plex Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  background: var(--cds-background);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--cds-background);
  color: var(--cds-text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
}
button,
select,
input {
  font: inherit;
}
button {
  color: inherit;
}
a {
  color: var(--cds-link-primary);
}
code {
  padding: 2px 4px;
  background: var(--cds-layer-02);
  font-family: var(--font-mono);
  font-size: 0.9em;
}
[hidden] {
  display: none !important;
}
/* Обозначения вроде «K-40» и «Sr-90» не должны разрываться по дефису. */
.nowrap {
  white-space: nowrap;
}
/* Доступно скринридеру, невидимо визуально: display:none его бы скрыл и от него. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  left: 8px;
  top: -80px;
  z-index: 5000;
  padding: 8px 16px;
  background: var(--cds-interactive);
  color: var(--text-on-color);
  text-decoration: none;
}
.skip-link:focus {
  top: 8px;
}
.mobile-only,
.mobile-workflow-nav {
  display: none;
}

/* UI shell */
.cds-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: var(--surface-shell);
  border-bottom: 1px solid var(--cds-border-subtle-00);
}
.cds-header__action {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--cds-icon-primary);
  cursor: pointer;
  text-decoration: none;
}
.cds-header__action:hover {
  background: var(--cds-background-hover);
}
.cds-header__action:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.cds-header__action svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.cds-header__name {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  color: var(--cds-text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.cds-header__name:hover {
  background: var(--cds-background-hover);
}
.cds-header__name strong {
  font-weight: 600;
}
.product-thumb {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--cds-interactive);
}
.product-thumb img {
  width: 31px;
  height: 31px;
  object-fit: cover;
}
.cds-header__divider {
  width: 1px;
  height: 24px;
  background: var(--cds-border-subtle-01);
}
.cds-header__product-name {
  padding-left: 16px;
  color: var(--cds-text-secondary);
}
.cds-header__spacer {
  flex: 1;
}
/*
 * Состояние и версия разведены. Раньше один элемент показывал «2 изм. · 6.1.0»:
 * рамка индикатора обещала состояние, а содержала в том числе номер версии,
 * который к состоянию отношения не имеет.
 */
.header-status {
  height: 26px;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 0 8px;
  border: 1px solid var(--cds-support-success-inverse);
  color: var(--text-on-success);
  font-family: var(--font-mono);
  font-size: 12px;
}
.header-version {
  margin-right: 8px;
  color: var(--cds-text-placeholder);
  font-family: var(--font-mono);
  font-size: 12px;
}
.cds-side-nav {
  position: fixed;
  z-index: 900;
  top: var(--header-height);
  bottom: 0;
  left: 0;
  width: var(--side-nav-width);
  display: flex;
  flex-direction: column;
  background: var(--surface-shell);
  border-right: 1px solid var(--cds-border-subtle-00);
}
.cds-side-nav__items {
  padding-top: 16px;
}
.workflow-nav-button {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 8px 16px;
  border: 0;
  border-left: 4px solid transparent;
  background: transparent;
  color: var(--cds-text-secondary);
  text-align: left;
  cursor: pointer;
}
.workflow-nav-button svg {
  grid-row: 1/3;
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.workflow-nav-button span {
  font-weight: 500;
}
.workflow-nav-button small {
  font-size: 11px;
  color: var(--cds-text-placeholder);
}
.workflow-nav-button:hover:not(:disabled) {
  background: var(--cds-background-hover);
  color: var(--cds-text-primary);
}
.workflow-nav-button.active {
  border-left-color: var(--cds-interactive);
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
}
.workflow-nav-button:disabled {
  color: var(--cds-text-disabled);
  cursor: not-allowed;
}
.workflow-nav-button:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.side-nav-footer {
  margin-top: auto;
  border-top: 1px solid var(--cds-border-subtle-00);
}
.instrument-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
}
.instrument-mini img {
  width: 38px;
  height: 52px;
  object-fit: contain;
}
.instrument-mini strong,
.instrument-mini span {
  display: block;
}
.instrument-mini span {
  color: var(--cds-text-placeholder);
  font-size: 11px;
}
.view-control {
  padding: 16px 16px 16px;
}
.view-control__label {
  display: block;
  margin-bottom: 8px;
  color: var(--cds-text-secondary);
  font-size: 12px;
}
.cds-content-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.view-button {
  height: 32px;
  border: 1px solid var(--cds-border-strong-01);
  background: transparent;
  color: var(--cds-text-secondary);
  cursor: pointer;
}
.view-button + .view-button {
  border-left: 0;
}
.view-button:hover {
  background: var(--cds-layer-01);
}
.view-button.active {
  border-color: var(--cds-interactive);
  background: var(--cds-interactive);
  color: var(--text-on-color);
}
.view-button:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.nav-scrim {
  position: fixed;
  z-index: 850;
  inset: var(--header-height) 0 0;
  background: var(--scrim);
}

/* Main page and grid */
.cds-content {
  min-height: 100vh;
  margin-left: var(--side-nav-width);
  padding-top: var(--header-height);
}
.page-heading {
  min-height: 144px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 32px max(32px, calc((100vw - var(--side-nav-width) - 1584px) / 2 + 32px)) 24px;
  border-bottom: 1px solid var(--cds-border-subtle-00);
  background: var(--surface-page-heading);
}
.page-heading h1 {
  margin: 8px 0 4px;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0;
}
.page-heading p {
  margin: 0;
  color: var(--cds-text-secondary);
  max-width: 760px;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  color: var(--cds-link-primary);
  font-size: 12px;
}
.breadcrumb span + span:before {
  content: '/';
  margin: 0 8px;
  color: var(--cds-text-placeholder);
}
.context-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(136px, 1fr));
  min-width: 380px;
  border: 1px solid var(--cds-border-subtle-01);
}
.context-bar > div {
  min-width: 0;
  padding: 8px 12px;
  background: var(--cds-layer-01);
}
.context-bar > div:nth-child(2n) {
  background: var(--cds-layer-02);
}
.context-bar span,
.context-bar strong {
  display: block;
}
.context-bar span {
  color: var(--cds-text-placeholder);
  font-size: 11px;
}
.context-bar strong {
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.workflow-page {
  max-width: 1584px;
  margin: 0 auto;
  padding: 32px;
}
.workflow-page.active {
  animation: page-enter 0.16s ease-out;
}
@keyframes page-enter {
  from {
    opacity: 0.5;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.carbon-grid {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 16px;
}
.col-span-10 {
  grid-column: span 10;
}
.col-span-6 {
  grid-column: span 6;
}
.cds-tile {
  background: var(--cds-layer-01);
  border: 1px solid transparent;
}
.page-tile {
  padding: 24px;
}
/*
 * Заголовок плитки: текст и действие всегда в одной строке. Раньше на узких
 * экранах flex-direction:column выбрасывал кнопку под описание, и она читалась
 * как оторванный от плитки элемент.
 */
.tile-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 16px;
}
.tile-heading h2 {
  margin: 4px 0 8px;
  font-size: 24px;
  font-weight: 400;
}
.tile-heading p {
  margin: 0;
  color: var(--cds-text-secondary);
}
.eyebrow {
  margin: 0 !important;
  color: var(--cds-link-primary) !important;
  font-family: var(--font-mono);
  font-size: 11px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/*
 * Ряд «назад — вперёд». Кнопки прижаты к краям без распорок в разметке: пустой
 * <span> между ними на узких экранах превращался в лишний элемент колонки.
 * Возврат назад всегда идёт первым и отталкивает остальное вправо.
 */
.page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--cds-border-subtle-00);
}
.page-actions > .cds-btn--secondary:first-child {
  margin-right: auto;
}

/*
 * Место для переключателя представления на узких экранах. Сам контрол один и тот
 * же: app.ts переносит узел между подвалом боковой панели и этим слотом, потому
 * что в панели, скрытой за гамбургер-меню, режим, меняющий состав страницы,
 * лежит слишком глубоко.
 */
.view-control-slot {
  display: none;
}

/* Buttons and fields */
.cds-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 0;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
/*
 * Отключённая кнопка не должна быть самым заметным элементом страницы.
 * В тёмной теме это приглушённо-серая плашка, в светлой — светло-серая;
 * фон вторичной кнопки здесь не годится: на белом он читался как акцент.
 */
.cds-btn:disabled {
  cursor: not-allowed;
  color: var(--button-disabled-text);
  background: var(--button-disabled);
  border-color: var(--button-disabled);
}
.cds-btn--primary {
  min-width: 160px;
  background: var(--cds-interactive);
  color: var(--text-on-color);
}
.cds-btn--primary:hover:not(:disabled) {
  background: var(--cds-interactive-hover);
}
.cds-btn--secondary {
  background: var(--button-secondary);
  color: var(--text-on-color);
}
.cds-btn--secondary:hover:not(:disabled) {
  background: var(--button-secondary-hover);
}
.cds-btn--ghost {
  background: transparent;
  color: var(--cds-link-primary);
}
.cds-btn--ghost:hover:not(:disabled) {
  background: var(--button-ghost-hover);
}
.cds-btn:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -4px;
}
.configuration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--cds-border-subtle-00);
}
.cds-field {
  display: flex;
  flex-direction: column;
  background: var(--cds-layer-01);
}
.cds-field > span {
  padding: 12px 16px 4px;
  color: var(--cds-text-secondary);
  font-size: 12px;
}
.cds-field select,
.cds-field input[type='number'],
.cds-field input[type='text'] {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid var(--cds-border-strong-01);
  border-radius: 0;
  background: var(--cds-layer-02);
  color: var(--cds-text-primary);
}
.cds-field select:hover,
.cds-field input:hover {
  background: var(--cds-layer-hover-02);
}
.cds-field select:focus,
.cds-field input:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}
.cds-field select:disabled {
  color: var(--cds-text-disabled);
}

/* Data import */
.cds-file-drop {
  min-height: 128px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 24px;
  border: 1px dashed var(--cds-border-strong-01);
  background: var(--cds-layer-02);
  cursor: pointer;
}
.cds-file-drop:hover,
.cds-file-drop.dragging {
  border-color: var(--cds-interactive);
  background: var(--surface-drop-active);
}
.cds-file-drop input {
  display: none;
}
.cds-file-drop strong,
.cds-file-drop small {
  display: block;
}
.cds-file-drop small {
  margin-top: 4px;
  color: var(--cds-text-secondary);
}
.file-drop-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--cds-interactive);
  color: var(--text-on-color);
}
.file-drop-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.data-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 16px;
  background: var(--cds-border-subtle-00);
}
.data-stat {
  min-height: 88px;
  padding: 16px;
  background: var(--cds-layer-02);
}
.data-stat strong,
.data-stat span {
  display: block;
}
.data-stat strong {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}
.data-stat span {
  margin-top: 8px;
  color: var(--cds-text-secondary);
  font-size: 12px;
}
.inventory-details,
.cds-accordion,
.result-details {
  margin-top: 16px;
  border-top: 1px solid var(--cds-border-subtle-01);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
}
.inventory-details > summary,
.cds-accordion > summary,
.result-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}
.inventory-details > summary:after,
.cds-accordion > summary:after,
.result-details > summary:after {
  content: '⌄';
  font-size: 20px;
}
.inventory-details[open] > summary:after,
.cds-accordion[open] > summary:after,
.result-details[open] > summary:after {
  transform: rotate(180deg);
}
.inventory-details > summary::-webkit-details-marker,
.cds-accordion > summary::-webkit-details-marker,
.result-details > summary::-webkit-details-marker {
  display: none;
}
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--cds-border-subtle-00);
}
.inventory-card {
  min-height: 160px;
  padding: 16px;
  background: var(--cds-layer-02);
}
.inventory-count {
  font-size: 28px;
  font-weight: 300;
}
.inventory-title {
  margin: 4px 0 12px;
  color: var(--cds-text-secondary);
}
.inventory-list {
  max-height: 110px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--cds-text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
}
.empty-state {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 24px;
  border: 1px dashed var(--cds-border-strong-01);
  background: var(--cds-layer-02);
  color: var(--cds-text-secondary);
}
.empty-state strong {
  color: var(--cds-text-primary);
}
.instrument-tile {
  height: 100%;
  min-height: 520px;
  display: grid;
  grid-template-rows: 300px 1fr;
  overflow: hidden;
}
/*
 * Снимок позиционируется абсолютно, а не растягивается грид-элементом: высота
 * грид-элемента, заданная треком (300px), для процентов потомка считается
 * неопределённой, из-за чего height:100% не разрешался и изображение
 * рендерилось в натуральной пропорции с обрезкой нижнего края. Привязка к inset
 * даёт одинаковый результат на обеих раскладках.
 */
.instrument-visual {
  position: relative;
  overflow: hidden;
  background: var(--surface-instrument);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.instrument-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/*
 * Съёмка прибора существует в двух вариантах — на светлом и на тёмном фоне.
 * Переключение идёт по data-theme на :root, а не по prefers-color-scheme:
 * атрибут отражает уже разрешённую тему и поэтому учитывает ручной выбор,
 * тогда как медиазапрос знал бы только системную настройку.
 */
.instrument-photo--dark {
  display: none;
}
:root[data-theme='dark'] .instrument-photo--light {
  display: none;
}
:root[data-theme='dark'] .instrument-photo--dark {
  display: block;
}
.instrument-copy {
  padding: 24px;
}
.instrument-copy h2 {
  margin: 8px 0 12px;
  font-size: 32px;
  font-weight: 300;
}
.instrument-copy p {
  color: var(--cds-text-secondary);
}
.instrument-copy dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 24px 0 0;
  background: var(--cds-border-subtle-00);
}
.instrument-copy dl div {
  padding: 12px;
  background: var(--cds-layer-02);
}
.instrument-copy dt {
  color: var(--cds-text-placeholder);
  font-size: 11px;
}
.instrument-copy dd {
  margin: 4px 0 0;
}

/* Setup */
.mode-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  background: var(--cds-border-subtle-00);
}
.mode-selector legend {
  width: 100%;
  padding: 0 0 8px;
  color: var(--cds-text-secondary);
  font-size: 12px;
}
.mode-card {
  position: relative;
  min-height: 128px;
  display: grid;
  grid-template-columns: auto 48px 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--cds-layer-02);
  cursor: pointer;
}
.mode-card:hover {
  background: var(--cds-layer-hover-02);
}
.mode-card:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--cds-interactive);
  background: var(--surface-selected);
}
.mode-card input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--cds-interactive);
}
.mode-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--accent-adaptive);
  color: var(--text-on-color);
  font-size: 18px;
  font-weight: 600;
}
.mode-icon.legacy {
  background: var(--accent-legacy);
}
.mode-copy strong,
.mode-copy small {
  display: block;
}
.mode-copy small {
  margin-top: 4px;
  color: var(--cds-text-secondary);
}
.mode-badge {
  position: absolute;
  right: 16px;
  top: 12px;
  color: var(--cds-text-placeholder);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mode-badge.recommended {
  color: var(--text-on-success);
}
.validation-summary {
  margin-top: 16px;
}
.validation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.validation-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  background: var(--surface-tag-success);
  color: var(--text-on-success);
  font-size: 11px;
}
.validation-chip.warning {
  background: var(--surface-tag-warning);
  color: var(--text-on-warning);
}
.validation-chip.error {
  background: var(--surface-tag-error);
  color: var(--text-on-error);
}
.validation-message {
  position: relative;
  padding: 16px 48px 16px 48px;
  border-left: 4px solid var(--cds-support-success);
  background: var(--surface-notification-success);
  color: var(--cds-text-primary);
}
.validation-message:before {
  content: '✓';
  position: absolute;
  left: 18px;
  top: 16px;
  color: var(--cds-support-success);
  font-weight: 700;
}
.validation-message.warning {
  border-left-color: var(--cds-support-warning);
  background: var(--surface-notification-warning);
}
.validation-message.warning:before {
  content: '!';
  color: var(--cds-support-warning);
}
.validation-message.error {
  border-left-color: var(--cds-support-error);
  background: var(--surface-notification-error);
}
.validation-message.error:before {
  content: '×';
  color: var(--cds-support-error);
}
.validation-message details {
  margin-top: 8px;
  color: var(--cds-text-secondary);
}
.relationship-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 16px;
  border-left: 4px solid var(--cds-support-info);
  background: var(--surface-notification-info);
}
.relationship-card.warning {
  border-left-color: var(--cds-support-warning);
  background: var(--surface-notification-warning);
}
.relationship-card.danger {
  border-left-color: var(--cds-support-error);
  background: var(--surface-notification-error);
}
.relationship-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-weight: 600;
}
.relationship-copy strong,
.relationship-copy span {
  display: block;
}
.relationship-copy span {
  margin-top: 4px;
  color: var(--cds-text-secondary);
}
.relationship-metrics {
  display: flex;
  gap: 24px;
}
.relationship-metrics div {
  text-align: right;
}
.relationship-metrics strong,
.relationship-metrics span {
  display: block;
}
.relationship-metrics span {
  color: var(--cds-text-placeholder);
  font-size: 11px;
}
.sticky-column {
  position: sticky;
  top: 72px;
}
.configuration-summary-tile {
  padding: 0;
}
.configuration-summary-tile > h3 {
  margin: 0;
  padding: 16px;
  border-bottom: 1px solid var(--cds-border-subtle-01);
  font-size: 16px;
  font-weight: 500;
}
.measurement-inspector {
  min-height: 180px;
}
.measurement-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--cds-border-subtle-00);
}
.measurement-card {
  padding: 16px;
  background: var(--cds-layer-02);
}
.measurement-card span,
.measurement-card strong,
.measurement-card small {
  display: block;
}
.measurement-card span {
  color: var(--cds-link-primary);
  font-size: 11px;
  text-transform: uppercase;
}
.measurement-card strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.measurement-card small {
  margin-top: 4px;
  color: var(--cds-text-secondary);
}
.map-arrow {
  display: none;
}
.channel-provenance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--cds-border-subtle-00);
}
.provenance-chip {
  padding: 16px 16px;
  background: var(--surface-channel-gamma);
  border-top: 3px solid var(--cds-chart-blue);
}
.provenance-chip.beta {
  background: var(--surface-channel-beta);
  border-top-color: var(--cds-chart-purple);
}
.provenance-chip small {
  color: var(--cds-text-secondary);
}
.spectrum-details {
  border-top: 1px solid var(--cds-border-subtle-01);
}
.spectrum-details > summary {
  min-height: 48px;
  padding: 0 16px;
  cursor: pointer;
}
.preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--cds-border-subtle-00);
}
.preview-card {
  background: var(--cds-layer-02);
}
.preview-card header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
}
.preview-card header span {
  color: var(--cds-text-placeholder);
  font-size: 11px;
}
.preview-canvas {
  display: block;
  width: 100%;
  height: 180px;
}
.advanced-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  padding: 1px;
  background: var(--cds-border-subtle-00);
}
.check-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  background: var(--cds-layer-02);
}
.check-field input {
  accent-color: var(--cds-interactive);
}
.check-field small {
  display: block;
  margin-top: 4px;
  color: var(--cds-text-secondary);
}

/*
 * Run and progress.
 *
 * Страница — одна колонка, а не сетка: метод, готовность, запуск и прогресс
 * читаются сверху вниз в одном порядке на любой ширине. Разнесённые по двум
 * колонкам, кнопка и прогресс на телефоне расходились так, что прогресс
 * дорисовывался выше нажатой кнопки.
 */
.run-panel {
  padding: 32px;
}
.run-panel h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
}
.readiness-line {
  margin-top: 24px;
  padding: 12px 16px;
  border-left: 4px solid var(--cds-support-success);
  background: var(--surface-notification-success);
  color: var(--text-on-success);
}
.readiness-line.not-ready {
  border-left-color: var(--cds-support-warning);
  background: var(--surface-notification-warning);
  color: var(--text-on-warning);
}
/* Запуск — единственное действие страницы, поэтому строку он ни с чем не делит. */
.run-panel__start {
  min-width: 260px;
  margin-top: 24px;
}
.progress-panel {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--cds-border-subtle-01);
}
.progress-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.progress-head > div:first-child strong,
.progress-head > div:first-child span {
  display: block;
}
.progress-head > div:first-child span {
  margin-top: 4px;
  color: var(--cds-text-secondary);
}
/*
 * Колонка справа — flex, а не `span { display: block }`: правило по тегу
 * оказалось бы специфичнее одноклассового `.progress-step-count` и не дало бы
 * его скрыть. Здесь дочерние элементы блочные сами по себе.
 */
.progress-meta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/* Счётчик дублирует полосу шагов и нужен только там, где она скрыта. */
.progress-step-count {
  display: none;
  margin-bottom: 4px;
  color: var(--cds-text-secondary);
  font-size: 12px;
}
.cds-progress-bar {
  height: 8px;
  margin: 16px 0;
  background: var(--cds-layer-03);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 4%;
  background: var(--cds-interactive);
  transition: width 0.3s ease;
}
.progress-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.progress-steps li {
  position: relative;
  padding: 24px 8px 0 0;
  border-top: 2px solid var(--cds-border-strong-01);
  color: var(--cds-text-placeholder);
  font-size: 12px;
}
.progress-steps li:before {
  content: '';
  position: absolute;
  top: -9px;
  left: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--cds-icon-primary);
  border-radius: 50%;
  background: var(--cds-background);
}
.progress-steps li.active {
  border-color: var(--cds-interactive);
  color: var(--cds-text-primary);
}
.progress-steps li.active:before {
  border-color: var(--cds-interactive);
  background: var(--cds-interactive);
}
.progress-steps li.done {
  border-color: var(--cds-interactive);
  color: var(--cds-text-secondary);
}
.progress-steps li.done:before {
  content: '✓';
  display: grid;
  place-items: center;
  border-color: var(--cds-interactive);
  background: var(--cds-interactive);
  color: var(--text-on-color);
  font-size: 10px;
}
.progress-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* Results */
.export-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1px;
  margin-bottom: 24px;
}
.result-hero {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  background: var(--cds-layer-01);
  border-top: 1px solid var(--cds-border-subtle-01);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.result-state {
  display: grid;
  place-items: center;
  min-height: 184px;
  padding: 24px;
  background: var(--cds-layer-02);
  text-align: center;
}
.result-state.good,
.result-state.warning,
.result-state.bad,
.result-state.self {
  color: var(--text-on-state);
}
.result-state.good {
  background: var(--surface-state-success);
}
.result-state.warning {
  background: var(--surface-state-warning);
}
.result-state.bad {
  background: var(--surface-state-error);
}
.result-state.self {
  background: var(--accent-self-check);
}
.result-state strong,
.result-state span {
  display: block;
}
.result-state strong {
  font-size: 24px;
  font-weight: 400;
}
.result-state span {
  margin-top: 8px;
  color: var(--text-on-state);
  font-size: 12px;
}
.result-interpretation {
  padding: 32px;
}
.result-interpretation h3 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 400;
}
.result-interpretation p {
  margin: 0;
  color: var(--cds-text-secondary);
  max-width: 800px;
}
.result-action {
  margin-top: 24px;
  padding: 12px 16px;
  border-left: 4px solid var(--cds-support-info);
  background: var(--cds-layer-02);
}
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 16px;
  background: var(--cds-border-subtle-00);
}
.summary-card {
  min-width: 0;
  min-height: 112px;
  padding: 16px;
  background: var(--cds-layer-01);
}
/*
 * Только собственные дети карточки: подпись, значение, сноска. Без `>` правило
 * ловило и вложенные в значение элементы — перечисленные нуклиды становились
 * блоками по 11px и вставали столбиком.
 */
.summary-card > span,
.summary-card > strong,
.summary-card > small {
  display: block;
}
.summary-card > span {
  color: var(--cds-text-placeholder);
  font-size: 11px;
}
.summary-card strong {
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 20px;
  font-weight: 400;
}
.summary-card small {
  margin-top: 8px;
  color: var(--cds-text-secondary);
}
.reporting-note {
  position: relative;
  margin-top: 16px;
  padding: 16px 16px 16px 48px;
  border-left: 4px solid var(--cds-support-info);
  background: var(--surface-notification-info);
}
.reporting-note:before {
  content: 'i';
  position: absolute;
  left: 18px;
  top: 16px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.nuclide-table-wrap {
  margin-top: 16px;
  overflow: auto;
}
.cds-data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cds-layer-01);
}
.cds-data-table caption {
  padding: 16px;
  text-align: left;
  background: var(--cds-layer-02);
  font-size: 16px;
  font-weight: 500;
}
.cds-data-table th {
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--cds-border-strong-01);
  background: var(--cds-layer-02);
  color: var(--cds-text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
}
.cds-data-table td {
  height: 56px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--cds-border-subtle-01);
  vertical-align: middle;
}
.cds-data-table tbody tr:hover {
  background: var(--cds-layer-hover-01);
}
.nuclide-label strong,
.nuclide-label small {
  display: block;
}
.nuclide-label small {
  margin-top: 2px;
  color: var(--cds-text-placeholder);
}
.numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Legacy statistical error: operator value first, covariance audit below. */
.legacy-stat-error {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  line-height: 1.2;
}
.legacy-stat-error__value {
  display: block;
  color: var(--cds-text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.legacy-stat-error__covariance {
  display: block;
  color: var(--cds-text-placeholder);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}
.legacy-stat-error__covariance sub {
  font-size: 9px;
}
.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 0 8px;
  background: var(--cds-layer-03);
  font-size: 11px;
  white-space: nowrap;
}
.status-tag:before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cds-text-placeholder);
}
.status-tag.success {
  background: var(--surface-tag-success);
  color: var(--text-on-success);
}
.status-tag.success:before {
  background: var(--cds-support-success);
}
.status-tag.warning {
  background: var(--surface-tag-warning);
  color: var(--text-on-warning);
}
.status-tag.warning:before {
  background: var(--cds-support-warning);
}
.detail-content {
  padding: 0 16px 16px;
}
.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.chart-card {
  min-width: 0;
  background: var(--cds-layer-02);
  border: 1px solid var(--cds-border-subtle-01);
}
.chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.chart-header span {
  color: var(--cds-text-placeholder);
  font-size: 11px;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 16px;
  color: var(--cds-text-secondary);
  font-size: 11px;
}
.legend-dot {
  display: inline-block;
  width: 12px;
  height: 3px;
  margin-right: 4px;
  vertical-align: middle;
}
.result-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 280px;
}
.residual-canvas {
  height: 220px;
}
.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cds-border-subtle-00);
}
.diagnostic-grid div {
  padding: 16px;
  background: var(--cds-layer-02);
}
.diagnostic-grid span,
.diagnostic-grid strong {
  display: block;
}
.diagnostic-grid span {
  color: var(--cds-text-placeholder);
  font-size: 11px;
}
.diagnostic-grid strong {
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.table-wrap {
  overflow: auto;
}
.nuisance-table {
  width: 100%;
  border-collapse: collapse;
}
.nuisance-table th,
.nuisance-table td {
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--cds-border-subtle-01);
  text-align: left;
}
.nuisance-table th {
  background: var(--cds-layer-02);
  color: var(--cds-text-secondary);
  font-size: 12px;
}
.nuisance-table td {
  font-family: var(--font-mono);
  font-size: 12px;
}
.warning-box {
  margin-top: 16px;
  border-left: 4px solid var(--cds-support-warning);
  background: var(--surface-notification-warning);
}
.warning-box summary {
  padding: 16px;
  cursor: pointer;
}
.warning-box div {
  padding: 2px 16px;
  color: var(--cds-text-secondary);
}
.warning-box div:last-child {
  padding-bottom: 16px;
}
.algorithm-note {
  margin-top: 16px;
  padding: 16px;
  border-left: 4px solid var(--cds-support-info);
  background: var(--surface-notification-info);
}
.algorithm-note span {
  display: block;
  margin-top: 4px;
  color: var(--cds-text-secondary);
}
.identifiability-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 0;
  background: var(--cds-border-subtle-00);
  border: 1px solid var(--cds-border-subtle-00);
}
.identifiability-card {
  min-width: 0;
  padding: 16px;
  background: var(--cds-layer-01);
}
.identifiability-card span,
.identifiability-card strong,
.identifiability-card small {
  display: block;
}
.identifiability-card span {
  color: var(--cds-text-placeholder);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.identifiability-card strong {
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.identifiability-card small {
  margin-top: 8px;
  color: var(--cds-text-secondary);
}
.identifiability-details {
  border-left: 4px solid var(--cds-support-info);
}
.identifiability-table td:last-child {
  min-width: 320px;
  font-family: var(--font-sans);
  color: var(--cds-text-secondary);
}
.model-pack-note,
.research-recommendation {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding: 16px;
  border-left: 4px solid var(--cds-support-info);
  background: var(--surface-notification-info);
}
.model-pack-note span,
.research-recommendation span {
  color: var(--cds-text-secondary);
}
.research-recommendation {
  border-left-color: var(--cds-support-warning);
  background: var(--surface-notification-warning);
}
@media (max-width: 1100px) {
  .identifiability-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .identifiability-summary {
    grid-template-columns: 1fr;
  }
}

/* Operator/research */
.research-only {
  display: none !important;
}
.research-mode .research-only {
  display: block !important;
}
.is-busy select,
.is-busy input[type='number'],
.is-busy input[type='text'] {
  opacity: 0.65;
}
.toast-region {
  position: fixed;
  z-index: 1500;
  right: 16px;
  bottom: 16px;
  max-width: 360px;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
  padding: 16px;
  border-left: 4px solid var(--cds-support-info);
  background: var(--cds-layer-02);
  box-shadow: 0 8px 24px var(--shadow-color);
}
.toast.success {
  border-color: var(--cds-support-success);
}
.toast.error {
  border-color: var(--cds-support-error);
}
.toast__text {
  flex: 1;
}
.toast__close {
  flex: none;
  width: 24px;
  height: 24px;
  margin: -4px -4px 0 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--cds-text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.toast__close:hover {
  background: var(--cds-layer-hover-02);
  color: var(--cds-text-primary);
}
.toast__close:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

@media (max-width: 1180px) {
  .col-span-10 {
    grid-column: span 9;
  }
  .col-span-6 {
    grid-column: span 7;
  }
  .configuration-grid {
    grid-template-columns: 1fr;
  }
  .mode-selector {
    grid-template-columns: 1fr;
  }
  .summary-grid {
    grid-template-columns: 1fr 1fr;
  }
  .chart-grid {
    grid-template-columns: 1fr;
  }
  .page-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .context-bar {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 900px) {
  .mobile-only {
    display: grid;
  }
  .desktop-only {
    display: none;
  }
  .cds-header__name {
    padding-left: 8px;
  }
  .cds-header__product-name {
    display: none;
  }
  .cds-side-nav {
    transform: translateX(-100%);
    transition: transform 0.18s ease;
  }
  .cds-side-nav.open {
    transform: translateX(0);
  }
  .cds-content {
    margin-left: 0;
  }
  .workflow-page {
    padding: 24px 16px calc(80px + var(--safe-bottom));
  }
  .page-heading {
    min-height: 124px;
    padding: 24px 16px 16px;
  }
  .view-control-slot {
    display: block;
    width: 100%;
  }
  .view-control-slot .view-control {
    padding: 0;
  }
  .page-heading h1 {
    font-size: 28px;
  }
  .carbon-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .col-span-10,
  .col-span-6 {
    grid-column: auto;
  }
  .instrument-tile {
    min-height: 0;
    grid-template-columns: 140px 1fr;
    grid-template-rows: 1fr;
  }
  .instrument-visual {
    min-height: 240px;
    border-right: 1px solid var(--cds-border-subtle-01);
    border-bottom: 0;
  }
  .instrument-copy dl {
    grid-template-columns: 1fr;
  }
  .sticky-column {
    position: static;
  }
  .mobile-workflow-nav {
    position: fixed;
    z-index: 800;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--mobile-nav-height) + var(--safe-bottom));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: var(--safe-bottom);
    background: var(--surface-shell);
    border-top: 1px solid var(--cds-border-subtle-01);
  }
  .mobile-workflow-nav .workflow-nav-button {
    min-height: var(--mobile-nav-height);
    display: flex;
    justify-content: center;
    padding: 0 4px;
    border-left: 0;
    border-top: 3px solid transparent;
    text-align: center;
    font-size: 11px;
  }
  .mobile-workflow-nav .workflow-nav-button.active {
    border-top-color: var(--cds-interactive);
    border-left: 0;
    background: var(--cds-layer-01);
  }
  .mobile-workflow-nav .workflow-nav-button small,
  .mobile-workflow-nav .workflow-nav-button svg {
    display: none;
  }
  .toast-region {
    bottom: calc(var(--mobile-nav-height) + var(--safe-bottom) + 8px);
  }
  .page-actions {
    margin-bottom: 16px;
  }
  .setup-layout {
    display: grid;
  }
  .export-actions {
    justify-content: flex-start;
  }
  .context-bar {
    grid-template-columns: 1fr 1fr;
  }
  .advanced-grid {
    grid-template-columns: 1fr 1fr;
  }
  .result-hero {
    grid-template-columns: 160px 1fr;
  }
  .diagnostic-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
  .cds-header__name {
    gap: 8px;
    padding-right: 4px;
  }
  .cds-header__name span:last-child {
    max-width: 195px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header-status {
    display: none;
  }
  .product-thumb {
    width: 28px;
    height: 28px;
  }
  .product-thumb img {
    width: 27px;
    height: 27px;
  }
  .page-heading {
    min-height: 112px;
  }
  .page-heading h1 {
    font-size: 26px;
  }
  .breadcrumb {
    font-size: 11px;
  }
  /*
   * Контекст расчёта остаётся видимым и на телефоне. Соседнюю страницу здесь не
   * подсмотреть, а «что именно считаем» — единственное, что связывает текущий шаг
   * с импортированными данными.
   */
  .context-bar strong {
    font-size: 11px;
  }
  .workflow-page {
    padding: 16px 12px calc(76px + var(--safe-bottom));
  }
  .page-tile {
    padding: 16px;
  }
  .tile-heading .cds-btn {
    padding: 0 12px;
  }
  .cds-file-drop {
    min-height: 112px;
    padding: 16px;
  }
  .data-overview {
    grid-template-columns: 1fr 1fr;
  }
  .inventory-grid {
    grid-template-columns: 1fr;
  }
  .instrument-tile {
    grid-template-columns: 88px 1fr;
    min-height: 144px;
  }
  .instrument-visual {
    min-height: 144px;
  }
  .instrument-copy {
    padding: 16px;
  }
  .instrument-copy h2 {
    font-size: 24px;
  }
  .instrument-copy p {
    display: none;
  }
  .instrument-copy dl {
    display: none;
  }
  .configuration-grid {
    grid-template-columns: 1fr;
  }
  .mode-card {
    min-height: 116px;
    grid-template-columns: auto 40px 1fr;
    padding: 16px;
  }
  .mode-icon {
    width: 40px;
    height: 40px;
  }
  .mode-badge {
    display: none;
  }
  .mode-copy small {
    font-size: 11px;
  }
  .relationship-card {
    grid-template-columns: 36px 1fr;
  }
  .relationship-metrics {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
  .relationship-metrics div {
    text-align: left;
  }
  .channel-provenance {
    grid-template-columns: 1fr;
  }
  .preview-card header {
    flex-direction: column;
  }
  .advanced-grid {
    grid-template-columns: 1fr;
  }
  .run-panel {
    padding: 24px 16px;
  }
  .run-panel__start {
    min-width: 0;
    width: 100%;
  }
  /*
   * Пять подписей в ряд на 390px не помещаются: полоса шагов ехала вбок вместе с
   * активным шагом, внутри и без того прокручиваемой страницы. Вместо
   * горизонтального скролла — счётчик «Шаг N из 5» в шапке прогресса.
   */
  .progress-steps {
    display: none;
  }
  .progress-step-count {
    display: block;
  }
  .progress-actions .cds-btn {
    flex: 1;
  }
  .result-hero {
    grid-template-columns: 1fr;
  }
  .result-state {
    min-height: 88px;
  }
  .result-interpretation {
    padding: 24px 16px;
  }
  .result-interpretation h3 {
    font-size: 24px;
  }
  .summary-grid {
    grid-template-columns: 1fr 1fr;
  }
  .summary-card {
    min-height: 96px;
  }
  .summary-card strong {
    font-size: 17px;
  }
  /*
   * Таблицы становятся карточками: строка — карточка, ячейка — пара «подпись —
   * значение» из data-label. Диагностические `.nuisance-table` живут по тем же
   * правилам: четыре-пять колонок в 390px не помещаются, и раньше последняя
   * просто обрезалась краем прокручиваемой обёртки, без всякого признака, что
   * там что-то есть.
   */
  .nuclide-table-wrap,
  .table-wrap {
    overflow: visible;
  }
  .cds-data-table,
  .cds-data-table tbody,
  .cds-data-table tr,
  .cds-data-table td,
  .nuisance-table,
  .nuisance-table tbody,
  .nuisance-table tr,
  .nuisance-table td {
    display: block;
    width: 100%;
  }
  .cds-data-table thead,
  .nuisance-table thead {
    display: none;
  }
  .cds-data-table caption {
    display: block;
  }
  .cds-data-table tr,
  .nuisance-table tr {
    margin-bottom: 1px;
    padding: 12px 16px;
    background: var(--cds-layer-01);
  }
  .cds-data-table td,
  .nuisance-table td {
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    border: 0;
    text-align: right;
  }
  .cds-data-table td:before,
  .nuisance-table td:before {
    content: attr(data-label);
    flex-shrink: 0;
    color: var(--cds-text-placeholder);
    font-family: var(--font-sans);
    font-size: 11px;
    text-align: left;
  }
  .cds-data-table td:first-child,
  .nuisance-table td:first-child {
    display: block;
    padding-bottom: 8px;
    text-align: left;
  }
  .cds-data-table td:first-child:before,
  .nuisance-table td:first-child:before {
    display: none;
  }
  .status-tag {
    margin-left: auto;
  }
  .chart-header {
    flex-direction: column;
  }
  .result-canvas {
    height: 230px;
  }
  .residual-canvas {
    height: 190px;
  }
  .diagnostic-grid {
    grid-template-columns: 1fr;
  }
  .page-actions {
    gap: 1px;
  }
  .page-actions .cds-btn {
    flex: 1;
    min-width: 0;
    padding: 0 12px;
  }
  .export-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .export-actions .cds-btn {
    width: 100%;
  }
}
@media (max-width: 380px) {
  .cds-header__name span:last-child {
    max-width: 150px;
  }
  .data-overview,
  .summary-grid {
    grid-template-columns: 1fr;
  }
  .instrument-tile {
    grid-template-columns: 80px 1fr;
  }
  .instrument-copy {
    padding: 12px;
  }
  .instrument-copy p {
    display: none;
  }
  .page-actions {
    flex-direction: column;
  }
  .page-actions .cds-btn {
    width: 100%;
  }
}

@media print {
  .cds-header,
  .cds-side-nav,
  .mobile-workflow-nav,
  .page-heading,
  .page-actions,
  .export-actions {
    display: none !important;
  }
  .cds-content {
    margin: 0;
    padding: 0;
  }
  .workflow-page {
    display: none !important;
    padding: 0;
  }
  .workflow-page[data-page='results'] {
    display: block !important;
  }
  .result-details {
    break-inside: avoid;
  }
  .result-canvas {
    filter: invert(1);
  }
  body {
    background: white;
    color: black;
  }
  .cds-tile,
  .result-hero,
  .summary-card,
  .cds-data-table,
  .chart-card {
    background: white;
    color: black;
    border-color: #999;
  }
  .result-interpretation p,
  .summary-card small,
  .chart-header span {
    color: #333;
  }
}