/* ============================================================================
   mp-fulfillment · components.css
   Семантические компонентные классы для компонентов 1–17 (десктоп).
   Ред. 1, 16.08.2026. Требует tokens.css.

   ПРАВИЛО РЕПОЗИТОРИЯ (дублируется в CLAUDE.md):
   новый экран собирается только из этих классов. Инлайновые стили в шаблонах
   запрещены. Новый класс — отдельное осознанное решение с добавлением сюда и
   файлом-превью, а не побочный эффект работы над экраном.
   ========================================================================= */

/* --- база ----------------------------------------------------------------- */

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

body {
  margin: 0;
  font-family: var(--mp-font);
  font-size: var(--mp-fs-3);
  line-height: var(--mp-lh-3);
  color: var(--mp-text);
  background: var(--mp-surface-app);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mp-text-link); text-decoration: none; }
a:hover { color: var(--mp-text-link-hover); }

:focus-visible {
  outline: 2px solid var(--mp-info-solid);
  outline-offset: 1px;
  box-shadow: var(--mp-focus-ring);
}

.mp-code { font-family: var(--mp-font-mono); font-size: var(--mp-fs-2); letter-spacing: .02em; }
.mp-num { font-variant-numeric: tabular-nums; text-align: right; }
.mp-muted { color: var(--mp-text-muted); }
.mp-secondary { color: var(--mp-text-secondary); }
.mp-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- примитивы ------------------------------------------------------------ */

.mp-btn {
  display: inline-flex; align-items: center; gap: var(--mp-sp-2);
  height: var(--mp-control-h); padding: 0 var(--mp-sp-3);
  border: var(--mp-border-width) solid var(--mp-border-control);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-surface); color: var(--mp-text);
  font: inherit; font-weight: var(--mp-weight-medium); cursor: pointer;
  transition: background var(--mp-motion) var(--mp-easing);
}
.mp-btn:hover { background: var(--mp-surface-sunken); }
.mp-btn--primary { background: var(--mp-info-solid); border-color: var(--mp-info-solid); color: var(--mp-n-0); }
.mp-btn--primary:hover { background: var(--mp-text-link-hover); }
.mp-btn--danger { background: var(--mp-danger-solid); border-color: var(--mp-danger-solid); color: var(--mp-n-0); }
.mp-btn--confirm { background: var(--mp-success-solid); border-color: var(--mp-success-solid); color: var(--mp-n-0); }
.mp-btn--quiet { border-color: var(--mp-border-strong); color: var(--mp-text-secondary); }
.mp-btn--sm { height: 24px; padding: 0 var(--mp-sp-2); font-size: var(--mp-fs-2); }
.mp-btn[disabled], .mp-btn[aria-disabled="true"] {
  background: var(--mp-surface-sunken); color: var(--mp-n-500);
  border-color: var(--mp-border-strong); cursor: not-allowed;
}
.mp-btn-row { display: flex; flex-wrap: wrap; gap: var(--mp-sp-2); }

.mp-kbd {
  font-family: var(--mp-font-mono); font-size: var(--mp-fs-1);
  border: var(--mp-border-width) solid var(--mp-border-strong);
  border-radius: var(--mp-radius-xs); padding: var(--mp-sp-hair) var(--mp-sp-1h); background: var(--mp-surface);
}

/* 04 · StatusBadge ---------------------------------------------------------
   Шесть визуальных весов, три размера. Иконка/точка обязательна: цвет не
   может быть единственным носителем смысла.                               */

.mp-badge {
  display: inline-flex; align-items: center; gap: var(--mp-sp-1);
  padding: var(--mp-sp-quarter) var(--mp-sp-2); border-radius: var(--mp-radius-sm);
  border: var(--mp-border-width) solid transparent;
  font-size: var(--mp-fs-2); line-height: var(--mp-lh-2);
  font-weight: var(--mp-weight-medium); white-space: nowrap;
}
.mp-badge--sm { padding: var(--mp-sp-hair) var(--mp-sp-1) var(--mp-sp-hair) var(--mp-sp-1h); font-size: var(--mp-fs-1); }
.mp-badge--lg { padding: var(--mp-sp-1) var(--mp-sp-3); font-size: var(--mp-m-fs-1); }
.mp-badge--neutral   { background: var(--mp-muted-bg);    color: var(--mp-muted-text);    border-color: var(--mp-muted-border); }
.mp-badge--progress  { background: var(--mp-info-bg);     color: var(--mp-info-text);     border-color: var(--mp-info-border); }
.mp-badge--done      { background: var(--mp-success-bg);  color: var(--mp-success-text);  border-color: var(--mp-success-border); }
.mp-badge--attention { background: var(--mp-warning-bg);  color: var(--mp-warning-text);  border-color: var(--mp-warning-border); }
.mp-badge--error     { background: var(--mp-danger-bg);   color: var(--mp-danger-text);   border-color: var(--mp-danger-border); }
.mp-badge--void      { background: var(--mp-void-bg);     color: var(--mp-void-text);     border-color: var(--mp-void-border); }
.mp-badge--overdue   { background: var(--mp-overdue-bg);  color: var(--mp-overdue-text);  border-color: var(--mp-overdue-border); }
.mp-badge--marking   { background: var(--mp-marking-bg);  color: var(--mp-marking-text);  border-color: var(--mp-marking-border); }
.mp-badge[data-tooltip] { border-bottom-style: dashed; cursor: help; }

.mp-badge__pulse {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: mp-pulse 1.4s ease-in-out infinite;
}
@keyframes mp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mp-badge__pulse { animation: none; } }

.mp-status-dot { display: inline-flex; align-items: center; gap: var(--mp-sp-2); }
.mp-status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mp-status-dot--done { color: var(--mp-success-text); }
.mp-status-dot--error { color: var(--mp-danger-text); }
.mp-status-dot--progress { color: var(--mp-info-text); }

.mp-tooltip {
  max-width: 280px; background: var(--mp-surface-dark); color: var(--mp-text-inverse);
  border-radius: var(--mp-radius-sm); padding: var(--mp-sp-2) var(--mp-sp-3);
  font-size: var(--mp-fs-2); line-height: var(--mp-lh-2); box-shadow: var(--mp-shadow-overlay);
}

/* 11 · оборачиваемость: точка с буквой ----------------------------------- */
.mp-turnover {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--mp-turnover-dot); height: var(--mp-turnover-dot); border-radius: 50%;
  color: var(--mp-n-0); font-size: var(--mp-fs-1); font-weight: var(--mp-weight-bold);
}
.mp-turnover--green { background: var(--mp-turnover-green); }
.mp-turnover--grey  { background: var(--mp-turnover-grey); }
.mp-turnover--red   { background: var(--mp-turnover-red); }

/* 12 · MarketplaceMark ---------------------------------------------------- */
.mp-mark {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--mp-mark-size); height: var(--mp-mark-size);
  border-radius: var(--mp-radius-sm);
  font-size: var(--mp-fs-1); font-weight: var(--mp-weight-bold);
}
.mp-mark--lg { width: var(--mp-mark-size-lg); height: var(--mp-mark-size-lg); font-size: var(--mp-fs-3); }
.mp-mark--ozon { background: var(--mp-ozon); color: var(--mp-ozon-ink); }
.mp-mark--wb   { background: var(--mp-wb);   color: var(--mp-wb-ink); }
.mp-mark--ym   { background: var(--mp-ym);   color: var(--mp-ym-ink); }
.mp-mark--unlinked {
  background: var(--mp-surface); color: var(--mp-text-muted);
  border: var(--mp-border-width) dashed var(--mp-border-strong);
}
.mp-mark--archived { background: var(--mp-surface-app); color: var(--mp-text-secondary); text-decoration: line-through; }
.mp-mark__error {
  position: absolute; right: -4px; bottom: -4px;
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--mp-danger-solid); color: var(--mp-n-0);
  font-size: var(--mp-fs-1); border: var(--mp-border-width-mark) solid var(--mp-surface);
}
.mp-mark-group { display: flex; align-items: center; gap: var(--mp-sp-1); }

