/* Собрано build/render/graphics.js из assets/css/gfx/*.css — правьте исходники, не этот файл. */
/* _tokens.css */
/*============================================================================
  Графические блоки — общие токены и каркас карточки.
  Файл склеивается первым (имя с подчёркиванием) в assets/css/graphics.css.

  Палитра схем взята с самих анатомических рендеров: мышца, сухожилие, кожа —
  чтобы рисованные схемы и 3D-иллюстрации выглядели одной семьёй.
============================================================================*/
:root {
  /* бренд (дублируем из site.css, чтобы графика не зависела от порядка файлов) */
  --gx-ink: #0D2A3C;
  --gx-accent: #023B4A;
  --gx-mint: #00CAA4;
  --gx-mint-soft: rgba(0, 202, 164, 0.14);
  --gx-light: #F7F7F7;
  --gx-white: #FFFFFF;
  --gx-text: #4A5560;          /* 7.4:1 на белом */
  --gx-text-strong: #0D2A3C;
  --gx-muted: #5F6B75;         /* 5.6:1 на белом, 5.2:1 на #F7F7F7 */
  --gx-line: rgba(13, 42, 60, 0.14);
  --gx-line-strong: rgba(13, 42, 60, 0.28);
  --gx-warn: #B3541E;          /* 4.9:1 на белом */
  --gx-warn-soft: rgba(179, 84, 30, 0.12);

  /* ткани — с рендеров */
  --gx-skin: #F2CDBE;
  --gx-fat: #F5E3B5;
  --gx-fascia: #EDE2D2;
  --gx-muscle: #C4574B;
  --gx-muscle-deep: #9E3F37;
  --gx-muscle-light: #E39C90;
  --gx-tendon: #E9DFCF;
  --gx-bone: #E6E0D4;
  --gx-bone-line: #C9BFAE;

  /* форма */
  --gx-radius: 2px;
  --gx-pad: 32px;
  --gx-gap: 24px;
  --gx-shadow: 0 10px 40px rgba(13, 42, 60, 0.08);
  --gx-ease: cubic-bezier(.2, .7, .2, 1);
  --gx-dur: 600ms;

  /* типографика внутри схем */
  --gx-font: var(--rs-ff-title, "Space Grotesk", "Manrope", system-ui, sans-serif);
}

/* Карточка графического блока */
.ms-gx {
  position: relative;
  background: var(--gx-white);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  box-shadow: var(--gx-shadow);
  padding: var(--gx-pad);
  color: var(--gx-text);
  font-family: var(--gx-font);
}
.ms-gx--flat { box-shadow: none; }
.ms-gx--dark {
  background: var(--gx-ink);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.82);
}

.ms-gx__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-accent);
}
.ms-gx--dark .ms-gx__eyebrow { color: var(--gx-mint); }
.ms-gx__eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--gx-mint);
}
.ms-gx__title {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.25;
  color: var(--gx-text-strong);
}
.ms-gx--dark .ms-gx__title { color: var(--gx-white); }
.ms-gx__lead {
  margin: 0 0 24px;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gx-text);
}
.ms-gx--dark .ms-gx__lead { color: rgba(255, 255, 255, 0.78); }

/* Подпись и источник под схемой */
.ms-gx__note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gx-muted);
}
.ms-gx__note strong { color: var(--gx-text); }

/* Схема масштабируется по ширине контейнера */
.ms-gx svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.ms-gx svg text { font-family: var(--gx-font); }

/* Видимый фокус для всех управляющих элементов внутри блоков */
.ms-gx :focus-visible {
  outline: 2px solid var(--gx-mint);
  outline-offset: 2px;
}

/* Встроенный режим (внутри статьи) — компактнее */
.ms-gfx-inline .ms-gx { --gx-pad: 24px; }
.ms-gfx-inline .ms-gx__title { font-size: 22px; }

@media (max-width: 575px) {
  .ms-gx { --gx-pad: 20px; }
  .ms-gx__title { font-size: 22px; }
}

/* Анимация только тем, кто её не отключал. Без неё всё уже видно. */
@media (prefers-reduced-motion: reduce) {
  .ms-gx *, .ms-gx *::before, .ms-gx *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .ms-gx { box-shadow: none; break-inside: avoid; }
  .ms-gx button, .ms-gx input[type="range"] { display: none !important; }
}

/* annotatedFigure.css */
/*============================================================================
  annotatedFigure — анатомическая схема с выносками (как в атласе).

  Раскладка по ширине САМОГО блока (container queries), а не экрана:
  блок стоит и секцией на всю ширину, и внутри колонки статьи.
    < 560 px    картинка с номерами, подписи списком под ней;
    560 px +    картинка с номерами слева, список справа;
    атлас       картинка в центре, подписи колонками, SVG-линии к точкам
                (back — от 1150 px, desk — от 760 px).
  Фон карточки = фон рендеров (#F7F7F7), поэтому картинка не читается прямоугольником.
============================================================================*/

.ms-af {
  container-type: inline-size;
  background: var(--gx-light);
}

/* ---------- подсказка над схемой: только когда есть что наводить ---------- */
.ms-af__hint {
  display: none;
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gx-muted);
  text-align: center;
}

/* ---------- сцена ---------- */
.ms-af__stage {
  position: relative;
  display: grid;
  gap: 24px;
}

.ms-af__figure {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 340px;
}
.ms-af--desk .ms-af__figure { max-width: 420px; }

.ms-af__img {
  display: block;
  width: 100%;
  height: auto;
}

/* номера на картинке (узкая и средняя раскладка) */
.ms-af__pin {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 2px solid var(--gx-white);
  border-radius: 50%;
  background: var(--gx-accent);
  color: var(--gx-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 200ms var(--gx-ease), background-color 200ms var(--gx-ease), color 200ms var(--gx-ease);
}
.ms-af__pin.is-on {
  background: var(--gx-mint);
  color: var(--gx-ink);
  transform: scale(1.18);
}

/* линии атласа скрыты, пока не атлас */
.ms-af .ms-af__leaders { display: none; }

/* ---------- подписи ---------- */
.ms-af__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
/* li в шаблоне — flex; здесь обычный блок */
.ms-af .ms-af__item {
  display: block;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--gx-line);
}
.ms-af .ms-af__item:first-child { border-top: 0; padding-top: 0; }
.ms-af .ms-af__item::before,
.ms-af .ms-af__item::after { content: none; }

.ms-af__name {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.ms-af__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--gx-accent);
  border-radius: 50%;
  color: var(--gx-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: background-color 200ms var(--gx-ease), color 200ms var(--gx-ease);
}

.ms-af__label {
  display: block;
  padding-top: 2px;
  line-height: 1.35;
  min-width: 0;
}
.ms-af__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gx-text-strong);
  transition: color 200ms var(--gx-ease);
}
.ms-af__lat {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
  color: var(--gx-muted);
}
.ms-af__why {
  display: block;
  margin: 6px 0 0 34px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gx-text);
}

/* активная подпись */
.ms-af__item.is-on .ms-af__num {
  background: var(--gx-accent);
  color: var(--gx-white);
}
.ms-af__item.is-on .ms-af__title { color: var(--gx-accent); }
.ms-af__name:hover .ms-af__title { color: var(--gx-accent); }

.ms-af__note { margin-top: 24px; }

/* ---------- средняя раскладка: картинка слева, список справа ---------- */
@container (min-width: 560px) {
  .ms-af__stage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
    gap: 32px;
  }
  /* список здесь в 3–4 раза выше картинки: по центру она висела в пустоте —
     держим её у верха и ведём рядом со списком при прокрутке */
  .ms-af__figure { max-width: none; position: sticky; top: 112px; }
  .ms-af--desk .ms-af__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ms-af__hint { display: block; text-align: left; }
}

/* ---------- атлас ----------
   Сцена = высота картинки. Картинка занимает полосу [--af-l, --af-l + --af-w],
   подписи стоят в колонках по --ly (та же высота, что у линии в SVG).        */
@container (min-width: 1150px) {
  .ms-af--back .ms-af__stage { display: block; margin: 8px 0 40px; }
  .ms-af--back .ms-af__figure { margin: 0 0 0 var(--af-l); width: var(--af-w); max-width: none; }
  .ms-af--back .ms-af__pin { display: none; }
  .ms-af--back .ms-af__leaders { display: block; }
  .ms-af--back .ms-af__hint { text-align: center; }
  .ms-af--back .ms-af__item {
    position: absolute;
    top: var(--ly);
    margin-top: -12px;           /* строка с названием — по линии */
    width: calc(var(--af-l) - 2.4%);
    padding: 0;
    border: 0;
  }
  .ms-af--back .ms-af__item--l { left: 0; text-align: right; }
  .ms-af--back .ms-af__item--r { left: calc(var(--af-l) + var(--af-w) + 2.4%); right: 0; width: auto; }
  .ms-af--back .ms-af__item--l .ms-af__name { flex-direction: row-reverse; }
  .ms-af--back .ms-af__item--l .ms-af__why { margin: 4px 34px 0 0; }
  .ms-af--back .ms-af__item--r .ms-af__why { margin: 4px 0 0 34px; }
  .ms-af--back .ms-af__why { font-size: 13.5px; line-height: 1.5; }
}
@container (min-width: 760px) {
  .ms-af--desk .ms-af__stage { display: block; margin: 44px 0 88px; }
  .ms-af--desk .ms-af__figure { margin: 0 0 0 var(--af-l); width: var(--af-w); max-width: none; }
  .ms-af--desk .ms-af__pin { display: none; }
  .ms-af--desk .ms-af__leaders { display: block; }
  .ms-af--desk .ms-af__hint { text-align: center; }
  .ms-af--desk .ms-af__item {
    position: absolute;
    top: var(--ly);
    margin-top: -12px;
    width: calc(var(--af-l) - 2.4%);
    padding: 0;
    border: 0;
  }
  .ms-af--desk .ms-af__item--l { left: 0; text-align: right; }
  .ms-af--desk .ms-af__item--r { left: calc(var(--af-l) + var(--af-w) + 2.4%); right: 0; width: auto; }
  .ms-af--desk .ms-af__item--l .ms-af__name { flex-direction: row-reverse; }
  .ms-af--desk .ms-af__item--l .ms-af__why { margin: 4px 34px 0 0; }
  .ms-af--desk .ms-af__item--r .ms-af__why { margin: 4px 0 0 34px; }
  .ms-af--desk .ms-af__title { font-size: 14px; }
  .ms-af--desk .ms-af__why { font-size: 13px; line-height: 1.45; }
}

/* ---------- SVG-выноски ---------- */
.ms-af .ms-af__leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ms-af__line {
  stroke: var(--gx-accent);
  stroke-width: 1.25;
  stroke-linecap: round;
  fill: none;
  opacity: 0.72;
  transition: opacity 200ms var(--gx-ease), stroke-width 200ms var(--gx-ease);
}
.ms-af__dot {
  fill: var(--gx-accent);
  stroke: var(--gx-white);
  stroke-width: 2;
  transition: fill 200ms var(--gx-ease);
}
.ms-af__halo {
  fill: var(--gx-mint);
  opacity: 0;
  pointer-events: all;          /* крупная цель для мыши вокруг точки */
  cursor: pointer;
  transition: opacity 200ms var(--gx-ease);
}

/* подсветка: выбранная выноска ярче, остальные отступают */
.ms-af.has-on .ms-af__lead .ms-af__line { opacity: 0.22; }
.ms-af.has-on .ms-af__lead .ms-af__dot { fill: var(--gx-muted); }
.ms-af .ms-af__lead.is-on .ms-af__line { opacity: 1; stroke-width: 2; }
.ms-af .ms-af__lead.is-on .ms-af__dot { fill: var(--gx-mint); }
.ms-af .ms-af__lead.is-on .ms-af__halo { opacity: 0.32; }
.ms-af.has-on .ms-af__item:not(.is-on) .ms-af__why { color: var(--gx-muted); }

@media print {
  .ms-af__hint { display: none !important; }
}

/* design.css */
/*============================================================================
  design — фирменный слой сайта поверх шаблона Industrie:
  свои иконки, орнамент, шапки внутренних страниц, футер и плёнка героя.

  Разметка: build/render/icons.js, sections/{pagehead,services,trustbar,hero}.js,
  footer() и breadcrumb() в build/render/layout.js.

  Контраст считан по САМОМУ ЯРКОМУ пикселю фона, а не «на глаз»:
    шапки   *-duo.jpg  ярчайший #3E7C83 → белый 4.76:1   (tools/duotone.ps1, [Duo]::Brightest)
            (отрисованная шапка 1440/1200/820 px: ярчайший #3E6D7A → 5.72:1; узор не выходит за тёмную зону)
    футер   footer-duo ярчайший #26525F → белый 8.56:1, 80% белого 6.16:1
    герой   плёнка #0D2A3C ≥ 0.74 под всей колонкой текста → над ЧИСТО БЕЛЫМ пикселем
            картинки белый 6.44:1, 88% белого 5.44:1, 86% — 5.28:1
            (нужно ≥ 0.63 для белого и ≥ 0.69 для 85%; по реальным пикселям — ≥ 8.18:1)
============================================================================*/

/* ---------------------------------------------------------------- *
 *  1. Иконки (build/render/icons.js)
 * ---------------------------------------------------------------- */
