/* ============================================================
   ProcAtlas — DASH-THEME (дизайн-язык дашбордов, «тёмный премиум»)
   Утверждён владельцем 21.08.2026. Эталон: prototype/dash_dark.html.
   Токены и приёмы — DESIGN.md, раздел «Дизайн-язык ДАШБОРДОВ».

   НАЗНАЧЕНИЕ И ГРАНИЦЫ ФАЙЛА
   ---------------------------------------------------------------
   Общий словарь классов для ТРЁХ ролевых дашбордов (владелец БП / аудитор /
   стейкхолдер, см. docs/specs/role-dashboards.md) — чтобы три агента не
   изобретали разный визуал. Файл не содержит разметки и данных — только
   форму. Данные, счётчики и ссылки на объекты каждый дашборд берёт из
   контрактов ядра (PA.counts()/PA.portfolioCounts(), ui.refChip()) — см.
   CLAUDE.md/DESIGN.md, «Контракты записи».

   ИЗОЛЯЦИЯ (обязательно к прочтению перед использованием)
   ---------------------------------------------------------------
   ОБНОВЛЕНО 24.08.2026: до этой даты дашборд был ЕДИНСТВЕННЫМ местом в приложении с этим
   визуальным языком — остальные ~12 разделов и вся оболочка (дерево процессов, топбар, вкладки,
   карточки, таблицы) жили в старом светлом языке design-system.css. Пользователь при переключении
   вкладки визуально «прыгал» между двумя разными продуктами — это было признано дефектом (см.
   DESIGN.md, шапка раздела «Дизайн-язык ДАШБОРДОВ»). Починка: core/design-system.css САМ взял
   палитру «тёмный премиум» как базовые токены `:root` (не только для .pd-root) — премиум-тёмная
   стала ОСНОВНОЙ темой всего приложения, светлая осталась переключаемой альтернативой
   (html[data-theme="light"], кнопка в топбаре). Из-за этого текст ниже про «изоляцию» сейчас
   ЧАСТИЧНО верен по-другому: значения токенов дашборда и ядра теперь СОВПАДАЮТ по умолчанию (эта
   секция дублирует базу, а не спорит с ней) — но сам МЕХАНИЗМ изоляции описан ниже правильно и
   остаётся важным по одной причине: 3 ролевых дашборда обязаны быть тёмными ВСЕГДА, даже когда
   пользователь переключил остальное приложение на светлую тему (данные приняты 21.08.2026: у
   дашборда свой язык, он не следует общему переключателю). Именно это гарантирует неймспейс
   `--pd-*` на `.pd-root` — он не читает `html[data-theme]` и не перекрашивается при переключении.
   Поэтому:
     1. Все правила ниже написаны как `.pd-root <селектор>` — не голые
        `.pd-card`/`.pd-kpi` и т.п. — стиль физически не может сработать
        нигде, кроме поддерева `.pd-root`, даже если где-то случайно
        появится одноимённый класс.
     2. Токены дашборда — СВОЙ неймспейс `--pd-*`, объявленный на `.pd-root`
        (не на :root/html) — значит они не читаются и не перезаписываются
        нигде за пределами дашборда, и сами не зависят от html[data-theme].
     3. Внутри `.pd-root` ДОПОЛНИТЕЛЬНО переопределены обычные токены
        design-system.css (--card/--ink/--mute/--red-ink и т.д., см. блок
        «совместимость с ядром» ниже) — так что и обычные хелперы приложения
        (главное — ui.refChip(), возможные ui.pill()/ui.icon()), если их
        подставить внутрь карточки дашборда, красятся правильно — тёмным —
        НЕЗАВИСИМО от того, светлая сейчас тема приложения или тёмная (это и
        есть работающая часть изоляции — держит дашборд тёмным, когда вокруг
        него светлая тема). Снаружи `.pd-root` эти переменные не видны
        (custom properties не протекают вверх по дереву).

   КАК ПОДКЛЮЧАТЬ (для агентов, которые собирают сами дашборды)
   ---------------------------------------------------------------
   Модуль дашборда возвращает `<div class="pd-root"> … </div>` КАК
   ВЕРХНИЙ элемент рендера — мимо стандартной обёртки `.pa-wrap`
   (она держит max-width:1140px, дашборду нужна своя раскладка шире и без
   лишнего внешнего паддинга поверх собственного). `.pd-root` сам держит
   максимальную ширину и внутренние отступы (см. `.pd-shell`), сам красит
   фон на всю свою область — снаружи (в `.pa-mainwrap`) виден светлый/тёмный
   холст приложения как обычная рамка вокруг тёмной панели дашборда, это
   осознанное решение, а не баг: дашборд — самостоятельная тёмная панель
   внутри интерфейса приложения, а не отдельная страница.

   ИНВЕНТАРЬ КЛАССОВ — см. итоговый отчёт задачи (frontmatter-заметка в
   INDEX.md/докладе исполнителя). Коротко: layout (.pd-shell/.pd-section),
   типографика (.pd-eyebrow/.pd-title/.pd-sub), карточка (.pd-card + модифи-
   каторы), KPI-плитка (.pd-kpi-row/.pd-kpi-*), сегмент-переключатель
   (.pd-seg), легенды (.pd-legend/.pd-band-legend), пилюли (.pd-pill),
   графики-контейнеры (.pd-chart-hero/-bar/-area/.pd-gauge/.pd-donut),
   мини-бар/метр (.pd-meter), список-приоритет (.pd-list/.pd-row), сноска
   с источником (.pd-foot).

   ЧЕГО ЗДЕСЬ НЕТ И ПОЧЕМУ
   ---------------------------------------------------------------
   - Нет .pd-topbar/.pd-brand: у приложения уже есть свои .pa-top/.pa-brand,
     дашборд — это содержимое вкладки/экрана, а не отдельная страница со
     своей шапкой (в prototype/dash_dark.html шапка была нужна только для
     автономного демо-файла).
   - Нет спарклайна/переключателя «за период» с фальшивой историей: в системе
     нет таблицы снимков показателей во времени (docs/specs/role-dashboards.md,
     п.1) — .pd-kpi-spark ниже это просто контейнер под мини-график, ЛЮБОЙ
     график в нём обязан быть распределением по РЕАЛЬНЫМ текущим объектам
     (например, PCI по 12 процессам портфеля, как в эталоне), а не рядом
     значений «месяц за месяцем» — таких данных нет и выдумывать их нельзя.
   - Нет «пустой» заглушки под недостающий показатель (никаких «—»/«н/д»):
     по правилу «надписи без данных запрещены» показателя без источника
     просто не должно быть на экране — секция/карточка не рендерится вовсе.
   - Сегмент-переключатель (.pd-seg) — только для фильтров, которые реально
     переключают РЕАЛЬНЫЕ срезы данных (домен, роль, статус и т.п.). Свитчер
     дня/недели/месяца собирать из этих классов нельзя — истории нет.
   ============================================================ */