/* 01 · AppShell ----------------------------------------------------------- */

.mp-shell { display: flex; flex-direction: column; min-height: 100vh; }
.mp-shell__impersonate {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--mp-sp-4);
  padding: var(--mp-sp-2) var(--mp-sp-4);
  background: var(--mp-surface-impersonate); color: var(--mp-n-0);
  font-size: var(--mp-fs-2);
}
.mp-shell__header {
  display: flex; align-items: center; gap: var(--mp-sp-4);
  height: var(--mp-header-h); padding: 0 var(--mp-sp-4);
  background: var(--mp-surface-dark); color: var(--mp-text-inverse);
}
.mp-shell__logo { display: flex; align-items: center; gap: var(--mp-sp-2); font-size: var(--mp-m-fs-1); font-weight: var(--mp-weight-bold); }
.mp-shell__logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--mp-radius-sm);
  background: var(--mp-info-solid); color: var(--mp-n-0); font-size: var(--mp-fs-2);
}
.mp-shell__seller {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mp-sp-2);
  min-width: 200px; height: 30px; padding: 0 var(--mp-sp-3);
  background: var(--mp-surface-dark-raised);
  border: var(--mp-border-width) solid var(--mp-border-dark);
  border-radius: var(--mp-radius-sm); color: inherit; font: inherit;
  font-size: var(--mp-fs-2); cursor: pointer;
}
.mp-shell__spacer { flex: 1; }
.mp-shell__errors {
  display: flex; align-items: center; gap: var(--mp-sp-2);
  height: 30px; padding: 0 var(--mp-sp-3);
  background: var(--mp-surface-dark-danger);
  border: var(--mp-border-width) solid var(--mp-dark-danger-border); border-radius: var(--mp-radius-sm);
  color: var(--mp-dark-danger-text); font-size: var(--mp-fs-2); font-weight: var(--mp-weight-medium);
}
.mp-shell__user { display: flex; align-items: center; gap: var(--mp-sp-2); font-size: var(--mp-fs-2); }
.mp-shell__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--mp-border-dark); font-size: var(--mp-fs-1); font-weight: var(--mp-weight-medium);
}
.mp-shell__body { display: flex; flex: 1; min-height: 0; }
.mp-shell__main { flex: 1; min-width: 0; padding: var(--mp-sp-5); }

.mp-nav {
  flex: 0 0 var(--mp-nav-w); display: flex; flex-direction: column; gap: var(--mp-sp-hair);
  padding: var(--mp-sp-3) var(--mp-sp-2);
  background: var(--mp-surface-sunken);
  border-right: var(--mp-border-width) solid var(--mp-border);
}
.mp-nav--collapsed { flex-basis: var(--mp-nav-w-collapsed); align-items: center; }
.mp-nav__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mp-sp-2);
  padding: var(--mp-sp-2) var(--mp-sp-3); border-radius: var(--mp-radius-sm);
  color: var(--mp-text-secondary); font-size: var(--mp-fs-3);
}
.mp-nav__item:hover { background: var(--mp-surface-app); color: var(--mp-text); }
.mp-nav__item[aria-current="page"] { background: var(--mp-info-bg); color: var(--mp-info-text); font-weight: var(--mp-weight-medium); }
.mp-nav__item--muted { color: var(--mp-text-secondary); font-size: var(--mp-fs-2); }
.mp-nav__glyph {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--mp-radius-sm); font-weight: var(--mp-weight-medium);
}
.mp-nav__glyph[aria-current="page"] { background: var(--mp-info-bg); color: var(--mp-info-text); }
.mp-nav__dot { position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--mp-urgency-soon); }
.mp-nav__sep { height: 1px; margin: var(--mp-sp-2) var(--mp-sp-3); background: var(--mp-border); }

/* 02 · DataTable ---------------------------------------------------------- */

.mp-table-wrap { border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-sm); background: var(--mp-surface); overflow: hidden; }
.mp-table-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mp-sp-3);
  padding: var(--mp-sp-2) var(--mp-sp-3); border-bottom: var(--mp-border-width) solid var(--mp-border);
  font-size: var(--mp-fs-3); font-weight: var(--mp-weight-medium);
}
.mp-table { width: 100%; border-collapse: collapse; font-size: var(--mp-fs-3); }
.mp-table th {
  position: sticky; top: 0; z-index: 2;
  padding: var(--mp-sp-2); text-align: left;
  background: var(--mp-surface-sunken); color: var(--mp-text-secondary);
  font-size: var(--mp-fs-1); font-weight: var(--mp-weight-medium);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  border-bottom: var(--mp-border-width) solid var(--mp-border);
}
.mp-table th[aria-sort] { cursor: pointer; }
.mp-table th[aria-sort]:hover { color: var(--mp-text); }
.mp-table td { height: var(--mp-row-h); padding: 0 var(--mp-sp-2); border-bottom: var(--mp-border-width) solid var(--mp-surface-app); }
.mp-table tbody tr:hover td { background: var(--mp-surface-sunken); }
.mp-table td.mp-num, .mp-table th.mp-num { text-align: right; font-variant-numeric: tabular-nums; }
.mp-table__sticky-col { position: sticky; left: 0; z-index: 1; background: var(--mp-surface); }
.mp-table__check { width: 32px; }
.mp-table__mark { width: 34px; }

/* полоса срочности слева от строки — второе цветовое измерение */
.mp-table tbody tr { border-left: var(--mp-urgency-stripe-width) solid transparent; }
.mp-table tbody tr.is-soon { border-left-color: var(--mp-urgency-soon); }
.mp-table tbody tr.is-overdue { border-left-color: var(--mp-urgency-overdue); }
.mp-timer--soon { color: var(--mp-urgency-soon-text); font-weight: var(--mp-weight-medium); }
.mp-timer--overdue { color: var(--mp-overdue-text); font-weight: var(--mp-weight-medium); }

.mp-check {
  /* Визуальный размер намеренно мелкий: в таблице на 40 строк крупные квадраты
     съедают строку. Зона попадания даётся обёрткой .mp-cell-check во всю
     ячейку (не меньше 24px по короткой стороне) плюс выбор строки Space. */
  --mp-target-ok: "зона попадания — .mp-cell-check во всю ячейку выбора";
  appearance: none; width: 14px; height: 14px; margin: 0;
  border: var(--mp-border-width) solid var(--mp-border-control);
  border-radius: var(--mp-radius-xs); background: var(--mp-surface); cursor: pointer;
}
.mp-check:checked { background: var(--mp-info-solid); border-color: var(--mp-info-solid); }
.mp-check:checked::after { content: "✓"; display: block; color: var(--mp-n-0); font-size: var(--mp-fs-1); line-height: 12px; text-align: center; }
.mp-check:indeterminate { background: var(--mp-info-solid); border-color: var(--mp-info-solid); }
.mp-check:indeterminate::after { content: "–"; display: block; color: var(--mp-n-0); font-size: var(--mp-fs-1); line-height: 11px; text-align: center; }
.mp-check--locked {
  --mp-target-ok: "неинтерактивен по смыслу: право снято, нажатие невозможно";
  position: relative; appearance: none; width: 15px; height: 15px;
  border: var(--mp-border-width) dashed var(--mp-border-strong);
  background: var(--mp-surface-sunken); cursor: not-allowed;
}
.mp-check--locked::after {
  content: ""; position: absolute; top: 6px; left: -2px; width: 20px; height: 1px;
  background: var(--mp-n-500); transform: rotate(-45deg);
}