.ms-icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  overflow: visible;
}
/* один акцентный элемент на иконку — мятный по умолчанию, контекст может переопределить */
.ms-icon .ms-icon__acc { color: var(--ms-ico-accent, #00CAA4); }

/* ---------------------------------------------------------------- *
 *  2. Орнамент — мотив логотипа: три мягкие волны, нарастающие к точке давления.
 *     Ставится вместо шаблонного шеврона: <span class="ms-ornament"></span>.
 *     --light — для тёмного фона (волны белые).
 * ---------------------------------------------------------------- */
.ms-ornament {
  display: inline-block;
  flex: none;
  width: 38px;
  height: 14px;
  vertical-align: middle;
  background: no-repeat center / 38px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='14' viewBox='0 0 38 14' fill='none' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1.5 10.5c2 0 2.5-5.5 4.5-5.5s2.5 5.5 4.5 5.5' stroke='%23023B4A' stroke-opacity='.3'/%3E%3Cpath d='M10.5 10.5c2 0 2.5-5.5 4.5-5.5s2.5 5.5 4.5 5.5' stroke='%23023B4A' stroke-opacity='.6'/%3E%3Cpath d='M19.5 10.5c2 0 2.5-5.5 4.5-5.5s2.5 5.5 4.5 5.5' stroke='%23023B4A'/%3E%3Ccircle cx='33.4' cy='7.6' r='2.6' fill='%2300CAA4' stroke='none'/%3E%3C/svg%3E");
}
.ms-ornament--light {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='14' viewBox='0 0 38 14' fill='none' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1.5 10.5c2 0 2.5-5.5 4.5-5.5s2.5 5.5 4.5 5.5' stroke='%23FFFFFF' stroke-opacity='.35'/%3E%3Cpath d='M10.5 10.5c2 0 2.5-5.5 4.5-5.5s2.5 5.5 4.5 5.5' stroke='%23FFFFFF' stroke-opacity='.65'/%3E%3Cpath d='M19.5 10.5c2 0 2.5-5.5 4.5-5.5s2.5 5.5 4.5 5.5' stroke='%23FFFFFF'/%3E%3Ccircle cx='33.4' cy='7.6' r='2.6' fill='%2300CAA4' stroke='none'/%3E%3C/svg%3E");
}
.rs-section-subtitle.ms-eyebrow { gap: 12px; }

/* ---------------------------------------------------------------- *
 *  3. Шапки внутренних страниц (sections/pagehead.js, layout.js breadcrumb)
 * ---------------------------------------------------------------- */
.ms-pagehead {
  /* заливка дуотона: пока картинка грузится (и без JS) шапка уже того же цвета */
  background-color: #0D2A3C;
  isolation: isolate;          /* .rs-breadcrumb-bg z-index:-1 рисуется над этой заливкой */
  overflow: hidden;
  padding-top: 150px;
  padding-bottom: 140px;
}
.ms-pagehead .rs-breadcrumb-bg { background-size: cover; background-position: center center; }

/* Узор «волокон». Только над тёмной левой частью кадра: маска гасит его раньше,
   чем начинается фигура (дуотон угасает в #0D2A3C левее 40–45% ширины), поэтому
   ярчайший пиксель шапки остаётся #3E7C83. Над заливкой: белый 12.5:1. */
.ms-pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  background: repeat 0 0 / 320px 120px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='120' viewBox='0 0 320 120' fill='none' stroke='%23FFFFFF' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M0 12C80 0 240 24 320 12'/%3E%3Cpath d='M0 34C80 20 240 48 320 34'/%3E%3Cpath d='M0 56C80 44 240 68 320 56'/%3E%3Cpath d='M0 78C80 64 240 92 320 78'/%3E%3Cpath d='M0 100C80 88 240 112 320 100'/%3E%3Cpath d='M40 0C70 40 50 80 80 120' stroke-opacity='.5'/%3E%3Cpath d='M200 0C230 40 210 80 240 120' stroke-opacity='.5'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 28%, transparent 46%);
  mask-image: linear-gradient(90deg, #000 0, #000 28%, transparent 46%);
}

.ms-pagehead .rs-breadcrumb-title { margin-bottom: 0; max-width: 16em; }
.ms-pagehead__rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 26px;
}
.ms-pagehead__line {
  width: 64px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, #00CAA4, rgba(0, 202, 164, 0));
}
/* Весь текст шапки — чисто белый: над ярчайшим пикселем дуотона 85% белого дают
   только 3.9:1, а 100% — 4.76:1. Иерархию держат кегль и насыщенность. */
.ms-pagehead__lead {
  max-width: 34em;
  margin: 0 0 30px;
  color: #FFFFFF;
  font-size: 18px;
  line-height: 1.6;
}
.ms-pagehead__lead a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.ms-pagehead .rs-breadcrumb-menu {
  display: inline-block;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.ms-pagehead .rs-breadcrumb-menu ul { gap: 10px 30px; }
.ms-pagehead .rs-breadcrumb-menu ul li span { color: #FFFFFF; font-size: 15px; }
.ms-pagehead .rs-breadcrumb-menu ul li:not(:last-child)::before { font-size: 16px; inset-inline-end: -23px; top: 1px; opacity: 0.7; }
.ms-pagehead .rs-breadcrumb-menu ul li span a { color: #FFFFFF; }
/* в шаблоне ховер — чёрный по тёмному; у нас мятный (7:1 к заливке, крошки стоят над ней) */
.ms-pagehead .rs-breadcrumb-menu ul li span a:hover,
.ms-pagehead .rs-breadcrumb-menu ul li span a:focus-visible { color: #00CAA4; }
.ms-pagehead .rs-breadcrumb-menu ul li[aria-current] span { font-weight: 600; }

@media only screen and (max-width: 1199px) {
  .ms-pagehead { padding-top: 120px; padding-bottom: 110px; }
}
@media only screen and (max-width: 767px) {
  .ms-pagehead { padding-top: 96px; padding-bottom: 88px; }
  .ms-pagehead__lead { font-size: 16px; }
  .ms-pagehead__rule { margin: 18px 0 20px; }
}
@media only screen and (max-width: 575px) {
  /* шаблон сдвигает фон влево — там только заливка; узор на телефоне не нужен */
  .ms-pagehead::after { display: none; }
}

/* ---------------------------------------------------------------- *
 *  4. Услуги (sections/services.js)
 * ---------------------------------------------------------------- */
.ms-services .rs-section-title-wrapper .descrip {
  max-width: 40em;
  margin-inline: auto;
}
.ms-services .rs-services-item { display: flex; flex-direction: column; height: 100%; }
.ms-services .ms-svc-icon { margin-bottom: 28px; }
/* в четыре колонки длинные русские слова («восстановительный») рвались посреди слова */
.ms-services .rs-services-title { font-size: 20px; line-height: 1.3; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.ms-ico-tile {
  --ms-ico-accent: #00CAA4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 2px;
  border: 1px solid rgba(0, 202, 164, 0.34);
  background: rgba(0, 202, 164, 0.07);
  color: #FFFFFF;
  transition: background-color .4s var(--gx-ease, ease), border-color .4s var(--gx-ease, ease);
}
.rs-services-seven .rs-services-icon .ms-ico-tile .ms-icon { width: 36px; height: 36px; }
.ms-services .rs-services-item:hover .ms-ico-tile {
  background: rgba(0, 202, 164, 0.16);
  border-color: rgba(0, 202, 164, 0.7);
}

/* ---------------------------------------------------------------- *
 *  5. Лента доверия (sections/trustbar.js)
 * ---------------------------------------------------------------- */
/* фон ленты — акцент темы без JS (шаблонный data-bg-color лежит под black-bg и не виден) */
.rs-feature-three.ms-trustbar { background-color: #023B4A; isolation: isolate; }
.ms-trustbar .rs-feature-item { align-items: flex-start; gap: 16px; }
.ms-trustbar .rs-feature-title { margin-bottom: 6px; font-size: 20px; line-height: 1.3; }
.ms-trustbar .rs-feature-descrip p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.ms-ico-ring {
  --ms-ico-accent: #00CAA4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(0, 202, 164, 0.4);
  background: rgba(255, 255, 255, 0.04);
  color: #FFFFFF;
}
@media only screen and (min-width: 1200px) {
  .ms-trustbar .row > [class*="col-"] + [class*="col-"] { border-inline-start: 1px solid rgba(255, 255, 255, 0.1); }
}
@media only screen and (max-width: 480px) {
  .ms-trustbar .rs-feature-item { flex-wrap: nowrap; }
}

/* ---------------------------------------------------------------- *
 *  6. Футер (layout.js footer())
 * ---------------------------------------------------------------- */
.ms-footer { background-color: #0D2A3C; }
.ms-footer .rs-footer-bg-thumb { background-position: right bottom; background-size: cover; }
/* шаблонная плёнка #111 / 0.6 гасила картинку в серое — дуотону она не нужна */
.ms-footer .rs-footer-bg-thumb::before { content: none; }
/* мятная линия по верхней кромке */
.ms-footer::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 202, 164, 0) 0, rgba(0, 202, 164, 0.55) 25%, rgba(0, 202, 164, 0) 75%);
  pointer-events: none;
}
.ms-footer .rs-footer-widget-title { color: #FFFFFF; }
.ms-footer .rs-footer-widget-description,
.ms-footer .rs-footer-widget-address a,
.ms-footer .rs-footer-widget-email a,
.ms-footer .rs-footer-widget-number span a { color: rgba(255, 255, 255, 0.8); }
.ms-footer .rs-footer-widget-links ul { grid-template-columns: 1fr; gap: 12px; }
.ms-footer .rs-footer-widget-links ul li a { color: rgba(255, 255, 255, 0.8); }
.ms-footer .rs-footer-widget-links ul li a::before { color: #00CAA4; }
.ms-footer .rs-footer-widget-links ul li a:hover,
.ms-footer .rs-footer-widget-address a:hover,
.ms-footer .rs-footer-widget-email a:hover,
.ms-footer .rs-footer-widget-number span a:hover { color: #FFFFFF; }
.ms-footer .rs-footer-top > .row + .row .rs-footer-widget-description {
  margin: 8px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  line-height: 1.6;
}

.ms-copyright {
  background-color: #0A2130;   /* темнее заливки футера: 72% белого = 9:1 */
  border-top-color: rgba(255, 255, 255, 0.08);
}
.ms-copyright .rs-footer-copyright p { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 14px; }
.ms-copyright .rs-footer-copyright p + p { margin-top: 4px; }
.ms-copyright .rs-footer-copyright a { color: #FFFFFF; }
.ms-copyright .rs-footer-copyright a:hover { color: #00CAA4; }

/* ---------------------------------------------------------------- *
 *  7. Герой главной (sections/hero.js)
 *
 *  Плёнка #0D2A3C слева направо. Условие: белый текст ≥ 4.5:1 даже над чисто
 *  белым пикселем картинки. Альфа плёнки α даёт фон = α·ink + (1−α)·white:
 *    α ≥ 0.63 — для 100% белого,  α ≥ 0.69 — для 85% белого (описание, подписи).
 *  Под всей колонкой текста держим ≥ 0.72; после правого края колонки
 *  (--ms-hero-edge) плёнка гаснет до нуля, и фигура справа остаётся в цвете.
 *  Колонка ограничена по ширине, чтобы край приходился на ~40–50% кадра.
 * ---------------------------------------------------------------- */
.ms-hero { --ms-hero-edge: 690px; --ms-hero-fade: 22%; }
.ms-hero .rs-banner-item { max-width: 600px; }
.rs-banner-fifteen.ms-hero .rs-banner-bg-thumb { background-color: #0D2A3C; }
.rs-banner-fifteen.ms-hero .rs-banner-bg-thumb::before,
[dir=rtl] .rs-banner-fifteen.ms-hero .rs-banner-bg-thumb::before {
  background: linear-gradient(to right,
    rgba(13, 42, 60, 0.92) 0,
    rgba(13, 42, 60, 0.86) calc(var(--ms-hero-edge) * 0.5),
    rgba(13, 42, 60, 0.74) var(--ms-hero-edge),
    rgba(13, 42, 60, 0) calc(var(--ms-hero-edge) + var(--ms-hero-fade)));
}
[dir=rtl] .rs-banner-fifteen.ms-hero .rs-banner-bg-thumb::before { transform: scaleX(-1); }
@media only screen and (min-width: 1601px) {
  .ms-hero { --ms-hero-edge: 810px; }
  .ms-hero .rs-banner-item { max-width: 640px; }
}
@media only screen and (max-width: 1199px) {
  .ms-hero { --ms-hero-edge: 640px; --ms-hero-fade: 20%; }
}
/* одна колонка: текст на всю ширину — плёнка ровная, без провала */
@media only screen and (max-width: 991px) {
  .ms-hero .rs-banner-item { max-width: none; }
  .rs-banner-fifteen.ms-hero .rs-banner-bg-thumb::before,
  [dir=rtl] .rs-banner-fifteen.ms-hero .rs-banner-bg-thumb::before {
    background: linear-gradient(180deg, rgba(13, 42, 60, 0.9) 0, rgba(13, 42, 60, 0.76) 40%, rgba(13, 42, 60, 0.8) 100%);
    transform: none;
  }
}

.ms-hero .rs-banner-subtitle.ms-eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.ms-hero .rs-banner-descrip p { color: rgba(255, 255, 255, 0.88); }
.ms-hero .ms-hero-figure { margin-top: 28px; }
.ms-hero .ms-hero-figure > i { color: #00CAA4; }
.ms-hero .ms-hero-figure__caption,
.ms-hero .ms-hero-figure__muscles { color: rgba(255, 255, 255, 0.86); font-size: 14px; line-height: 1.55; }

/* Счётчики героя — одной строкой из трёх плиток вместо лесенки во всю высоту */
.ms-hero .rs-banner-meta-thumb-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  margin-top: 44px;
}
.rs-banner-fifteen.ms-hero .rs-banner-meta-item {
  width: auto;
  padding: 18px 20px 20px;
  border-top: 2px solid #00CAA4;
  background: rgba(13, 42, 60, 0.92);
}
.rs-banner-fifteen.ms-hero .rs-banner-meta-item .rs-counter-number-wrapper { margin-top: 0; margin-bottom: 8px; }
.rs-banner-fifteen.ms-hero .rs-banner-meta-item .rs-counter-number,
.rs-banner-fifteen.ms-hero .rs-banner-meta-item .prefix {
  font-size: 40px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.rs-banner-fifteen.ms-hero .rs-banner-meta-item .rs-counter-title {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
}
@media only screen and (max-width: 575px) {
  .ms-hero .rs-banner-meta-thumb-wrapper { grid-template-columns: 1fr; }
}

/* две группы ссылок в одной колонке футера */
.ms-footer .rs-footer-widget-content + .rs-footer-widget-title { margin-top: 40px; }

/* domsCurve.css */
/*============================================================================
  domsCurve — «Крепатура по часам»: качественная кривая и окна для массажа.
  Разметка: build/render/sections/domsCurve.js, поведение: assets/js/gfx/domsCurve.js.

  Подписи осей, номера окон и аннотации — HTML поверх SVG, позиции в процентах
  от ширины viewBox: на телефоне схема сжимается, а текст остаётся 12–13 px.
============================================================================*/
.ms-dc {
  --dc-mint-ink: #009E80;  /* мята, затемнённая до 3:1 на белом — для линий, не для текста */
}
.ms-dc p { margin: 0; line-height: 1.5; }
.ms-dc ul, .ms-dc ol, .ms-dc dl, .ms-dc dd { margin: 0; padding: 0; list-style: none; }
.ms-dc li { margin: 0; }
.ms-dc .ms-gx__lead { margin-bottom: 20px; }
.ms-dc .ms-gx__note { margin-top: 24px; }

/* ---------- график ---------- */
.ms-dc__chart { position: relative; }
.ms-dc__ylabel {
  margin-bottom: 4px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.ms-dc__ylabel::before { content: "↑ "; color: var(--gx-line-strong); letter-spacing: 0; }
.ms-dc__plot { position: relative; padding-top: 30px; padding-bottom: 24px; }
.ms-dc__canvas { position: relative; }
/* На узком экране график вытягивается по высоте (preserveAspectRatio=none):
   линии — non-scaling-stroke, подписи — HTML в процентах, поэтому ничего не плывёт. */
.ms-dc__svg { width: 100%; height: auto; aspect-ratio: 680 / 276; }
.ms-dc__svg *, .ms-dc__rsvg * { vector-effect: non-scaling-stroke; }
.ms-dc__svg *, .ms-dc__rsvg * { transition: none; }

.ms-dc__band { cursor: pointer; transition: fill-opacity 200ms var(--gx-ease), opacity 200ms var(--gx-ease) !important; }
.ms-dc__band { fill: transparent; }
.ms-dc__band.is-active { fill: var(--dc-tint); stroke: var(--dc-edge); stroke-width: 1.25; stroke-dasharray: 3 3; }
.ms-dc__band--pre, .ms-dc__band--evening { --dc-tint: rgba(13, 42, 60, 0.05); --dc-edge: var(--gx-line-strong); }
.ms-dc__band--after, .ms-dc__band--main { --dc-tint: rgba(0, 202, 164, 0.16); --dc-edge: var(--dc-mint-ink); }
.ms-dc__band--deep { --dc-tint: rgba(2, 59, 74, 0.06); --dc-edge: var(--gx-accent); }
.ms-dc__lane--pre { fill: rgba(13, 42, 60, 0.22); }
.ms-dc__lane--after { fill: rgba(0, 202, 164, 0.5); }
.ms-dc__lane--evening { fill: rgba(13, 42, 60, 0.12); }
.ms-dc__lane--main { fill: var(--gx-mint); }
.ms-dc__lane--deep { fill: rgba(2, 59, 74, 0.6); }

.ms-dc__grid { stroke: var(--gx-line); stroke-width: 1; stroke-dasharray: 2 4; }
.ms-dc__grid--zero { stroke: var(--gx-line-strong); stroke-dasharray: none; }
.ms-dc__grid--start { stroke: var(--gx-accent); stroke-dasharray: none; stroke-width: 1.5; }
.ms-dc__base { stroke: var(--gx-line-strong); stroke-width: 1.5; }
.ms-dc__break { stroke: var(--gx-line-strong); stroke-width: 1.5; fill: none; }

.ms-dc__spread { fill: rgba(2, 59, 74, 0.1); pointer-events: none; }
.ms-dc__area { fill: rgba(2, 59, 74, 0.06); pointer-events: none; }
.ms-dc__line { fill: none; stroke: var(--gx-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ms-dc__bracket { fill: none; stroke: var(--gx-accent); stroke-width: 1.25; pointer-events: none; }

/* номера окон над полосами */
.ms-dc__markers { position: absolute; top: -30px; left: 0; right: 0; height: 30px; pointer-events: none; }
.ms-dc__marker {
  position: absolute;
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border: 1.5px solid var(--gx-line-strong);
  border-radius: 50%;
  background: var(--gx-white);
  color: var(--gx-muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ms-dc__marker.is-active { border-color: var(--gx-accent); background: var(--gx-accent); color: var(--gx-white); }

/* аннотации и подписи оси */
.ms-dc__ann {
  position: absolute;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gx-accent);
  white-space: nowrap;
  pointer-events: none;
}
.ms-dc__ann--onset { padding: 2px 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.85); }
.ms-dc__ann--peak { transform: translate(-50%, -100%); }
.ms-dc__ann--fade { padding: 2px 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.85); text-align: right; color: var(--gx-text); font-weight: 500; }

.ms-dc__ticks { position: absolute; left: 0; right: 0; top: 100%; height: 20px; }
.ms-dc__tick {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 500;
  color: var(--gx-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ms-dc__tick--pre { font-style: italic; }
.ms-dc__tick--start { font-weight: 700; color: var(--gx-accent); }

.ms-dc__xrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ms-dc__xlabel { margin-left: auto !important; font-size: 13px; color: var(--gx-muted); }
.ms-dc__key { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ms-dc__key li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.35; color: var(--gx-text); }
.ms-dc__sw { flex: 0 0 22px; display: block; width: 22px; height: 10px; border-radius: 2px; }
.ms-dc__sw--line { height: 0; border-top: 2.5px solid var(--gx-accent); }
.ms-dc__sw--spread { background: rgba(2, 59, 74, 0.16); }
.ms-dc__sw--ok { height: 0; border-top: 2.5px solid var(--dc-mint-ink); }
.ms-dc__sw--bad { height: 0; border-top: 2.5px dashed var(--gx-warn); }

/* ---------- окна ---------- */
.ms-dc__zones { margin-top: 24px; }
.ms-dc__ztitle, .ms-dc__rtitle {
  margin-bottom: 12px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-accent);
}
.ms-dc__zlist {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.ms-dc__zitem { display: flex; }
.ms-dc__zbtn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px 10px 12px;
  border: 1px solid var(--gx-line);
  border-top: 3px solid var(--dc-sw, var(--gx-line));
  border-radius: var(--gx-radius);
  background: var(--gx-white);
  color: var(--gx-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms var(--gx-ease), background-color 200ms var(--gx-ease);
}
.ms-dc__zbtn--pre { --dc-sw: rgba(13, 42, 60, 0.22); }
.ms-dc__zbtn--after { --dc-sw: rgba(0, 202, 164, 0.5); }
.ms-dc__zbtn--evening { --dc-sw: rgba(13, 42, 60, 0.12); }
.ms-dc__zbtn--main { --dc-sw: var(--gx-mint); }
.ms-dc__zbtn--deep { --dc-sw: var(--gx-accent); }
.ms-dc__zbtn:hover { background: var(--gx-light); }
.ms-dc__zbtn.is-active { border-color: var(--gx-accent); border-top-color: var(--dc-sw); background: var(--gx-light); }
.ms-dc__znum {
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--gx-line-strong);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--gx-muted);
}
.ms-dc__zbtn.is-active .ms-dc__znum { border-color: var(--gx-accent); background: var(--gx-accent); color: var(--gx-white); }
.ms-dc__ztext { display: block; min-width: 0; }
.ms-dc__zwin { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--gx-text-strong); font-variant-numeric: tabular-nums; }
.ms-dc__zname { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--gx-muted); }

.ms-dc__detail {
  margin-top: 12px;
  padding: 18px 20px 20px;
  border-left: 3px solid var(--gx-mint);
  background: var(--gx-light);
  border-radius: var(--gx-radius);
}
.ms-dc[data-zone="pre"] .ms-dc__detail, .ms-dc[data-zone="evening"] .ms-dc__detail { border-left-color: var(--gx-line-strong); }
.ms-dc[data-zone="deep"] .ms-dc__detail { border-left-color: var(--gx-accent); }
.ms-dc__dhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px !important; }
.ms-dc__dnum { display: none; }
.ms-dc__dwin { font-size: 20px; font-weight: 700; color: var(--gx-text-strong); font-variant-numeric: tabular-nums; }
.ms-dc__dname { font-size: 16px; font-weight: 600; color: var(--gx-accent); }
.ms-dc__facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px 24px; }
.ms-dc__fact--wide { grid-column: 1 / -1; }
.ms-dc__fact dt {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.ms-dc__fact dd { font-size: 15px; line-height: 1.55; color: var(--gx-text); }
.ms-dc__dpressure { font-weight: 600; color: var(--gx-text-strong) !important; }

/* ---------- перед стартом ---------- */
.ms-dc__race { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--gx-line); }
.ms-dc__rtext { max-width: 70ch; margin-bottom: 14px !important; font-size: 15px; color: var(--gx-text); }
.ms-dc__rplot { position: relative; padding-top: 34px; padding-bottom: 8px; }  /* подписи дней стоят в пустой полосе под базовой линией (top задан в разметке) */
.ms-dc__rsvg { width: 100%; height: auto; aspect-ratio: 680 / 150; }
.ms-dc__rlabels { position: absolute; top: -34px; left: 0; right: 0; height: 34px; }
.ms-dc__rlabel {
  position: absolute;
  bottom: 4px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gx-text);
  text-align: center;
}
.ms-dc__rlabel--deep { color: var(--gx-accent); }
.ms-dc__rlabel--eve { color: var(--gx-muted); }
.ms-dc__rband--deep { fill: rgba(0, 202, 164, 0.22); }
.ms-dc__rband--light { fill: rgba(13, 42, 60, 0.045); }
.ms-dc__rband--eve { fill: rgba(13, 42, 60, 0.08); }
.ms-dc__rcurve { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ms-dc__rcurve--ok { stroke: var(--dc-mint-ink); }
.ms-dc__rcurve--bad { stroke: var(--gx-warn); stroke-dasharray: 6 5; }
.ms-dc__rdot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid var(--gx-white); border-radius: 50%; }
.ms-dc__rdot--ok { background: var(--dc-mint-ink); }
.ms-dc__rdot--bad { background: var(--gx-warn); }
.ms-dc__flag { fill: var(--gx-accent); stroke: var(--gx-accent); stroke-width: 1.5; stroke-linejoin: round; }

/* ---------- узкие экраны ---------- */
@media (max-width: 767px) {
  .ms-dc__zlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-dc__zitem:last-child { grid-column: 1 / -1; }
  .ms-dc__facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
  .ms-dc__svg { aspect-ratio: 680 / 420; }
  .ms-dc__rsvg { aspect-ratio: 680 / 230; }
  .ms-dc__tick--minor { display: none; }
  .ms-dc__marker { width: 20px; height: 20px; margin-left: -10px; font-size: 11px; }
  .ms-dc__ann { font-size: 11px; }
  .ms-dc__ann--onset { display: none; }
  .ms-dc__rlabel { font-size: 11px; }
  .ms-dc__rlabel--light { display: none; }
}

/* formatQuiz.css */
/*============================================================================
  formatQuiz — «Подбор формата за 4 вопроса».
  Без JS виден .fq-memo, с JS — .fq-app (основная колонка + колонка ответов).
============================================================================*/
.fq {
  --fq-rail: 300px;
  padding: 0;
  overflow: hidden;
}
.fq p { margin: 0; font-family: var(--gx-font); }
.fq h3 { font-family: var(--gx-font); }

/* ---------------------------------------------------------------- кнопки */
.fq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--gx-radius);
  font-family: var(--gx-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--gx-ease), color .2s var(--gx-ease), border-color .2s var(--gx-ease);
}
.fq-btn i { font-size: 18px; line-height: 1; }
.fq-btn--primary { background: var(--gx-accent); color: var(--gx-white); }
.fq-btn--primary:hover { background: var(--gx-ink); color: var(--gx-white); }
.fq-btn--primary[disabled] {
  background: var(--gx-light);
  border-color: var(--gx-line);
  color: var(--gx-muted);
  cursor: not-allowed;
}
.fq-btn--ghost { background: transparent; border-color: var(--gx-line-strong); color: var(--gx-text-strong); }
.fq-btn--ghost:hover { border-color: var(--gx-accent); color: var(--gx-accent); }

/* ---------------------------------------------------------------- памятка без JS */
.fq-memo { padding: var(--gx-pad); }
.fq-memo__head { max-width: 64ch; margin-bottom: 28px; }
.fq-memo__title { margin: 0 0 8px; font-size: 22px; line-height: 1.3; color: var(--gx-text-strong); }
.fq-memo__intro { font-size: 16px; line-height: 1.6; color: var(--gx-text); }
.fq-memo__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gx-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fq-memo__item { display: flex; gap: 14px; align-items: flex-start; padding-top: 18px; border-top: 2px solid var(--gx-accent); }
.fq-memo__num {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--gx-accent);
  font-variant-numeric: tabular-nums;
}
.fq-memo__num::before { content: "0"; }
.fq-memo__q { margin: 0 0 12px; font-size: 17px; line-height: 1.35; color: var(--gx-text-strong); }
.fq-memo__opts { margin: 0; padding: 0; list-style: none; }
.fq-memo__opts li {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--gx-text);
}
.fq-memo__opts li::before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  margin-top: .5em;
  border-radius: 50%;
  background: var(--gx-mint);
}
.fq-memo__opts li.is-flag::before { background: var(--gx-warn); }
.fq-memo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--gx-line);
}

.fq-flagnote {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gx-text);
}
.fq-flagnote i { flex: 0 0 auto; font-size: 18px; line-height: 1.2; color: var(--gx-warn); }

/* ---------------------------------------------------------------- приложение */
.fq-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fq-rail);
  min-height: 520px;
}
.fq-main {
  display: flex;
  flex-direction: column;
  padding: var(--gx-pad) 40px 32px var(--gx-pad);
  min-width: 0;
}

