/* ══════════════════════════════════════════════════════════════════════════
   cabinet.css — ЛК сотрудников matebox-supply.
   Дизайн-направление: «технический паспорт» — светлая инженерная тема
   (бумажный фон, графит, индустриальный оранж, IBM Plex Sans/Mono).

   СОВМЕСТИМОСТЬ СО СТАРЫМИ БРАУЗЕРАМИ (Э8, база: IE11 / Chrome~2016):
   • каждое свойство с var(--x) продублировано литералом НА ТОЙ ЖЕ СТРОКЕ
     ПЕРЕД var() — современные берут var(), IE11 — литерал. Меняешь палитру
     в :root — поменяй и литералы (правила: docs/old_browsers.md);
   • grid — только внутри @supports (display:grid), перед ним flex-фолбэк;
   • gap во flex НЕ используем — только margin'ы.

   НАВИГАЦИЯ (Э9 сайдбар + Э10 мобильное меню) — в nav.css (подключается
   после этого файла ТОЛЬКО в base.html). Здесь остались общие стили бренда
   (.brand/.brand-dot/.brand-sub) — их используют и login/error без меню.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Палитра */
  --bg: #f5f6f2; --surface: #ffffff;         /* «бумага» / карточки */
  --ink: #1c2430; --ink-soft: #5b6470;       /* графит / вторичный текст */
  --line: #e2e4de;                           /* тонкие рамки 1px */
  --accent: #d9480f; --accent-ink: #b23a0a;  /* индустриальный оранж + hover */
  --steel: #1c5d99;                          /* стальной синий — ссылки */
  --ok: #2b8a3e; --warn: #b08900; --danger: #c92a2a;          /* статусы */
  --ok-bg: #e6f4ea; --warn-bg: #fdf6dd; --danger-bg: #fdebeb;
  --mark: #ffe8a3;                           /* подсветка поиска в справке */
  /* Типографика и ритм */
  --font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;
  --radius: 6px; --gap: 1rem; --page-max: 78rem;
  --shadow: 0 1px 3px rgba(28, 36, 48, .08);
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-family: var(--font-sans);
  color: #1c2430; color: var(--ink);
  background: #f5f6f2;          /* фолбэк IE11: ровный фон без миллиметровки */
  background:
    /* лёгкая миллиметровка — атмосфера чертёжной бумаги */
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 2.5rem,
    var(--bg);
  line-height: 1.55;
}