/* панель массовых действий — явные кнопки, не выпадающее меню */
.mp-bulkbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mp-sp-4);
  padding: var(--mp-sp-2) var(--mp-sp-3);
  background: var(--mp-surface-dark); color: var(--mp-n-0); font-size: var(--mp-fs-2);
}
.mp-bulkbar__count { font-weight: var(--mp-weight-bold); }
.mp-bulkbar__scope { color: var(--mp-text-inverse-muted); }
.mp-bulkbar .mp-btn { height: 26px; background: var(--mp-surface-dark-raised); border-color: var(--mp-border-dark); color: var(--mp-n-0); }
.mp-bulkbar .mp-btn--primary { background: var(--mp-surface-app); border-color: var(--mp-surface-app); color: var(--mp-text); }
.mp-bulkbar .mp-btn--danger { background: var(--mp-surface-dark-danger); border-color: var(--mp-dark-danger-border); color: var(--mp-dark-danger-text); }

.mp-pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--mp-sp-2) var(--mp-sp-3); border-top: var(--mp-border-width) solid var(--mp-border);
  font-size: var(--mp-fs-2); color: var(--mp-text-secondary);
}
.mp-pager__pages { display: flex; gap: var(--mp-sp-1); }
.mp-pager__page {
  padding: var(--mp-sp-1) var(--mp-sp-2); border: var(--mp-border-width) solid var(--mp-border-strong);
  border-radius: var(--mp-radius-sm); color: var(--mp-text-secondary);
}
.mp-pager__page[aria-current="page"] { background: var(--mp-surface-dark); border-color: var(--mp-surface-dark); color: var(--mp-n-0); }

/* состояние загрузки — скелет, не спиннер */
.mp-skeleton-row { display: flex; gap: var(--mp-sp-3); padding: var(--mp-sp-3); border-bottom: var(--mp-border-width) solid var(--mp-surface-app); }
.mp-skeleton { height: 9px; border-radius: var(--mp-radius-xs); background: var(--mp-surface-app); }
.mp-skeleton--head { background: var(--mp-border-strong); }
.mp-skeleton--grow { flex: 1; }

.mp-notice {
  padding: var(--mp-sp-3) var(--mp-sp-4); border-radius: var(--mp-radius-sm);
  border: var(--mp-border-width) solid var(--mp-border); font-size: var(--mp-fs-3);
  line-height: var(--mp-lh-3);
}
.mp-notice__title { font-weight: var(--mp-weight-medium); margin-bottom: var(--mp-sp-1); }
.mp-notice--attention { background: var(--mp-warning-surface); border-color: var(--mp-warning-border); }
.mp-notice--attention .mp-notice__title { color: var(--mp-warning-text); }
.mp-notice--error { background: var(--mp-danger-surface); border-color: var(--mp-danger-border); }
.mp-notice--error .mp-notice__title { color: var(--mp-danger-text); }
.mp-notice--done { background: var(--mp-success-surface); border-color: var(--mp-success-border); }
.mp-notice--done .mp-notice__title { color: var(--mp-success-text); }

/* 03 · FilterBar ---------------------------------------------------------- */

.mp-filters { border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-sm); background: var(--mp-surface); padding: var(--mp-sp-3); }
.mp-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-sp-2); }
.mp-filters__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mp-sp-2); margin-top: var(--mp-sp-3); }
.mp-filters__applied {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-sp-1);
  margin-top: var(--mp-sp-3); padding-top: var(--mp-sp-3);
  border-top: var(--mp-border-width) solid var(--mp-surface-app);
}
.mp-filters__label { font-size: var(--mp-fs-2); color: var(--mp-text-muted); }
.mp-select, .mp-input {
  height: var(--mp-control-h); padding: 0 var(--mp-sp-3);
  border: var(--mp-border-width) solid var(--mp-border-control);
  border-radius: var(--mp-radius-sm); background: var(--mp-surface);
  font: inherit; font-size: var(--mp-fs-3); color: var(--mp-text);
}
.mp-input::placeholder { color: var(--mp-text-muted); }
.mp-select[data-active="true"] { border-color: var(--mp-info-solid); background: var(--mp-info-bg); color: var(--mp-info-text); font-weight: var(--mp-weight-medium); }
.mp-counter { padding: 0 var(--mp-sp-1h); border-radius: var(--mp-radius-pill); background: var(--mp-surface-dark); color: var(--mp-n-0); font-size: var(--mp-fs-1); }

.mp-chip {
  display: inline-flex; align-items: center; gap: var(--mp-sp-1h);
  padding: var(--mp-sp-1) var(--mp-sp-2); border-radius: var(--mp-radius-sm);
  background: var(--mp-muted-bg); border: var(--mp-border-width) solid var(--mp-muted-border);
  font-size: var(--mp-fs-2); color: var(--mp-text);
}
.mp-chip--marking { background: var(--mp-marking-bg); border-color: var(--mp-marking-border); color: var(--mp-marking-text); font-weight: var(--mp-weight-medium); }
.mp-chip__x {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px;
  margin: 0 calc(-1 * var(--mp-sp-1)) 0 0;
  border: 0; background: none; padding: 0;
  color: var(--mp-text-secondary); cursor: pointer; font: inherit;
}
.mp-preset { padding: var(--mp-sp-1) var(--mp-sp-2); border: var(--mp-border-width) solid var(--mp-border-strong); border-radius: var(--mp-radius-sm); font-size: var(--mp-fs-2); color: var(--mp-text-secondary); }
.mp-preset[aria-pressed="true"] { background: var(--mp-surface-sunken); color: var(--mp-text); font-weight: var(--mp-weight-medium); }

/* 05 · FormField ---------------------------------------------------------- */

.mp-field { display: flex; flex-direction: column; gap: var(--mp-sp-1); }
.mp-field__label { font-size: var(--mp-fs-2); color: var(--mp-text-secondary); }
.mp-field__req { color: var(--mp-danger-text); }
.mp-field__hint { font-size: var(--mp-fs-1); color: var(--mp-text-muted); }
.mp-field__error { font-size: var(--mp-fs-1); color: var(--mp-danger-text); font-weight: var(--mp-weight-medium); }
.mp-field__control { display: flex; gap: var(--mp-sp-2); }
.mp-field .mp-input { width: 100%; }
.mp-field--numeric .mp-input { text-align: right; font-variant-numeric: tabular-nums; }
.mp-input:focus { border-color: var(--mp-info-solid); border-width: var(--mp-border-width-focus); outline: none; box-shadow: var(--mp-focus-ring); }
.mp-input[aria-invalid="true"] { border-color: var(--mp-danger-solid); background: var(--mp-danger-surface); }
.mp-input[disabled] { background: var(--mp-surface-sunken); border-color: var(--mp-border); color: var(--mp-muted-text); }
/* «нет прав» визуально отличается от disabled и объясняет причину */
.mp-input--noperm {
  border-style: dashed; border-color: var(--mp-border-strong);
  background: var(--mp-surface-sunken); color: var(--mp-muted-text);
}
.mp-field--noperm .mp-field__hint { color: var(--mp-warning-text); }
.mp-secret { display: flex; gap: var(--mp-sp-2); }
.mp-secret .mp-input { font-family: var(--mp-font-mono); }

/* 06 · Modal / Drawer ----------------------------------------------------- */