/* прогресс */
.fq-progress { margin-bottom: 28px; }
.fq-progress__count {
  margin-bottom: 10px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gx-accent);
  font-variant-numeric: tabular-nums;
}
.fq-progress__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fq-progress__seg {
  height: 4px;
  border-radius: 2px;
  background: var(--gx-line);
  transition: background-color var(--gx-dur) var(--gx-ease);
}
.fq-progress__seg.is-current { background: var(--gx-mint); }
.fq-progress__seg.is-done { background: var(--gx-accent); }
.fq-progress__seg.is-flag { background: var(--gx-warn); }
.fq-progress__seg.is-skipped { background: repeating-linear-gradient(90deg, var(--gx-line-strong) 0 4px, transparent 4px 8px); }

/* шаг */
.fq-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.fq-step__legend { float: left; width: 100%; margin: 0 0 6px; padding: 0; }
.fq-step__legend + * { clear: both; }
.fq-step__q {
  display: block;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--gx-text-strong);
}
.fq-step__q:focus, .fq-res__title:focus { outline: none; }
.fq-step__hint { margin-bottom: 24px !important; font-size: 15px; line-height: 1.55; color: var(--gx-muted); max-width: 60ch; }

.fq-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
/* пять вариантов: 3 + 2, нижний ряд шире — без пустой ячейки */
.fq-options--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fq-options--5 > .fq-opt { grid-column: span 2; }
.fq-options--5 > .fq-opt:nth-child(n+4) { grid-column: span 3; }

/* четыре варианта: 2 × 2, без одинокой карточки в нижнем ряду */
.fq-options--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* вариант-карточка: настоящий radio внутри label */
.fq-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100%;
  margin: 0;
  padding: 18px 18px 20px;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  background: var(--gx-white);
  cursor: pointer;
  transition: border-color .2s var(--gx-ease), background-color .2s var(--gx-ease), box-shadow .2s var(--gx-ease);
}
.fq-opt:hover { border-color: var(--gx-line-strong); background: var(--gx-light); }
.fq-opt__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.fq-opt:has(.fq-opt__input:focus-visible) { outline: 2px solid var(--gx-mint); outline-offset: 2px; }
.fq-opt.is-checked,
.fq-opt:has(.fq-opt__input:checked) {
  border-color: var(--gx-accent);
  background: var(--gx-white);
  box-shadow: inset 0 0 0 1px var(--gx-accent);
}

.fq-opt__mark {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--gx-line-strong);
  border-radius: 50%;
  color: transparent;
  font-size: 14px;
  transition: background-color .2s var(--gx-ease), border-color .2s var(--gx-ease);
}
.fq-opt.is-checked .fq-opt__mark,
.fq-opt:has(.fq-opt__input:checked) .fq-opt__mark { background: var(--gx-accent); border-color: var(--gx-accent); color: var(--gx-white); }

.fq-opt__icon {
  display: flex;
  align-items: flex-end;
  height: 76px;
  margin-bottom: 12px;
  color: var(--gx-accent);
}
.fq-opt__label {
  padding-right: 18px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gx-text-strong);
}
.fq-opt__sub { font-size: 13px; line-height: 1.45; color: var(--gx-muted); }

/* пиктограмма фигуры */
.fq-fig { width: 45px; height: 75px; overflow: visible; }
.fq-fig__part { fill: var(--gx-bone-line); }
.fq-fig__limb { fill: none; stroke: var(--gx-bone-line); stroke-width: 5.2; stroke-linecap: round; }
.fq-fig__limb--leg { stroke-width: 6.6; }
.fq-fig__part.is-on { fill: var(--gx-muscle); }
.fq-fig__limb.is-on { stroke: var(--gx-muscle); }
.fq-fig__part.is-soft { fill: var(--gx-muscle-light); }
.fq-fig__limb.is-soft { stroke: var(--gx-muscle-light); }
.fq-fig__spine { fill: none; stroke: var(--gx-white); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 1.6 1.8; opacity: .85; }
.fq-fig__route { fill: none; stroke: var(--gx-accent); stroke-width: 1.5; stroke-dasharray: 2.4 2.2; stroke-linecap: round; }
.fq-fig__from { fill: var(--gx-muscle); stroke: var(--gx-white); stroke-width: 1.5; }
.fq-fig__to { fill: var(--gx-white); stroke: var(--gx-muscle); stroke-width: 1.5; }

/* пиктограмма шкалы времени */
.fq-time { width: 112px; height: 42px; overflow: visible; margin-bottom: 6px; }
.fq-time__track { fill: var(--gx-line); }
.fq-time__fill { fill: var(--gx-accent); }
.fq-time__end { fill: var(--gx-white); stroke: var(--gx-accent); stroke-width: 1.5; }
.fq-time__ticks line { stroke: var(--gx-line-strong); stroke-width: 1; }

/* пиктограмма глубины давления */
.fq-depth { width: 96px; height: 48px; overflow: visible; }
.fq-depth__skin { fill: var(--gx-skin); }
.fq-depth__fat { fill: var(--gx-fat); }
.fq-depth__fascia { fill: var(--gx-fascia); }
.fq-depth__muscle { fill: var(--gx-muscle); }
.fq-depth__fibre { fill: none; stroke: var(--gx-muscle-deep); stroke-width: .8; opacity: .55; }
.fq-depth__level { fill: none; stroke: var(--gx-ink); stroke-width: 1; stroke-dasharray: 2 2.5; opacity: .55; }
.fq-depth__arrow { fill: none; stroke: var(--gx-ink); stroke-width: 1.5; stroke-linecap: round; }
.fq-depth__head { fill: var(--gx-ink); }

/* значок в кружке — вопрос про ограничения */
.fq-badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gx-mint-soft);
  color: var(--gx-accent);
}
.fq-badge i { font-size: 24px !important; line-height: 1; }
.fq-opt--flag .fq-badge { background: var(--gx-warn-soft); color: var(--gx-warn); }

/* навигация */
.fq-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 32px;
}
.fq-nav .fq-btn--primary { min-width: 168px; }

/* ---------------------------------------------------------------- колонка ответов */
.fq-rail {
  display: flex;
  flex-direction: column;
  padding: var(--gx-pad) 28px 28px;
  background: var(--gx-light);
  border-left: 1px solid var(--gx-line);
}
.fq-rail__title {
  margin-bottom: 20px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.fq-rail__list { position: relative; margin: 0; padding: 0; list-style: none; }
.fq-rail__row {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 22px;
}
/* соединительная линия степпера */
.fq-rail__row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 2px;
  width: 1.5px;
  background: var(--gx-line);
}
.fq-rail__row.is-done:not(:last-child)::after { background: var(--gx-mint); }
.fq-rail__num {
  position: relative;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--gx-line-strong);
  border-radius: 50%;
  background: var(--gx-white);
  font-size: 13px;
  font-weight: 600;
  color: var(--gx-muted);
  font-variant-numeric: tabular-nums;
}
.fq-rail__num > * { grid-area: 1 / 1; }
.fq-rail__num i { display: none; font-style: normal; }
.fq-rail__row.is-current .fq-rail__num { border-color: var(--gx-accent); background: var(--gx-accent); color: var(--gx-white); }
.fq-rail__row.is-done .fq-rail__num { border-color: var(--gx-mint); background: var(--gx-mint); color: var(--gx-ink); }
.fq-rail__row.is-done .fq-rail__n { display: none; }
.fq-rail__row.is-done .ri-check-line { display: block; font-size: 16px; }
.fq-rail__row.is-flag .fq-rail__num { border-color: var(--gx-warn); background: var(--gx-warn); color: var(--gx-white); }
.fq-rail__row.is-flag .fq-rail__n,
.fq-rail__row.is-flag .ri-check-line { display: none; }
.fq-rail__row.is-flag .fq-rail__bang { display: block; font-weight: 700; }
.fq-rail__row.is-skipped .fq-rail__num { border-style: dashed; background: transparent; }