/* ---------- 1. ТОКЕНЫ + СОВМЕСТИМОСТЬ С ЯДРОМ ---------- */
.pd-root{
  /* ---- палитра «тёмный премиум» (см. DESIGN.md) ---- */
  --pd-bg-page:#080a13;
  --pd-bg-page-2:#0b0e19;
  --pd-bg-card:#0e1220;
  --pd-bg-card-2:#131a2c;
  --pd-bg-card-soft:#0c101d;
  --pd-border:rgba(255,255,255,.08);
  --pd-border-soft:rgba(255,255,255,.05);
  --pd-border-strong:rgba(255,255,255,.16);
  --pd-text-primary:#f4f6fb;   /* на .pd-bg-card ≥16:1 (замерено: 17.25:1) */
  --pd-text-secondary:#aab2c8; /* ≥8:1 (замерено: 8.8:1) */
  --pd-text-muted:#7c869e;     /* ≥4.5:1 (замерено: 5.12:1 на card, 5.42:1 на page) */
  --pd-accent:#8f8cf9;
  --pd-accent-2:#4fd6f0;
  --pd-accent-soft:rgba(143,140,249,.14);
  --pd-accent-ink:#b4b2ff;     /* accent-текст на accent-soft: 7.84:1 */
  --pd-risk-critical:#f2495c;
  --pd-risk-critical-soft:rgba(242,73,92,.14);
  --pd-risk-critical-ink:#ff8b98;   /* на critical-soft: 7.26:1 */
  --pd-risk-warning:#f2b544;
  --pd-risk-warning-soft:rgba(242,181,68,.14);
  --pd-risk-warning-ink:#ffcf7a;    /* на warning-soft: 9.9:1 */
  --pd-risk-acceptable:#4f8cf0;
  --pd-risk-acceptable-soft:rgba(79,140,240,.14);
  --pd-risk-acceptable-ink:#8fb8f7; /* на acceptable-soft: 7.71:1 */
  --pd-risk-good:#33d6a6;
  --pd-risk-good-soft:rgba(51,214,166,.14);
  --pd-risk-good-ink:#7ee8c5;       /* на good-soft: 9.81:1 */
  --pd-r-xl:22px; --pd-r-lg:16px; --pd-r-md:12px; --pd-r-sm:8px;
  --pd-font-ui:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pd-font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --pd-sh:0 1px 2px rgba(0,0,0,.4);
  --pd-sh-lift:0 24px 48px -34px rgba(0,0,0,.85);

  /* ---- совместимость с ядром: переопределение обычных токенов
     design-system.css ТОЛЬКО в этом поддереве, чтобы ui.refChip() и любой
     другой переиспользуемый хелпер приложения красился правильно на тёмном
     фоне дашборда независимо от html[data-theme]. Формула soft-фона (14%
     непрозрачности базового цвета) — та же, что уже принята для --pd-risk-*
     выше, ничего нового не изобретено. ---- */
  --bg:var(--pd-bg-page); --card:var(--pd-bg-card); --card2:var(--pd-bg-card-2);
  --raise:var(--pd-bg-card-soft); --hair:var(--pd-border); --hair2:var(--pd-border-strong);
  --ink:var(--pd-text-primary); --body:var(--pd-text-secondary);
  --mute:var(--pd-text-muted); --faint:var(--pd-text-muted);
  --sans:var(--pd-font-ui); --mono:var(--pd-font-mono);
  --violet:var(--pd-accent); --violet-ink:var(--pd-accent-ink); --violet-bg:var(--pd-accent-soft);
  --blue:var(--pd-accent);   --blue-ink:var(--pd-accent-ink);   --blue-bg:var(--pd-accent-soft);
  --red:var(--pd-risk-critical);    --red-ink:var(--pd-risk-critical-ink);    --red-bg:var(--pd-risk-critical-soft);
  --amber:var(--pd-risk-warning);   --amber-ink:var(--pd-risk-warning-ink);   --amber-bg:var(--pd-risk-warning-soft);
  --orange:var(--pd-risk-warning);  --orange-ink:var(--pd-risk-warning-ink);  --orange-bg:var(--pd-risk-warning-soft);
  --green:var(--pd-risk-good);      --green-ink:var(--pd-risk-good-ink);      --green-bg:var(--pd-risk-good-soft);
  --cyan:var(--pd-accent-2);        --cyan-ink:var(--pd-accent-2);            --cyan-bg:rgba(79,214,240,.14);
  --gold:var(--pd-risk-warning);    --gold-ink:var(--pd-risk-warning-ink);
  --r-chip:var(--pd-r-sm); --r-in:var(--pd-r-md); --r-card:var(--pd-r-lg);
  --sh:var(--pd-sh); --sh-lift:var(--pd-sh-lift);
}

