/* Общее для экранов Марины (спека 028, T029): карточки, строки, таблица, плашки состояния.
   Размеры - из токенов Марины (--fs-*, --target); цвета - из tokens.css. */

.m-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.m-lead { font-size: var(--fs-text); color: var(--ink-dim); max-width: 46em; }
.m-sub { font-size: var(--fs-caption); line-height: 1.4; color: var(--ink-dim); }
.m-sub b { color: var(--ink); }

.m-card {
  display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4);
  background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-soft);
}
.m-card.is-alert { background: var(--err-bg); }

/* Строки: имя и подпись слева, плашка и кнопки справа */
.m-list { list-style: none; display: flex; flex-direction: column; }
.m-list > li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-2) 0; border-top: 1px solid var(--surface-2);
}
.m-list > li:first-child { border-top: 0; padding-top: 0; }
.m-list > li:last-child { padding-bottom: 0; }
.m-grow { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.m-name { font-family: var(--display); font-weight: 700; font-size: var(--fs-text); }
.m-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.m-actions .btn-danger { margin-left: var(--sp-4); }
.m-actions .btn-danger:first-child { margin-left: 0; }
.m-num { min-width: 2ch; font-family: var(--display); font-weight: 700; font-size: var(--fs-title); line-height: 1; }

/* Плашка состояния: значок и слово; текст от 4.5:1 на своей заливке (М12) */
.m-plate {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: 4px var(--sp-2);
  border-radius: var(--radius); font-size: var(--fs-text); font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.m-plate.is-ok { background: var(--ok-bg); color: var(--green-ink); }
.m-plate.is-err { background: var(--err-bg); color: var(--danger-ink); }
.m-plate.is-off, .m-plate.is-wait, .m-plate.is-info { background: var(--surface-2); color: var(--ink); }

/* Таблица: читаемые заголовки (М8), ячейки с воздухом */
.m-table { width: 100%; border-collapse: collapse; }
.m-table th {
  text-align: left; font-family: var(--display); font-weight: 700; font-size: var(--fs-text);
  padding: 0 var(--sp-2) var(--sp-1); border-bottom: 2px solid var(--line);
}
.m-table td { padding: var(--sp-2); vertical-align: middle; border-top: 1px solid var(--surface-2); }
.m-table tr:first-child td { border-top: 0; }
.m-table th:first-child, .m-table td:first-child { padding-left: 0; }

.m-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.m-form .field { flex: 1 1 280px; }