.fq-rail__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 3px; }
.fq-rail__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.fq-rail__row.is-current .fq-rail__label { color: var(--gx-accent); }
.fq-rail__value { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--gx-muted); }
.fq-rail__row.is-done .fq-rail__value,
.fq-rail__row.is-current .fq-rail__value { color: var(--gx-text-strong); }
.fq-rail__row.is-flag .fq-rail__value { color: var(--gx-warn); }
.fq-rail__row:not(.has-value) .fq-rail__value { font-style: italic; font-weight: 400; color: var(--gx-muted); }

.fq-rail__restart { align-self: flex-start; margin-top: 4px; }
.fq-rail__note {
  display: flex;
  gap: 8px;
  margin-top: auto !important;
  padding-top: 24px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gx-muted);
}
.fq-rail__note i { font-size: 14px; line-height: 1.3; }

/* ---------------------------------------------------------------- результат */
.fq-result { animation: fq-in var(--gx-dur) var(--gx-ease); }
.fq-step:not([hidden]) { animation: fq-in 320ms var(--gx-ease); }
@keyframes fq-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.fq-res__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gx-accent);
}
.fq-res__eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--gx-mint); }
.fq-res__eyebrow--warn { color: var(--gx-warn); }
.fq-res__eyebrow--warn::before { display: none; }
.fq-res__eyebrow--warn i { font-size: 16px; }
.fq-res__title {
  margin: 0 0 18px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gx-text-strong);
}
.fq-res__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--gx-line);
}
.fq-res__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--gx-radius);
  background: var(--gx-mint-soft);
  font-size: 15px;
  font-weight: 600;
  color: var(--gx-accent);
  font-variant-numeric: tabular-nums;
}
.fq-res__chip i { font-size: 17px; }
.fq-res__intensity { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gx-text); }
.fq-res__intensity-label { font-weight: 500; color: var(--gx-muted); }
.fq-res__intensity-value { font-weight: 600; color: var(--gx-text-strong); font-variant-numeric: tabular-nums; }
.fq-dots { display: inline-flex; gap: 4px; }
.fq-dots span { width: 18px; height: 6px; border-radius: 1px; background: var(--gx-line); }
.fq-dots span.is-on { background: var(--gx-muscle); }

.fq-res__why-title {
  margin-bottom: 8px !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.fq-res__why { max-width: 64ch; font-size: 16px; line-height: 1.6; color: var(--gx-text); }
.fq-res__why + .fq-res__why { margin-top: 10px !important; }
.fq-res__why--dur { color: var(--gx-text-strong); }
.fq-res__alt { margin-top: 16px !important; font-size: 15px; line-height: 1.5; color: var(--gx-text); }
.fq-res__alt a { color: var(--gx-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gx-mint); }
.fq-res__alt a:hover { color: var(--gx-ink); }
.fq-res__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fq-res__note {
  margin-top: 22px !important;
  max-width: 64ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gx-muted);
}

/* рекомендация: текст + крупная фигура справа */
.fq-res--rec { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; align-items: start; }
.fq-res__body { min-width: 0; }
.fq-res__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 28px 16px 20px;
  border-radius: var(--gx-radius);
  background: var(--gx-light);
}
.fq-res__visual .fq-fig { width: 108px; height: 180px; }
.fq-res__visual-cap { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.fq-res__visual-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.fq-res__visual-value { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--gx-text-strong); }

/* «сначала к врачу» */
.fq-res--doctor .fq-res__title { margin-bottom: 14px; }
.fq-res__return {
  margin-top: 24px;
  padding: 18px 20px;
  border-left: 3px solid var(--gx-mint);
  background: var(--gx-light);
  max-width: 68ch;
}
.fq-res__return-title { margin-bottom: 6px !important; font-size: 15px; font-weight: 600; color: var(--gx-text-strong); }
.fq-res__return-text { font-size: 15px; line-height: 1.6; color: var(--gx-text); }

/* ---------------------------------------------------------------- адаптив */
@media (max-width: 1199px) {
  .fq { --fq-rail: 260px; }
}
@media (max-width: 991px) {
  .fq-app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .fq-main { padding: var(--gx-pad); }
  .fq-rail { border-left: 0; border-top: 1px solid var(--gx-line); padding: 24px var(--gx-pad); }
  .fq-rail__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .fq-rail__row:not(:last-child)::after { display: none; }
  .fq-rail__row { padding-bottom: 16px; }
  .fq-rail__note { margin-top: 8px !important; padding-top: 8px; }
  .fq-memo__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}
@media (max-width: 767px) {
  .fq-res--rec { grid-template-columns: minmax(0, 1fr); }
  .fq-res__visual { display: none; }
  .fq-options, .fq-options--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fq-options--5 > .fq-opt, .fq-options--5 > .fq-opt:nth-child(n+4) { grid-column: auto; }
  .fq-step__q { font-size: 22px; }
  .fq-res__title { font-size: 24px; }
}
@media (max-width: 575px) {
  .fq-options, .fq-options--5 { grid-template-columns: minmax(0, 1fr); }
  /* на телефоне вариант — строка: значок слева, текст справа */
  .fq-opt {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    padding: 14px 44px 14px 14px;
  }
  .fq-opt__icon { grid-row: 1 / span 2; height: auto; margin: 0; justify-content: center; align-items: center; }
  .fq-opt__icon .fq-fig { width: 30px; height: 50px; }
  .fq-opt__icon .fq-time { width: 48px; height: 18px; margin: 0; }
  .fq-opt__icon .fq-depth { width: 48px; height: 24px; }
  .fq-opt__icon .fq-badge { width: 40px; height: 40px; }
  .fq-opt__icon .fq-badge i { font-size: 20px !important; }
  .fq-opt__label { padding-right: 0; font-size: 15px; }
  .fq-opt__sub { grid-column: 2; }
  .fq-opt__mark { top: 50%; right: 14px; transform: translateY(-50%); }
  .fq-rail__list { grid-template-columns: minmax(0, 1fr); }
  .fq-nav .fq-btn--primary { min-width: 0; flex: 1 1 auto; }
  .fq-res__actions .fq-btn { flex: 1 1 100%; }
  .fq-memo__list { grid-template-columns: minmax(0, 1fr); }
  .fq-memo__foot .fq-btn { width: 100%; }
}

@media print {
  .fq-app { display: none !important; }
  .fq-memo { display: block !important; }
}

/* pressureScale.css */
/*============================================================================
  pressureScale — шкала давления 0–10 и дыхание как индикатор.
  Разметка: build/render/sections/pressureScale.js, поведение: assets/js/gfx/pressureScale.js.

  Геометрия ползунка: 11 ячеек шкалы делят ширину поровну, а центр нативного
  бегунка (28 px) должен совпадать с центром ячейки. Поэтому input уже шкалы:
  left = ячейка/2 − бегунок/2, width = 10 ячеек + бегунок.
============================================================================*/
.ms-ps {
  --ps-thumb: 28px;
  --ps-surface: rgba(13, 42, 60, 0.09);
  --ps-comfort: rgba(0, 202, 164, 0.34);
  --ps-work: var(--gx-mint);
  --ps-edge: repeating-linear-gradient(135deg, rgba(179, 84, 30, 0.62) 0 3px, rgba(179, 84, 30, 0.28) 3px 6px);
  --ps-stop: var(--gx-warn);
  --ps-tone: var(--gx-mint);
}
.ms-ps[data-zone="surface"] { --ps-tone: #9AA6AE; }
.ms-ps[data-zone="comfort"] { --ps-tone: #7FE3D0; }
.ms-ps[data-zone="work"]    { --ps-tone: var(--gx-mint); }
.ms-ps[data-zone="edge"]    { --ps-tone: #D08A5F; }
.ms-ps[data-zone="stop"]    { --ps-tone: var(--gx-warn); }

.ms-ps p { margin: 0; }
.ms-ps .ms-gx__lead { margin: 0 0 28px; }
.ms-ps ul, .ms-ps ol { margin: 0; padding: 0; list-style: none; }

/* ---------- шкала ---------- */
.ms-ps__scale { padding-bottom: 28px; }

.ms-ps__scalehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ms-ps__label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-accent);
}
.ms-ps__ends {
  display: flex;
  gap: 6px 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--gx-muted);
}
.ms-ps__ends > span + span::before {
  content: "→";
  margin-right: 20px;
  color: var(--gx-line-strong);
}

.ms-ps__track { position: relative; }

.ms-ps__ticks {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  height: 28px;
  margin-bottom: 4px;
}
.ms-ps__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--gx-muted);
}
.ms-ps__tick--work { color: var(--gx-accent); font-weight: 600; }
.ms-ps__tick--stop { color: var(--gx-warn); }
.ms-ps__tick.is-active {
  background: var(--gx-ink);
  color: var(--gx-white);
  font-weight: 600;
}

.ms-ps__bar {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 2px;
  height: 12px;
  margin: 16px 0;
}
.ms-ps__cell { display: block; height: 12px; cursor: pointer; }
.ms-ps__cell.is-first { margin-left: 2px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.ms-ps__cell.is-last { margin-right: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
.ms-ps__cell[data-v="0"] { margin-left: 0; }
.ms-ps__cell[data-v="10"] { margin-right: 0; }
.ms-ps__cell--surface { background: var(--ps-surface); }
.ms-ps__cell--comfort { background: var(--ps-comfort); }
.ms-ps__cell--work { background: var(--ps-work); }
.ms-ps__cell--edge { background: var(--ps-edge); }
.ms-ps__cell--stop { background: var(--ps-stop); }

/* нативный ползунок поверх шкалы: дорожка прозрачная, виден только бегунок */
.ms-ps__range {
  position: absolute;
  top: 32px;                                      /* высота ряда цифр + отступ */
  left: calc(100% / 22 - var(--ps-thumb) / 2);
  width: calc(100% * 10 / 11 + var(--ps-thumb));
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: pan-y;
}
.ms-ps__range:focus { outline: none; }
.ms-ps__range:focus-visible { outline: none; }
.ms-ps__range::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; }
.ms-ps__range::-moz-range-track { height: 44px; background: transparent; border: 0; }
.ms-ps__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--ps-thumb);
  height: var(--ps-thumb);
  margin-top: 8px;
  border-radius: 50%;
  background: var(--gx-white);
  border: 3px solid var(--gx-ink);
  box-shadow: 0 0 0 4px var(--gx-white), 0 3px 10px rgba(13, 42, 60, 0.28);
  transition: transform 160ms var(--gx-ease), box-shadow 160ms var(--gx-ease);
}
.ms-ps__range::-moz-range-thumb {
  width: var(--ps-thumb);
  height: var(--ps-thumb);
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--gx-white);
  border: 3px solid var(--gx-ink);
  box-shadow: 0 0 0 4px var(--gx-white), 0 3px 10px rgba(13, 42, 60, 0.28);
}
.ms-ps__range:active::-webkit-slider-thumb { transform: scale(1.08); }
.ms-ps__range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--gx-white), 0 0 0 7px var(--gx-mint), 0 3px 10px rgba(13, 42, 60, 0.28);
}
.ms-ps__range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px var(--gx-white), 0 0 0 7px var(--gx-mint), 0 3px 10px rgba(13, 42, 60, 0.28);
}

/* подписи зон: те же 11 колонок, что у шкалы */
.ms-ps__zones {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 2px;
  margin-top: 4px;
}
.ms-ps__zone { display: block; grid-column: span var(--span, 1); min-width: 0; }
.ms-ps__zonebtn {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 10px 10px 8px;
  border: 0;
  border-top: 2px solid var(--gx-line);
  border-radius: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--gx-text);
  cursor: pointer;
}
.ms-ps__zonebtn:hover { background: var(--gx-light); }
.ms-ps__zonerange {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--gx-muted);
}
.ms-ps__zoneshort {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gx-text-strong);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.ms-ps__zone--work .ms-ps__zonebtn { border-top-color: var(--gx-mint); }
.ms-ps__zone--work .ms-ps__zoneshort { font-weight: 600; }
.ms-ps__zone--edge .ms-ps__zonebtn,
.ms-ps__zone--stop .ms-ps__zonebtn { border-top-color: rgba(179, 84, 30, 0.45); }
.ms-ps__zone--stop .ms-ps__zonerange,
.ms-ps__zone--edge .ms-ps__zonerange { color: var(--gx-warn); }
.ms-ps__zonebtn.is-active {
  background: var(--gx-light);
  border-top-color: var(--gx-ink);
  border-top-width: 2px;
}

/* ---------- тело: показания + дыхание ---------- */
.ms-ps__body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--gx-line);
}

.ms-ps__now {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--gx-line);
}
.ms-ps__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: none;
  min-width: 2.4ch;
  line-height: 1;
}
.ms-ps__num {
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--gx-text-strong);
}
.ms-ps__of { font-size: 15px; font-weight: 500; color: var(--gx-muted); white-space: nowrap; }
.ms-ps__nowtext { min-width: 0; }
.ms-ps__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--gx-muted);
}
.ms-ps__swatch {
  display: inline-block;
  width: 22px;
  height: 8px;
  border-radius: 2px;
  background: var(--ps-tone);
}
.ms-ps[data-zone="edge"] .ms-ps__swatch { background: var(--ps-edge); }
.ms-ps__zonename {
  margin: 6px 0 0;
  font-size: 24px;
  line-height: 1.25;
  color: var(--gx-text-strong);
}
.ms-ps[data-zone="stop"] .ms-ps__zonename { color: var(--gx-warn); }

.ms-ps__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 28px;
}
.ms-ps__fact dt,
.ms-ps__signstitle,
.ms-ps__breathtitle,
.ms-ps__rhythmlabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.ms-ps__fact dd {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gx-text);
}

.ms-ps__signstitle { margin-bottom: 4px; }
.ms-ps__sign {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gx-line);
}
.ms-ps__sign:last-child { border-bottom: 0; }
.ms-ps__mark { flex: none; width: 24px; height: 24px; overflow: visible; }
.ms-ps__mark path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.ms-ps__mark-ring { stroke-width: 1.5; }
.ms-ps__sign[data-state="2"] .ms-ps__mark-ring { fill: var(--gx-mint-soft); stroke: var(--gx-mint); }
.ms-ps__sign[data-state="2"] .ms-ps__mark-yes { opacity: 1; stroke: var(--gx-accent); }
.ms-ps__sign[data-state="1"] .ms-ps__mark-ring { fill: var(--gx-white); stroke: var(--gx-warn); stroke-dasharray: 3 2.4; }
.ms-ps__sign[data-state="1"] .ms-ps__mark-part { opacity: 1; stroke: var(--gx-warn); }
.ms-ps__sign[data-state="0"] .ms-ps__mark-ring { fill: var(--gx-warn-soft); stroke: var(--gx-warn); }
.ms-ps__sign[data-state="0"] .ms-ps__mark-no { opacity: 1; stroke: var(--gx-warn); }

.ms-ps__signtext { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ms-ps__signname { font-size: 15px; font-weight: 600; color: var(--gx-text-strong); }
.ms-ps__signhint { font-size: 13px; line-height: 1.45; color: var(--gx-muted); }
.ms-ps__signstate {
  flex: none;
  padding: 3px 10px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ms-ps__sign[data-state="2"] .ms-ps__signstate { background: var(--gx-mint-soft); color: var(--gx-accent); }
.ms-ps__sign[data-state="1"] .ms-ps__signstate { background: var(--gx-warn-soft); color: var(--gx-warn); }
.ms-ps__sign[data-state="0"] .ms-ps__signstate { background: var(--gx-warn); color: var(--gx-white); }

/* ---------- дыхательный индикатор ---------- */
.ms-ps__breath {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--gx-light);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  text-align: center;
}
.ms-ps__breathtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gx-accent);
}
.ms-ps__breathtitle::before { content: ""; width: 18px; height: 2px; background: var(--gx-mint); }

.ms-ps__stage { position: relative; width: 200px; height: 200px; flex: none; }
.ms-ps__guide { position: absolute; inset: 0; width: 100%; height: 100%; }
.ms-ps__guide circle { fill: none; stroke-width: 1.25; }
.ms-ps__guide-max { stroke: var(--gx-line-strong); stroke-dasharray: 2 5; }
.ms-ps__guide-min { stroke: var(--gx-line); }