/* ---------- 2. БАЗА КОНТЕЙНЕРА ---------- */
.pd-root{
  position:relative;
  isolation:isolate;
  background:var(--pd-bg-page);
  color:var(--pd-text-primary);
  font-family:var(--pd-font-ui);
  -webkit-font-smoothing:antialiased;
  border-radius:var(--pd-r-xl);
  box-shadow:var(--pd-sh-lift);
}
.pd-root ::selection{background:rgba(143,140,249,.35);color:#fff;}
.pd-root .mono,.pd-root .pd-mono{font-family:var(--pd-font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* фоновое свечение — единственная декоративная деталь языка (DESIGN.md).
   Собственный слой с overflow:hidden клипует размытые пятна по границе
   .pd-root, а не по вьюпорту (в отличие от эталона-одностраничника). */
.pd-root .pd-glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit;}
.pd-root .pd-glow i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.16;}
.pd-root .pd-glow i:nth-child(1){width:640px;height:640px;top:-260px;left:-160px;background:var(--pd-accent);}
.pd-root .pd-glow i:nth-child(2){width:560px;height:560px;top:-120px;right:-220px;background:var(--pd-accent-2);opacity:.11;}
.pd-root .pd-glow i:nth-child(3){width:520px;height:520px;bottom:-280px;left:38%;background:#3d3ab0;opacity:.13;}

/* контентный слой поверх свечения + внутренние отступы/ширина панели */
.pd-root .pd-shell{position:relative;z-index:1;max-width:1360px;margin:0 auto;padding:28px 32px 40px;}

/* вертикальный ритм между блоками экрана — вешать на прямых детей .pd-shell */
.pd-root .pd-section{margin-top:20px;}
.pd-root .pd-section:first-child{margin-top:0;}

@media (prefers-reduced-motion: reduce){
  .pd-root *{transition-duration:.001ms !important;animation-duration:.001ms !important;}
}

/* ---------- 3. ТИПОГРАФИКА ЗАГОЛОВКОВ ---------- */
.pd-root .pd-eyebrow{font-size:10.8px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--pd-accent-2);opacity:.85;}
.pd-root .pd-title{font-family:var(--pd-font-ui);font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--pd-text-primary);margin:4px 0 2px;}
.pd-root .pd-sub{font-size:12.5px;color:var(--pd-text-muted);font-weight:500;line-height:1.4;margin:0;}
.pd-root .pd-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* ---------- 4. КАРТОЧКА (базовый строительный блок) ---------- */
.pd-root .pd-card{
  background:linear-gradient(180deg,var(--pd-bg-card-2) 0%,var(--pd-bg-card) 62%);
  border:1px solid var(--pd-border);border-radius:var(--pd-r-xl);
  padding:22px 24px;position:relative;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,var(--pd-sh-lift);
}
.pd-root .pd-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);}
/* модификатор: карточка как flex-колонка (для 3-блочных рядов и т.п.) */
.pd-root .pd-card--col{display:flex;flex-direction:column;}
/* модификатор: акцентная карточка с радиальной подсветкой сверху (гейдж/герой-показатель) */
.pd-root .pd-card--accent{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:radial-gradient(120% 100% at 50% 0%,rgba(143,140,249,.16),transparent 60%),
    linear-gradient(180deg,var(--pd-bg-card-2) 0%,var(--pd-bg-card) 70%);
  border-color:rgba(143,140,249,.22);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 0 0 1px rgba(143,140,249,.06),
    0 30px 60px -30px rgba(143,140,249,.35),var(--pd-sh-lift);
}
.pd-root .pd-card--accent .pd-eyebrow{align-self:flex-start;}
/* сноска карточки с верхней hairline-чертой (обычный текст, без иконки) */
.pd-root .pd-card-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--pd-border-soft);width:100%;font-size:11.5px;color:var(--pd-text-muted);font-weight:500;}
.pd-root .pd-card-foot b{color:var(--pd-text-secondary);font-family:var(--pd-font-mono);font-weight:700;}
/* сноска-предупреждение с иконкой (площадка под svg 15×15, тон свободный через currentColor) */
.pd-root .pd-note{margin-top:12px;padding-top:12px;border-top:1px solid var(--pd-border-soft);font-size:12px;color:var(--pd-text-secondary);
  font-weight:500;line-height:1.5;display:flex;gap:8px;align-items:flex-start;}