.mp-overlay { position: fixed; inset: 0; background: var(--mp-overlay); display: flex; z-index: 40; }
.mp-modal {
  margin: auto; width: min(560px, 92vw); background: var(--mp-surface);
  border-radius: var(--mp-radius-md); box-shadow: var(--mp-shadow-overlay); overflow: hidden;
}
.mp-drawer {
  margin-left: auto; width: min(520px, 94vw); height: 100%;
  background: var(--mp-surface); box-shadow: var(--mp-shadow-overlay);
  display: flex; flex-direction: column;
}
.mp-dialog__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mp-sp-4);
  padding: var(--mp-sp-4) var(--mp-sp-5); border-bottom: var(--mp-border-width) solid var(--mp-border);
  font-size: var(--mp-fs-4); font-weight: var(--mp-weight-bold);
}
.mp-dialog__close { border: 0; background: none; padding: var(--mp-sp-1); color: var(--mp-text-secondary); cursor: pointer; font: inherit; }
.mp-dialog__body { padding: var(--mp-sp-4) var(--mp-sp-5); font-size: var(--mp-fs-3); line-height: var(--mp-lh-3); overflow: auto; }
.mp-dialog__foot {
  display: flex; justify-content: flex-end; gap: var(--mp-sp-2);
  padding: var(--mp-sp-3) var(--mp-sp-5);
  background: var(--mp-surface-sunken); border-top: var(--mp-border-width) solid var(--mp-border);
}
.mp-dialog__foot--start { justify-content: flex-start; }
/* деструктивное действие требует выбора причины, а не кнопки «Да» */
.mp-reasons { display: flex; flex-direction: column; border: var(--mp-border-width) solid var(--mp-border-control); border-radius: var(--mp-radius-sm); overflow: hidden; }
.mp-reasons__item { display: flex; align-items: center; gap: var(--mp-sp-2); padding: var(--mp-sp-2) var(--mp-sp-3); cursor: pointer; }
.mp-reasons__item + .mp-reasons__item { border-top: var(--mp-border-width) solid var(--mp-surface-app); }
.mp-reasons__item:has(input:checked) { background: var(--mp-info-bg); }
.mp-radio { --mp-target-ok: "внутри label .mp-reasons__item: цель — вся строка причины, 100%×37px"; appearance: none; width: 13px; height: 13px; margin: 0; border: var(--mp-border-width) solid var(--mp-border-control); border-radius: 50%; background: var(--mp-surface); cursor: pointer; }
.mp-radio:checked { border: 4px solid var(--mp-info-solid); }
.mp-deflist { display: grid; grid-template-columns: 130px 1fr; gap: var(--mp-sp-2) var(--mp-sp-3); margin: 0; }
.mp-deflist dt { color: var(--mp-text-muted); }
.mp-deflist dd { margin: 0; }

/* 07 · Toast -------------------------------------------------------------- */

.mp-toasts { position: fixed; right: var(--mp-sp-5); bottom: var(--mp-sp-5); display: flex; flex-direction: column; gap: var(--mp-sp-3); z-index: 50; }
.mp-toast {
  display: flex; align-items: flex-start; gap: var(--mp-sp-3);
  width: min(420px, 90vw); padding: var(--mp-sp-3) var(--mp-sp-4);
  background: var(--mp-surface); border: var(--mp-border-width) solid var(--mp-border);
  border-left: var(--mp-urgency-stripe-width) solid var(--mp-n-500);
  border-radius: var(--mp-radius-md); box-shadow: var(--mp-shadow-overlay); font-size: var(--mp-fs-3);
}
.mp-toast__icon { font-weight: var(--mp-weight-bold); }
.mp-toast__body { flex: 1; }
.mp-toast__title { font-weight: var(--mp-weight-medium); }
.mp-toast__meta { color: var(--mp-text-secondary); }
.mp-toast--done { border-color: var(--mp-success-border); border-left-color: var(--mp-success-solid); }
.mp-toast--done .mp-toast__icon { color: var(--mp-success-text); }
.mp-toast--error { border-color: var(--mp-danger-border); border-left-color: var(--mp-danger-solid); }
.mp-toast--error .mp-toast__icon { color: var(--mp-danger-text); }

/* 08 · EmptyState --------------------------------------------------------- */

.mp-empty { padding: var(--mp-sp-6) var(--mp-sp-5); text-align: center; border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-sm); background: var(--mp-surface); }
.mp-empty__glyph {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: 0 auto var(--mp-sp-3);
  border-radius: var(--mp-radius-sm); background: var(--mp-surface-app);
  color: var(--mp-text-secondary); font-size: var(--mp-fs-4);
}
.mp-empty--action .mp-empty__glyph { background: var(--mp-info-bg); color: var(--mp-info-text); }
.mp-empty--noperm .mp-empty__glyph { background: var(--mp-warning-bg); color: var(--mp-warning-text); }
.mp-empty__title { font-size: var(--mp-m-fs-1); font-weight: var(--mp-weight-medium); margin-bottom: var(--mp-sp-1); }
.mp-empty__text { font-size: var(--mp-fs-2); color: var(--mp-text-secondary); line-height: var(--mp-lh-3); margin-bottom: var(--mp-sp-3); }

/* 09 · InlineError -------------------------------------------------------- */

.mp-inline-error {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mp-sp-3);
  padding: var(--mp-sp-3) var(--mp-sp-4); font-size: var(--mp-fs-3);
  background: var(--mp-danger-surface); border: var(--mp-border-width) solid var(--mp-danger-border);
  border-radius: var(--mp-radius-sm);
}
.mp-inline-error__msg { color: var(--mp-danger-text); font-weight: var(--mp-weight-medium); }
.mp-inline-error__hint { color: var(--mp-text-secondary); font-weight: var(--mp-weight-normal); }

/* 10 · EntityCard --------------------------------------------------------- */

.mp-card { background: var(--mp-surface); border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-md); overflow: hidden; }
.mp-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mp-sp-5); padding: var(--mp-sp-4) var(--mp-sp-5); border-bottom: var(--mp-border-width) solid var(--mp-border); }
.mp-card__title { display: flex; align-items: center; gap: var(--mp-sp-3); margin: 0 0 var(--mp-sp-1); font-size: var(--mp-fs-5); line-height: var(--mp-lh-5); font-weight: var(--mp-weight-bold); }
.mp-card__meta { display: flex; flex-wrap: wrap; gap: var(--mp-sp-4); font-family: var(--mp-font-mono); font-size: var(--mp-fs-2); color: var(--mp-text-muted); }
.mp-tabs { display: flex; padding: 0 var(--mp-sp-5); border-bottom: var(--mp-border-width) solid var(--mp-border); font-size: var(--mp-fs-3); }
.mp-tabs__tab { padding: var(--mp-sp-3); color: var(--mp-text-secondary); border-bottom: 2px solid transparent; }
.mp-tabs__tab[aria-selected="true"] { color: var(--mp-text); font-weight: var(--mp-weight-medium); border-bottom-color: var(--mp-surface-dark); }
.mp-tabs__badge { color: var(--mp-text-muted); }
.mp-tabs__badge--error { color: var(--mp-danger-text); font-weight: var(--mp-weight-bold); }
.mp-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mp-sp-2) var(--mp-sp-6); padding: var(--mp-sp-4) var(--mp-sp-5); font-size: var(--mp-fs-3); }
.mp-prop { display: flex; gap: var(--mp-sp-3); padding-bottom: var(--mp-sp-2); border-bottom: var(--mp-border-width) solid var(--mp-surface-app); }
.mp-prop__key { flex: 0 0 170px; color: var(--mp-text-muted); }
.mp-prop__val--alert { color: var(--mp-danger-text); font-weight: var(--mp-weight-medium); }

/* 11 · DiffRow ------------------------------------------------------------ */

.mp-diff { width: 100%; border-collapse: collapse; font-size: var(--mp-fs-3); }
.mp-diff td { padding: var(--mp-sp-2) var(--mp-sp-3); border-bottom: var(--mp-border-width) solid var(--mp-surface-app); vertical-align: top; }
.mp-diff__source { display: inline-block; padding: var(--mp-sp-hair) var(--mp-sp-1h); border-radius: var(--mp-radius-sm); font-size: var(--mp-fs-1); font-weight: var(--mp-weight-bold); }
.mp-diff__source--ui { background: var(--mp-muted-bg); color: var(--mp-muted-text); border: var(--mp-border-width) solid var(--mp-muted-border); }
.mp-diff__source--mobile { background: var(--mp-info-bg); color: var(--mp-info-text); border: var(--mp-border-width) solid var(--mp-info-border); }
/* системные изменения приглушены и с пунктирной рамкой — иначе журнал
   человеческих действий в них тонет                                        */