.ms-ps__orb {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 184px;                  /* = внешнее кольцо, r 92 из 100 */
  height: 184px;
  border-radius: 50%;
  border: 1.5px solid var(--gx-mint);
  background: radial-gradient(circle at 50% 42%, rgba(0, 202, 164, 0.34), rgba(0, 202, 164, 0.12) 70%);
  transform: scale(0.81);
  transform-origin: 50% 50%;
}
.ms-ps[data-breath="even"] .ms-ps__orb { animation: ms-ps-breathe 10s infinite; }
.ms-ps[data-breath="broken"] .ms-ps__orb {
  border: 1.5px dashed var(--gx-warn);
  background: radial-gradient(circle at 50% 42%, rgba(179, 84, 30, 0.22), rgba(179, 84, 30, 0.07) 70%);
  animation: ms-ps-ragged 6.2s infinite;
}
.ms-ps[data-breath="hold"] .ms-ps__orb {
  border: 2px solid var(--gx-warn);
  background: radial-gradient(circle at 50% 42%, rgba(179, 84, 30, 0.28), rgba(179, 84, 30, 0.12) 70%);
  transform: scale(0.95);
  animation: none;
}
/* пейсер всегда ведёт ровный ритм 4/6 — к нему и возвращаемся */
.ms-ps.is-pacing .ms-ps__orb {
  border: 1.5px solid var(--gx-mint);
  background: radial-gradient(circle at 50% 42%, rgba(0, 202, 164, 0.34), rgba(0, 202, 164, 0.12) 70%);
  animation: ms-ps-pace 10s infinite;
}

@keyframes ms-ps-breathe {
  0%   { transform: scale(0.62); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  40%  { transform: scale(1);    animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: scale(0.62); }
}
/* та же кривая под другим именем: включение пейсера перезапускает круг с начала вдоха */
@keyframes ms-ps-pace {
  0%   { transform: scale(0.62); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  40%  { transform: scale(1);    animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: scale(0.62); }
}
/* «сбивается»: короткий вдох, рывок, пауза, выдох толчками */
@keyframes ms-ps-ragged {
  0%   { transform: scale(0.64); animation-timing-function: ease-out; }
  12%  { transform: scale(0.86); animation-timing-function: ease-in-out; }
  18%  { transform: scale(0.82); animation-timing-function: ease-out; }
  26%  { transform: scale(0.94); }
  44%  { transform: scale(0.94); animation-timing-function: ease-in; }
  52%  { transform: scale(0.78); }
  60%  { transform: scale(0.80); animation-timing-function: ease-in; }
  70%  { transform: scale(0.68); }
  100% { transform: scale(0.64); }
}

.ms-ps__orblabel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
.ms-ps__phase {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gx-text-strong);
}
.ms-ps[data-breath="hold"]:not(.is-pacing) .ms-ps__phase,
.ms-ps[data-breath="broken"]:not(.is-pacing) .ms-ps__phase { color: var(--gx-warn); }
.ms-ps__count {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gx-text-strong);
}
.ms-ps__count:empty { display: none; }

.ms-ps__breathstate {
  max-width: 34ch;
  min-height: 3.2em;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gx-text);
}
.ms-ps__breathstate strong { color: var(--gx-text-strong); }
.ms-ps[data-breath="hold"] .ms-ps__breathstate strong { color: var(--gx-warn); }

.ms-ps__rhythm { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; max-width: 300px; }
.ms-ps__rhythmbar {
  position: relative;
  display: flex;
  height: 30px;
  border-radius: 2px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ms-ps__rin, .ms-ps__rex {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.ms-ps__rin { flex: var(--in) 1 0; background: rgba(0, 202, 164, 0.34); color: var(--gx-accent); }
.ms-ps__rex { flex: var(--ex) 1 0; background: var(--gx-white); color: var(--gx-text); border: 1px solid var(--gx-line); border-left: 0; }
.ms-ps__sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--gx-ink);
  opacity: 0;
}
.ms-ps.is-pacing .ms-ps__sweep { opacity: 1; animation: ms-ps-sweep 10s linear infinite; }
@keyframes ms-ps-sweep { from { left: 0; } to { left: calc(100% - 2px); } }

.ms-ps__pace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--gx-radius);
  background: var(--gx-accent);
  color: var(--gx-white);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.ms-ps__pace:hover { background: var(--gx-ink); }
.ms-ps__pace[aria-pressed="true"] { background: var(--gx-ink); }
.ms-ps__pace:disabled { background: rgba(13, 42, 60, 0.3); cursor: not-allowed; }
.ms-ps__paceicon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}
.ms-ps__pace[aria-pressed="true"] .ms-ps__paceicon {
  width: 10px;
  height: 10px;
  border: 0;
  background: currentColor;
}
.ms-ps__pacehint,
.ms-ps__reduced {
  max-width: 36ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gx-muted);
}

/* Без JS и при «уменьшить движение» — вместо пейсера текстовая инструкция */
.ms-ps:not(.is-ready) .ms-ps__pace { display: none; }
.ms-ps.is-ready .ms-ps__reduced { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ms-ps .ms-ps__pace, .ms-ps .ms-ps__pacehint, .ms-ps .ms-ps__sweep { display: none !important; }
  .ms-ps.is-ready .ms-ps__reduced { display: block; }
  .ms-ps[data-breath="even"] .ms-ps__orb,
  .ms-ps[data-breath="broken"] .ms-ps__orb { transform: scale(0.81); }
}

/* Плавные переходы — только после первой отрисовки (is-live), чтобы стартовое
   состояние не «доигрывалось» на глазах. Шаблон (main.css) вешает
   «transition: 0.3s» на ВСЕ свойства span/p/li/button/svg — внутри блока снимаем,
   иначе значок кнопки и отметки признаков тянутся по 300 мс за каждым шагом. */
.ms-ps :is(span, p, li, button, svg, h3, input) { transition: none; }
.ms-ps.is-live .ms-ps__pace { transition: background-color 200ms var(--gx-ease); }
.ms-ps.is-live .ms-ps__tick,
.ms-ps.is-live .ms-ps__zonebtn { transition: background-color 200ms var(--gx-ease), color 200ms var(--gx-ease), border-color 200ms var(--gx-ease); }
.ms-ps.is-live .ms-ps__mark path { transition: opacity 200ms var(--gx-ease); }
.ms-ps.is-live .ms-ps__mark-ring { transition: fill 200ms var(--gx-ease), stroke 200ms var(--gx-ease); }
.ms-ps.is-live .ms-ps__signstate { transition: background-color 200ms var(--gx-ease), color 200ms var(--gx-ease); }

.ms-ps .ms-gx__note { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--gx-line); }

/* ---------- компактный и встроенный варианты ---------- */
.ms-ps--compact .ms-ps__facts { margin-bottom: 20px; }
.ms-gfx-inline .ms-ps__body,
.ms-ps--compact .ms-ps__body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ms-gfx-inline .ms-ps__breath { display: grid; grid-template-columns: 200px minmax(0, 1fr); text-align: left; align-items: center; gap: 12px 24px; }
.ms-gfx-inline .ms-ps__breath > * { grid-column: 2; }
.ms-gfx-inline .ms-ps__breath > .ms-ps__stage { grid-column: 1; grid-row: 1 / span 6; }
.ms-gfx-inline .ms-ps__breath > .ms-ps__pace { justify-self: start; }

/* ---------- планшет ---------- */
@media (max-width: 991px) {
  .ms-ps__body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ms-ps__breath { display: grid; grid-template-columns: 200px minmax(0, 1fr); text-align: left; align-items: center; gap: 12px 28px; }
  .ms-ps__breath > * { grid-column: 2; }
  .ms-ps__breath > .ms-ps__stage { grid-column: 1; grid-row: 1 / span 6; }
  .ms-ps__breath > .ms-ps__pace { justify-self: start; }
  .ms-ps__zonebtn { padding: 8px 6px 6px; }
  .ms-ps__zoneshort { font-size: 13px; }
}

/* ---------- телефон ---------- */
@media (max-width: 575px) {
  .ms-ps__ends { flex-direction: column; gap: 2px; font-size: 12px; }
  .ms-ps__ends > span + span::before { display: none; }
  .ms-ps__tick { min-width: 22px; height: 24px; padding: 0 3px; font-size: 12px; }
  .ms-ps__ticks { height: 24px; }
  .ms-ps__range { top: 28px; }
  /* в узкой колонке «8» шириной ~26 px: оставляем диапазоны, названия — для чтения с экрана */
  .ms-ps__zonebtn { align-items: center; padding: 8px 0 4px; text-align: center; }
  .ms-ps__zoneshort {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ms-ps__zonerange { font-size: 11px; letter-spacing: 0; }
  .ms-ps__now { gap: 16px; }
  .ms-ps__num { font-size: 52px; }
  .ms-ps__zonename { font-size: 20px; }
  .ms-ps__facts { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ms-ps__breath,
  .ms-gfx-inline .ms-ps__breath { display: flex; text-align: center; padding: 20px 16px; }
  .ms-ps__stage { width: 176px; height: 176px; }
  .ms-ps__orb { left: 7px; top: 7px; width: 162px; height: 162px; }
  .ms-ps__signstate { padding: 3px 8px; }
}
.ms-ps__nb { white-space: nowrap; }

/* referralMap.css */
/* referralMap — карта отражённой боли: два силуэта, точки-кнопки, панель */
.ms-rm { container-type: inline-size; }

.ms-rm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

/* ---------- силуэты ---------- */
.ms-rm__stage { min-width: 0; }
.ms-rm__figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
}
.ms-rm__fig { margin: 0; min-width: 0; }
.ms-rm__canvas {
  position: relative;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
}
.ms-rm__svg { width: 100%; }
.ms-rm__body { fill: var(--gx-light); }
.ms-rm__edge { fill: none; stroke: var(--gx-line-strong); stroke-width: 1.25; stroke-linejoin: round; }
.ms-rm__hints path { fill: none; stroke: var(--gx-line); stroke-width: 1; stroke-linecap: round; }
/* ссылки на определения внутри SVG (id задаёт рендерер) */
.ms-rm__fig[data-view="front"] .ms-rm__clip { clip-path: url(#rm-clip-front); }
.ms-rm__fig[data-view="back"] .ms-rm__clip { clip-path: url(#rm-clip-back); }
.ms-rm__fig[data-view="front"] .ms-rm__core,
.ms-rm__fig[data-view="front"] .ms-rm__tint { filter: url(#rm-soft-front); }
.ms-rm__fig[data-view="back"] .ms-rm__core,
.ms-rm__fig[data-view="back"] .ms-rm__tint { filter: url(#rm-soft-back); }
.ms-rm__fig[data-view="front"] .ms-rm__spill { fill: url(#rm-dots-front); stroke: url(#rm-dots-front); }
.ms-rm__fig[data-view="back"] .ms-rm__spill { fill: url(#rm-dots-back); stroke: url(#rm-dots-back); }
.ms-rm__core { fill: var(--gx-muscle); stroke: var(--gx-muscle); opacity: 0.55; }
.ms-rm__core ellipse { stroke: none; }
.ms-rm__band { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ms-rm__spill ellipse { stroke: none; }
.ms-rm__tint { fill: var(--gx-muscle); stroke: var(--gx-muscle); opacity: 0.16; }
.ms-rm__tint ellipse { stroke: none; }
.ms-rm__dot { fill: var(--gx-muscle); }
.ms-rm__zone {
  opacity: 0;
  transition: opacity 450ms var(--gx-ease);
}
.ms-rm__zone.is-on { opacity: 1; }

.ms-rm__figcap {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}

/* точка на силуэте */
.ms-rm__pt {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  padding: 0;
  border: 1.5px solid var(--gx-accent);
  border-radius: 50%;
  background: var(--gx-white);
  color: var(--gx-accent);
  font: 600 11px/1 var(--gx-font);
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 200ms var(--gx-ease), border-color 200ms var(--gx-ease), color 200ms var(--gx-ease), box-shadow 200ms var(--gx-ease);
}
.ms-rm__pt::before {             /* палец попадает с запасом */
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}
.ms-rm__pt:hover { border-color: var(--gx-muscle-deep); color: var(--gx-muscle-deep); }
.ms-rm__pt.is-active {
  background: var(--gx-muscle-deep);
  border-color: var(--gx-white);
  color: var(--gx-white);
  box-shadow: 0 0 0 1.5px var(--gx-muscle-deep), 0 0 0 6px rgba(158, 63, 55, 0.16);
  z-index: 2;
}

/* легенда */
.ms-rm__legend {
  list-style: none;
  margin: 20px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--gx-muted);
}
.ms-rm__legend li { display: flex; align-items: center; gap: 8px; }
.ms-rm__key { flex: none; display: inline-block; }
.ms-rm__key--pt {
  width: 20px; height: 20px;
  border: 1.5px solid var(--gx-accent);
  border-radius: 50%;
  font: 600 11px/17px var(--gx-font);
  text-align: center;
  color: var(--gx-accent);
}
.ms-rm__key--core {
  width: 22px; height: 12px;
  border-radius: 6px;
  background: rgba(196, 87, 75, 0.5);
  box-shadow: 0 0 4px 1px rgba(196, 87, 75, 0.35);
}
.ms-rm__key--spill {
  width: 22px; height: 12px;
  border-radius: 6px;
  background-image: radial-gradient(circle, var(--gx-muscle) 0.9px, transparent 1.2px);
  background-size: 3.5px 3.5px;
  outline: 1px solid rgba(196, 87, 75, 0.25);
}

/* переключатель вида — только когда виден один силуэт */
.ms-rm__views { display: none; }

/* ---------- правая колонка ---------- */
.ms-rm__side { min-width: 0; }
.ms-rm__label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.ms-rm__chips {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.ms-rm__chips li { display: block; margin: 0; min-width: 0; }
.ms-rm__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  background: var(--gx-white);
  color: var(--gx-text-strong);
  font: 500 14px/1.25 var(--gx-font);
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms var(--gx-ease), background-color 200ms var(--gx-ease);
}
.ms-rm__chip:hover { border-color: var(--gx-line-strong); background: var(--gx-light); }
.ms-rm__chip.is-active {
  border-color: var(--gx-muscle-deep);
  background: rgba(196, 87, 75, 0.06);
}
.ms-rm__chipname { min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

.ms-rm__num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--gx-accent);
  border-radius: 50%;
  font: 600 11px/1 var(--gx-font);
  font-variant-numeric: tabular-nums;
  color: var(--gx-accent);
}
.ms-rm__chip.is-active .ms-rm__num,
.ms-rm__panel .ms-rm__num {
  background: var(--gx-muscle-deep);
  border-color: var(--gx-muscle-deep);
  color: var(--gx-white);
}

/* панель */
.ms-rm__panels { min-width: 0; }
.ms-rm__panel {
  padding: 24px 0 0;
  border-top: 2px solid var(--gx-ink);
}
.ms-rm__panel + .ms-rm__panel { margin-top: 32px; }
.ms-rm.is-js .ms-rm__panel + .ms-rm__panel { margin-top: 0; }
.ms-rm__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.ms-rm__name {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  color: var(--gx-text-strong);
}
.ms-rm__latin {
  margin: 4px 0 20px;
  font-size: 14px;
  font-style: italic;
  color: var(--gx-muted);
}
.ms-rm__facts { margin: 0; }
.ms-rm__row {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 4px 20px;
  padding: 12px 0;
  border-top: 1px solid var(--gx-line);
}
.ms-rm__row dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gx-muted);
  padding-top: 2px;
}
.ms-rm__row dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gx-text);
}
.ms-rm__row--refers dd {
  color: var(--gx-text-strong);
  font-weight: 500;
}
.ms-rm__row--refers dt::before {        /* та же заливка, что и на силуэте */
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: -1px;
  background: rgba(196, 87, 75, 0.55);
  box-shadow: 0 0 3px 1px rgba(196, 87, 75, 0.3);
}
.ms-rm__seen {
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--gx-line);
  font-size: 13px;
  color: var(--gx-muted);
}
.ms-rm__seen span { font-weight: 600; }
.ms-rm__aside {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-left: 2px solid var(--gx-warn);
  background: var(--gx-warn-soft);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gx-text-strong);
}

/* общая оговорка */
.ms-rm__caveat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 32px 0 0;
  padding: 14px 18px;
  border: 1px solid rgba(179, 84, 30, 0.28);
  border-radius: var(--gx-radius);
  background: var(--gx-white);
  font-size: 15px;
  line-height: 1.5;
  color: var(--gx-text-strong);
}
.ms-rm__caveat i { flex: none; font-size: 20px; line-height: 1.1; color: var(--gx-warn); }
.ms-rm__caveat strong { color: var(--gx-warn); }

/* ---------- раскладки по ширине самой карточки ---------- */
/* широкая: силуэты слева, панель справа */
@container (min-width: 760px) {
  .ms-rm__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .ms-rm__figs { max-width: none; gap: 12px; }
}
@container (min-width: 1000px) {
  .ms-rm__grid { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 64px; }
}
/* компактная в статье: силуэты поменьше */
@container (min-width: 600px) {
  .ms-rm--compact .ms-rm__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  .ms-rm--compact .ms-rm__row { grid-template-columns: minmax(0, 1fr); }
  /* правая колонка ~300 px: в две колонки «Трапециевидная,» и «Камбаловидная» вылезали за рамку */
  .ms-rm--compact .ms-rm__chips { grid-template-columns: minmax(0, 1fr); }
  .ms-rm--compact .ms-rm__legend { flex-direction: column; align-items: flex-start; gap: 6px; padding-left: 8px; }
}
.ms-rm--compact .ms-rm__name { font-size: 20px; }
.ms-rm--compact .ms-rm__chips { margin-bottom: 20px; }

/* узкая: один силуэт и переключатель «спереди/сзади» (только с JS) */
@container (max-width: 479px) {
  .ms-rm__row { grid-template-columns: minmax(0, 1fr); }
  .ms-rm__chips { grid-template-columns: minmax(0, 1fr); }
  .ms-rm.is-js .ms-rm__views {
    display: flex;
    gap: 0;
    margin: 0 auto 16px;
    width: max-content;
    border: 1px solid var(--gx-line-strong);
    border-radius: var(--gx-radius);
  }
  .ms-rm.is-js .ms-rm__figs { grid-template-columns: minmax(0, 1fr); }
  .ms-rm.is-js .ms-rm__canvas { max-width: 230px; }
  .ms-rm.is-js[data-view="front"] .ms-rm__fig[data-view="back"],
  .ms-rm.is-js[data-view="back"] .ms-rm__fig[data-view="front"] { display: none; }
  .ms-rm.is-js .ms-rm__figcap { display: none; }
  .ms-rm__legend { justify-content: flex-start; }
}
.ms-rm__view {
  position: relative;
  min-width: 112px;
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  background: var(--gx-white);
  color: var(--gx-text-strong);
  font: 500 14px/1 var(--gx-font);
  cursor: pointer;
}
.ms-rm__view + .ms-rm__view { border-left: 1px solid var(--gx-line-strong); }
.ms-rm__view[aria-pressed="true"] { background: var(--gx-ink); color: var(--gx-white); }
/* метка: на этом виде есть зона выбранной точки */
.ms-rm__view.has-zone::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gx-muscle);
}

@media print {
  .ms-gx .ms-rm__pt { display: grid !important; }
}

/* roomPlan.css */
/*============================================================================
  roomPlan — «Сколько места нужно»: план комнаты сверху.
  Разметка: build/render/sections/roomPlan.js. Поведение: assets/js/gfx/roomPlan.js.
  Единица viewBox = 1 см; размеры шрифтов внутри SVG — в единицах чертежа.
============================================================================*/

.ms-rp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.ms-rp--inline .ms-rp__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }

.ms-rp__stage { min-width: 0; }

/* ---------- переключатель планов ---------- */
.ms-rp__tabs {
  display: inline-flex;
  margin: 0 0 20px;
  padding: 3px;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  background: var(--gx-light);
  max-width: 100%;
}
.ms-rp__tab {
  appearance: none;
  margin: 0;
  border: 0;
  border-radius: var(--gx-radius);
  background: transparent;
  padding: 9px 18px;
  font: 600 14px/1.2 var(--gx-font);
  letter-spacing: 0.01em;
  color: var(--gx-text);
  cursor: pointer;
  transition: background-color 200ms var(--gx-ease), color 200ms var(--gx-ease);
}
.ms-rp__tab:hover { color: var(--gx-text-strong); }
.ms-rp__tab[aria-pressed="true"] {
  background: var(--gx-accent);
  color: var(--gx-white);
}

/* ---------- план ---------- */
.ms-rp__plan { margin: 0; }
.ms-rp__plan[hidden] { display: none !important; }
.ms-rp__svg { width: 100%; }
.ms-rp__cap {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--gx-line);
  font-size: 14px;
  line-height: 1.55;
  color: var(--gx-muted);
}

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

/* чертёж */
.ms-rp .rp-wall { fill: var(--gx-ink); }
.ms-rp .rp-open { fill: var(--gx-white); }
.ms-rp .rp-win { fill: var(--gx-white); stroke: var(--gx-ink); stroke-width: 1; }
.ms-rp .rp-win__glass { stroke: var(--gx-ink); stroke-width: 1.5; }

.ms-rp .rp-furn rect,
.ms-rp .rp-furn circle { fill: var(--gx-light); stroke: var(--gx-line-strong); stroke-width: 1; }
.ms-rp .rp-furn line { stroke: var(--gx-line-strong); stroke-width: 1; }
.ms-rp .rp-furn .rp-furn__dark { fill: var(--gx-line-strong); stroke: none; }
.ms-rp .rp-furn__rod { stroke-dasharray: 3 3; }
.ms-rp .rp-rug rect { fill: none; stroke: var(--gx-line); stroke-width: 1; }
.ms-rp .rp-rug .rp-rug__in { stroke-dasharray: 2 3; }
.ms-rp .rp-rug__fringe { fill: none; stroke: var(--gx-line); stroke-width: 1; }
.ms-rp .rp-flabel {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--gx-muted);
}