.pd-root .pd-note svg{width:15px;height:15px;flex:none;margin-top:1px;}
.pd-root .pd-note b{color:var(--pd-text-primary);font-family:var(--pd-font-mono);}
/* глоссарий (core/terms.js: ui.term/PA.TERMS, напр. «ОЭ-индекс» — MINOR приёмки, «два индекса
   рядом путать опасно») — тот же .pa-term/.pa-term-pop, что и в светлой теме приложения, здесь
   переопределён под тёмный премиум: без этого поповер рисовался бы светлой карточкой (var(--card)
   светлой темы) поверх тёмного дашборда. */
.pd-root .pa-term{border-bottom-color:var(--pd-border-strong);}
.pd-root .pa-term-pop{background:var(--pd-bg-card-2);border-color:var(--pd-border-strong);color:var(--pd-text-secondary);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6);}
.pd-root .pa-term-pop b{color:var(--pd-text-primary);}

/* ---------- 5. ПИЛЮЛЯ (переиспользуемая: kpi-бейдж / полоса гейджа / риск-метка) ---------- */
.pd-root .pd-pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  padding:5px 11px;border-radius:999px;white-space:nowrap;}
.pd-root .pd-pill--critical{background:var(--pd-risk-critical-soft);color:var(--pd-risk-critical-ink);border:1px solid rgba(242,73,92,.32);}
.pd-root .pd-pill--warning{background:var(--pd-risk-warning-soft);color:var(--pd-risk-warning-ink);border:1px solid rgba(242,181,68,.32);}
.pd-root .pd-pill--acceptable{background:var(--pd-risk-acceptable-soft);color:var(--pd-risk-acceptable-ink);border:1px solid rgba(79,140,240,.3);}
.pd-root .pd-pill--good{background:var(--pd-risk-good-soft);color:var(--pd-risk-good-ink);border:1px solid rgba(51,214,166,.32);}
.pd-root .pd-pill--accent{background:var(--pd-accent-soft);color:var(--pd-accent-ink);border:1px solid rgba(143,140,249,.32);}
.pd-root .pd-pill--neutral{background:rgba(255,255,255,.06);color:var(--pd-text-secondary);border:1px solid var(--pd-border);}

