/* ============================================================================
   notice-center.css — вид окна-списка «Что накопилось» (пара к notice-center.js).

   ВАЖНО, как и у ma-modal.css: критичную РАСКЛАДКУ (fixed-центр, кламп в границы
   экрана, прокрутка тела, закреплённые шапка и подвал) ставит ИНЛАЙНОМ
   MA_Modal.place() — она не зависит от этого файла и переживает протухший CSS.
   Здесь только вид и запасная раскладка на случай, когда MA_Modal на странице
   не подключён (тогда окно всё равно обязано быть окном, а не блоком в потоке).

   Правила зоны: цвета/размеры — ТОЛЬКО токенами theme.css (обе темы приходят
   вместе с токенами, отдельных блоков под тему здесь нет и не должно быть);
   шаг сетки 4 px; никаких `transition: all`; никакой 3-пиксельной полосы.
   ============================================================================ */

/* ── Подложка ──────────────────────────────────────────────────────────────
   Второй класс `ma-modal-backdrop` вешает JS (его знает notice-toast.js) —
   геометрию оттуда и берём, здесь только затемнение на случай отсутствия
   MA_Modal.backdrop(). */
.ma-nc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9600;
  background: var(--scrim);
}

/* ── Карточка ───────────────────────────────────────────────────────────────
   Запасная раскладка: ровно то, что иначе поставит MA_Modal.place() инлайном.
   Дублирование намеренное — окно без владельца окон должно остаться окном. */
.ma-nc-card {
  position: fixed;
  z-index: 9601;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  max-width: calc(100vw - 24px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  font-family: var(--font);
}

/* MA_Modal.place() переводит карточку на left/top в пикселях. Сдвиг на половину
   размера тогда лишний — снимаем его, иначе окно уедет вверх-влево на пол-окна. */
.ma-nc-card[style*="left"] { transform: none; }

/* ── Шапка (она же ручка перетаскивания) ─────────────────────────────────── */
.ma-nc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.ma-nc-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--text);
}

.ma-nc-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ma-nc-x:hover { background: var(--surface2); color: var(--text); }
.ma-nc-x:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── Тело: единственный скроллер окна ───────────────────────────────────── */
.ma-nc-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2) var(--space-5) var(--space-4);
}

/* ── Группа («Мешает работать» / «Важно знать» / «Предложения») ──────────── */
.ma-nc-group { margin-top: var(--space-4); }
.ma-nc-group:first-child { margin-top: var(--space-2); }

.ma-nc-group-title {
  display: block;
  width: 100%;
  padding: var(--space-1) 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text2);
  cursor: pointer;
}
.ma-nc-group-title:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ma-nc-group-n { font-weight: 400; }

.ma-nc-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Строка состояния ───────────────────────────────────────────────────── */
.ma-nc-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.ma-nc-row:last-child { border-bottom: 0; }

.ma-nc-row-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ma-nc-row-title {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text);
  cursor: pointer;
}
.ma-nc-row-title[disabled] { cursor: default; }
.ma-nc-row-title:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.ma-nc-since {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 16px;
  color: var(--text2);
  white-space: nowrap;
}

/* Действие — ссылкой, как у advisory-напоминаний портала (без заливки/рамки). */
.ma-nc-action {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.ma-nc-action:hover { color: var(--accent-hover); text-decoration: underline; }
.ma-nc-action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.ma-nc-row-text {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--text2);
}

.ma-nc-row-acks {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.ma-nc-ack {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 16px;
  color: var(--text2);
  cursor: pointer;
  transition: color 0.15s ease;
}
.ma-nc-ack:hover { color: var(--text); }
.ma-nc-ack:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* «Закрыть всё» такое не гасит — говорим это словами, а не только цветом. */
.ma-nc-must {
  margin-left: auto;
  font-size: 12px;
  line-height: 16px;
  color: var(--warning);
}

/* ── Подвал ─────────────────────────────────────────────────────────────── */
.ma-nc-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.ma-nc-close-all {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.ma-nc-close-all:hover { background: var(--accent-hover); }
.ma-nc-close-all:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── Свёрнутая строка очереди «ещё N — открыть» ──────────────────────────────
   Живёт в ОБЩЕМ стеке напоминаний (#ma-toast-stack), поэтому своей позиции не
   имеет: раскладку держит стек, отступ снизу считает MA_Toast.syncPosition(). */
.ma-nc-more {
  align-self: flex-end;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text2);
  font-family: var(--font);
  font-size: 12px;
  line-height: 16px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ma-nc-more:hover { color: var(--text); border-color: var(--accent); }
.ma-nc-more:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Узкий экран (ноутбук 1366×768 и уже): окно не должно упираться в края. */
@media (max-width: 620px) {
  .ma-nc-card { width: calc(100vw - 24px); }
}