.mp-diff__source--sync, .mp-diff__source--system {
  background: var(--mp-surface-sunken); color: var(--mp-muted-text);
  border: var(--mp-border-width) dashed var(--mp-border-strong);
}
.mp-diff tr.is-system { background: var(--mp-surface-system-row); color: var(--mp-text-secondary); }
.mp-diff tr.is-system em { font-style: italic; }
.mp-diff__detail { background: var(--mp-surface-sunken); padding: var(--mp-sp-3) var(--mp-sp-4); }
.mp-diff__who { display: flex; flex-wrap: wrap; gap: var(--mp-sp-5); font-size: var(--mp-fs-2); color: var(--mp-text-secondary); margin-bottom: var(--mp-sp-2); }
.mp-diff__fields { display: grid; grid-template-columns: 200px 1fr 1fr; gap: var(--mp-sp-1) var(--mp-sp-4); align-items: center; font-size: var(--mp-fs-2); }
.mp-diff__field { font-family: var(--mp-font-mono); color: var(--mp-text-secondary); }
.mp-diff__was { padding: var(--mp-sp-quarter) var(--mp-sp-2); border-radius: var(--mp-radius-sm); background: var(--mp-danger-bg); color: var(--mp-danger-text); text-decoration: line-through; }
.mp-diff__now { padding: var(--mp-sp-quarter) var(--mp-sp-2); border-radius: var(--mp-radius-sm); background: var(--mp-success-bg); color: var(--mp-success-text); }

/* 13 · ProgressPanel ------------------------------------------------------ */

.mp-progress { border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-sm); background: var(--mp-surface); padding: var(--mp-sp-4); }
.mp-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mp-sp-3); margin-bottom: var(--mp-sp-3); }
.mp-progress__title { font-size: var(--mp-fs-3); font-weight: var(--mp-weight-medium); }
.mp-progress__eta { font-size: var(--mp-fs-2); color: var(--mp-text-muted); }
.mp-progress__track { display: block; width: 100%; height: 6px; margin-bottom: var(--mp-sp-3); border: 0; border-radius: var(--mp-radius-sm); background: var(--mp-surface-app); appearance: none; overflow: hidden; }
.mp-progress__track::-webkit-progress-bar { background: var(--mp-surface-app); }
.mp-progress__track::-webkit-progress-value { background: var(--mp-info-solid); }
.mp-progress__track::-moz-progress-bar { background: var(--mp-info-solid); }
.mp-progress__fill { height: 100%; background: var(--mp-info-solid); transition: width var(--mp-motion) var(--mp-easing); }
.mp-progress__stats { display: flex; flex-wrap: wrap; gap: var(--mp-sp-5); font-size: var(--mp-fs-2); font-variant-numeric: tabular-nums; margin-bottom: var(--mp-sp-3); }
.mp-progress__stat--done { color: var(--mp-success-text); }
.mp-progress__stat--attention { color: var(--mp-warning-text); }
.mp-progress__stat--marking { color: var(--mp-marking-text); }

/* 14 · MatchPair --------------------------------------------------------- */

.mp-match { border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-sm); background: var(--mp-surface); overflow: hidden; }
.mp-match__body { display: grid; grid-template-columns: 1fr 120px 1fr; }
.mp-match__side { padding: var(--mp-sp-4); }
.mp-match__side + .mp-match__score, .mp-match__score + .mp-match__side { border-left: var(--mp-border-width) solid var(--mp-border); }
.mp-match__kicker { display: flex; align-items: center; gap: var(--mp-sp-2); margin-bottom: var(--mp-sp-3); font-size: var(--mp-fs-1); font-weight: var(--mp-weight-medium); text-transform: uppercase; letter-spacing: .05em; color: var(--mp-text-secondary); }
.mp-match__name { font-size: var(--mp-fs-4); font-weight: var(--mp-weight-medium); margin-bottom: var(--mp-sp-3); }
.mp-match__fields { display: grid; grid-template-columns: 110px 1fr; gap: var(--mp-sp-1) var(--mp-sp-3); font-size: var(--mp-fs-3); }
.mp-match__fields dt { color: var(--mp-text-muted); }
.mp-match__fields dd { margin: 0; }
.mp-hit { padding: var(--mp-sp-hair) var(--mp-sp-1h); border-radius: var(--mp-radius-xs); background: var(--mp-success-bg); color: var(--mp-success-text); }
.mp-miss { padding: var(--mp-sp-hair) var(--mp-sp-1h); border-radius: var(--mp-radius-xs); background: var(--mp-warning-bg); color: var(--mp-warning-text); }
.mp-match__score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mp-sp-2); padding: var(--mp-sp-4) var(--mp-sp-2); background: var(--mp-surface-sunken); }
.mp-match__value { font-size: var(--mp-fs-6); line-height: var(--mp-lh-6); font-weight: var(--mp-weight-bold); color: var(--mp-success-text); font-variant-numeric: tabular-nums; }
.mp-match__why { font-size: var(--mp-fs-1); color: var(--mp-text-secondary); text-align: center; line-height: 1.4; }
.mp-match__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-sp-4); padding: var(--mp-sp-3) var(--mp-sp-4); background: var(--mp-surface-sunken); border-top: var(--mp-border-width) solid var(--mp-border); font-size: var(--mp-fs-3); }

/* 15 · PermissionMatrix -------------------------------------------------- */

.mp-perms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mp-sp-4); }
.mp-perms__group { border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-sm); background: var(--mp-surface); padding: var(--mp-sp-3) var(--mp-sp-4); }
.mp-perms__title { font-size: var(--mp-fs-2); font-weight: var(--mp-weight-bold); margin-bottom: var(--mp-sp-3); }
.mp-perms__list { display: flex; flex-direction: column; gap: var(--mp-sp-3); font-size: var(--mp-fs-3); }
.mp-perm { display: flex; gap: var(--mp-sp-2); }
.mp-perm__text { display: block; }
.mp-perm__hint { display: block; font-size: var(--mp-fs-1); color: var(--mp-text-muted); }
/* право, которого нет у самого выдающего: отличается от просто снятого */
.mp-perm--locked { color: var(--mp-text-secondary); }
.mp-perm--locked .mp-perm__hint { color: var(--mp-warning-text); }
.mp-perms__readonly .mp-perm { color: var(--mp-text-secondary); }

/* 16 · MarkingCodePanel -------------------------------------------------- */

.mp-codes { border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-sm); background: var(--mp-surface); overflow: hidden; }
/* главное состояние компонента: расхождение количества и числа кодов */
.mp-codes--mismatch { border-color: var(--mp-danger-border); }
.mp-codes__alert { padding: var(--mp-sp-3) var(--mp-sp-4); background: var(--mp-danger-bg); border-bottom: var(--mp-border-width) solid var(--mp-danger-border); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mp-sp-5); }
.mp-codes__alert-title { font-size: var(--mp-m-fs-1); font-weight: var(--mp-weight-bold); color: var(--mp-danger-text); margin-bottom: var(--mp-sp-1); }
.mp-codes__alert-text { font-size: var(--mp-fs-3); line-height: var(--mp-lh-3); color: var(--mp-text-secondary); max-width: 640px; }
.mp-codes__filters { display: flex; align-items: center; gap: var(--mp-sp-2); padding: var(--mp-sp-3) var(--mp-sp-4); border-bottom: var(--mp-border-width) solid var(--mp-border); font-size: var(--mp-fs-2); }
.mp-codes__filters .mp-preset[aria-pressed="true"] { background: var(--mp-surface-dark); border-color: var(--mp-surface-dark); color: var(--mp-n-0); }
.mp-codes__note { margin-left: auto; color: var(--mp-text-muted); }
.mp-codes tr.is-problem td { background: var(--mp-warning-surface); }
.mp-codes__value { font-family: var(--mp-font-mono); font-size: var(--mp-fs-2); }
.mp-codes__value b { font-weight: var(--mp-weight-bold); }
.mp-codes__value span { color: var(--mp-text-muted); }

/* 17 · DimensionsField -------------------------------------------------- */