/* ---------- 6. KPI-ПЛИТКА ---------- */
.pd-root .pd-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.pd-root .pd-kpi{padding:20px 22px 16px;display:flex;flex-direction:column;min-height:172px;}
.pd-root .pd-kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.pd-root .pd-kpi-label{font-size:12px;font-weight:600;color:var(--pd-text-secondary);letter-spacing:.01em;line-height:1.35;max-width:150px;}
.pd-root .pd-kpi-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;
  background:var(--pd-accent-soft);border:1px solid rgba(143,140,249,.22);color:var(--pd-accent);}
.pd-root .pd-kpi-icon svg{width:17px;height:17px;}
.pd-root .pd-kpi-icon.pd-tone-critical{background:var(--pd-risk-critical-soft);border-color:rgba(242,73,92,.28);color:var(--pd-risk-critical);}
.pd-root .pd-kpi-icon.pd-tone-good{background:var(--pd-risk-good-soft);border-color:rgba(51,214,166,.28);color:var(--pd-risk-good);}
.pd-root .pd-kpi-icon.pd-tone-warning{background:var(--pd-risk-warning-soft);border-color:rgba(242,181,68,.28);color:var(--pd-risk-warning);}
.pd-root .pd-kpi-icon.pd-tone-acceptable{background:var(--pd-risk-acceptable-soft);border-color:rgba(79,140,240,.28);color:var(--pd-risk-acceptable);}
.pd-root .pd-kpi-num-row{display:flex;align-items:baseline;gap:6px;margin-top:14px;}
.pd-root .pd-kpi-num{font-family:var(--pd-font-mono);font-weight:700;font-size:34px;letter-spacing:-.02em;color:var(--pd-text-primary);font-variant-numeric:tabular-nums;line-height:1;}
.pd-root .pd-kpi-unit{font-family:var(--pd-font-mono);font-size:14px;color:var(--pd-text-muted);font-weight:500;}
.pd-root .pd-kpi-sub{font-size:12px;color:var(--pd-text-muted);margin-top:6px;line-height:1.4;font-weight:500;}
.pd-root .pd-kpi-sub b{color:var(--pd-text-secondary);font-weight:600;}
/* контейнер под мини-график распределения (НЕ временной ряд — см. шапку файла) */
.pd-root .pd-kpi-spark{height:34px;margin-top:auto;padding-top:10px;}

/* ---------- 7. СЕГМЕНТ-ПЕРЕКЛЮЧАТЕЛЬ (только для фильтров реальных срезов данных) ---------- */
.pd-root .pd-seg{display:flex;gap:4px;background:var(--pd-bg-card-soft);border:1px solid var(--pd-border);border-radius:999px;padding:4px;flex-wrap:wrap;}
.pd-root .pd-seg-btn{appearance:none;border:none;background:transparent;color:var(--pd-text-muted);font-family:var(--pd-font-ui);
  font-size:11.5px;font-weight:600;padding:7px 13px;border-radius:999px;cursor:pointer;transition:background .15s ease,color .15s ease;white-space:nowrap;}
