/* ═══════════════════════════════════════════════
   REALTRAC PROTOTYPE — DASHBOARD («Оперативная панель»)
   Цвета уровней тревог проверены validate_palette.js (2026-10-28):
   светлая — #D01F27 / #E0A800 / #0070B8 на #FFFFFF (жёлтый 2,15:1 — есть легенда, подсказки и вид «таблица»);
   тёмная — #C2393F / #C08600 / #3987E5 на #161B24 (все проверки пройдены).
   Присутствие — один цвет (акцент бренда). Статусы заряда — всегда со значком и подписью.
   Правила dataviz, которым следует файл: полосы толщиной 16 px со скруглением 4 px только у конца данных,
   столбцы не шире 24 px, зазор 2 px между сегментами и соседними заливками, подписи и числа — текстом,
   цвет никогда не единственный носитель смысла (легенда, значки, подсказки, вид «таблица»).
   Раскладка: оперативная панель — страница .page-wide (см. directory.css), карточки — .card из base.css.
═══════════════════════════════════════════════ */

/* Цвета уровней тревог как CSS-переменные на странице — их читают и стили, и JS (цвета ключей в подсказках).
   position: relative — от страницы отсчитывается положение всплывающей подсказки .db-tip */
.page-wide { position: relative; --lvl-DANGER: #D01F27; --lvl-WARNING: #E0A800; --lvl-NOTICE: #0070B8; --db-bar: var(--color-primary); }
[data-theme="dark"] .page-wide { --lvl-DANGER: #C2393F; --lvl-WARNING: #C08600; --lvl-NOTICE: #3987E5; }

/* ── Главная цифра и шесть плиток: на широком экране все семь — в одну строку одной высоты ──
   Сетка из семи равных колонок; position: relative — контейнер для sortable (offset карточек) */
.db-kpis { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.db-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.db-label svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Плитка — карточка со ссылкой во всю площадь; ручка перетаскивания — рядом со ссылкой, не внутри
   (кнопка внутри ссылки недопустима). Верхняя рамка 3 px — место для цвета состояния (is-critical / is-warning);
   число прижато к низу, чтобы во всех плитках стояло на одной линии */
.db-tile { position: relative; display: flex; min-width: 0; border-top: 3px solid transparent; }
.db-tile:hover { border-color: var(--color-primary); }
.db-tile-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); color: var(--color-text); text-decoration: none; }
.db-tile .db-label { padding-right: var(--space-3); }
.db-value { margin-top: auto; font-size: 32px; font-weight: 600; line-height: 1.1; }
.db-sub { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Главная цифра: число и мини-график в одну строку, подпись — под ними (grid с именованными областями).
   Мини-график — SVG 200×40 с preserveAspectRatio none: растягивается на ширину, линия не масштабируется
   (vector-effect), точка последнего замера — акцентом */
.db-hero .db-tile-link { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "label label" "value spark" "sub sub"; column-gap: var(--space-3); }
.db-hero .db-label { grid-area: label; }
.db-hero-value { grid-area: value; align-self: end; font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.db-hero .db-spark { grid-area: spark; align-self: end; width: 100%; height: 36px; }
.db-hero-sub { grid-area: sub; font-size: var(--text-xs); color: var(--color-text-muted); }
.db-spark-line { fill: none; stroke: var(--color-text-faint); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.db-spark-dot { fill: var(--color-primary); stroke: var(--color-surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* Состояние плитки: красная или оранжевая верхняя рамка и значок — только при ненулевом значении (ставит JS) */
.db-tile.is-critical { border-top-color: var(--lvl-DANGER); }
.db-tile.is-critical .db-label svg { color: var(--lvl-DANGER); }
.db-tile.is-warning { border-top-color: var(--lvl-WARNING); }
.db-tile.is-warning .db-label svg { color: var(--lvl-WARNING); }
/* Ненулевое число — цветом плитки: красное и оранжевое (оранжевый текст темнее полосы — контраст ≥ 3:1 для крупных цифр) */
.db-tile.is-critical .db-value { color: var(--lvl-DANGER); }
.db-tile.is-warning .db-value { color: var(--db-warning-text, var(--lvl-WARNING)); }
.page-wide { --db-warning-text: #A87800; }
[data-theme="dark"] .page-wide { --db-warning-text: var(--lvl-WARNING); }
/* Сравнение с предыдущими сутками: рост тревог — плохо (красный), снижение — хорошо (зелёный); со стрелкой в тексте */
.db-delta { font-weight: 600; }
.db-delta.is-bad { color: var(--color-error); }
.db-delta.is-good { color: var(--color-success); }

/* ── Карточки ──
   Две колонки; карточка с is-span занимает обе (ставит spanPass в dashboard.js: только если начинает строку,
   чтобы в сетке не было дыр). position: relative — для sortable */
.db-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.db-grid > .is-span { grid-column: 1 / -1; }   /* широкая карточка, начинающая строку (spanPass в dashboard.js) */
/* Шапка карточки: заголовок со значком, справа — легенда / счётчик / «Таблица» / ручка перетаскивания */
.db-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-divider); }
.db-card-head h2 { display: flex; align-items: center; gap: var(--space-2); flex: 1; font-size: var(--text-base); font-weight: 600; }
.db-card-head h2 svg { width: 18px; height: 18px; color: var(--color-primary); }
.db-card-body { padding: var(--space-4) var(--space-5); }
/* Пустое состояние карточки: приглушённый текст, зелёный значок «всё хорошо» там, где пусто — это хорошо */
.db-empty { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; font-size: var(--text-sm); color: var(--color-text-muted); list-style: none; }
.db-empty svg { width: 18px; height: 18px; color: var(--color-success); }
.db-table td.num, .db-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Полосы присутствия: толщина 16 px, скругление только у конца данных, значение у конца.
   Строка — grid «название | полоса | число»; название обрезается многоточием, у полосы слева базовая линия */
.db-bars { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.db-bar-row { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) 36px; align-items: center; gap: var(--space-3); padding: 2px 0; color: var(--color-text); text-decoration: none; font-size: var(--text-sm); }
.db-bar-row:hover .db-bar { filter: brightness(1.12); }
.db-bar-row:hover .db-bar-name { color: var(--color-primary); }
.db-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-bar-track { height: 16px; border-left: 1px solid var(--color-border); }
.db-bar { display: block; height: 100%; min-width: 0; background: var(--db-bar); border-radius: 0 4px 4px 0; transition: width var(--transition); }
.db-bar-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Кто в зонах: список с прокруткой (не выше 340 px, чтобы карточка не растягивала сетку), строка — ссылка на карту;
   точка цвета зоны (.status-dot.is-zone-* из map.css), имя и место, справа — время в зоне */
.db-zone-list { list-style: none; display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
.db-zone-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.db-zone-row:hover { background: var(--color-primary-highlight); }
.db-zone-who { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: var(--text-sm); line-height: 1.35; }
.db-zone-who span { font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-zone-time { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Столбцы тревог: ширина до 24 px, зазор 2 px между сегментами, скругление сверху.
   Легенда с квадратными ключами цвета уровней; область графика — grid «ось Y | столбцы», высота 200 px,
   линии делений — абсолютно по высоте, подписи оси сдвинуты на полстроки вверх, чтобы стоять на линии */
.db-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.db-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.db-key { width: 12px; height: 12px; display: inline-block; flex-shrink: 0; }
.db-key.level-DANGER { background: var(--lvl-DANGER); }
.db-key.level-WARNING { background: var(--lvl-WARNING); }
.db-key.level-NOTICE { background: var(--lvl-NOTICE); }
.db-cols { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: 200px auto; column-gap: var(--space-2); }
.db-axis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; transform: translateY(-.5em); }
.db-plot { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; border-bottom: 1px solid var(--color-border); }
.db-grid-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--color-divider); pointer-events: none; }
/* Столбец — кнопка во всю высоту корзины (цель для наведения и фокуса шире самого столбика) */
.db-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.db-col:hover, .db-col:focus-visible { background: color-mix(in srgb, var(--color-primary-highlight) 70%, transparent); }
/* Стопка сегментов снизу вверх (column-reverse: первый в разметке — опасные — внизу); верхний скруглён */
.db-stack { width: min(24px, 70%); display: flex; flex-direction: column-reverse; gap: 2px; min-height: 0; }
.db-stack > :last-child { border-radius: 4px 4px 0 0; }
.db-seg { display: block; min-height: 2px; }
.db-seg.level-DANGER { background: var(--lvl-DANGER); }
.db-seg.level-WARNING { background: var(--lvl-WARNING); }
.db-seg.level-NOTICE { background: var(--lvl-NOTICE); }
/* Ось X: 24 подписи часов, показана каждая третья (JS), на узком экране — каждая шестая */
.db-xaxis { grid-column: 2; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.db-xaxis span { white-space: nowrap; }

/* Заряд: полоса «часть целого», зазор 2 px, концы скруглены (только у крайних сегментов).
   Статусы — зелёный / оранжевый / красный / серый «нет данных», в легенде — значок батареи и число */
.db-meter { display: flex; gap: 2px; height: 16px; }
.db-meter-seg:first-child { border-radius: 4px 0 0 4px; }
.db-meter-seg:last-child { border-radius: 0 4px 4px 0; }
.db-meter-seg:only-child { border-radius: 4px; }
.db-meter-seg.is-good, .db-key.is-good { background: var(--color-success); }
.db-meter-seg.is-warning, .db-key.is-warning { background: var(--lvl-WARNING); }
.db-meter-seg.is-critical, .db-key.is-critical { background: var(--lvl-DANGER); }
.db-meter-seg.is-unknown, .db-key.is-unknown { background: var(--color-surface-offset); }
.db-meter-legend { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); margin-top: var(--space-4); font-size: var(--text-sm); }
.db-meter-legend li { display: flex; align-items: center; gap: var(--space-2); }
.db-meter-legend svg { width: 16px; height: 16px; color: var(--color-text-muted); }
.db-meter-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.db-note { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.db-note svg { width: 14px; height: 14px; }

/* Лента тревог: значок уровня цветом, текст и источник, справа — кнопки-ссылки (разбор, карта) */
.db-feed { list-style: none; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.db-feed-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); }
.db-feed-icon { display: flex; }
.db-feed-icon svg { width: 18px; height: 18px; }
.db-feed-row.level-DANGER .db-feed-icon { color: var(--lvl-DANGER); }
.db-feed-row.level-WARNING .db-feed-icon { color: var(--lvl-WARNING); }
.db-feed-row.level-NOTICE .db-feed-icon { color: var(--lvl-NOTICE); }
.db-feed-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: var(--text-sm); line-height: 1.35; }
.db-feed-text b { font-weight: 500; }
.db-feed-text span { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Подсказка: значение — главное, подпись — второстепенное; ключ — короткая линия цвета.
   Абсолютно позиционируется внутри страницы (JS), не ловит указатель, чтобы не мигать при наведении */
.db-tip { position: absolute; z-index: 30; min-width: 160px; padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); font-size: var(--text-xs); pointer-events: none; }
.db-tip-title { margin-bottom: var(--space-1); color: var(--color-text-muted); }
.db-tip-row { display: flex; align-items: center; gap: var(--space-2); }
.db-tip-row b { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.db-tip-row span:last-child { color: var(--color-text-muted); }
.db-tip-key { width: 12px; height: 2px; flex-shrink: 0; }

/* ── Адаптив ── Плитки: одна строка — от 1500 px, уже — по четыре, на телефоне — по две;
   карточки на телефоне — в одну колонку, подписи оси часов — через одну */
@media (max-width: 1500px) { .db-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-grid { grid-template-columns: 1fr; }
  .db-xaxis span:nth-child(odd) { visibility: hidden; }
}

/* ── Выравнивание: плитки одной высоты, парные карточки — тоже ──
   Карточка — flex-колонка, тело растягивается: соседние карточки в ряду одной высоты */
.db-grid { align-items: stretch; }
.db-grid > .db-card { display: flex; flex-direction: column; }
.db-grid > .db-card > .db-card-body { flex: 1; }

/* Легенда-переключатель графика тревог: кнопки-ключи; выключенный уровень — бледный и зачёркнутый */
.db-legend-item { padding: 2px var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); border: 1px solid transparent; }
.db-legend-item:hover { border-color: var(--color-border); color: var(--color-text); }
.db-legend-item.is-off { opacity: .45; text-decoration: line-through; }

/* ═══ ИНФОГРАФИКА ═══
   Упорядоченные полосы (движение, свежесть) — ступени синего бренда, проверены как ordinal:
   светлая #86b6ef → #3987e5 → #1c5cab, тёмная #184f95 → #3987e5 → #86b6ef.
   Способ определения — категориальные синий / бирюзовый / фиолетовый (проверены, обе темы).
   --sub-track — светлая подложка полосы «из всех» у подразделений (тот же синий, светлее). */
.page-wide { --o1: #86b6ef; --o2: #3987e5; --o3: #1c5cab; --c1: #0070B8; --c2: #0E9384; --c3: #7C3AED; --sub-track: #cde2fb; }
[data-theme="dark"] .page-wide { --o1: #184f95; --o2: #3987e5; --o3: #86b6ef; --c1: #3987E5; --c2: #199e70; --c3: #9085e9; --sub-track: #1c3557; }

/* Заголовок блока «Инфографика» — акцидентным шрифтом, как заголовки страниц */
.db-section-title { margin: var(--space-8) 0 var(--space-3); font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); letter-spacing: .02em; }

/* Полосы: подложка и заливка — друг на друге (абсолютно внутри дорожки); заливка по уровню тревоги —
   цветом уровня, в названии строки — значок уровня (цвет не единственный признак) */
.db-bar-track { position: relative; }
.db-bar-track .db-bar { position: absolute; left: 0; top: 0; bottom: 0; }
.db-bar.is-track { background: var(--sub-track); }
.db-bar.is-level.level-DANGER { background: var(--lvl-DANGER); }
.db-bar.is-level.level-WARNING { background: var(--lvl-WARNING); }
.db-bar.is-level.level-NOTICE { background: var(--lvl-NOTICE); }
.db-bar-name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.db-lvl-icon { width: 15px; height: 15px; flex-shrink: 0; }
.db-lvl-icon.level-DANGER { color: var(--lvl-DANGER); }
.db-lvl-icon.level-WARNING { color: var(--lvl-WARNING); }
.db-lvl-icon.level-NOTICE { color: var(--lvl-NOTICE); }
.db-bar-row .db-bar-value { white-space: nowrap; }
.db-of { font-weight: 400; font-size: var(--text-xs); color: var(--color-text-muted); }
/* Подразделения — в две колонки, число «N из M» шире обычного */
.db-bars-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-8); }
.db-bars-2col .db-bar-row { grid-template-columns: minmax(120px, 36%) minmax(0, 1fr) 64px; }
.db-key.is-fill { background: var(--db-bar); }
.db-key.is-track { background: var(--sub-track); }

/* Объекты в разрезе: здание — блок с «крышей» (толстая верхняя рамка), этажи сверху вниз строками
   «название | люди | число»; открытая площадка — пунктир сверху и зелёная «земля» снизу.
   Человек — квадрат 12 px с белой обводкой (значки не сливаются), цвет — зона; ссылка увеличивается при наведении */
.db-building + .db-building { margin-top: var(--space-4); }
.db-building-name { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.db-building-name svg { width: 16px; height: 16px; color: var(--color-primary); }
.db-floors { border: 1px solid var(--color-border); border-top: 3px solid var(--color-text-faint); }
.db-building.is-open .db-floors { border-top-style: dashed; border-top-width: 1px; border-bottom: 3px solid var(--color-success); }
.db-floor { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); min-height: 40px; }
.db-floor + .db-floor { border-top: 1px solid var(--color-divider); }
.db-floor-name { font-size: var(--text-xs); color: var(--color-text-muted); }
.db-floor-people { display: flex; flex-wrap: wrap; gap: 4px; }
.db-person { display: inline-block; width: 12px; height: 12px; background: var(--color-primary); border: 2px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-primary); }
.db-person.is-notice { background: var(--zone-notice); box-shadow: 0 0 0 1px var(--zone-notice); }
.db-person.is-danger { background: var(--lvl-DANGER); box-shadow: 0 0 0 1px var(--lvl-DANGER); }
a.db-person:hover, a.db-person:focus-visible { transform: scale(1.35); }
.db-legend .db-person { width: 10px; height: 10px; }
.db-more { font-size: var(--text-xs); color: var(--color-text-muted); align-self: center; }
.db-floor-count { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Флажок у числа этажа: сколько в красной / жёлтой зоне — значок, цвет и число вместе */
.db-flag { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; font-size: var(--text-xs); font-weight: 600; }
.db-flag svg { width: 12px; height: 12px; }
.db-flag.is-danger { color: var(--color-error); background: var(--color-error-bg); }
.db-flag.is-notice { color: var(--color-warning); background: var(--color-warning-bg); }

/* Состояние носителей: три полосы «часть целого» (.db-meter из блока заряда) с заголовком, числом в сети
   и легендой под полосой; цвета сегментов — из палитр o1–o3 и c1–c3 выше */
.db-stackbar + .db-stackbar { margin-top: var(--space-5); }
.db-stackbar-head { display: flex; justify-content: space-between; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 500; }
.db-stackbar-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.db-stackbar-legend li { display: inline-flex; align-items: center; gap: var(--space-1); }
.db-stackbar-legend b { color: var(--color-text); }
.db-meter-seg.is-o1, .db-key.is-o1 { background: var(--o1); }
.db-meter-seg.is-o2, .db-key.is-o2 { background: var(--o2); }
.db-meter-seg.is-o3, .db-key.is-o3 { background: var(--o3); }
.db-meter-seg.is-c1, .db-key.is-c1 { background: var(--c1); }
.db-meter-seg.is-c2, .db-key.is-c2 { background: var(--c2); }
.db-meter-seg.is-c3, .db-key.is-c3 { background: var(--c3); }

/* ── Ширина строк-полос по ширине карточки (container queries) ──
   Длинные подписи (типы тревог) — шире колонка названия */
.db-bars.is-long-names .db-bar-row { grid-template-columns: minmax(120px, 52%) minmax(0, 1fr) 40px; }
/* Полосы подстраиваются под ширину своей карточки: её можно поставить во всю ширину или в половину */
.db-card { container-type: inline-size; }
@container (max-width: 1000px) { .db-bars-2col { grid-template-columns: 1fr; } }
/* Узкая карточка: подпись строки — над полосой, чтобы длинные названия не обрезались */
@container (max-width: 520px) {
  .db-bar-row, .db-bars-2col .db-bar-row, .db-bars.is-long-names .db-bar-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .db-bar-row .db-bar-name { grid-column: 1 / -1; }
}

/* ═══ ПЕРЕТАСКИВАНИЕ КАРТОЧЕК (sortable.js) ═══
   Классы is-sorting / is-drag-source / is-sort-target / .sort-ghost ставит sortable.js; .db-drag — ручка */
/* Справа в заголовке страницы: подсказка «можно перетаскивать» или кнопка «Вернуть исходный порядок» */
.db-layout-tools { display: flex; align-items: center; gap: var(--space-3); }
.db-layout-hint { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.db-layout-hint svg { width: 14px; height: 14px; }

/* Ручка: бледная, ярче при наведении на карточку; touch-action: none — палец на ручке тащит карточку, а не страницу;
   отрицательные поля — ручка не раздувает шапку карточки */
.db-drag { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; margin: -4px -8px -4px 0; padding: 0; color: var(--color-text-faint); background: none; border: 0; cursor: grab; touch-action: none; opacity: .6; transition: opacity var(--transition), color var(--transition); }
.db-drag svg { width: 16px; height: 16px; }
.db-drag:hover, .db-drag:focus-visible, .db-card:hover .db-drag { opacity: 1; }
.db-drag:hover, .db-drag:focus-visible { color: var(--color-primary); }
/* У плитки ручка — в правом верхнем углу, появляется при наведении и фокусе */
.db-tile .db-drag { position: absolute; top: 4px; right: 4px; margin: 0; background: var(--color-surface); opacity: 0; }
.db-tile:hover .db-drag, .db-tile .db-drag:focus-visible { opacity: 1; }
@media (hover: none) { .db-drag, .db-tile .db-drag { opacity: .7; } }   /* на сенсорном экране наведения нет — видна всегда */

/* Пока тащат: курсор «схвачено» везде и запрет выделения текста */
.is-sorting, .is-sorting * { cursor: grabbing !important; user-select: none; }
/* След на месте, куда встанет карточка */
.is-drag-source { opacity: .45; outline: 2px dashed var(--color-primary); outline-offset: -2px; }
/* Опустевшая сетка во время перетаскивания — место, куда можно положить карточку */
.db-grid.is-sort-target.is-empty { min-height: 160px; outline: 2px dashed var(--color-border); outline-offset: -2px; }
/* «Призрак» за указателем: заголовок карточки, у плитки — ещё и число */
.sort-ghost { position: fixed; left: 0; top: 0; z-index: 1300; pointer-events: none; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-primary); box-shadow: var(--shadow-md); color: var(--color-text); }
.db-ghost { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.db-ghost h2, .db-ghost .db-label { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.db-ghost svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-primary); }
.db-ghost .db-value, .db-ghost .db-hero-value { margin: 0; font-size: var(--text-lg); font-weight: 600; line-height: 1; }