/* HealthCard — org_health primitive. Moved (renamed .summary-* -> .lens-health-card__*) out of
   static/css/cellyx/graph.css as part of the lens migration. #view-summary (the old BottomPanel
   tab container it used to mount into on graph.js/dynamic.js) was removed 2026-09-27 along with
   those pages — Momentum mounts this primitive into its own #momPanel instead, generic to
   whatever container the page gives it. Colocated with HealthCard.js by design — see lens'
   package layout rationale.

   Редизайн 2026-09-15 (owner's ask), вторая итерация — двухколоночный лэйаут (индекс+радар |
   нарратив), бейдж+headline переехали В НАЧАЛО второй колонки (выключка по правому краю), не
   отдельная полноширинная шапка (была в первой итерации, .lens-health-card__header). thesis
   убран — соответствующие классы (.lens-health-card__thesis*, __score-wrap, __radar-title,
   __col--identity/--radar) удалены, не оставлены мёртвым кодом.

   Третья итерация (owner's ask, тот же день) — колонки поменяны местами: нарратив теперь первая
   (левая) колонка, индекс+радар — вторая (правая). identity (бейдж+headline) соответственно
   выключена по ЛЕВОМУ краю, разделительная граница между колонками переехала на .col--score.

   Редизайн v3 2026-09-17 (design doc §6.9) — .__trust-* классы остались (переименовывать не стали,
   не было причины — тот же семафор: label + цветной кружок + статус), но теперь читают
   data.dataSufficiency (λ), не dimensions.behavioral_trust — см. HealthCard.js#renderDataSufficiency.
   Добавлен .__sigmoid-wrap — новый график сигмоиды над радаром, компактный (фиксированная высота,
   не flex:1, чтобы не конкурировать с радаром за место в колонке). */

.lens-health-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Архетип-бейдж + headline, друг под другом, выключка по левому краю (owner's ask, 2026-09-15) —
   верх первой (нарративной) колонки, не полноширинная шапка. */
.lens-health-card__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex-shrink: 0;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--border);
}

.lens-health-card__layout {
    display: flex;
    gap: 20px;
    flex: 1;
    padding: 4px 4px 8px;
    overflow: hidden;
    min-height: 0;
}

.lens-health-card__col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lens-health-card__col--score {
    flex: 1;
    align-items: stretch;
    gap: 6px;
    min-width: 180px;
    border-inline-start: 1px solid var(--border);
    padding-inline-start: 20px;
}

/* Была flex:1.4 (доля от общей ширины layout) — owner's ask, 2026-09-17: при расширении карточки
   (momentum.css: .mom-summary-card 728→820px) весь прирост должен доставаться ТОЛЬКО колонке
   радара, не этой. Фиксированная ширина в px вместо flex-доли — 390px соответствует тому, что эта
   колонка и так занимала при 728px карточке (flex:1.4 против flex:1 у col--score на тогдашних
   ~668px внутренней ширины), так что на существующих 728px-карточках (свёрнутая панель) ничего не
   меняется визуально — весь избыток идёт исключительно в col--score (flex:1 там уже был, теперь
   просто получает 100% остатка, а не долю). */
.lens-health-card__col--narrative {
    flex: 0 0 390px;
    gap: 0;
    min-height: 0;
}

/* Скроллится только список секций, НЕ identity (бейдж+headline) над ним — owner's report,
   2026-09-15: раньше overflow-y был на всей колонке, скроллбар залезал на заголовок. */
.lens-health-card__narrative-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

.lens-health-card__narrative-scroll::-webkit-scrollbar { width: 4px; }
.lens-health-card__narrative-scroll::-webkit-scrollbar-thumb { background: rgba(173,201,235,0.5); border-radius: 10px; }

/* Archetype badge */
.lens-health-card__badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--lens-arch-color, #6366f1);
    background: color-mix(in srgb, var(--lens-arch-color, #6366f1) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--lens-arch-color, #6366f1) 35%, transparent);
    padding: 3px 12px;
    border-radius: 20px;
    flex-shrink: 0;
}

.lens-health-card__headline {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.35;
    text-align: start;
}

/* "Больше всего выросла/просела X" — до двух строк (owner's ask, 2026-09-17: и рост, и падение,
   если оба значимы), второстепенный компонент headline, только Momentum. */
.lens-health-card__mover {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sec);
    margin-top: 4px;
}

/* Число + стрелка/дельта столбиком + мини-сигмоида, всё в одну строку (owner's ask, 2026-09-17,
   четвёртая итерация — сигмоида раньше была отдельным полноширинным блоком ниже). */
.lens-health-card__top-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-shrink: 0;
}

.lens-health-card__score-num {
    font-size: 54px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
}

.lens-health-card__delta-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* direction — стрелка тренда (up/down/same), только Momentum (org_health_narrative_v2_design.md
   §3) — сравнение с предыдущим чекпоинтом. Используется рядом со score, dim-чипом и построчно
   внутри narrative-колонки, отсюда самостоятельный класс, не привязанный к одному месту.
   Увеличена и утолщена (owner's report, 2026-09-15: первая версия терялась на глаз). */
.lens-health-card__direction {
    font-weight: 900;
    font-size: 20px;
    line-height: 1;
}

.lens-health-card__score-delta {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sec);
}

.lens-health-card__score-lbl {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-sec);
    letter-spacing: 0.05em;
    text-align: start;
}