.pd-root .pd-seg-btn:hover{color:var(--pd-text-secondary);}
.pd-root .pd-seg-btn.is-active{background:linear-gradient(155deg,var(--pd-accent),#6c65e0);color:#fff;box-shadow:0 6px 16px -6px rgba(143,140,249,.55);}

/* ---------- 8. ГРАФИКИ — размеченные контейнеры под ECharts (init только
   после document.fonts.ready — см. шапку файла и DESIGN.md) ---------- */
.pd-root .pd-chart-hero{height:302px;margin-top:14px;}
.pd-root .pd-chart-bar{height:172px;min-height:172px;margin-top:10px;flex:none;}
.pd-root .pd-chart-area{height:140px;margin-top:10px;}
.pd-root .pd-gauge{width:100%;height:192px;margin-top:2px;}
.pd-root .pd-donut{width:130px;height:130px;flex:none;position:relative;}

/* ---------- 9. ЛЕГЕНДЫ ---------- */
.pd-root .pd-legend{display:flex;gap:16px;margin-top:2px;flex-wrap:wrap;}
.pd-root .pd-legend-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--pd-text-muted);font-weight:500;}
.pd-root .pd-legend-dot{width:8px;height:8px;border-radius:2px;flex:none;}

.pd-root .pd-band-legend{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;justify-content:center;}
.pd-root .pd-band-legend-item{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--pd-text-muted);font-weight:600;}
.pd-root .pd-band-dot{width:7px;height:7px;border-radius:50%;flex:none;}

/* легенда донат-диаграммы (дот + подпись + значение + доля) */
.pd-root .pd-donut-wrap{display:flex;align-items:center;gap:10px;margin-top:10px;flex:none;}
.pd-root .pd-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}
.pd-root .pd-donut-center b{font-family:var(--pd-font-mono);font-size:24px;font-weight:700;color:var(--pd-text-primary);line-height:1;}
.pd-root .pd-donut-center span{font-size:9.5px;color:var(--pd-text-muted);font-weight:600;margin-top:3px;text-align:center;letter-spacing:.01em;}
.pd-root .pd-donut-legend{display:flex;flex-direction:column;gap:9px;flex:1;}
.pd-root .pd-dl-row{display:flex;align-items:center;gap:9px;font-size:12px;}
.pd-root .pd-dl-dot{width:9px;height:9px;border-radius:3px;flex:none;}
.pd-root .pd-dl-label{color:var(--pd-text-secondary);font-weight:600;flex:1;}
.pd-root .pd-dl-val{font-family:var(--pd-font-mono);color:var(--pd-text-primary);font-weight:700;font-size:12.5px;}
.pd-root .pd-dl-pct{font-family:var(--pd-font-mono);color:var(--pd-text-muted);font-size:11px;width:34px;text-align:right;}

/* ---------- 10. КОЛЛ-АУТЫ (короткие подсказки-факты под графиком) ---------- */
.pd-root .pd-callouts{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;}
.pd-root .pd-callout{flex:1;min-width:210px;background:var(--pd-bg-card-soft);border:1px solid var(--pd-border);border-radius:var(--pd-r-md);
  padding:12px 14px;font-size:12px;color:var(--pd-text-secondary);font-weight:500;line-height:1.45;}
.pd-root .pd-callout b{font-family:var(--pd-font-mono);font-size:15px;color:var(--pd-text-primary);font-weight:700;margin-right:5px;}
.pd-root .pd-callout span{color:var(--pd-text-muted);}
.pd-root .pd-callout--alert{border-color:rgba(242,73,92,.28);background:linear-gradient(180deg,rgba(242,73,92,.08),transparent);}
.pd-root .pd-callout--alert b{color:var(--pd-risk-critical);}

/* ---------- 11. РЯДЫ РАСКЛАДКИ ---------- */
.pd-root .pd-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.pd-root .pd-hero-row{display:grid;grid-template-columns:1.72fr 1fr;gap:18px;align-items:stretch;}
.pd-root .pd-block-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;}
.pd-root .pd-row-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;}