.mp-dims { display: flex; flex-direction: column; gap: var(--mp-sp-2); }
.mp-dims__row { display: flex; align-items: center; gap: var(--mp-sp-1h); font-size: var(--mp-fs-3); font-variant-numeric: tabular-nums; }
.mp-dims__input { width: 64px; text-align: center; }
.mp-dims__input--weight { width: 70px; margin-left: var(--mp-sp-2); }
.mp-dims__x { color: var(--mp-text-muted); }
.mp-dims__unit { font-size: var(--mp-fs-2); color: var(--mp-text-muted); }
.mp-dims__foot { display: flex; align-items: center; gap: var(--mp-sp-3); font-size: var(--mp-fs-1); }
.mp-dims__volume { margin-left: auto; color: var(--mp-text-muted); }
.mp-source {
  display: inline-flex; align-items: center; gap: var(--mp-sp-1);
  padding: var(--mp-sp-hair) var(--mp-sp-1h); border-radius: var(--mp-radius-sm);
  font-size: var(--mp-fs-1); font-weight: var(--mp-weight-medium);
}
/* ручное значение приоритетно и не перезаписывается синхронизацией */
.mp-source--manual { background: var(--mp-muted-bg); border: var(--mp-border-width) solid var(--mp-muted-border); color: var(--mp-text-secondary); }
.mp-source--marketplace { background: var(--mp-info-bg); border: var(--mp-border-width) solid var(--mp-info-border); color: var(--mp-info-text); }
.mp-dims--synced .mp-input { border-style: dashed; background: var(--mp-surface-sunken); color: var(--mp-text-secondary); }
.mp-dims--conflict { border: var(--mp-border-width) solid var(--mp-warning-border); background: var(--mp-warning-surface); border-radius: var(--mp-radius-sm); padding: var(--mp-sp-3) var(--mp-sp-4); }
.mp-dims__option { display: flex; align-items: center; gap: var(--mp-sp-3); padding: var(--mp-sp-1h) var(--mp-sp-2); background: var(--mp-surface); border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-sm); }

/* --- счётчик: одно число и подпись под ним -------------------------------
   Жил в mobile.css в разделе раскладки прототипов, но по смыслу десктопный:
   строка счётчиков стоит над списком заказов, в карточке приёмки и в центре
   ошибок интеграций. mobile.css на этих экранах не подключён.             */
.mp-metrics { display: flex; flex-wrap: wrap; gap: var(--mp-sp-3); }
.mp-metric {
  flex: 1; min-width: 140px;
  display: flex; flex-direction: column; gap: var(--mp-sp-quarter);
  padding: var(--mp-sp-3);
  border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-sm);
  background: var(--mp-surface);
}
.mp-metric b { font-size: var(--mp-fs-5); line-height: var(--mp-lh-5); font-variant-numeric: tabular-nums; }
.mp-metric span { font-size: var(--mp-fs-2); color: var(--mp-text-secondary); }
.mp-metric--warn b { color: var(--mp-warning-text); }
.mp-metric--ok b { color: var(--mp-success-text); }

/* --- служебное: раскладка страниц-превью -------------------------------- */

.mp-doc { max-width: 1360px; margin: 0 auto; padding: var(--mp-sp-6) var(--mp-sp-7) var(--mp-sp-7); display: flex; flex-direction: column; gap: var(--mp-sp-6); }
.mp-doc__eyebrow { font-size: var(--mp-fs-1); font-weight: var(--mp-weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--mp-text-secondary); }
.mp-doc h1 { margin: var(--mp-sp-2) 0 0; font-size: var(--mp-fs-6); line-height: 1.15; }
.mp-doc h2 { margin: 0 0 var(--mp-sp-1); font-size: var(--mp-fs-5); }
.mp-doc h3 { margin: 0; font-size: var(--mp-fs-4); }
.mp-doc p { margin: 0; max-width: 760px; color: var(--mp-text-secondary); text-wrap: pretty; }
.mp-section { background: var(--mp-surface); border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-md); padding: var(--mp-sp-5); display: flex; flex-direction: column; gap: var(--mp-sp-4); }
.mp-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--mp-sp-4); align-items: start; }
.mp-state__label { font-size: var(--mp-fs-1); font-weight: var(--mp-weight-medium); text-transform: uppercase; letter-spacing: .05em; color: var(--mp-text-secondary); margin-bottom: var(--mp-sp-2); }
.mp-swatches { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--mp-sp-2); }
.mp-swatch__box { height: 56px; border-radius: var(--mp-radius-sm); border: var(--mp-border-width) solid var(--mp-border); }
.mp-swatch__name, .mp-swatch__hex { font-family: var(--mp-font-mono); font-size: var(--mp-fs-1); }
.mp-swatch__name { margin-top: var(--mp-sp-1h); color: var(--mp-text-secondary); }
.mp-swatch__hex { color: var(--mp-text-muted); }
.mp-rule { border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-sm); padding: var(--mp-sp-3) var(--mp-sp-4); font-size: var(--mp-fs-2); line-height: 1.55; color: var(--mp-text-secondary); }
.mp-preview-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--mp-sp-3); }
.mp-swatch__box--n-0 { background: var(--mp-n-0); }
.mp-swatch__box--n-50 { background: var(--mp-n-50); }
.mp-swatch__box--n-100 { background: var(--mp-n-100); }
.mp-swatch__box--n-200 { background: var(--mp-n-200); }
.mp-swatch__box--n-300 { background: var(--mp-n-300); }
.mp-swatch__box--n-400 { background: var(--mp-n-400); }
.mp-swatch__box--n-500 { background: var(--mp-n-500); }
.mp-swatch__box--n-700 { background: var(--mp-n-700); }
.mp-swatch__box--n-900 { background: var(--mp-n-900); }
.mp-role { border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-sm); overflow: hidden; }
.mp-role__head { padding: var(--mp-sp-3) var(--mp-sp-4); font-size: var(--mp-fs-3); font-weight: var(--mp-weight-medium); border-bottom: var(--mp-border-width) solid transparent; }
.mp-role__vars { display: flex; flex-wrap: wrap; gap: var(--mp-sp-4); padding: var(--mp-sp-3) var(--mp-sp-4); font-family: var(--mp-font-mono); font-size: var(--mp-fs-1); color: var(--mp-text-muted); }
.mp-role--success .mp-role__head { background: var(--mp-success-bg); color: var(--mp-success-text); border-bottom-color: var(--mp-success-border); }
.mp-role--warning .mp-role__head { background: var(--mp-warning-bg); color: var(--mp-warning-text); border-bottom-color: var(--mp-warning-border); }
.mp-role--danger .mp-role__head { background: var(--mp-danger-bg); color: var(--mp-danger-text); border-bottom-color: var(--mp-danger-border); }
.mp-role--info .mp-role__head { background: var(--mp-info-bg); color: var(--mp-info-text); border-bottom-color: var(--mp-info-border); }
.mp-role--muted .mp-role__head { background: var(--mp-muted-bg); color: var(--mp-muted-text); border-bottom-color: var(--mp-muted-border); }
.mp-role--overdue .mp-role__head { background: var(--mp-overdue-bg); color: var(--mp-overdue-text); border-bottom-color: var(--mp-overdue-border); }
.mp-scale { display: flex; align-items: flex-end; gap: var(--mp-sp-4); }
.mp-scale__step { display: flex; flex-direction: column; align-items: center; gap: var(--mp-sp-1h); font-size: var(--mp-fs-1); color: var(--mp-text-secondary); }
.mp-scale__box { background: var(--mp-n-700); }
.mp-scale__box--1 { width: var(--mp-sp-1); height: var(--mp-sp-1); }
.mp-scale__box--2 { width: var(--mp-sp-2); height: var(--mp-sp-2); }
.mp-scale__box--3 { width: var(--mp-sp-3); height: var(--mp-sp-3); }
.mp-scale__box--4 { width: var(--mp-sp-4); height: var(--mp-sp-4); }
.mp-scale__box--5 { width: var(--mp-sp-5); height: var(--mp-sp-5); }
.mp-scale__box--6 { width: var(--mp-sp-6); height: var(--mp-sp-6); }
.mp-scale__box--7 { width: var(--mp-touch); height: var(--mp-touch); }
.mp-type { display: flex; flex-direction: column; gap: var(--mp-sp-3); }
.mp-type__row { display: flex; align-items: baseline; gap: var(--mp-sp-3); padding-bottom: var(--mp-sp-2); border-bottom: var(--mp-border-width) solid var(--mp-surface-app); }
.mp-type__spec { flex: 0 0 88px; font-family: var(--mp-font-mono); font-size: var(--mp-fs-1); color: var(--mp-text-muted); }
.mp-type__d5 { font-size: var(--mp-fs-5); font-weight: var(--mp-weight-bold); }
.mp-type__d4 { font-size: var(--mp-fs-4); font-weight: var(--mp-weight-medium); }
.mp-type__d3 { font-size: var(--mp-fs-3); }
.mp-type__d2 { font-size: var(--mp-fs-2); color: var(--mp-text-secondary); }
.mp-type__d1 { font-size: var(--mp-fs-1); font-weight: var(--mp-weight-medium); text-transform: uppercase; letter-spacing: .04em; color: var(--mp-text-secondary); }
.mp-type__m5 { font-family: var(--mp-font-mono); font-size: var(--mp-m-fs-5); font-weight: var(--mp-weight-bold); }
.mp-type__m4 { font-size: var(--mp-m-fs-4); font-weight: var(--mp-weight-bold); }
.mp-type__m3 { font-size: var(--mp-m-fs-3); font-weight: var(--mp-weight-medium); }
.mp-type__m2 { font-size: var(--mp-m-fs-2); }
.mp-type__m1 { font-size: var(--mp-m-fs-1); color: var(--mp-text-secondary); }
.mp-urgency-list { display: flex; flex-direction: column; gap: var(--mp-sp-1h); font-size: var(--mp-fs-2); font-variant-numeric: tabular-nums; }
.mp-urgency-list li { display: flex; align-items: center; gap: var(--mp-sp-2); list-style: none; }
.mp-urgency-list { margin: 0; padding: 0; }
.mp-urgency-bar { width: var(--mp-urgency-stripe-width); height: 18px; background: transparent; }
.mp-urgency-bar--soon { background: var(--mp-urgency-soon); }
.mp-urgency-bar--overdue { background: var(--mp-urgency-overdue); }
.mp-radius-demo { display: flex; align-items: center; gap: var(--mp-sp-3); font-family: var(--mp-font-mono); font-size: var(--mp-fs-1); color: var(--mp-text-secondary); }
.mp-radius-demo__box { width: 44px; height: 32px; background: var(--mp-surface-app); border: var(--mp-border-width) solid var(--mp-border-strong); }
.mp-radius-demo__box--sm { border-radius: var(--mp-radius-sm); }
.mp-radius-demo__box--md { border-radius: var(--mp-radius-md); }
.mp-shadow-demo { display: flex; gap: var(--mp-sp-4); }
.mp-shadow-demo__box { width: 64px; height: 40px; background: var(--mp-surface); border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-md); }
.mp-shadow-demo__box--card { box-shadow: var(--mp-shadow-card); }
.mp-shadow-demo__box--overlay { box-shadow: var(--mp-shadow-overlay); }
.mp-nums { display: flex; gap: var(--mp-sp-6); }
.mp-nums__col { text-align: right; font-size: var(--mp-fs-3); line-height: 1.7; }
.mp-nums__col--tabular { font-variant-numeric: tabular-nums; }
.mp-preview-index a { display: flex; justify-content: space-between; gap: var(--mp-sp-3); padding: var(--mp-sp-3) var(--mp-sp-4); border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-sm); font-size: var(--mp-fs-3); font-weight: var(--mp-weight-medium); }
.mp-preview-index a:hover { background: var(--mp-surface-sunken); }
.mp-preview-index span { color: var(--mp-text-muted); font-family: var(--mp-font-mono); font-size: var(--mp-fs-2); }