/* График сигмоиды (design doc §6.9) — упрощён по owner's ask 2026-09-17 до маленького инлайн-
   спарклайна рядом с числом (был отдельным полноширинным блоком ниже, см. __top-row). Фиксированный
   небольшой размер — вся освободившаяся высота отдаётся радару ("как можно крупнее"). */
/* Раньше max-width:140px держал сигмоиду узкой независимо от того, сколько места реально было в
   строке — owner's report, 2026-09-17: число+дельта+сигмоида смотрелись сжатыми, а справа от
   сигмоиды оставалось пустое место. max-width снят — сигмоида забирает весь остаток строки, gap
   выше (14→22px) отделяет её от числа/дельты вместо того, чтобы полагаться на её собственную узость
   для "воздуха" между блоками. */
.lens-health-card__sigmoid-wrap {
    flex: 1;
    align-self: stretch;
    min-width: 60px;
    height: 48px;
    position: relative;
}

.lens-health-card__sigmoid-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Раньше flex:1, затем aspect-ratio:1/1 (CSS) — оба варианта провалились: flex:1 растягивал canvas
   на весь оставшийся вертикальный запас узкой колонки (Chart.js радар геометрически ВСЕГДА рисует
   круговой график, вписанный в min(ширина,высота) — лишняя высота сверху/снизу оставалась мёртвым
   полем), а aspect-ratio в связке с процентной высотой внутри flex-колонки посчитался непредсказуемо
   (owner's report, 2026-09-17: светофор достаточности данных вообще пропал из вида). Высоту теперь
   держит JS (#observeRadarSquare, ResizeObserver — пересчитывает при любом ресайзе, включая
   анимированное раскрытие .mom-panel--summary), не CSS — обычный inline height:<ширина>px,
   без сюрпризов автосчёта браузера. */
.lens-health-card__radar-wrap {
    align-self: stretch;
    width: 100%;
    position: relative;
}

.lens-health-card__radar-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Доверие данным — редизайн 2026-09-16, вынесен из радара (см. HealthCard.js class doc) —
   компактная строка под радаром, не отдельная карточка: label + цветной кружок + слово серьёзности,
   та же зелёный/жёлтый/оттенки-красного шкала, что и у чипов предикторов (dimensionLabelColor). */
.lens-health-card__trust-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
    padding-top: 8px;
    /* Радар больше не flex:1 (см. его комментарий выше) — весь настоящий излишек высоты колонки
       теперь оседает здесь, а не в canvas, держа этот индикатор прижатым к самому низу. */
    margin-top: auto;
}

.lens-health-card__trust-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-sec);
}

.lens-health-card__trust-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lens-trust-color, #94a3b8);
    flex-shrink: 0;
}

.lens-health-card__trust-status {
    font-size: 11px;
    font-weight: 700;
}

/* Заголовок секции нарратива (design doc §2) — чип на всю ширину: имя + статус + стрелка все
   внутри одной цветной плашки (owner's ask, 2026-09-15 — вернули как в первой версии редизайна). */
.lens-health-card__dim-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 4px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--lens-dim-color, #999) 7%, transparent);
    border-inline-start: 3px solid var(--lens-dim-color, #999);
}

.lens-health-card__dim-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-sec);
}

.lens-health-card__dim-label {
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.lens-health-card__dim-right {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.lens-health-card__dim-right .lens-health-card__direction {
    font-size: 15px;
}

/* Narrative column */
.lens-health-card__narrative-empty {
    font-size: 12px;
    color: var(--text-sec);
    font-style: italic;
    padding-top: 4px;
}

.lens-health-card__narrative-section {
    margin-bottom: 20px;
}

/* Вывод по предиктору в целом (dimensions.<predictor>.label, уже забакетированный движком) — между
   чипом-заголовком секции и построчной расшифровкой компонентов. Отдельный margin-top от чипа
   (не общий margin) — owner's report, 2026-09-15: без явного отступа текст казался прилипшим к
   чипу, "небрежная" вёрстка. */
.lens-health-card__narrative-section-headline {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.5;
    margin-top: 10px;
    margin-bottom: 8px;
}

.lens-health-card__narrative-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    align-items: start;
}

.lens-health-card__narrative-key {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--text-sec);
    line-height: 1.4;
    padding-top: 2px;
}

.lens-health-card__narrative-key .lens-health-card__direction {
    font-size: 13px;
}

.lens-health-card__narrative-val {
    font-size: 11px;
    color: var(--text-main, #333);
    line-height: 1.55;
}

/* Компактный режим (config.compact, виджет Обзора): identity+чипы | радар, без скролла нарратива. */
.lens-health-card--compact { height: auto; overflow: visible; }
.lens-health-card--compact .lens-health-card__layout { overflow: visible; }
.lens-health-card--compact .lens-health-card__col--narrative { flex: 1 1 0; gap: 8px; min-width: 0; }
.lens-health-card--compact .lens-health-card__top-row { gap: 12px; margin: 2px 0 6px; }
.lens-health-card--compact .lens-health-card__score-num { font-size: 60px; }
.lens-health-card--compact .lens-health-card__col--score {
    flex: 1 1 0; min-width: 0; justify-content: center; align-items: center; gap: 4px;
}
.lens-health-card--compact .lens-health-card__radar-wrap { align-self: center; max-width: 320px; }
.lens-health-card--compact .lens-health-card__trust-indicator { margin-top: 4px; }
@media (max-width: 700px) {
    .lens-health-card--compact .lens-health-card__layout { flex-direction: column; }
    .lens-health-card--compact .lens-health-card__col--score {
        flex: none; border-inline-start: none; padding-inline-start: 0; align-self: stretch;
    }
}