/* MINOR приёмки (закрыт): align-items:stretch выше тянет каждую карточку ряда до высоты САМОГО
   высокого соседа (напр. карточка с 8-строчным списком рисков рядом с короткой карточкой-гейджем)
   — сама карточка (.pd-card--col/.pd-card--accent — обе flex-колонки) своё содержимое НЕ
   распределяет, оно остаётся прижатым к верху, и снизу повисает пустое поле (видно на 1440px).
   Прижимаем последний прямой потомок карточки (сноску .pd-card-foot, график, список — то, что и
   должно занимать освободившееся место) к низу через margin-top:auto; «шапка» карточки (eyebrow/
   title/sub) при этом не разрежается — между НЕЙ и остальным содержимым обычные отступы разметки
   класса, а вся лишняя высота уходит в зазор ПЕРЕД последним элементом. Правило намеренно
   ограничено ТОЛЬКО .pd-hero-row/.pd-block-row (где и наблюдается растяжение по align-items:stretch)
   — карточки вне этих рядов не тянутся соседом и трогать их не нужно. На flex-строке
   (.pd-card--accent ≤1180px, см. §16) margin-top:auto просто центрирует элемент по высоте —
   не ломает раскладку. */
.pd-root .pd-hero-row > .pd-card > :last-child,
.pd-root .pd-block-row > .pd-card > :last-child{
  margin-top:auto;
}

/* ---------- 12. СПИСОК-ПРИОРИТЕТ (мини-бары вместо таблицы — DESIGN.md) ---------- */
.pd-root .pd-list{margin-top:10px;display:flex;flex-direction:column;}
.pd-root .pd-row{display:flex;align-items:center;gap:14px;padding:13px 6px;border-top:1px solid var(--pd-border-soft);transition:background .15s ease;}
.pd-root .pd-row:hover{background:rgba(255,255,255,.02);}
.pd-root .pd-row:first-child{border-top:none;}
.pd-root .pd-rank{font-family:var(--pd-font-mono);font-size:12px;color:var(--pd-text-muted);font-weight:700;width:18px;flex:none;}
/* мини-чип кода — ТОЛЬКО когда это не настоящая ссылка на объект. Если код
   риска/процесса/процедуры реален и кликабелен — рисовать через
   ui.refChip(kind,id), а не через .pd-code: он унаследует тона из блока 1
   (--red-ink/--violet-ink/--cyan-ink уже перекрашены под тёмный премиум) и
   останется единой точкой перехода PA.goRef(). */
.pd-root .pd-code{font-family:var(--pd-font-mono);font-size:11px;font-weight:700;color:var(--pd-accent-2);background:rgba(79,214,240,.09);
  border:1px solid rgba(79,214,240,.2);border-radius:6px;padding:3px 7px;flex:none;letter-spacing:.02em;}