/* ============================================================================
   КЛАВИАТУРА И ФОКУС (§5.1) — для компонентов 1–17.
   Правило: любой интерактивный элемент достижим с клавиатуры и виден в фокусе.
   Поведение (ловушка фокуса, roving tabindex) — в партиалах, здесь только
   визуальная часть и служебные классы.
   ========================================================================= */

.mp-skip {
  position: absolute; left: var(--mp-sp-2); top: var(--mp-sp-2); z-index: 60;
  transform: translateY(-200%);
  padding: var(--mp-sp-2) var(--mp-sp-3);
  background: var(--mp-surface-dark); color: var(--mp-n-0);
  border-radius: var(--mp-radius-sm); font-size: var(--mp-fs-2);
}
.mp-skip:focus { transform: none; color: var(--mp-n-0); }

/* строка таблицы как элемент навигации: ↑/↓ по строкам, Space — выбор,
   Enter — открыть. Фокус рисуется рамкой внутрь, чтобы не съедать высоту.  */
.mp-table tbody tr[tabindex] { cursor: pointer; }
.mp-table tbody tr[tabindex]:focus-visible {
  outline: var(--mp-border-width-focus) solid var(--mp-info-solid);
  outline-offset: calc(-1 * var(--mp-border-width-focus));
  background: var(--mp-info-bg);
}
.mp-table tbody tr[tabindex]:focus-visible td { background: var(--mp-info-bg); }
.mp-table tbody tr[aria-selected="true"] td { background: var(--mp-info-bg); }
.mp-table th:focus-visible, .mp-table th button:focus-visible {
  outline: var(--mp-border-width-focus) solid var(--mp-info-solid); outline-offset: calc(-1 * var(--mp-border-width-focus));
}
.mp-sort {
  display: inline-flex; align-items: center; gap: var(--mp-sp-1);
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer;
}
.mp-check:focus-visible, .mp-radio:focus-visible {
  outline: var(--mp-border-width-focus) solid var(--mp-info-solid); outline-offset: var(--mp-sp-hair);
  box-shadow: var(--mp-focus-ring);
}
/* подпись горячих клавиш у таблицы и фильтров: клавиатура здесь быстрее мыши */
.mp-kbd-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-sp-2);
  padding: var(--mp-sp-2) var(--mp-sp-3);
  border-top: var(--mp-border-width) solid var(--mp-border);
  background: var(--mp-surface-sunken);
  font-size: var(--mp-fs-1); color: var(--mp-text-secondary);
}
.mp-kbd-hint b { font-weight: var(--mp-weight-medium); }
/* ловушка фокуса: сторожевые элементы по краям модального окна */
.mp-focus-sentinel { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mp-dialog__close:focus-visible, .mp-chip__x:focus-visible, .mp-preset:focus-visible,
.mp-pager__page:focus-visible, .mp-tabs__tab:focus-visible, .mp-nav__item:focus-visible {
  outline: var(--mp-border-width-focus) solid var(--mp-info-solid); outline-offset: var(--mp-sp-hair);
  border-radius: var(--mp-radius-sm);
}
/* PermissionMatrix: перемещение по чекбоксам ←→↑↓, видимая активная строка */
.mp-perm:focus-within { background: var(--mp-info-bg); border-radius: var(--mp-radius-xs); }
.mp-perms__group:focus-within { border-color: var(--mp-border-control); }

/* ============================================================================
   ПРОТОТИПЫ B и C (этап 3). Классы добавлены осознанно, с обоснованием
   в самих превью; всё остальное собрано из компонентов 1–17.
   ========================================================================= */

/* --- рамка реального экрана 1366×768: проверка плотности, а не украшение -- */
.mp-vp-wrap { overflow: auto; }
.mp-vp {
  width: 1366px; height: 768px;
  display: flex; flex-direction: column;
  border: var(--mp-border-width) solid var(--mp-n-900); border-radius: var(--mp-radius-sm);
  background: var(--mp-surface-app); overflow: hidden;
}
.mp-vp .mp-shell { min-height: 0; height: 100%; }
.mp-vp .mp-shell__body { min-height: 0; }
.mp-vp__meter {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-sp-3);
  padding: var(--mp-sp-2) var(--mp-sp-3);
  border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-sm);
  background: var(--mp-surface); font-size: var(--mp-fs-2);
}
.mp-vp__meter b { font-variant-numeric: tabular-nums; }
.mp-vp__meter--ok { border-color: var(--mp-success-border); background: var(--mp-success-surface); }
.mp-vp__meter--ok b { color: var(--mp-success-text); }
.mp-vp__meter--warn { border-color: var(--mp-warning-border); background: var(--mp-warning-surface); }
.mp-vp__meter--warn b { color: var(--mp-warning-text); }

