/* ============================================================
   ДАШБОРД — графики поверх основных стилей из dashboard.html
   Цвета — те же, что в дашборде и на лендинге: --red (#F15D56),
   --grn (#759F45), серый «затруднились» #98A0AE. Шрифт — шкала
   дашборда (--type-body 14 px), мельче подписи не опускаются.

   1. Переключатель «Таблица» / «Диаграмма» — у каждого графика
   2. Таблица данных графика
   3. Доли ответов от центральной оси (страницы компонентов)
   4. Полоса из пяти кусочков (блок поддержки на главной)
   5. Сравнение на шкале Индекса — строки-гантели (компоненты, секторы)
   ============================================================ */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 1. Переключатель ──────────────────────────────────────── */
.chart-toggle {
  position: relative;
  flex-shrink: 0;
  min-height: 32px;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: var(--type-body);
  font-weight: var(--weight-ui);
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.chart-toggle::after { content: ""; position: absolute; inset: -6px -4px; } /* цель касания ≥ 44 px */
.chart-toggle:hover { border-color: #98A0AE; }
.chart-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Шапка графика: заголовок слева, справа — кнопка, под ней легенда
   (прижата вправо). Легенда видна только вместе с графиком — в таблице
   её обозначений нет. */
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: .75rem; }
.chart-head > .metric-block__title { margin: 0 !important; padding-top: 4px; }
.chart-tools { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; margin-left: auto; }
.chart-tools > .chart-toggle { order: -1; }
.chart-tools > .legend { margin-bottom: 0 !important; justify-content: flex-end; }
.chart-tools > .legend[hidden] { display: none; }
/* С заголовком: заголовок и кнопка — в первой строке, легенда — второй
   строкой на всю ширину, прижата вправо. На десктопе так она помещается
   в одну строку, а не ломается о ширину колонки рядом с заголовком. */
.chart-head { flex-wrap: wrap; row-gap: .5rem; }
.chart-head > .chart-tools { display: contents; }
.chart-head > .chart-tools > .chart-toggle { order: 1; margin-left: auto; }
.chart-head > .chart-tools > .legend { order: 2; flex-basis: 100%; }
@media (min-width: 601px) { .chart-tools .legend-item { white-space: nowrap; } }
.legend .chart-toggle { margin-left: auto; }
/* На телефоне строка легенды с кнопкой уходит под подпись раздела целиком. */
@media (max-width: 600px) {
  :has(> .chart-tools) { flex-wrap: wrap; row-gap: .5rem; }
  :has(> .chart-tools) > .chart-tools { flex-basis: 100%; }
}
.metric-block__head .chart-toggle { margin-left: auto; align-self: center; }
.chart-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.chart-bar > .metric-block__title { margin-bottom: 0 !important; }
.chart-bar--solo { justify-content: flex-end; margin-bottom: .75rem; }

/* Переключение видов: по умолчанию виден график, по кнопке — альтернатива. */
.chart-switch > [data-alt] { display: none; }
.chart-switch.is-alt > [data-alt] { display: block; }
.chart-switch.is-alt > table[data-alt] { display: table; }
.chart-switch.is-alt > :not([data-alt]) { display: none !important; } /* у SVG инлайновый display:block */

/* ── 2. Таблица ────────────────────────────────────────────── */
.chart-table-wrap { overflow-x: auto; margin-bottom: 1.25rem; }
.chart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-body);
  line-height: 1.4;
  color: var(--text);
}
.chart-table th,
.chart-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chart-table tr > :first-child { padding-left: 0; text-align: left; white-space: normal; }
.chart-table tr > :last-child { padding-right: 0; }
.chart-table thead th { font-weight: var(--weight-ui); color: var(--muted); }
.chart-table tbody th { font-weight: 400; color: var(--muted); }
.chart-table tbody tr:last-child > * { border-bottom: 0; }
.chart-switch.is-alt { overflow-x: auto; }
/* На телефоне таблица листается вбок, а не ломает слова в заголовках. */
@media (max-width: 600px) {
  .chart-table th, .chart-table td { padding: 8px 8px; }
  .chart-table tr > :first-child { min-width: 9.5rem; }
  .metric-block__head { flex-wrap: wrap; row-gap: 4px !important; }
  .metric-block__head .metric-block__title { flex-basis: 100%; }
}