.ms-rp .rp-door__leaf { stroke: var(--gx-ink); stroke-width: 2.5; stroke-linecap: square; }
.ms-rp .rp-door__swing { fill: none; stroke: var(--gx-line-strong); stroke-width: 1; stroke-dasharray: 3 3; }

.ms-rp .rp-zone {
  fill: rgba(0, 202, 164, 0.07);
  stroke: var(--gx-mint);
  stroke-width: 1.75;
  stroke-dasharray: 8 5;
}
.ms-rp .rp-zone__t {
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--gx-accent);
  font-variant-numeric: tabular-nums;
}

.ms-rp .rp-table { fill: var(--gx-accent); }
.ms-rp .rp-table__pad { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.ms-rp .rp-table__face { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.25; }
.ms-rp .rp-table__t {
  font-size: 13px;
  font-weight: 600;
  fill: var(--gx-white);
  font-variant-numeric: tabular-nums;
}

.ms-rp .rp-dim line { stroke: var(--gx-accent); stroke-width: 1.25; }
.ms-rp .rp-dim__t {
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--gx-accent);
  font-variant-numeric: tabular-nums;
}
.ms-rp .rp-rdim line { stroke: var(--gx-line-strong); stroke-width: 1; }
.ms-rp .rp-rdim__t {
  font-size: 12px;
  font-weight: 500;
  fill: var(--gx-muted);
  font-variant-numeric: tabular-nums;
}

/* белый ореол вместо подложки — подпись читается поверх линий при любом размере шрифта */
.ms-rp .rp-halo {
  paint-order: stroke;
  stroke: var(--gx-white);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.ms-rp .rp-cable {
  fill: none;
  stroke: var(--gx-accent);
  stroke-width: 1.5;
  stroke-dasharray: 1 4;
  stroke-linecap: round;
}
.ms-rp .rp-cable__t { font-size: 11.5px; font-weight: 600; fill: var(--gx-accent); font-variant-numeric: tabular-nums; }
.ms-rp .rp-outlet { fill: var(--gx-white); stroke: var(--gx-accent); stroke-width: 1.5; }
.ms-rp .rp-outlet__pin { fill: var(--gx-accent); }

.ms-rp .rp-bag { fill: var(--gx-fascia); stroke: var(--gx-accent); stroke-width: 1.5; }
.ms-rp .rp-bag__handle { fill: none; stroke: var(--gx-accent); stroke-width: 1.5; stroke-linecap: round; }
.ms-rp .rp-cover { fill: var(--gx-fascia); stroke: var(--gx-accent); stroke-width: 1.25; }

.ms-rp .rp-draught path {
  fill: none;
  stroke: var(--gx-warn);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ms-rp .rp-close {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--gx-warn);
}

.ms-rp .rp-mark circle { fill: var(--gx-accent); stroke: var(--gx-white); stroke-width: 2.5; transition: fill 200ms var(--gx-ease); }
.ms-rp .rp-mark text { font-size: 12px; font-weight: 700; fill: var(--gx-white); transition: fill 200ms var(--gx-ease); }

.ms-rp .rp-scale rect { stroke: var(--gx-ink); stroke-width: 1; }
.ms-rp .rp-scale__a { fill: var(--gx-ink); }
.ms-rp .rp-scale__b { fill: var(--gx-white); }
.ms-rp .rp-scale line { stroke: var(--gx-ink); stroke-width: 1; }
.ms-rp .rp-scale__t { font-size: 11.5px; font-weight: 600; fill: var(--gx-text-strong); font-variant-numeric: tabular-nums; }

/* ---------- подсветка: пункт легенды ↔ элемент плана ---------- */
.ms-rp .rp-k,
.ms-rp .rp-base { transition: opacity 220ms var(--gx-ease); }
.ms-rp.is-js .rp-k { cursor: pointer; }
.ms-rp[data-on] .rp-k { opacity: 0.22; }
.ms-rp[data-on] .rp-base { opacity: 0.5; }
.ms-rp[data-on="1"] .rp-k[data-k="1"],
.ms-rp[data-on="2"] .rp-k[data-k="2"],
.ms-rp[data-on="3"] .rp-k[data-k="3"],
.ms-rp[data-on="4"] .rp-k[data-k="4"],
.ms-rp[data-on="5"] .rp-k[data-k="5"],
.ms-rp[data-on="6"] .rp-k[data-k="6"] { opacity: 1; }
.ms-rp[data-on="1"] .rp-mark[data-k="1"] circle,
.ms-rp[data-on="2"] .rp-mark[data-k="2"] circle,
.ms-rp[data-on="3"] .rp-mark[data-k="3"] circle,
.ms-rp[data-on="4"] .rp-mark[data-k="4"] circle,
.ms-rp[data-on="5"] .rp-mark[data-k="5"] circle,
.ms-rp[data-on="6"] .rp-mark[data-k="6"] circle { fill: var(--gx-mint); }
.ms-rp[data-on="1"] .rp-mark[data-k="1"] text,
.ms-rp[data-on="2"] .rp-mark[data-k="2"] text,
.ms-rp[data-on="3"] .rp-mark[data-k="3"] text,
.ms-rp[data-on="4"] .rp-mark[data-k="4"] text,
.ms-rp[data-on="5"] .rp-mark[data-k="5"] text,
.ms-rp[data-on="6"] .rp-mark[data-k="6"] text { fill: var(--gx-ink); }
.ms-rp[data-on="1"] .rp-zone { fill: rgba(0, 202, 164, 0.16); stroke-width: 2.5; }

/* ---------- легенда ---------- */
.ms-rp__side { min-width: 0; }
.ms-rp__ltitle {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.ms-rp__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--gx-line);
}
.ms-rp__li {
  display: block;            /* li в шаблоне — flex */
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--gx-line);
}
.ms-rp__li::before { content: none; }
.ms-rp__item {
  appearance: none;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 14px 12px 14px 10px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: default;
  transition: background-color 200ms var(--gx-ease), border-color 200ms var(--gx-ease);
}
.ms-rp.is-js .ms-rp__item { cursor: pointer; }
.ms-rp__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--gx-accent);
  color: var(--gx-white);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color 200ms var(--gx-ease), color 200ms var(--gx-ease);
}
.ms-rp__txt { display: block; min-width: 0; }
.ms-rp__name {
  display: block;
  margin-bottom: 3px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gx-text-strong);
  font-variant-numeric: tabular-nums;
}
.ms-rp__desc {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gx-text);
}

.ms-rp[data-on="1"] .ms-rp__item[data-k="1"],
.ms-rp[data-on="2"] .ms-rp__item[data-k="2"],
.ms-rp[data-on="3"] .ms-rp__item[data-k="3"],
.ms-rp[data-on="4"] .ms-rp__item[data-k="4"],
.ms-rp[data-on="5"] .ms-rp__item[data-k="5"],
.ms-rp[data-on="6"] .ms-rp__item[data-k="6"] {
  background: var(--gx-mint-soft);
  border-left-color: var(--gx-mint);
}
.ms-rp[data-on="1"] .ms-rp__item[data-k="1"] .ms-rp__num,
.ms-rp[data-on="2"] .ms-rp__item[data-k="2"] .ms-rp__num,
.ms-rp[data-on="3"] .ms-rp__item[data-k="3"] .ms-rp__num,
.ms-rp[data-on="4"] .ms-rp__item[data-k="4"] .ms-rp__num,
.ms-rp[data-on="5"] .ms-rp__item[data-k="5"] .ms-rp__num,
.ms-rp[data-on="6"] .ms-rp__item[data-k="6"] .ms-rp__num {
  background: var(--gx-mint);
  color: var(--gx-ink);
}
.ms-rp__item[aria-pressed="true"] .ms-rp__name { text-decoration: underline; text-decoration-color: var(--gx-mint); text-underline-offset: 3px; }

.ms-rp__hint {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gx-muted);
}
.ms-rp__hint[hidden] { display: none !important; }

/* ---------- раскладки ---------- */
@media (max-width: 1199px) {
  .ms-rp__grid { gap: 32px; }
}

@media (max-width: 991px) {
  .ms-rp__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* телефон: чертёж ~320 px — подписи крупнее в единицах чертежа, второстепенные убираем
   (их смысл есть в подписи под планом и в легенде) */
@media (max-width: 575px) {
  .ms-rp__tabs { display: flex; width: 100%; }
  .ms-rp__tab { flex: 1 1 0; padding: 10px 8px; font-size: 13.5px; }
  .ms-rp .rp-minor { display: none; }
  .ms-rp .rp-dim__t,
  .ms-rp .rp-zone__t { font-size: 22px; }
  .ms-rp .rp-table__t { font-size: 22px; }
  .ms-rp .rp-close { font-size: 22px; }
  .ms-rp .rp-scale__t { font-size: 22px; }
  /* чертёж на телефоне сжат примерно вдвое: 22 единицы ≈ 11 px на экране */
  .ms-rp .rp-mark text { font-size: 15px; }
  .ms-rp .rp-halo { stroke-width: 6px; }
  .ms-rp .rp-mark { transform-box: fill-box; transform-origin: center; transform: scale(1.45); }
  .ms-rp .rp-dim line,
  .ms-rp .rp-draught path,
  .ms-rp .rp-cable { stroke-width: 2.25; }
  .ms-rp .rp-zone { stroke-width: 2.5; }
  .ms-rp__item { padding: 12px 8px 12px 6px; gap: 12px; }
  .ms-rp__name { font-size: 15px; }
}

@media print {
  .ms-rp__tabs, .ms-rp__hint { display: none !important; }
  .ms-rp__plan[hidden] { display: block !important; }
}

/* дополнения */
.ms-rp .rp-grid { fill: none; stroke: rgba(13, 42, 60, 0.055); stroke-width: 1; }
.ms-rp .rp-bag__zip { fill: none; stroke: var(--gx-accent); stroke-width: 1; stroke-dasharray: 2 2; }

/* sessionTimeline.css */
/*============================================================================
  sessionTimeline — «Сеанс 90 минут по минутам».
  Разметка: build/render/sections/sessionTimeline.js. Всё под .ms-st.

  Глубина этапа (data-depth 0..4) → цвет от светлого к --gx-accent.
  Контраст подписей на сегменте (посчитан):
    0 #EEF4F4 / ink 13.4   1 #C4D5D8 / ink 9.9   2 #8FA9AF / ink 6.1
    3 #49737D / white 5.2  4 #023B4A / white 12.2
============================================================================*/

/* Блок продолжает секцию steps прямо над ним — второй верхний отступ не нужен */
#gfx-sessionTimeline.section-space { padding-top: 0; }

.ms-st [data-depth="0"] { --st-c: #EEF4F4; --st-t: var(--gx-ink); --st-edge: var(--gx-line-strong); }
.ms-st [data-depth="1"] { --st-c: #C4D5D8; --st-t: var(--gx-ink); --st-edge: transparent; }
.ms-st [data-depth="2"] { --st-c: #8FA9AF; --st-t: var(--gx-ink); --st-edge: transparent; }
.ms-st [data-depth="3"] { --st-c: #49737D; --st-t: #FFFFFF; --st-edge: transparent; }
.ms-st [data-depth="4"] { --st-c: #023B4A; --st-t: #FFFFFF; --st-edge: transparent; }

/* ——— шапка карточки ——— */
.ms-st__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: 28px;
}
.ms-st__intro { flex: 1 1 520px; min-width: 0; }
.ms-st__intro .ms-gx__lead { margin-bottom: 0; }

.ms-st__legend { flex: 0 1 auto; padding-bottom: 4px; }
.ms-st__legend-title {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.ms-st__legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ms-st__legend-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--gx-text);
}
.ms-st__chip {
  flex: 0 0 auto;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--gx-radius);
  background: var(--st-c);
  box-shadow: inset 0 0 0 1px var(--st-edge);
}

/* ——— шкала этапов ——— */
.ms-st__chart { position: relative; }
.ms-st__track {
  position: relative;
  height: 96px;
}
.ms-st__seg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: calc(var(--w) - 3px);
  margin: 0;
  padding: 11px 9px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 0;
  border-radius: var(--gx-radius);
  background: var(--st-c);
  box-shadow: inset 0 0 0 1px var(--st-edge);
  color: var(--st-t);
  font-family: var(--gx-font);
  text-align: left;
  cursor: pointer;
  container-type: inline-size;
  transition: transform 240ms var(--gx-ease), box-shadow 240ms var(--gx-ease);
}
.ms-st__seg:hover { transform: translateY(-3px); }
.ms-st__seg.is-active {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--st-edge), 0 0 0 2px var(--gx-white), 0 0 0 4px var(--gx-mint);
}
.ms-st__seg:focus-visible { outline-offset: 4px; }

.ms-st__num {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ms-st__short {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: normal;
}
.ms-st__min {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* полное имя и глубина — для чтения с экрана на десктопе, видимы в мобильном списке */
.ms-st__full,
.ms-st__depth {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* узкий сегмент: сначала прячем имя, потом минуты — номер остаётся всегда */
@container (max-width: 64px) {
  .ms-st__short { display: none; }
  .ms-st__min { margin-top: auto; }
}
@container (max-width: 40px) {
  .ms-st__min { display: none; }
}

/* ——— ось минут ——— */
.ms-st__axis {
  position: relative;
  height: 30px;
  margin-top: 8px;
  border-top: 1px solid var(--gx-line-strong);
}
.ms-st__tick {
  position: absolute;
  top: -1px;
  left: var(--x);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--gx-muted);
  font-variant-numeric: tabular-nums;
}
.ms-st__tick::before {
  content: "";
  width: 1px;
  height: 7px;
  margin-bottom: 6px;
  background: var(--gx-line-strong);
}
.ms-st__tick:first-of-type { transform: none; align-items: flex-start; }
.ms-st__tick:last-of-type { transform: translateX(-100%); align-items: flex-end; }
.ms-st__flex {
  position: absolute;
  top: -2px;
  left: var(--x);
  width: var(--w);
  height: 3px;
  border-radius: 2px;
  background: var(--gx-mint);
}
.ms-st__axis-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.ms-st__flex-key { display: inline-flex; align-items: center; gap: 8px; }
.ms-st__flex-swatch {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--gx-mint);
}

/* ——— кривая давления ——— */
.ms-st__curve { margin-top: 22px; }
.ms-st__curve-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.ms-st__curve-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-text-strong);
}
.ms-st__curve-note {
  font-size: 13px;
  font-style: italic;
  color: var(--gx-muted);
}
.ms-st__plot { padding-top: 30px; }
.ms-st__plot-in { position: relative; height: 150px; }
.ms-st .ms-st__plot-in svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ms-st__band { fill: rgba(2, 59, 74, 0.05); transition: x 240ms var(--gx-ease), width 240ms var(--gx-ease); }
/* id градиента фиксированный и задаётся здесь, а не атрибутом: при двух блоках на странице
   оба берут одинаковый первый градиент, а url(#…) в разметке не путает tools/audit.js */