.pd-root .pd-row-main{flex:1;min-width:0;}
.pd-root .pd-row-title{font-size:13.5px;font-weight:600;color:var(--pd-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pd-root .pd-row-meta{font-size:11.5px;color:var(--pd-text-muted);font-weight:500;margin-top:1px;}
/* маленький «подпись сверху / значение снизу» блок (было — давность аудита, годится для любой метки) */
.pd-root .pd-row-stat{font-size:11.5px;color:var(--pd-text-muted);font-weight:500;width:88px;flex:none;text-align:left;}
.pd-root .pd-row-stat b{display:block;color:var(--pd-text-secondary);font-family:var(--pd-font-mono);font-size:12px;font-weight:600;}
.pd-root .pd-chev{width:16px;height:16px;color:var(--pd-text-muted);flex:none;}

/* ---------- 13. МЕТР (полоса 0–100: PCI, покрытие, любой другой показатель-доля) ---------- */
.pd-root .pd-meter{width:132px;flex:none;}
.pd-root .pd-meter-top{display:flex;justify-content:space-between;font-size:11px;color:var(--pd-text-muted);font-weight:600;margin-bottom:4px;}
.pd-root .pd-meter-top b{font-family:var(--pd-font-mono);color:var(--pd-text-primary);font-size:12.5px;font-weight:700;}
.pd-root .pd-meter-track{height:5px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden;}
.pd-root .pd-meter-fill{height:100%;border-radius:3px;}

/* ---------- 14. СНОСКА С ИСТОЧНИКОМ ДАННЫХ ---------- */
.pd-root .pd-foot{margin-top:26px;text-align:center;font-size:11px;color:var(--pd-text-muted);font-weight:500;letter-spacing:.01em;opacity:.7;}
.pd-root .pd-foot span{font-family:var(--pd-font-mono);}

/* ---------- 15. ЦВЕТОВЫЕ УТИЛИТЫ (текст; форма точек/заливок — inline
   style="background:var(--pd-risk-*)" по месту данных, как в эталоне) ---------- */
.pd-root .pd-tone-critical{color:var(--pd-risk-critical);}
.pd-root .pd-tone-warning{color:var(--pd-risk-warning);}
.pd-root .pd-tone-acceptable{color:var(--pd-risk-acceptable);}
.pd-root .pd-tone-good{color:var(--pd-risk-good);}
.pd-root .pd-tone-accent{color:var(--pd-accent-2);}

/* ---------- 16. RESPONSIVE (брейкпоинты выровнены с design-system.css: 860/720/560) ---------- */
@media (max-width:1180px){
  .pd-root .pd-hero-row{grid-template-columns:1fr;}
  .pd-root .pd-card--accent{flex-direction:row;flex-wrap:wrap;text-align:left;align-items:center;justify-content:space-between;padding:20px 24px;}
  .pd-root .pd-card--accent .pd-eyebrow{width:100%;}
  .pd-root .pd-gauge{width:180px;height:150px;margin-top:0;}
  .pd-root .pd-band-legend{justify-content:flex-start;}
  .pd-root .pd-card--accent .pd-card-foot{border-top:none;padding-top:0;width:auto;}
  .pd-root .pd-block-row{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .pd-root .pd-shell{padding:18px 20px 32px;}
  .pd-root .pd-kpi-row{grid-template-columns:1fr 1fr;}
  .pd-root .pd-block-row{grid-template-columns:1fr;}
  .pd-root .pd-row-stat{display:none;}
}
@media (max-width:720px){
  .pd-root .pd-kpi-row{grid-template-columns:1fr 1fr;gap:12px;}
  .pd-root .pd-kpi{padding:16px 16px 14px;min-height:150px;}
  .pd-root .pd-kpi-num{font-size:27px;}
  .pd-root .pd-kpi-label{font-size:11px;max-width:110px;}
  .pd-root .pd-card{padding:18px 16px;border-radius:var(--pd-r-lg);}
  .pd-root .pd-card--accent{flex-direction:column;text-align:center;align-items:center;}
  .pd-root .pd-gauge{width:100%;height:160px;}
  .pd-root .pd-band-legend{justify-content:center;}
  .pd-root .pd-card--accent .pd-card-foot{border-top:1px solid var(--pd-border-soft);padding-top:14px;width:100%;text-align:center;}
  .pd-root .pd-chart-hero{height:250px;}
  .pd-root .pd-meter{width:86px;}
  .pd-root .pd-row{gap:9px;align-items:flex-start;}
  .pd-root .pd-code{padding:3px 5px;font-size:10px;margin-top:2px;}
  .pd-root .pd-rank{margin-top:2px;}
  .pd-root .pd-meter{margin-top:1px;}
  .pd-root .pd-row-title{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.28;}
  .pd-root .pd-row-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pd-root .pd-callout{min-width:100%;}
  /* radius:999px рассчитан на ОДНУ строку кнопок. Когда фильтр переносится (на 390px домены
     атласа занимают 5–6 строк), «стадион» превращается в круг/овал вокруг кнопок — контейнер
     читается как случайная клякса, а не как переключатель. На узких экранах — обычный радиус. */
  .pd-root .pd-seg{border-radius:var(--pd-r-lg);}
  .pd-root .pd-seg-btn{font-size:10.5px;padding:6px 10px;}
  .pd-root .pd-donut-wrap{flex-direction:column;align-items:flex-start;}
  .pd-root .pd-donut{width:112px;height:112px;}
}