/* --- плотный список: вторая (и последняя) плотность таблиц --------------- */
.mp-shell__main--dense { padding: var(--mp-sp-2); display: flex; flex-direction: column; gap: var(--mp-sp-2); min-height: 0; }
.mp-shell__main--dense .mp-table-wrap { display: flex; flex-direction: column; min-height: 0; }
.mp-table-scroll { overflow: auto; min-height: 0; }
.mp-filters--dense { padding: var(--mp-sp-2); }
.mp-filters--dense .mp-select, .mp-filters--dense .mp-input, .mp-filters--dense .mp-btn { height: 28px; }
.mp-table--dense td { height: var(--mp-row-h-dense); padding: 0 var(--mp-sp-2); font-size: var(--mp-fs-2); }
.mp-table--dense th { padding: var(--mp-sp-hair) var(--mp-sp-2); }
.mp-table--dense .mp-badge { padding: 0 var(--mp-sp-1); font-size: var(--mp-fs-1); }
.mp-table--dense .mp-mark { width: 16px; height: 16px; }
.mp-table--dense .mp-check { --mp-target-ok: "визуальный размер; зона попадания — .mp-cell-check на всю ячейку, 32×24"; width: 13px; height: 13px; }
/* Ячейка выбора кликабельна целиком: визуальный размер чекбокса остаётся
   маленьким, зона попадания вырастает до размеров ячейки. Выбрать двадцать
   заказов из 1284, попадая в 13-пиксельный квадрат, — это восемь часов
   промахов рядом с кнопкой «Отменить заказы».                              */
.mp-cell-check {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: 24px; height: 100%; min-height: 24px;
  margin: 0; cursor: pointer;
}
.mp-cell-check:hover { background: var(--mp-surface-app); }
.mp-cell-check:focus-within { outline: var(--mp-border-width-focus) solid var(--mp-info-solid); outline-offset: calc(-1 * var(--mp-border-width-focus)); }
.mp-table td:has(> .mp-cell-check) { padding: 0; }
/* цели в шапке плотной таблицы: кнопка сортировки растягивается на всю ячейку */
.mp-table--dense .mp-sort { min-height: 24px; width: 100%; }
.mp-table--dense .mp-code a, .mp-table--dense td a { display: inline-flex; align-items: center; min-height: 24px; }
.mp-pager--dense { padding: var(--mp-sp-hair) var(--mp-sp-3); }
.mp-shell__main--dense .mp-bulkbar { padding: var(--mp-sp-1) var(--mp-sp-3); }
.mp-shell__main--dense .mp-bulkbar .mp-btn { height: 24px; }

/* --- список кандидатов склейки (прототип B) ------------------------------
   MatchPair (14) сравнивает одну пару. Список кандидатов со скорингом —
   другая задача: выбрать, что сравнивать. Отсюда отдельный блок.          */
.mp-cands { display: flex; flex-direction: column; gap: var(--mp-sp-2); }
.mp-cand {
  display: flex; align-items: flex-start; gap: var(--mp-sp-3);
  width: 100%; text-align: left;
  padding: var(--mp-sp-3);
  border: var(--mp-border-width) solid var(--mp-border); border-radius: var(--mp-radius-sm);
  background: var(--mp-surface); color: var(--mp-text); font: inherit; cursor: pointer;
}
.mp-cand[aria-pressed="true"] { border-color: var(--mp-info-solid); background: var(--mp-info-bg); }
.mp-cand__score {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; padding: var(--mp-sp-1) 0;
  border-radius: var(--mp-radius-sm); background: var(--mp-surface-sunken);
  font-variant-numeric: tabular-nums;
}
.mp-cand__score b { font-size: var(--mp-fs-4); line-height: var(--mp-lh-4); }
.mp-cand__score span { font-size: var(--mp-fs-1); color: var(--mp-text-secondary); }
.mp-cand--exact .mp-cand__score { background: var(--mp-success-bg); }
.mp-cand--exact .mp-cand__score b { color: var(--mp-success-text); }
.mp-cand--weak .mp-cand__score { background: var(--mp-warning-bg); }
.mp-cand--weak .mp-cand__score b { color: var(--mp-warning-text); }
.mp-cand__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--mp-sp-1); }
.mp-cand__name { font-size: var(--mp-fs-3); font-weight: var(--mp-weight-medium); }
.mp-cand__why { display: flex; flex-wrap: wrap; gap: var(--mp-sp-1); }
.mp-cand__meta { font-family: var(--mp-font-mono); font-size: var(--mp-fs-1); color: var(--mp-text-secondary); }
/* предпросмотр массовой склейки: что произойдёт, до того как произойдёт */
.mp-preview-list { display: flex; flex-direction: column; gap: var(--mp-sp-1); max-height: 260px; overflow: auto; }
.mp-preview-row {
  display: grid; grid-template-columns: 1fr 20px 1fr; align-items: center; gap: var(--mp-sp-2);
  padding: var(--mp-sp-2); border: var(--mp-border-width) solid var(--mp-border);
  border-radius: var(--mp-radius-sm); font-size: var(--mp-fs-2);
}
.mp-preview-row--skip { border-style: dashed; background: var(--mp-warning-surface); }
.mp-preview-row__arrow { text-align: center; color: var(--mp-text-secondary); }
.mp-preview-row__note { grid-column: 1 / -1; font-size: var(--mp-fs-1); color: var(--mp-warning-text); }

/* --- B.2 · строка видна, действие по ней заблокировано -------------------
   Отличается от «нет прав на весь экран» (EmptyState --noperm): там нечего
   показывать, здесь показывать надо, а править нельзя. Пунктир + приглушение
   + причина в строке, а не тултип: причину нужно читать, не наводя.      */
.mp-table tbody tr.is-locked td { background: var(--mp-surface-sunken); color: var(--mp-text-secondary); }
.mp-table tbody tr.is-locked .mp-check { pointer-events: none; }
.mp-rowlock {
  display: inline-flex; align-items: center; gap: var(--mp-sp-1);
  padding: 0 var(--mp-sp-1); border-radius: var(--mp-radius-xs);
  border: var(--mp-border-width) dashed var(--mp-border-strong);
  background: var(--mp-surface); color: var(--mp-text-secondary);
  font-size: var(--mp-fs-1); white-space: nowrap;
}
.mp-roleview { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--mp-sp-4); align-items: start; }
.mp-roleview__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mp-sp-2);
  padding: var(--mp-sp-2) var(--mp-sp-3);
  border: var(--mp-border-width) solid var(--mp-border); border-bottom: 0;
  border-top-left-radius: var(--mp-radius-sm); border-top-right-radius: var(--mp-radius-sm);
  background: var(--mp-surface-sunken); font-size: var(--mp-fs-2); font-weight: var(--mp-weight-medium);
}
.mp-roleview__head--admin { background: var(--mp-info-bg); color: var(--mp-info-text); border-color: var(--mp-info-border); }
.mp-roleview__head--seller { background: var(--mp-muted-bg); color: var(--mp-muted-text); border-color: var(--mp-muted-border); }