.ms-st__area { fill: url(#ms-st-fill); }
.ms-st__grid { stroke: var(--gx-line); stroke-width: 1; stroke-dasharray: 2 4; }
.ms-st__sep { stroke: var(--gx-line); stroke-width: 1; }
.ms-st__base { stroke: var(--gx-line-strong); stroke-width: 1; }
.ms-st__line { fill: none; stroke: #7FA2AA; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ms-st__line--on { stroke: var(--gx-accent); stroke-width: 2.5; opacity: 0; transition: opacity 200ms var(--gx-ease); }
.ms-st__line--on.is-on { opacity: 1; }

.ms-st__yl {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--gx-muted);
}
.ms-st__yl::before { content: "\2191\00a0"; }
.ms-st__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--gx-accent);
  box-shadow: 0 0 0 2px var(--gx-white);
}
.ms-st__peaks {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, calc(-100% - 12px));
  padding: 3px 8px;
  border-radius: var(--gx-radius);
  background: var(--gx-white);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--gx-accent);
  font-variant-numeric: tabular-nums;
}

/* ——— панель подробностей ——— */
.ms-st__panels {
  margin-top: 28px;
  border-top: 1px solid var(--gx-line);
}
.ms-st__panel {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 20px 40px;
  padding: 26px 0 4px;
}
.ms-st__panel + .ms-st__panel { border-top: 1px solid var(--gx-line); }
.ms-st__panel-head { display: flex; gap: 16px; align-items: flex-start; }
.ms-st__panel-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--st-c);
  box-shadow: inset 0 0 0 1px var(--st-edge);
  color: var(--st-t);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ms-st__panel-title {
  margin: 4px 0 8px;
  font-size: 20px;
  line-height: 1.25;
  color: var(--gx-text-strong);
}
.ms-st__panel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gx-text-strong);
  font-variant-numeric: tabular-nums;
}
.ms-st__panel-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.ms-st__panel-meta .ms-st__chip { width: 12px; height: 12px; }
.ms-st__k { color: var(--gx-muted); }
.ms-st__panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  margin: 0;
}
.ms-st__panel-body dt {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-accent);
}
.ms-st__panel-body dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gx-text);
}

/* С JS панели стоят в одной ячейке: высота = самой длинной, и при смене этапа
   ничего не прыгает. Без JS — обычный список всех шести этапов. */
.ms-st.is-js .ms-st__panels { display: grid; }
.ms-st.is-js .ms-st__panel {
  grid-area: 1 / 1;
  border-top: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms var(--gx-ease);
}
.ms-st.is-js .ms-st__panel.is-active { visibility: visible; opacity: 1; }

/* ——— компактный вариант ——— */
.ms-st--compact .ms-st__track { height: 80px; }
.ms-st--compact .ms-st__panel-body dd { font-size: 14px; }

/* ——— планшет ——— */
@media (max-width: 991px) {
  .ms-st__panel { grid-template-columns: 1fr; gap: 16px; }
}

/* ——— телефон: вертикальный список этапов с полосками длительности ——— */
@media (max-width: 767px) {
  .ms-st__head { margin-bottom: 20px; }
  .ms-st__track {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ms-st__seg {
    position: relative;
    left: auto;
    width: 100%;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px 10px;
    padding: 12px 14px 14px;
    background: var(--gx-white);
    box-shadow: inset 0 0 0 1px var(--gx-line);
    color: var(--gx-text-strong);
    container-type: normal;
  }
  .ms-st__seg:hover { transform: none; }
  .ms-st__seg.is-active {
    transform: none;
    box-shadow: inset 0 0 0 2px var(--gx-mint);
  }
  .ms-st__num { grid-column: 1; grid-row: 1; color: var(--gx-muted); }
  .ms-st__short { display: none; }
  .ms-st__full,
  .ms-st__depth {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .ms-st__full { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 600; line-height: 1.3; }
  .ms-st__min { grid-column: 3; grid-row: 1; display: block; margin: 0; font-size: 14px; color: var(--gx-text-strong); }
  .ms-st__depth { grid-column: 2 / -1; grid-row: 2; font-size: 13px; color: var(--gx-muted); }
  /* полоска: длина — доля от 90 минут, цвет — глубина */
  .ms-st__seg::after {
    content: "";
    grid-column: 2 / -1;
    grid-row: 3;
    width: var(--w);
    min-width: 6px;
    height: 8px;
    margin-top: 8px;
    border-radius: 2px;
    background: var(--st-c);
    box-shadow: inset 0 0 0 1px var(--st-edge);
  }
  .ms-st__axis,
  .ms-st__axis-foot,
  .ms-st__curve { display: none; }
  .ms-st__panels { margin-top: 20px; }
  .ms-st__panel { padding-top: 20px; }
  .ms-st__panel-body { grid-template-columns: 1fr; }
  .ms-st__panel-num { width: 44px; height: 44px; font-size: 16px; }
  .ms-st__panel-title { font-size: 18px; }
}

@media print {
  .ms-st .ms-st__seg { display: flex !important; }
  .ms-st.is-js .ms-st__panels { display: block; }
  .ms-st.is-js .ms-st__panel { visibility: visible; opacity: 1; }
}

.ms-st__caption { margin-top: 12px; }

/* Подписи сегмента подгоняет JS (длина слов зависит от языка): .is-tight — имя не влезло,
   .is-tiny — не влезли и минуты. Без JS срабатывают container-запросы выше и обрезка. */
.ms-st__short,
.ms-st__min { max-width: 100%; overflow: hidden; }
@media (min-width: 768px) {
  .ms-st__seg { overflow: hidden; }
  .ms-st__seg.is-tight .ms-st__short { display: none; }
  .ms-st__seg.is-tight .ms-st__min { margin-top: auto; }
  .ms-st__seg.is-tiny .ms-st__min { display: none; }
}
.ms-gfx-inline .ms-st__panel { grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) {
  .ms-st__seg.is-nounit .ms-st__unit { display: none; }
}

/* textNeck.css */
/*============================================================================
  textNeck — «Текстовая шея»: наклон головы и нагрузка по модели Hansraj.
  Разметка: build/render/sections/textNeck.js, поведение: assets/js/gfx/textNeck.js.

  Ползунок стоит под столбиками и защёлкивается на их центры: пять колонок
  по 20 %, бегунок (--tn-thumb) — значит input начинается с 10 % − бегунок/2
  и шириной 80 % + бегунок.
============================================================================*/
.ms-tn {
  --tn-thumb: 24px;
  --tn-bar-h: 190px;
  --tn-muscle-alpha: .9;
}
.ms-tn[data-angle="0"]  { --tn-muscle-alpha: .45; }
.ms-tn[data-angle="15"] { --tn-muscle-alpha: .6; }
.ms-tn[data-angle="30"] { --tn-muscle-alpha: .75; }
.ms-tn[data-angle="45"] { --tn-muscle-alpha: .9; }
.ms-tn[data-angle="60"] { --tn-muscle-alpha: 1; }

.ms-tn p { margin: 0; line-height: 1.5; }
.ms-tn ul, .ms-tn ol { margin: 0; padding: 0; list-style: none; }
.ms-tn li { margin: 0; }
.ms-tn .ms-gx__lead { margin-bottom: 24px; }

.ms-tn__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: start;
}

/* ---------- фигура ---------- */
.ms-tn__figure {
  margin: 0;
  padding: 12px 8px 14px;
  background: var(--gx-light);
  border-radius: var(--gx-radius);
}
.ms-tn__svg { width: 100%; max-width: 380px; margin: 0 auto; }
.ms-tn__svg * { transition: none; }

.ms-tn__skin, .ms-tn__neck { fill: var(--gx-skin); }
.ms-tn__outline { fill: none; stroke: rgba(13, 42, 60, 0.42); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ms-tn__ear { fill: none; stroke: rgba(13, 42, 60, 0.32); stroke-width: 1.25; }
.ms-tn__eye { fill: var(--gx-ink); }
.ms-tn__hair { fill: var(--gx-accent); opacity: .62; }
.ms-tn__muscle { opacity: var(--tn-muscle-alpha); }
.ms-tn__muscle--trap { fill: var(--gx-muscle-light); }
.ms-tn__muscle--ext { fill: var(--gx-muscle); }
.ms-tn__muscle--sub { fill: var(--gx-muscle-deep); }
.ms-tn__vert rect { fill: var(--gx-bone); stroke: var(--gx-bone-line); stroke-width: 1.25; }
.ms-tn__vert path { fill: none; stroke: var(--gx-bone-line); stroke-width: 3; stroke-linecap: round; }
.ms-tn__outline--soft { stroke: rgba(13, 42, 60, 0.22); }
.ms-tn__hand { fill: var(--gx-skin); stroke: rgba(13, 42, 60, 0.42); stroke-width: 1.5; }
.ms-tn__phone rect { fill: var(--gx-ink); }
.ms-tn__phone .ms-tn__screen { fill: #2E5266; }

.ms-tn__vertical { stroke: var(--gx-line-strong); stroke-width: 1.25; stroke-dasharray: 3 4; }
.ms-tn__axis { stroke: var(--gx-accent); stroke-width: 1.5; }
.ms-tn__arc { fill: none; stroke: var(--gx-mint); stroke-width: 2; stroke-linecap: round; }
.ms-tn__angletext {
  fill: var(--gx-accent);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ms-tn__drop { stroke: var(--gx-accent); stroke-width: 1.25; stroke-dasharray: 3 4; }
.ms-tn__arm { stroke: var(--gx-mint); stroke-width: 3; stroke-linecap: round; }
.ms-tn__armend line, .ms-tn__armstart { stroke: var(--gx-mint); stroke-width: 2; stroke-linecap: round; }
.ms-tn__weight line { stroke: var(--gx-accent); stroke-width: 2; }
.ms-tn__weight path { fill: var(--gx-accent); }
.ms-tn__com circle { fill: var(--gx-accent); stroke: var(--gx-white); stroke-width: 2; }
.ms-tn__pivot { fill: var(--gx-white); stroke: var(--gx-accent); stroke-width: 2; }

.ms-tn__leader { stroke: var(--gx-accent); stroke-width: 1.25; opacity: .7; }
.ms-tn__pin { fill: var(--gx-mint); stroke: var(--gx-white); stroke-width: 2; }
.ms-tn__mark circle { fill: var(--gx-white); stroke: var(--gx-accent); stroke-width: 1.5; }
.ms-tn__mark text { fill: var(--gx-accent); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

.ms-tn__legend {
  display: grid;
  gap: 6px;
  margin-top: 10px !important;
  padding: 0 8px !important;
}
.ms-tn__legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--gx-muted);
}
.ms-tn__icon { flex: 0 0 16px; }
.ms-tn__icom { fill: var(--gx-accent); }
.ms-tn__iline { stroke: var(--gx-accent); stroke-width: 2; fill: none; }
.ms-tn__ihead { fill: var(--gx-accent); }
.ms-tn__iarm { stroke: var(--gx-mint); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.ms-tn__ipivot { fill: var(--gx-white); stroke: var(--gx-accent); stroke-width: 2; }

/* ---------- показания ---------- */
.ms-tn__panel { padding-top: 4px; }
.ms-tn__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.ms-tn__value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 10px;
  margin-top: 4px !important;
  color: var(--gx-text-strong);
  font-variant-numeric: tabular-nums;
}
.ms-tn__num { font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.ms-tn[data-angle="0"] .ms-tn__num { font-size: 48px; }
.ms-tn__unit { font-size: 22px; font-weight: 500; }
.ms-tn__deg {
  align-self: center;
  margin-left: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gx-mint-soft);
  color: var(--gx-accent);
  font-size: 14px;
  font-weight: 600;
}
.ms-tn__state {
  min-height: 3em;
  margin-top: 10px !important;
  font-size: 15px;
  color: var(--gx-text);
}

.ms-tn__chart { margin-top: 18px; }
.ms-tn__bars {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.ms-tn__baritem { display: flex; }
.ms-tn__barbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--gx-muted);
  font: inherit;
  cursor: pointer;
}
.ms-tn__barval {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ms-tn__barcol {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: var(--tn-bar-h);
  border-bottom: 1px solid var(--gx-line-strong);
}
.ms-tn__bar {
  display: block;
  width: 62%;
  max-width: 40px;
  height: calc(var(--tn-bar-h) * var(--h));
  border-radius: 2px 2px 0 0;
  background: rgba(2, 59, 74, 0.16);
  transition: background-color 200ms var(--gx-ease);
}
.ms-tn__bar--range {
  background: linear-gradient(to top, rgba(2, 59, 74, 0.16) calc(100% * var(--lo) / var(--h)), transparent 0),
    repeating-linear-gradient(135deg, rgba(2, 59, 74, 0.2) 0 2px, rgba(2, 59, 74, 0.06) 2px 4px);
}
.ms-tn__barang {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ms-tn__barbtn:hover .ms-tn__bar { background-color: rgba(2, 59, 74, 0.28); }
.ms-tn__barbtn.is-active { color: var(--gx-text-strong); }
.ms-tn__barbtn.is-active .ms-tn__bar { background: var(--gx-accent); }
.ms-tn__barbtn.is-active .ms-tn__bar--range {
  background: linear-gradient(to top, var(--gx-accent) calc(100% * var(--lo) / var(--h)), transparent 0),
    repeating-linear-gradient(135deg, var(--gx-accent) 0 2px, rgba(2, 59, 74, 0.25) 2px 4px);
}
.ms-tn__barbtn.is-active .ms-tn__barang { font-weight: 700; color: var(--gx-accent); }
.ms-tn__barbtn:focus-visible { outline-offset: 0; }

/* ползунок — под столбиками, бегунок на центрах колонок */
.ms-tn__track { position: relative; height: 32px; margin-top: 6px; }
.ms-tn__track::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--gx-line-strong);
  border-radius: 1px;
}
.ms-tn__range {
  position: absolute;
  top: 0;
  left: calc(10% - var(--tn-thumb) / 2);
  width: calc(80% + var(--tn-thumb));
  height: 32px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.ms-tn__range::-webkit-slider-runnable-track { height: 32px; background: transparent; }
.ms-tn__range::-moz-range-track { height: 32px; background: transparent; }
.ms-tn__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--tn-thumb);
  height: var(--tn-thumb);
  margin-top: 4px;
  border: 2px solid var(--gx-accent);
  border-radius: 50%;
  background: var(--gx-white);
  box-shadow: 0 0 0 4px var(--gx-mint-soft);
}
.ms-tn__range::-moz-range-thumb {
  width: var(--tn-thumb);
  height: var(--tn-thumb);
  box-sizing: border-box;
  border: 2px solid var(--gx-accent);
  border-radius: 50%;
  background: var(--gx-white);
  box-shadow: 0 0 0 4px var(--gx-mint-soft);
}
.ms-tn__range:focus { outline: none; }
.ms-tn__range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--gx-mint); outline-offset: 2px; }
.ms-tn__range:focus-visible::-moz-range-thumb { outline: 2px solid var(--gx-mint); outline-offset: 2px; }
.ms-tn__label {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-accent);
}