a { color: #1c5d99; color: var(--steel); }
a:hover { color: #b23a0a; color: var(--accent-ink); }

code, .mono {
  font-family: "IBM Plex Mono", "Consolas", monospace; font-family: var(--font-mono);
  font-size: .875em;
}

/* <details>/<summary> в IE11 — неизвестные элементы (display:inline).
   Класс js-no-details вешает cabinet.js ТОЛЬКО при отсутствии нативной
   поддержки: тогда summary кликабелен (полифилл), тело прячется без [open].
   Без JS класса нет — секции всегда раскрыты (контент доступен). */
.js-no-details details, .js-no-details summary { display: block; }
.js-no-details details:not([open]) > *:not(summary) { display: none; }

/* ── Бренд (общий) ─────────────────────────────────────────────────────────
   Используется и в шапке/сайдбаре (base.html + nav.css), и на страницах
   БЕЗ меню (login/error — они грузят только cabinet.css). Вся остальная
   навигация (.topbar/.nav-tabs/☰) — в nav.css. ───────────────────────── */

.brand { font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }

.brand-dot { color: #d9480f; color: var(--accent); }   /* оранжевая «точка детали» */

.brand-sub { color: #5b6470; color: var(--ink-soft); font-size: .8rem; letter-spacing: .06em; }

/* ── Контейнер страницы ────────────────────────────────────────────────── */

.page {
  max-width: 78rem; max-width: var(--page-max);
  margin: 0 auto; padding: 1.25rem;
  animation: page-in .25s ease-out;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(.35rem); }
  to   { opacity: 1; transform: none; }
}

.page-title { font-size: 1.35rem; font-weight: 700; margin: 0 0 .25rem; }

.page-lead { color: #5b6470; color: var(--ink-soft); margin: 0 0 1rem; font-size: .92rem; }

/* Подвал страницы (Э31-E): одна тихая строка под контентом на ВСЕХ страницах
   (base.html) — вход в техдокументацию для разработчиков matebox. Ненавязчив:
   мелкий кегль, вторичный цвет, отделён тонкой чертой. Flex БЕЗ gap —
   margin'ы у детей (перенос на узких экранах), см. docs/old_browsers.md. */
.page-foot {
  margin-top: 2.5rem;
  padding-top: .6rem;
  border-top: 1px solid #e2e4de; border-top-color: var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: .78rem;
  color: #5b6470; color: var(--ink-soft);
}
.page-foot > * { margin-top: .1rem; margin-bottom: .1rem; }
.page-foot > * + * { margin-left: .5rem; }

.page-foot a { color: #5b6470; color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted #b9bfb4; }
.page-foot a:hover { color: #b23a0a; color: var(--accent-ink); border-bottom-color: #b23a0a; border-bottom-color: var(--accent-ink); }

/* Главная ссылка подвала — чуть заметнее соседей (её ищут глазами).
   Селектор с типом: должен перебивать `.page-foot a` выше по специфичности. */
.page-foot a.page-foot-main { font-weight: 600; color: #1c5d99; color: var(--steel); border-bottom-style: solid; }

/* Контраст с фоном #f5f6f2 — не ниже WCAG AA для мелкого кегля (#6f7670 ≈ 4.6:1) */
.page-foot-note { color: #6f7670; }

/* ── Карточки ──────────────────────────────────────────────────────────── */

.card {
  background: #ffffff; background: var(--surface);
  border: 1px solid #e2e4de; border-color: var(--line);
  border-radius: 6px; border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(28, 36, 48, .08); box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem; margin-bottom: var(--gap);
}

.card-title { font-weight: 600; font-size: 1rem; margin: 0 0 .75rem; display: flex; align-items: center; }
.card-title > * + * { margin-left: .5rem; }  /* вместо gap:.5rem */

/* Счётчики дашборда: плитки с левым оранжевым кантом.
   Фолбэк — flex с margin (IE11/Chrome 2016), современные — grid в @supports */
.counters {
  display: flex; flex-wrap: wrap;
  margin: -.5rem -.5rem .5rem;   /* компенсация margin плиток; низ .5+.5=1rem */
}

.counter {
  flex: 1 1 11rem;               /* фолбэк ширины вместо minmax(11rem, 1fr) */
  margin: .5rem;
  background: #ffffff; background: var(--surface);
  border: 1px solid #e2e4de; border-color: var(--line);
  border-left: 4px solid #d9480f; border-left-color: var(--accent);
  border-radius: 6px; border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(28, 36, 48, .08); box-shadow: var(--shadow);
  padding: .8rem 1rem;
}

@supports (display: grid) {
  /* Современные браузеры: исходная сетка, рендер как до Э8 */
  .counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem; gap: var(--gap);
    margin: 0 0 1rem; margin: 0 0 var(--gap);
  }
  .counter { margin: 0; }
}

.counter .label {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: #5b6470; color: var(--ink-soft);
}

.counter .value {
  font-family: "IBM Plex Mono", "Consolas", monospace; font-family: var(--font-mono);
  font-size: 1.55rem; font-weight: 600; margin-top: .15rem;
}

/* Э17: предупреждение внутри формы (напр. «график общий для всех прайсов») */
.form-warn {
  margin: 0 0 .6rem;
  padding: .5rem .7rem;
  font-size: .85rem;
  border: 1px solid #f0c36d;
  border-left-width: 4px;
  border-radius: 6px;
  background: #fff8e6;
  color: #6b5314;
}

/* ── Таблицы ───────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }   /* обязательный горизонтальный скролл */

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }

table.data th {
  text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;
  color: #5b6470; color: var(--ink-soft);
  border-bottom: 2px solid #1c2430; border-bottom-color: var(--ink);
  padding: .5rem .6rem; white-space: nowrap;
}

table.data td {
  padding: .5rem .6rem;
  border-bottom: 1px solid #e2e4de; border-bottom-color: var(--line);
  vertical-align: top;
}

table.data tr:hover td { background: #fbf8f4; }

td.num, th.num { text-align: right; font-family: "IBM Plex Mono", "Consolas", monospace; font-family: var(--font-mono); }

.muted { color: #5b6470; color: var(--ink-soft); }
.small { font-size: .8rem; }

/* ── Статус-бейджи с точкой-индикатором ────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center;
  padding: .1rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}

.badge::before { content: "●"; font-size: .6rem; margin-right: .35rem; } /* margin вместо gap */

.badge-ok     { background: #e6f4ea; background: var(--ok-bg);     color: #2b8a3e; color: var(--ok); }
.badge-warn   { background: #fdf6dd; background: var(--warn-bg);   color: #b08900; color: var(--warn); }
.badge-danger { background: #fdebeb; background: var(--danger-bg); color: #c92a2a; color: var(--danger); }
.badge-off    { background: #eef0ec;                               color: #5b6470; color: var(--ink-soft); }

/* ── Кнопки ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-family: var(--font-sans);
  font-size: .88rem; font-weight: 600; padding: .45rem 1rem;
  border-radius: 6px; border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background .12s, transform .05s;
}

.btn:active { transform: translateY(1px); }   /* visual feedback нажатия */

.btn-primary { background: #d9480f; background: var(--accent); color: #fff; }
.btn-primary:hover { background: #b23a0a; background: var(--accent-ink); color: #fff; }

.btn-ghost {
  background: #ffffff; background: var(--surface);
  color: #1c2430; color: var(--ink);
  border-color: #e2e4de; border-color: var(--line);
}
.btn-ghost:hover { border-color: #5b6470; border-color: var(--ink-soft); }

.btn-danger { background: #ffffff; background: var(--surface); color: #c92a2a; color: var(--danger); border-color: #c92a2a; border-color: var(--danger); }
.btn-danger:hover { background: #fdebeb; background: var(--danger-bg); }

.btn:disabled,
.btn-ghost:disabled { opacity: .5; cursor: not-allowed; }

.btn-sm { padding: .25rem .6rem; font-size: .8rem; }

.btn-full { width: 100%; }          /* кнопка на всю ширину (форма логина) */

.inline-form { display: inline; }   /* POST-кнопки в ячейках таблиц */

/* ── Формы ─────────────────────────────────────────────────────────────── */

/* Фолбэк — flex с margin (gap .75rem 1rem), современные — grid в @supports */
.form-grid { display: flex; flex-wrap: wrap; margin: -.375rem -.5rem; }
.form-grid > * {
  flex: 1 1 14rem;               /* фолбэк ширины вместо minmax(14rem, 1fr) */
  margin: .375rem .5rem;
}

@supports (display: grid) {
  .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .75rem 1rem;
    margin: 0;
  }
  .form-grid > * { margin: 0; }
}

/* Поле на всю ширину формы (вместо inline style="grid-column: 1 / -1") */
.field--full { flex-basis: 100%; }
@supports (display: grid) {
  .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; }
.field > * + * { margin-top: .25rem; }   /* вместо gap:.25rem (колонка) */

.field label { font-size: .8rem; font-weight: 600; color: #5b6470; color: var(--ink-soft); }

.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-family: var(--font-sans);
  font-size: .92rem; padding: .45rem .6rem;
  border: 1px solid #e2e4de; border-color: var(--line);
  border-radius: 6px; border-radius: var(--radius);
  background: #fff;
  color: #1c2430; color: var(--ink);
}

.field textarea { font-family: "IBM Plex Mono", "Consolas", monospace; font-family: var(--font-mono); min-height: 5.5rem; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid #d9480f; outline-color: var(--accent);
  outline-offset: 0;
  border-color: #d9480f; border-color: var(--accent);
}

.field .hint { font-size: .75rem; color: #5b6470; color: var(--ink-soft); }

.check-row { display: flex; align-items: center; font-size: .88rem; padding-top: .35rem; }
.check-row > * + * { margin-left: .45rem; }  /* вместо gap:.45rem */

/* Вместо gap:.6rem — margin детей + компенсация контейнером (верх .6+.3=.9) */
.form-actions { margin: .6rem -.3rem -.3rem; display: flex; flex-wrap: wrap; }
.form-actions > * { margin: .3rem; }

/* Свёрнутая форма создания: <details> без JS */
details.form-details > summary {
  cursor: pointer; font-weight: 600;
  color: #1c5d99; color: var(--steel);
  list-style: none;
}
details.form-details > summary::before { content: "▸ "; color: #d9480f; color: var(--accent); }
details.form-details[open] > summary::before { content: "▾ "; }
details.form-details > .details-body { margin-top: .85rem; }

/* ── Источники (Э15): fieldset-группы формы, липкая шапка, сортировка ──────── */

/* Группы полей формы источника (Подключение / Файл / Расписание / Опции) */
fieldset.form-group {
  border: 1px solid #e2e4de; border-color: var(--line);
  border-radius: 8px; border-radius: var(--radius);
  padding: .75rem 1rem 1rem; margin: 0 0 1rem;
}
fieldset.form-group > legend {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: #5b6470; color: var(--ink-soft);
  padding: 0 .4rem;
}

/* Фильтры списка — отступ снизу перед таблицей */
form.filters { margin-bottom: .85rem; }

/* Липкая шапка таблицы. IE11/старый Chrome sticky не поддерживают — деградирует
   до обычной прокручиваемой шапки (страж test_old_browsers не падает: sticky не
   в списке запрещённых, а grid/var(--) здесь не используются). */
table.data--sticky thead th {
  position: -webkit-sticky;      /* старые Safari */
  position: sticky;
  top: 0; z-index: 2;
  background: #fbf8f4; background: var(--paper);
}

/* Кликабельные заголовки-сортировки */
th.th-sort a {
  color: #5b6470; color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
}
th.th-sort a:hover { color: #d9480f; color: var(--accent); }
th.th-sort--active a { color: #1c2430; color: var(--ink); }

/* Ячейка действий источника: кнопки и «Забрать сейчас» стопкой без gap */
.src-actions > * { margin-bottom: .3rem; }

/* «Забрать сейчас» — details-подтверждение с чекбоксом обхода защиты */
details.fetch-now > summary { cursor: pointer; list-style: none; display: inline-block; }
details.fetch-now > summary::-webkit-details-marker { display: none; }
details.fetch-now > .fetch-form {
  margin-top: .4rem; padding: .5rem;
  border: 1px solid #e2e4de; border-color: var(--line);
  border-radius: 6px; border-radius: var(--radius);
  background: #fbf8f4; background: var(--paper);
  white-space: normal; min-width: 13rem;
}
details.fetch-now > .fetch-form > * + * { margin-top: .4rem; }

/* ── Э16: компактный список источников (группировка по контрагенту) ─────────
   Цель — таблица влезает в ~1200px БЕЗ горизонтального скролла, строки низкие
   (раньше 14 колонок + многострочные ячейки распирали строки). Только
   flex/margin, без grid/gap (правило старых браузеров). */

/* Заголовок группы-контрагента: имя + число прайсов + суммарный статус */
tr.src-group-head td {
  background: #f0f2ee;
  border-bottom: 1px solid #d8dad3;
  padding: .4rem .6rem;
  vertical-align: middle;
}
.src-group-name { font-weight: 700; }
.src-group-count {
  color: #5b6470; color: var(--ink-soft);
  font-size: .8rem; margin: 0 .5rem;
}

/* Компактная строка: меньше вертикали — уходят «пустые высокие» строки */
table.src-table td { padding: .35rem .5rem; }
table.src-table th { white-space: normal; }   /* заголовки могут переноситься */

/* Стек «сервер · путь · формат» в одной ячейке */
.src-price { min-width: 14rem; max-width: 30rem; }
.cell-stack { display: flex; flex-direction: column; }
.cell-stack > * + * { margin-top: .1rem; }
.cell-main { word-break: break-word; }
.cell-sub { font-size: .78rem; color: #5b6470; color: var(--ink-soft); }
.cell-tags { display: flex; align-items: center; flex-wrap: wrap; }
.cell-tags > * { margin: .1rem .35rem .1rem 0; }

/* Колонка параметров: бейджи переносятся, не раздувая строку */
.src-params { white-space: normal; }
.src-params > .badge { margin: 0 .25rem .2rem 0; }
.src-sched { max-width: 12rem; }

/* Обрезка длинного текста статуса до 2 строк (полный — в title). IE11: без
   line-clamp текст покажется целиком — допустимая деградация. */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .78rem; line-height: 1.3;
}

/* ── Разбор брендов (Э12, /cabinet/brands) ─────────────────────────────────
   Ячейка «Действия»: форма «Подтвердить как есть» и форма «сопоставить/проверить»
   стоят друг под другом; во второй — поле + две кнопки в ряд. gap во flex не
   используем — margin-схемы (правило старых браузеров). */
/* Э16: ячейка действий не должна распирать таблицу — узкий блок, кнопки/поле
   переносятся, а не тянут строку в одну длинную линию. */
.brand-actions { min-width: 11rem; max-width: 16rem; }
.brand-actions > form + form { margin-top: .5rem; }   /* две формы стопкой */
.brand-map-form {                                      /* поле + кнопки — перенос */
  display: flex; flex-wrap: wrap; align-items: center;
  margin-top: .4rem;
}
.brand-map-form > * { margin: .15rem .3rem .15rem 0; } /* вместо gap: .3rem */

.brand-map-input {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-family: var(--font-sans);
  font-size: .85rem; padding: .3rem .5rem;
  border: 1px solid #e2e4de; border-color: var(--line);
  border-radius: 6px; border-radius: var(--radius);
  background: #fff;
  color: #1c2430; color: var(--ink);
  width: 9.5rem; max-width: 100%;                      /* умеренная ширина */
}

/* Длинный список поставщиков в ячейке — обрезка до 2 строк, полный в title */
.brand-suppliers {
  max-width: 12rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brand-map-input:focus {
  outline: 2px solid #d9480f; outline-color: var(--accent);
  outline-offset: 0;
  border-color: #d9480f; border-color: var(--accent);
}

/* ── Э15: лента разбора — вкладки, поиск, пагинация, массовое подтверждение ─
   Только flex + margin (правило старых браузеров: gap/grid не используем). */

/* Вкладки «Очередь / Разобранные» */
.brand-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid #e2e4de; border-bottom-color: var(--line); margin: 0 0 .85rem; }
.brand-tab {
  padding: .45rem .9rem; text-decoration: none;
  color: #5b6470; color: var(--ink-soft); font-weight: 600; font-size: .9rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.brand-tab:hover { color: #1c2430; color: var(--ink); }
.brand-tab.active { color: #d9480f; color: var(--accent); border-bottom-color: #d9480f; border-bottom-color: var(--accent); }

/* Поиск + фильтр по виду */
.brand-toolbar { display: flex; flex-wrap: wrap; align-items: center; margin: 0 -.25rem .85rem; }
.brand-toolbar > * { margin: .25rem; }
.brand-search {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-family: var(--font-sans);
  font-size: .9rem; padding: .4rem .6rem;
  border: 1px solid #e2e4de; border-color: var(--line);
  border-radius: 6px; border-radius: var(--radius);
  background: #fff; color: #1c2430; color: var(--ink);
  min-width: 18rem; flex: 1 1 18rem; max-width: 30rem;
}
.brand-search:focus { outline: 2px solid #d9480f; outline-color: var(--accent); outline-offset: 0; border-color: #d9480f; border-color: var(--accent); }
.brand-kind {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-family: var(--font-sans);
  font-size: .9rem; padding: .4rem .5rem;
  border: 1px solid #e2e4de; border-color: var(--line);
  border-radius: 6px; border-radius: var(--radius);
  background: #fff; color: #1c2430; color: var(--ink);
}

/* Колонка чекбоксов и групповая панель подтверждения */
.brand-check { width: 1.5rem; text-align: center; }
.brand-bulkbar { display: flex; flex-wrap: wrap; align-items: center; margin: .75rem -.3rem 0; }
.brand-bulkbar > * { margin: .3rem; }

/* Строка действий (кнопка + ссылка «Офферы») — Э16: перенос, не одна линия */
.brand-act-row { display: flex; flex-wrap: wrap; }
.brand-act-row > * { margin: .15rem .35rem .15rem 0; }

/* Ручной синоним */
.brand-manual-row { display: flex; flex-wrap: wrap; align-items: center; margin: .5rem -.25rem 0; }
.brand-manual-row > * { margin: .25rem; }

/* Пагинация «пред / N из M / след» */
.brand-pager { display: flex; flex-wrap: wrap; align-items: center; margin: 1rem -.35rem 0; }
.brand-pager > * { margin: .35rem; }
.pager-off { opacity: .45; cursor: default; }

/* Подсветка строки, к которой вернулись (после «Проверить в Parts-Index» и др.) */
.row-hl td { background: #ffe8cc; background: var(--accent-bg, #ffe8cc); }

/* ── Справочник брендов (Э35): группа канонов с раскрытием ──────────────────
   Одна <details> на бренд: в summary — верное название и счётчики, внутри —
   таблица написаний и форма добавления синонима. Раскрытие нативное
   (полифилл IE11 — cabinet.js), поэтому JS странице не нужен. */
details.brand-group {
  border: 1px solid #e2e4de; border-color: var(--line);
  border-radius: 6px;
  padding: .55rem .75rem;
  margin-bottom: .5rem;
  background: #fff; background: var(--surface, #fff);
}
details.brand-group > summary {
  cursor: pointer;
  list-style: none;                 /* свой маркер ▸/▾, как у .form-details */
}
details.brand-group > summary::before { content: "▸ "; color: #d9480f; color: var(--accent); }
details.brand-group[open] > summary::before { content: "▾ "; }
details.brand-group[open] > summary { margin-bottom: .35rem; }
details.brand-group > .details-body { margin-top: .5rem; }
/* Название бренда в summary: не сливается со счётчиками, но и не тянет строку
   вниз — margin-right вместо gap (gap во flex запрещён правилом проекта). */
.brand-group-name { font-weight: 600; margin-right: .5rem; }

/* Перехват Enter в единой форме очереди: безобидная default-кнопка, визуально
   скрыта, но остаётся в DOM (НЕ display:none — иначе перестанет быть
   default-кнопкой формы). Clip-техника — работает и в IE11. */
.brand-enter-guard {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap;
}

/* ── Flash-сообщения ───────────────────────────────────────────────────── */

.flash {
  border: 1px solid #e2e4de; border-color: var(--line);
  border-left: 4px solid #2b8a3e; border-left-color: var(--ok);
  background: #e6f4ea; background: var(--ok-bg);
  color: #1c2430; color: var(--ink);
  border-radius: 6px; border-radius: var(--radius);
  padding: .6rem 1rem;
  margin-bottom: 1rem; margin-bottom: var(--gap);
  animation: page-in .25s ease-out;
}

.flash-error { border-left-color: #c92a2a; border-left-color: var(--danger); background: #fdebeb; background: var(--danger-bg); }

/* Полный API-ключ: показывается один раз — рамка-предупреждение + моно */
.key-reveal {
  border: 2px dashed #d9480f; border-color: var(--accent);
  background: #fff8f2;
  border-radius: 6px; border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin-bottom: 1rem; margin-bottom: var(--gap);
}

.key-reveal .key-value {
  font-family: "IBM Plex Mono", "Consolas", monospace; font-family: var(--font-mono);
  font-size: .95rem; word-break: break-all;
  background: #fff;
  border: 1px solid #e2e4de; border-color: var(--line);
  border-radius: 6px; border-radius: var(--radius);
  padding: .5rem .7rem; margin: .5rem 0;
  user-select: all;   /* клик — выделяется целиком (IE11: обычное выделение) */
}

/* ── Блок «Как пользоваться» в каждом разделе ──────────────────────────── */

details.howto {
  border: 1px solid #e2e4de; border-color: var(--line);
  border-left: 4px solid #1c5d99; border-left-color: var(--steel);
  border-radius: 6px; border-radius: var(--radius);
  background: #f8fafc;
  padding: .6rem 1rem;
  margin-bottom: 1rem; margin-bottom: var(--gap);
  font-size: .9rem;
}

details.howto > summary {
  cursor: pointer; font-weight: 600;
  color: #1c5d99; color: var(--steel);
  list-style: none;
}
details.howto > summary::before { content: "ⓘ "; }

details.howto ol { margin: .6rem 0 .2rem; padding-left: 1.4rem; }
details.howto li { margin-bottom: .25rem; }

/* ── Страница логина ───────────────────────────────────────────────────── */

.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}

/* IE11-флексбаг: min-height не задаёт высоту flex-контейнеру — карточка не
   центрируется. Медиазапрос -ms-high-contrast срабатывает ТОЛЬКО в IE10/11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .login-wrap { height: 100vh; }
}

.login-card {
  width: 100%; max-width: 22rem;
  background: #ffffff; background: var(--surface);
  border: 1px solid #e2e4de; border-color: var(--line);
  border-top: 4px solid #d9480f; border-top-color: var(--accent);
  border-radius: 6px; border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(28, 36, 48, .12);
  padding: 1.75rem;
  animation: page-in .3s ease-out;
}

.login-card .brand { font-size: 1.2rem; }

.login-card .field { margin-bottom: .8rem; }

.login-error {
  color: #c92a2a; color: var(--danger);
  background: #fdebeb; background: var(--danger-bg);
  border-radius: 6px; border-radius: var(--radius);
  padding: .5rem .75rem; font-size: .85rem; margin-bottom: .8rem;
}

/* ── Адаптивность ──────────────────────────────────────────────────────── */

/* Э16: второстепенные колонки (.col-secondary) прячем на средних экранах,
   чтобы таблицы влезали без горизонтального скролла. ≥1200px — видно всё;
   768–1200px и уже — скрыты (на узких .table-wrap даёт скролл-страховку). */
@media (max-width: 1200px) {
  .col-secondary { display: none; }
}

@media (max-width: 640px) {
  html { font-size: 15px; }
  .page { padding: .8rem; }
  .brand-sub { display: none; }   /* логин/ошибка: подпись бренда не влезает */
  .form-grid > * { flex-basis: 100%; }               /* фолбэк: одна колонка */
  @supports (display: grid) {
    .form-grid { grid-template-columns: 1fr; }
  }
}