/* ── 3. Доли ответов от центральной оси ────────────────────────
   Дорожка — домен −100…+100 %: слева негативные, справа
   позитивные, «затруднились» делятся пополам вокруг нуля.
   Значение стоит внутри полосы; если не помещается — снаружи,
   у внешнего конца (это решает скрипт по реальной ширине). */
.likert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  column-gap: 0;            /* разделитель строки идёт сплошной линией от вопроса к полосе */
}
.likert__row { display: contents; }
.likert__label {
  display: flex; align-items: center;
  padding: 10px 1.25rem 10px 0;
  border-top: 1px solid var(--border);
  font-size: var(--type-body);
  line-height: 1.35;
  color: var(--muted);
}
.likert__track {
  position: relative;
  min-height: 44px;
  border-top: 1px solid var(--border);
}
.likert__legend + .likert__row > * { border-top: 0; }
/* Легенда — над дорожками, прижата вправо, под кнопкой «Таблица». */
.likert__legend { grid-column: 2; justify-content: flex-end; margin-bottom: .25rem; }
.likert__track::before {                 /* ноль */
  content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px;
  width: 1px; margin-left: -.5px; background: #A3ACBB; z-index: 1;
}
.likert__seg {
  position: absolute; top: 50%;
  height: 24px; margin-top: -12px;
  display: flex; align-items: center; justify-content: center;
}
.likert__seg + .likert__seg { box-shadow: -2px 0 0 var(--card); }  /* 2 px зазор между кусками */
.likert__seg--neg { background: var(--red); border-radius: 4px 0 0 4px; transform-origin: right center; }
.likert__seg--neu { background: #98A0AE; transform-origin: center; }
.likert__seg--pos { background: var(--grn); border-radius: 0 4px 4px 0; transform-origin: left center; }
.likert__val {
  padding: 0 6px;
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.likert__seg.is-out .likert__val { position: absolute; top: 50%; transform: translateY(-50%); color: var(--text); }
.likert__seg--neg.is-out .likert__val { right: 100%; }
.likert__seg--pos.is-out .likert__val { left: 100%; }

/* Появление: полосы растут от нуля, когда блок попадает в экран. */
.likert--anim .likert__seg { transform: scaleX(0); transition: transform .36s cubic-bezier(.2, .7, .3, 1); }
.likert--anim .likert__val { opacity: 0; transition: opacity .2s ease .22s; }
.likert--anim.is-drawn .likert__seg { transform: none; }
.likert--anim.is-drawn .likert__val { opacity: 1; }

@media (max-width: 600px) {
  .likert { display: block; }
  .likert__row { display: block; border-top: 1px solid var(--border); }
  .likert__legend + .likert__row { border-top: 0; }
  .likert__legend { margin-bottom: .5rem; gap: 4px 14px; }
  .likert__label { border-top: 0; padding: 10px 0 2px; }
  .likert__track { border-top: 0; min-height: 36px; }
}

/* ── 4. Полоса из пяти кусочков (поддержка) ────────────────── */
.support-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.support-block-head .support-block-title { margin: 0 !important; }
.support-stack { padding: .5rem 0 .25rem; }
.stack { position: relative; height: 32px; }
.stack__seg { position: absolute; top: 0; bottom: 0; transform-origin: left center; }
.stack__seg + .stack__seg { box-shadow: -2px 0 0 var(--card); }
.stack__seg:first-child { border-radius: 8px 0 0 8px; }
.stack__seg:last-child { border-radius: 0 8px 8px 0; }
.stack__seg--pos { background: var(--grn); }
.stack__seg--pos-soft { background: #ACC58F; }   /* --grn, 60 % на белом */
.stack__seg--neu { background: #98A0AE; }
.stack__seg--neg-soft { background: #F79E9A; }   /* --red, 60 % на белом */
.stack__seg--neg { background: var(--red); }

/* Ключ — столбиком на любой ширине: подписи не выдают себя за
   подписи кусков над ними (ширины кусков и колонок не совпадают). */
.stack__key {
  list-style: none;
  display: grid;
  gap: .5rem;
  max-width: 440px;
  margin-top: 1rem;
}
.stack__key li {
  position: relative;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-left: 18px;
  font-size: var(--type-body); line-height: 1.35; color: var(--muted);
}
.stack__key b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
/* Маркер — кружок, как в остальных легендах дашборда. */
.stack__swatch { position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; }

.stack--anim .stack__seg { transform: scaleX(0); transition: transform .36s cubic-bezier(.2, .7, .3, 1); transition-delay: calc(var(--i, 0) * 60ms); }
.stack--anim.is-drawn .stack__seg { transform: none; }

@media (max-width: 600px) {
  .support-block-head { flex-direction: column; }
}

/* ── 5. Строки-гантели ─────────────────────────────────────────
   Показатель — строка; точки серий стоят на одной линии шкалы
   −100…+100 и соединены отрезком (разрыв). Подписи — снаружи пары:
   меньшее значение слева от своей точки, большее — справа, поэтому
   близкие значения не наползают друг на друга. */
.db {
  display: grid;
  grid-template-columns: minmax(9rem, .7fr) minmax(0, 2fr);
  column-gap: 0;
}
.db__axis { grid-column: 2; position: relative; height: 22px; }
.db__axis span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: var(--type-caption); line-height: 1; color: var(--hint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.db__axis span:first-child { transform: none; }
.db__axis span:last-child { transform: translateX(-100%); }
.db__row { display: contents; }
.db__label {
  display: flex; align-items: center; justify-content: flex-end; text-align: right;
  padding: 8px 1.25rem 8px 0;
  font-size: var(--type-body); line-height: 1.35; color: var(--muted);
}
.db__row--total .db__label { color: var(--text); font-weight: var(--weight-ui); }
.db__track {
  position: relative;
  min-height: 48px;
  background:
    linear-gradient(to right, transparent calc(50% - .5px), #A3ACBB calc(50% - .5px), #A3ACBB calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to right, transparent calc(25% - .5px), var(--border) calc(25% - .5px), var(--border) calc(25% + .5px), transparent calc(25% + .5px)),
    linear-gradient(to right, transparent calc(75% - .5px), var(--border) calc(75% - .5px), var(--border) calc(75% + .5px), transparent calc(75% + .5px)),
    var(--zones, none);
}
/* Зоны Индекса фоном — как на шкале на главной: ≤19 / 20–45 / >45. */
/* Тонкие светлые разделители через всю строку: от подписи к её точкам. */
.db__label, .db__track { border-top: 1px solid #EEF2F8; }
.db__axis + .db__row > * { border-top: 0; }
.db--zones .db__track { --zones: linear-gradient(to right, var(--red-l) 59.5%, var(--yel-l) 59.5% 72.5%, var(--grn-l) 72.5%); }
.db__link {
  position: absolute; top: 50%; height: 2px; margin-top: -1px;
  background: #A3ACBB; transform-origin: left center;
}
.db__dot {
  position: absolute; top: 50%; z-index: 2;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2px var(--card);
  cursor: default;
}
.db__row--total .db__dot { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
/* Россия — кольцо поверх, крупнее точки: при равных значениях видны обе. */
.db__dot--ring {
  z-index: 3; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  background: transparent; box-shadow: inset 0 0 0 2px var(--c);
}
.db__row--total .db__dot--ring { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.db__dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; } /* цель наведения */
.db__val {
  position: absolute; top: 50%;
  font-size: var(--type-body); line-height: 1; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
.db__val--strong { color: var(--text); font-weight: 600; }
/* Ореол фона: подпись остаётся читаемой, если под ней линия нуля или сетки. */
.db__val { text-shadow: 0 0 2px var(--card), 0 0 2px var(--card), 0 0 4px var(--card); }
.db__val--left  { transform: translate(calc(-100% - 16px), -50%); }
.db__val--right { transform: translate(16px, -50%); }

.db--anim .db__dot { transform: scale(0); transition: transform .32s cubic-bezier(.34, 1.4, .64, 1); }
.db--anim .db__link { transform: scaleX(0); transition: transform .36s cubic-bezier(.2, .7, .3, 1) .12s; }
.db--anim .db__val { opacity: 0; transition: opacity .2s ease .28s; }
.db--anim.is-drawn .db__dot, .db--anim.is-drawn .db__link { transform: none; }
.db--anim.is-drawn .db__val { opacity: 1; }

/* Как читать знак и зоны: стрелки под шкалой и ключ фона. */
.db__hint {
  grid-column: 2; display: flex; justify-content: space-between; gap: 1rem;
  padding-top: 6px; font-size: var(--type-body); line-height: 1.35; color: var(--hint);
}
.db__note {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 4px 16px; margin-top: .75rem; font-size: var(--type-body); line-height: 1.4; color: var(--muted);
}
.db__note-text { flex-basis: 100%; text-align: right; color: var(--hint); }
.db-zone--risk { background: var(--red-l); box-shadow: inset 0 0 0 1px #F3B9B6; }
.db-zone--mid  { background: var(--yel-l); box-shadow: inset 0 0 0 1px #F2DB95; }
.db-zone--high { background: var(--grn-l); box-shadow: inset 0 0 0 1px #C3D6AC; }

.legend-n { color: var(--hint); }
.chart-caveat { margin-top: .75rem; font-size: var(--type-body); line-height: 1.5; color: var(--muted); }

@media (max-width: 600px) {
  .db__hint { margin-top: 2px; }
  .db__note, .db__note-text { justify-content: flex-start; text-align: left; }
  .db { display: block; }
  .db__axis { margin-bottom: 2px; }
  .db__row { display: block; }
  .db__label { justify-content: flex-start; text-align: left; padding: 10px 0 0; }
  .db__track { border-top: 0; }
  .db__track { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .db--anim .db__dot, .db--anim .db__link { transform: none; transition: none; }
  .db--anim .db__val { opacity: 1; transition: none; }
  .likert--anim .likert__seg, .stack--anim .stack__seg { transform: none; transition: none; }
  .likert--anim .likert__val { opacity: 1; transition: none; }
}

@media (forced-colors: active) {
  .likert__seg, .stack__seg, .stack__swatch, .db__dot { forced-color-adjust: none; border: 1px solid CanvasText; }
}

/* Коды субиндексов в заголовках таблиц срезов: расшифровка — подсказкой при наведении. */
.analytics-card th[data-tip] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: #A3ACBB; }

/* ── Тексты по «Правилам рассказа об Индексе ментального благополучия» ── */
/* Рекомендация: основание → что может стоять за этим → действие → проверка. */
.ins-list .rec { display: block; margin-top: .3rem; }
.ins-list .rec b { font-weight: 500; color: var(--text); }
.ins-list li + li { margin-top: .9rem; }
/* База процентов у долей ответов — слева в строке легенды. */
.likert__base { grid-column: 1; align-self: end; margin-bottom: .25rem; font-size: var(--type-body); color: var(--hint); }
@media (max-width: 600px) { .likert__base { margin-bottom: .25rem; } }
/* Подгруппа, значения которой не показываем (меньше 5 человек). */
.legend-item--off { display: block; color: var(--hint); }
.legend-note { color: var(--hint); }
.analytics-card th [data-tip] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: #A3ACBB; }
@media (min-width: 601px) { .chart-tools > .legend { flex-wrap: nowrap; } }

/* Пояснения к таблицам срезов и определения групп в карточках секторов. */
.analytics-table-note { margin: -.25rem 0 .75rem; font-size: var(--type-body); line-height: 1.5; color: var(--hint); max-width: 720px; }
.analytics-table-head + .analytics-table-note { margin-top: .25rem; }
@media (max-width: 480px) { .risk-axis-grid--static .seg-desc { display: block !important; margin: .3rem 0 0 !important; font-size: var(--type-caption) !important; line-height: 1.35 !important; } }
.likert__base { max-width: 100%; }

/* Названия категорий под подписями шкалы Индекса; на узком экране — только в пояснении ниже. */
.scale-zone-name { display: block; margin-top: 2px; font-size: var(--type-caption); }
@media (max-width: 600px) { .scale-zone-name { display: none; } }

/* «Из чего складывается Индекс»: на десктопе карточки компонентов растягиваются
   на высоту правой колонки (диаграмма и пояснение), лишнее место — перед кнопкой. */
@media (min-width: 761px) {
  .dashboard-structure-visual { align-items: stretch !important; }
  .structure-card-column .structure-component-card { flex: 1 1 auto; display: flex; flex-direction: column; }
  .structure-card-column .structure-component-card .sc-btn-sm { margin-top: auto; }
  .structure-card-column .structure-component-card .sc-subs { margin-bottom: .85rem; }
}

/* Число компонента и разница с Россией: выравнивание по правому краю. */
.structure-card-head .sc-bench,
.subpage-hero__figure .sc-bench { align-items: flex-end; text-align: right; }

/* Пояснение перед графиком: одно-два предложения. */
.chart-lead { margin: 0 0 .75rem; font-size: var(--type-body); line-height: 1.5; color: var(--muted); max-width: 720px; }
.metric-block .chart-lead { margin-top: .1rem; }
.likert__base { grid-column: 1 / -1; margin-bottom: .35rem; }
@media (max-width: 600px) { .likert__base { margin-bottom: .5rem; } }

/* ── Семь психологических навыков: полоса из трёх зон ─────────── */

.sk { display: grid; grid-template-columns: minmax(9rem, .7fr) minmax(0, 2fr) 7rem; column-gap: 0; }
.sk__row, .sk__head { display: contents; }
.sk__colname { padding-bottom: 6px; font-size: var(--type-caption); line-height: 1.3; color: var(--hint); }
.sk__colname--end { text-align: right; }
.sk__label {
  display: flex; align-items: center; justify-content: flex-end; text-align: right;
  padding: 8px 1.25rem 8px 0; border-top: 1px solid #EEF2F8;
  font-size: var(--type-body); line-height: 1.35; color: var(--muted);
}
.sk__track { position: relative; min-height: 48px; border-top: 1px solid #EEF2F8; }
.sk__head + .sk__row > * { border-top: 0; }
.sk__mean {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  border-top: 1px solid #EEF2F8; padding-left: .75rem;
  font-size: var(--type-body); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums;
}
.sk__mean b { font-weight: 600; }
.sk__bench { white-space: nowrap; }
.sk--stack .likert__seg { transform-origin: left center; }
.sk--stack .likert__seg--neg { border-radius: 4px 0 0 4px; }
.sk--stack .likert__seg--pos { border-radius: 0 4px 4px 0; }
.sk .likert__seg--mid { background: var(--yel); transform-origin: center; }
.sk--stack .likert__seg--mid { transform-origin: left center; }
.sk .likert__seg--mid .likert__val { color: var(--text); }
.sk .likert__seg--mid.is-out .likert__val,
.sk--stack .likert__seg--neg.is-out .likert__val { display: none; }

@media (max-width: 600px) {
  .sk { display: block; }
  .sk__head { display: none; }
  .sk__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid #EEF2F8; }
  .sk__row > * { border-top: 0; }
  .sk__label { justify-content: flex-start; text-align: left; padding: 10px 0 0; grid-area: 1 / 1; }
  .sk__mean { grid-area: 1 / 2; padding: 10px 0 0 .75rem; }
  .sk__track { grid-area: 2 / 1 / 3 / 3; min-height: 40px; }
}

/* Шапка графика навыков: на широком экране — заголовок, легенда, «Таблица» в одну строку;
   ниже 1100 px — как на мобильном (заголовок и кнопка, легенда под ними). */
@media (min-width: 1100px) {
  .chart-head.chart-head--inline { flex-wrap: nowrap; align-items: center; }
  .chart-head.chart-head--inline > .chart-tools { display: flex; flex-direction: row; align-items: center; gap: 1.5rem; margin-left: auto; }
  .chart-head.chart-head--inline > .chart-tools > .legend { order: 1; flex-basis: auto; flex-wrap: nowrap; }
  .chart-head.chart-head--inline > .chart-tools > .chart-toggle { order: 2; margin-left: 0; }
  .chart-head.chart-head--inline > .metric-block__title { padding-top: 0; white-space: nowrap; }
}

/* ── Расшифровка навыков: анонс при наведении и раскрывающееся описание ── */
.sk__label[data-tip], .chart-table th[data-tip], .slice-skills-table th[data-tip] {
  cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: #A3ACBB;
}
.skills-about__body { max-width: 720px; margin: 0 0 1rem; padding: 1rem 1.25rem; background: var(--bg); border-radius: 12px; }
.skills-about__body[hidden] { display: none; }
.section-intro--action { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.skills-about__body p { margin: 0 0 .75rem; font-size: var(--type-body); line-height: 1.5; color: var(--muted); }
.skills-about__list { margin: 0; }
.skills-about__list dt { margin-top: .75rem; font-size: var(--type-body); font-weight: var(--weight-ui); line-height: 1.35; color: var(--text); }
.skills-about__list dt:first-child { margin-top: 0; }
.skills-about__alias { font-weight: 400; color: var(--hint); }
.skills-about__list dd { margin: .15rem 0 0; font-size: var(--type-body); line-height: 1.5; color: var(--muted); }


/* ── Россия: ориентиры в долях ответов, карте секторов и блоке поддержки ── */
.likert__ref { position: absolute; top: calc(50% + 13px); z-index: 2; width: 0; height: 0; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid #6B9BCC; }
.likert--anim .likert__ref { opacity: 0; transition: opacity .2s ease .3s; }
.likert--anim.is-drawn .likert__ref { opacity: 1; }
.legend-tick { display: inline-block; flex-shrink: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #6B9BCC; }
.seg-ref { margin: -.1rem 0 .5rem; }
.support-ref { display: block; margin-top: .15rem; }
@media (max-width: 480px) { .risk-axis-grid .seg-ref { display: none !important; } }
@media (max-width: 600px) {
  .sk__row { grid-template-columns: minmax(0, 1fr) auto; }
  .sk__mean { grid-area: 1 / 2; padding: 6px 0 0 .75rem; }
}

/* Подпись «Россия: …» — одна на весь дашборд, как у карточек компонентов (.sc-bench): 11 px, цвет --muted. */
.sc-bench, .seg-ref, .support-ref, .sk__bench { font-size: var(--type-caption); font-weight: var(--weight-caption); line-height: 1.4; color: var(--muted); }
.seg-ref, .support-ref, .sk__bench { letter-spacing: 0; }

/* Телефон: подписи групп в таблицах срезов — спокойнее и не уезжают при прокрутке таблицы вбок. */
@media (max-width: 600px) {
  .analytics-card td.analytics-subhead { padding: 5px 10px 4px; font-size: var(--type-caption); font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
  .analytics-card td.analytics-subhead > span, .analytics-card td.analytics-subhead { white-space: nowrap; }
  .analytics-card td.analytics-subhead::before { content: none; }
}
.chart-tip { max-width: calc(100vw - 16px); white-space: normal; text-align: center; }
.analytics-subhead__label { position: sticky; left: 10px; display: inline-block; }

/* Скрытый текст в заголовках таблиц (полное название субиндекса для скринридера) позиционируется
   абсолютно; без позиционированного родителя он выпадал за край таблицы и растягивал страницу
   вбок на телефоне. Ячейка становится его опорой. */
.analytics-card th, .chart-table th { position: relative; }