/* ---------- мышцы ---------- */
.ms-tn__muscles {
  margin: 28px 0 24px;
  padding-top: 22px;
  border-top: 1px solid var(--gx-line);
}
.ms-tn__mtitle {
  margin-bottom: 14px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-accent);
}
.ms-tn__mlist { display: grid; gap: 16px; }
.ms-tn__muscleitem { display: flex; align-items: flex-start; gap: 12px; }
.ms-tn__muscleitem + .ms-tn__muscleitem { padding-top: 16px; border-top: 1px solid var(--gx-line); }
.ms-tn__badge {
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--gx-accent);
  border-radius: 50%;
  color: var(--gx-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.ms-tn__muscletext {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 24px;
  align-items: start;
  flex: 1 1 auto;
  min-width: 0;
}
.ms-tn__musclename { grid-column: 1; grid-row: 1; }
.ms-tn__latin { grid-column: 1; grid-row: 2; }
.ms-tn__muscledesc { grid-column: 2; grid-row: 1 / span 2; }
.ms-tn__musclename { font-size: 15px; font-weight: 600; color: var(--gx-text-strong); }
.ms-tn__latin { display: block; font-size: 13px; font-style: italic; color: var(--gx-muted); }
.ms-tn__muscledesc { display: block; margin-top: 1px; font-size: 14px; line-height: 1.55; color: var(--gx-text); }

/* ---------- узкие экраны ---------- */
@media (max-width: 767px) {
  .ms-tn__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ms-tn__muscletext { display: block; }
  .ms-tn__muscledesc { margin-top: 6px; }
  .ms-tn__num { font-size: 52px; }
  .ms-tn { --tn-bar-h: 150px; }
  .ms-tn__svg { max-width: 340px; }
}
@media (max-width: 420px) {
  .ms-tn { --tn-bar-h: 120px; }
  .ms-tn__barval { font-size: 12px; }
}

/* tissueLayers.css */
/*============================================================================
  tissueLayers — «Срез тканей: куда доходит давление».
  Разметка: build/render/sections/tissueLayers.js, поведение: assets/js/gfx/tissueLayers.js.
  Состояние режима — атрибут data-mode на .ms-tl и data-state на слоях, поэтому
  исходная разметка (deep tissue) уже в конечном виде и без JS.
============================================================================*/

/* ---------- переключатель техник ---------- */
.ms-tl__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 0 0 28px;
}
.ms-tl__bar-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.ms-tl__modes {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--gx-line-strong);
  border-radius: var(--gx-radius);
  background: var(--gx-white);
  overflow: hidden;
}
.ms-tl__mode {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--gx-line);
  border-radius: 0;
  background: transparent;
  padding: 11px 20px;
  font: 500 15px/1.2 var(--gx-font);
  color: var(--gx-text-strong);
  cursor: pointer;
  transition: background-color 200ms var(--gx-ease), color 200ms var(--gx-ease);
}
.ms-tl__mode:first-child { border-left: 0; }
.ms-tl__mode:hover { background: var(--gx-mint-soft); }
.ms-tl__mode[aria-pressed="true"] {
  background: var(--gx-accent);
  color: var(--gx-white);
}
.ms-tl__mode:focus-visible { outline-offset: -3px; }

/* ---------- схема + легенда ---------- */
.ms-tl__body {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.ms-tl__figure { margin: 0; min-width: 0; }
.ms-tl__figure .ms-gx__note { margin-top: 12px; }
.ms-tl__svgwrap { overflow: hidden; }
.ms-gx .ms-tl__svg { width: 100%; overflow: hidden; }

/* ткани — цвета с рендеров (_tokens.css) */
.ms-tl__skin { fill: var(--gx-skin); }
.ms-tl__epi { fill: none; stroke: var(--gx-muscle-light); stroke-width: 1.5; }
.ms-tl__fat { fill: var(--gx-fat); }
.ms-tl__lobule { fill: none; stroke: var(--gx-bone-line); stroke-width: 1; }
.ms-tl__sfascia { fill: var(--gx-fascia); stroke: var(--gx-bone-line); stroke-width: 0.75; }
.ms-tl__muscle { fill: var(--gx-muscle); }
.ms-tl__fiber {
  fill: none;
  stroke: var(--gx-muscle-light);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 58 5 34 4;
  opacity: 0.7;
}
.ms-tl__dfascia { fill: var(--gx-fascia); }
.ms-tl__collagen { fill: none; stroke: var(--gx-bone-line); stroke-width: 0.8; }
.ms-tl__muscle-deep { fill: var(--gx-muscle-deep); }
.ms-tl__bundle { fill: var(--gx-muscle); opacity: 0.62; }
.ms-tl__periost { fill: var(--gx-bone-line); }
.ms-tl__bone { fill: var(--gx-bone); }
.ms-tl__lamella, .ms-tl__osteon { fill: none; stroke: var(--gx-bone-line); stroke-width: 1; }
.ms-tl__edge { fill: none; stroke: var(--gx-line-strong); stroke-width: 1; }

/* узел триггерной точки — только в своём режиме */
.ms-tl__taut { fill: none; stroke: var(--gx-muscle-deep); stroke-width: 7; stroke-linecap: round; opacity: 0.5; }
.ms-tl__knot-core { fill: var(--gx-muscle-deep); stroke: var(--gx-muscle-light); stroke-width: 1.5; }
.ms-tl__knot { opacity: 0; transition: opacity 450ms var(--gx-ease); }
.ms-tl[data-mode="trigger"] .ms-tl__knot { opacity: 1; }

/* фокус режима: целевой слой ярко, «по пути» чуть тише, остальное приглушено */
.ms-tl__layer-g { transition: opacity 450ms var(--gx-ease); }
.ms-tl__layer-g[data-state="via"] { opacity: 0.86; }
.ms-tl__layer-g[data-state="rest"],
.ms-tl__layer-g[data-state="stop"] { opacity: 0.4; }

.ms-tl__hl {
  fill: none;
  stroke: var(--gx-accent);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* «луковица» давления — изобары под рукой */
.ms-tl__bulb path { fill: none; stroke: var(--gx-mint); stroke-width: 1.75; stroke-dasharray: 4 5; stroke-linecap: round; }
.ms-tl__bulb .ms-tl__bulb-0 { opacity: 0.75; }
.ms-tl__bulb .ms-tl__bulb-2 { stroke-dasharray: none; stroke-width: 1.5; fill: rgba(0, 202, 164, 0.08); }

/* граница «сюда давление не направляют» */
.ms-tl__stop line { stroke: var(--gx-warn); stroke-width: 1.5; stroke-dasharray: 6 5; }
.ms-tl__stop circle { fill: var(--gx-white); stroke: var(--gx-warn); stroke-width: 1.5; }
.ms-tl__stop path { stroke: var(--gx-warn); stroke-width: 1.5; stroke-linecap: round; }

/* рука массажиста */
.ms-tl__limb {
  fill: rgba(2, 59, 74, 0.07);
  stroke: var(--gx-accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.ms-tl__fore, .ms-tl__elbow, .ms-tl__ind { transition: opacity 400ms var(--gx-ease); }
.ms-tl__elbow { opacity: 0; }
.ms-tl[data-mode="trigger"] .ms-tl__fore { opacity: 0; }
.ms-tl[data-mode="trigger"] .ms-tl__elbow { opacity: 1; }
.ms-tl__ind { opacity: 0; fill: none; stroke: var(--gx-accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ms-tl[data-mode="classic"] .ms-tl__ind--glide,
.ms-tl[data-mode="deep"] .ms-tl__ind--slow,
.ms-tl[data-mode="mfr"] .ms-tl__ind--shift,
.ms-tl[data-mode="trigger"] .ms-tl__ind--hold { opacity: 1; }
.ms-tl__ind--hold circle { fill: var(--gx-white); stroke: var(--gx-line-strong); stroke-width: 1.5; }
.ms-tl__ind--hold .ms-tl__hold-arc { stroke: var(--gx-mint); stroke-width: 3; }

/* номера слоёв слева от среза */
.ms-tl__mark line { stroke: var(--gx-line-strong); stroke-width: 1; }
.ms-tl__mark-c { stroke: rgba(13, 42, 60, 0.35); stroke-width: 1.25; transition: stroke 300ms var(--gx-ease), stroke-width 300ms var(--gx-ease); }
.ms-tl__mark text {
  font-size: 14px;
  font-weight: 600;
  fill: var(--gx-ink);
  font-variant-numeric: tabular-nums;
}
.ms-tl__mark[data-layer="2"] text, .ms-tl__mark[data-layer="4"] text { fill: var(--gx-white); }
.ms-tl__mark[data-state="target"] .ms-tl__mark-c { stroke: var(--gx-accent); stroke-width: 3; }
.ms-tl__mark-c--0 { fill: var(--gx-skin); }
.ms-tl__mark-c--1 { fill: var(--gx-fat); }
.ms-tl__mark-c--2 { fill: var(--gx-muscle); }
.ms-tl__mark-c--3 { fill: var(--gx-fascia); }
.ms-tl__mark-c--4 { fill: var(--gx-muscle-deep); }
.ms-tl__mark-c--5 { fill: var(--gx-bone); }

/* ---------- легенда слоёв (HTML) ---------- */
.ms-tl__legend,
.ms-tl__chips {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ms-tl__legend { border-top: 1px solid var(--gx-line); }
.ms-tl__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 12px 12px 12px 10px;
  border-bottom: 1px solid var(--gx-line);
  border-left: 3px solid transparent;
  transition: background-color 300ms var(--gx-ease), border-color 300ms var(--gx-ease);
}
.ms-tl__item[data-state="target"] {
  background: var(--gx-mint-soft);
  border-left-color: var(--gx-mint);
}
.ms-tl__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.25px solid rgba(13, 42, 60, 0.35);
  font: 600 13px/1 var(--gx-font);
  font-variant-numeric: tabular-nums;
  color: var(--gx-ink);
}
.ms-tl__num--0 { background: var(--gx-skin); }
.ms-tl__num--1 { background: var(--gx-fat); }
.ms-tl__num--2 { background: var(--gx-muscle); color: var(--gx-white); }
.ms-tl__num--3 { background: var(--gx-fascia); }
.ms-tl__num--4 { background: var(--gx-muscle-deep); color: var(--gx-white); }
.ms-tl__num--5 { background: var(--gx-bone); }
[data-state="target"] > .ms-tl__num { box-shadow: 0 0 0 2px var(--gx-white), 0 0 0 4px var(--gx-accent); }

.ms-tl__item-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ms-tl__item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ms-tl__item-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gx-text-strong);
}
.ms-tl__item-desc { font-size: 14px; line-height: 1.5; color: var(--gx-text); }

.ms-tl__tag {
  display: inline-block;
  padding: 3px 8px 2px;
  border-radius: var(--gx-radius);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gx-text);
  background: var(--gx-light);
  border: 1px solid var(--gx-line);
}
[data-state="target"] .ms-tl__tag { background: var(--gx-accent); border-color: var(--gx-accent); color: var(--gx-white); }
[data-state="stop"] .ms-tl__tag { background: var(--gx-white); border-color: var(--gx-warn); color: var(--gx-warn); }

/* ---------- панель режима ---------- */
.ms-tl__panel {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--gx-line);
}
.ms-tl__panel-head { margin-bottom: 22px; }
.ms-tl__kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.ms-gx .ms-tl__panel-title {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.25;
  color: var(--gx-text-strong);
}
.ms-tl__panel-target { margin: 0; font-size: 16px; line-height: 1.5; color: var(--gx-text); }
.ms-tl__panel-lbl { font-weight: 600; color: var(--gx-text-strong); }

.ms-tl__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}
.ms-tl__fact { padding: 0 24px; border-left: 1px solid var(--gx-line); }
.ms-tl__fact:first-child { padding-left: 0; border-left: 0; }
.ms-tl__fact:last-child { padding-right: 0; }
.ms-tl__fact dt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gx-accent);
}
.ms-tl__fact dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gx-text); }
.ms-tl__fact--never dt { color: var(--gx-warn); }
.ms-tl__fact--never dt::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(45deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 0.75px));
}

/* ---------- компактный вариант (в статье) ---------- */
.ms-tl--compact .ms-tl__bar { margin: 16px 0 20px; }
.ms-tl--compact .ms-tl__mode { padding: 10px 16px; font-size: 14px; }
.ms-tl__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
}
.ms-tl__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--gx-text);
}
.ms-tl__chip .ms-tl__num { width: 20px; height: 20px; font-size: 11px; }
.ms-tl__chip[data-state="target"] { font-weight: 600; color: var(--gx-text-strong); }
.ms-tl__line {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--gx-mint);
  background: var(--gx-light);
  font-size: 15px;
  line-height: 1.55;
  color: var(--gx-text);
}
.ms-tl__line-name { color: var(--gx-text-strong); }
.ms-tl__line-name::after { content: " \2014"; font-weight: 400; }
.ms-tl--compact .ms-gx__note { margin-top: 10px; }

/* ---------- узкие колонки: статья, планшет ---------- */
.ms-tl--inline .ms-tl__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ms-tl--inline .ms-tl__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
.ms-tl--inline .ms-tl__fact:nth-child(3) { padding-left: 0; border-left: 0; }

@media (max-width: 1199px) {
  .ms-tl__body { gap: 32px; }
  .ms-tl__item-desc { font-size: 13.5px; }
}
@media (max-width: 991px) {
  .ms-tl__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ms-tl__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .ms-tl__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .ms-tl__fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .ms-tl__fact:nth-child(2) { padding-right: 0; }
}
@media (max-width: 575px) {
  .ms-tl__bar { gap: 10px; }
  .ms-tl__modes { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ms-tl__mode { padding: 12px 10px; font-size: 14px; border-left: 0; border-top: 1px solid var(--gx-line); }
  .ms-tl__mode:nth-child(2n) { border-left: 1px solid var(--gx-line); }
  .ms-tl__mode:nth-child(-n+2) { border-top: 0; }
  /* на телефоне срез крупнее: правая, «пустая» часть блока уходит за край */
  .ms-gx .ms-tl__svg { width: 134%; max-width: none; }
  .ms-tl__legend { grid-template-columns: minmax(0, 1fr); }
  .ms-tl__facts, .ms-tl--inline .ms-tl__facts { grid-template-columns: minmax(0, 1fr); }
  .ms-tl__fact, .ms-tl__fact:nth-child(n) { padding: 0; border-left: 0; }
  .ms-tl__fact + .ms-tl__fact { padding-top: 16px; border-top: 1px solid var(--gx-line); }
  .ms-gx .ms-tl__panel-title { font-size: 21px; }
  /* срез на телефоне уменьшен до ~0,64: номерам слоёв нужен свой кегль, чтобы остаться ≥11px */
  .ms-tl__mark text { font-size: 18px; }
}