/* =============================================================================
   Sonaura — Design System · COMPONENTS + PATTERNS (single sheet)
   Канонический слой компонентов и паттернов прототипов Today-first / CBT4T.

   ┌─────────────────────────────────────────────────────────────────────────┐
   │  ЗАВИСИТ ОТ tokens.css — подключать ПОСЛЕ него:                          │
   │     <link rel="stylesheet" href="tokens.css">                           │
   │     <link rel="stylesheet" href="components.css">                       │
   │  Все значения здесь ссылаются на токены var(--*) из tokens.css; хардкод  │
   │  оставлен ТОЛЬКО там, где токена нет (геометрия конкретного компонента). │
   └─────────────────────────────────────────────────────────────────────────┘

   Этот файл — конкатенация фрагментов дизайн-системы:
     • COMPONENTS (11 групп) — атомы и молекулы: actions, curator (кабинет
       куратора, чьи каркас-классы лежат в паттерне screen-shells ниже), forms,
       nav-chrome, scale-data, sona-voice, step-card, safety, notes, typography,
       facts-list.
     • PATTERNS (4 паттерна-каркаса) — композиции/каркасы экранов: day-flow,
       immersive-player, quick-relief, screen-shells; в живой галерее они
       разложены на 28 отдельных карточек-паттернов.

   ИНВАРИАНТ: палитра служебной панели ревью .specpanel НЕ входит в систему —
   это инструмент ревью, а не продукт; её значения остаются локальными в экранах.

   Живой справочник этих компонентов и паттернов — components-gallery.html.
   Обзор системы и индекс компонентов — README.md.
   ============================================================================= */


/* #############################################################################
   #                                                                           #
   #   СЛОЙ 2 · КОМПОНЕНТЫ (COMPONENTS)                                         #
   #                                                                           #
   ############################################################################# */


/* ===========================================================================
   COMPONENT GROUP · actions
   (источник-фрагмент: _frag-comp-actions.css)
   =========================================================================== */

/* =============================================================================
   Sonaura — Design System · Группа КОМПОНЕНТОВ «actions»
   Фрагмент дизайн-системы. Все значения — через токены из tokens.css
   (var(--*)); хардкод оставлен ТОЛЬКО там, где нет токена (геометрия
   конкретного компонента: размеры knob/toggle, проценты, спец-альфы дуги).

   Источники (канон извлечён и переписан на токены):
     program/templates/today/index.html               — .start
     practice/sound-therapy/index.html     — .cbtn.main, .chip, .toggle, .slider (track/fill/knob/mix/mixcap)
     practice/audio-player/index.html      — .cbtn.main (тёмная), .chev (вынесен как общий)

   Инварианты гайда, влитые в компоненты (см. _gal-comp-actions.html):
     B7 — анимация одноразовая ≤0.3с (var(--t-*)); ничего циклического.
     C1b — ровно один градиент-якорь (--grad) на зону: .start / .cbtn.main.
     C7 — тач-цель ≥44×44 (chip min-height:44; toggle::before хитбокс 48×44;
          фокус-кольцо токеном --focus-ring / --focus-ring-dark).
   qranchor (SOS) и nav-глифы — НЕ в этой группе (отдельные группы);
   здесь только действия-управление.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   TAP-ОТКЛИК — канон-рецепт для всей группы actions и продуктовых кнопок.
   Единый стандарт, чтобы будущие правки не плодили варианты:
     :active        = фон --bg2 ЛИБО transform scale .96–.97 (по типу компонента);
     :focus-visible = кольцо var(--focus-ring) (на тёмном — --focus-ring-dark).
   hover на мобильных не используется — прототипы мобильные, указателя нет;
   аффорданс несут :active (тап) и :focus-visible (клавиатура).
   См. DESIGN-GUIDE B7a · VALIDATION HOVER-01 (реш. DK 2026-07-12).
   --------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   1. start — главная CTA-кнопка (бирюза-градиент)
   Источник: program/templates/today/index.html .start
   Канон: единственный градиент-якорь зоны (C1b); стрелка-суффикс «→»;
   одноразовый сжим при нажатии (B7).
   --------------------------------------------------------------------------- */
.start{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-sm);
  width:100%;
  background:var(--grad);color:#fff;border:none;
  border-radius:var(--r-btn);
  padding:15px;                                  /* нет токена под высоту CTA */
  font-family:var(--sans);font-size:16px;font-weight:700;
  cursor:pointer;text-decoration:none;
  transition:transform var(--t-short) var(--ease-out);
  margin-top:var(--sp-md);
}
.start::after{content:'→'}
.start:active{transform:scale(.985)}
.start:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* -----------------------------------------------------------------------------
   2. cbtn.main — круглая play/pause 82 (бирюза-градиент)
   Источник: sound-therapy + practice-audio-player (тёмные поверхности).
   .cbtn — базовый тихий кружок (управление 2-го плана: −15с/перемотка);
   .cbtn.main — крупный градиент-якорь (C1b) воспроизведения.
   На тёмной поверхности фокус — кольцом по dark-dot (--focus-ring-dark).
   --------------------------------------------------------------------------- */
.cbtn{
  width:52px;height:52px;border-radius:50%;
  background:var(--dark-surface-1);
  border:1px solid var(--dark-border);
  color:var(--dark-text);
  display:grid;place-items:center;cursor:pointer;position:relative;
}
.cbtn svg{
  --icon-px:24;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);
  stroke:var(--dark-text);stroke-width:calc(var(--icon-eff)*var(--icon-vb)/var(--icon-px));fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.cbtn .n{position:absolute;font-size:8.5px;font-weight:700;color:var(--dark-muted)}
.cbtn.main{
  width:82px;height:82px;border-radius:50%;
  background:var(--grad);border:none;
  box-shadow:var(--sh-player-play);  /* НЕ --sh-cta: .cbtn живёт только на тёмной
     поверхности плеера, и тень у него своя, глубже. До объединения здесь стоял
     --sh-cta, но он был мёртв — ниже по файлу лежал дубль с --sh-player-play и
     побеждал. Рисовался всегда player-play; закрепляем то, что рисовалось. */
  display:grid;place-items:center;cursor:pointer;
}
.cbtn.main svg{width:30px;height:30px;stroke:none;fill:#fff}
.cbtn:focus-visible{outline:none;box-shadow:var(--focus-ring-dark)}
.cbtn.main:focus-visible{box-shadow:var(--focus-ring-dark),var(--sh-cta)}

/* -----------------------------------------------------------------------------
   3. chip — пилюля-переключатель (999px), одиночный выбор (таймер сна)
   Источник: sound-therapy .chip / .chip.on
   Канон: тач-цель ≥44 (C7) min-height; активный — спокойный teal-tint-fill
   на тёмном (НЕ градиент, НЕ красный); переход цвета одноразовый (B7).

   КОНТЕКСТ-СКОУП: тёмный вариант chip — ТОЛЬКО на тёмной поверхности плеера
   (.player). Дефолтная (светлая) онбординг-версия .chip определена ниже в
   группе onboarding и работает на светлых экранах. Скоуп через потомка
   повышает специфичность, поэтому тёмный вариант перебивает светлый ровно
   внутри плеера, не задевая остальное.
   --------------------------------------------------------------------------- */
.player .chip{
  display:inline-flex;align-items:center;
  min-height:44px;                               /* C7: тач-цель */
  padding:var(--sp-sm) var(--sp-md);
  border-radius:var(--r-chip);
  background:var(--dark-surface-1);
  border:1px solid var(--dark-border);
  color:var(--dark-muted);
  font-size:var(--fs-meta-sm);font-weight:600;cursor:pointer;
  transition:background var(--t-short) var(--ease-out),
             color var(--t-short) var(--ease-out),
             border-color var(--t-short) var(--ease-out);
}
.player .chip.on{
  background:rgba(43,180,198,.18);              /* teal @18% — нет токена под этот fill */
  border-color:rgba(43,180,198,.5);
  color:var(--dark-accent);
}
.player .chip:focus-visible{outline:none;box-shadow:var(--focus-ring-dark)}

/* -----------------------------------------------------------------------------
   4. toggle — тумблер слоя (тач-зона ≥44 псевдо-элементом)
   Источник: sound-therapy .toggle / .toggle.on / .toggle::before/::after
   Канон: видимый трек 42×25, но хитбокс ::before 48×44 (C7); включённый —
   teal-tint трек + cyan-knob; ход knob одноразовый (B7).

   КОНТЕКСТ-СКОУП: тёмный вариант toggle (knob через ::after, состояние через
   класс .on) — ТОЛЬКО на .player. Светлая онбординг-версия .toggle (knob
   дочерним .knob, состояние через :has(input:checked)) определена ниже в
   группе onboarding и остаётся дефолтом. Скоуп через потомка убирает фантомный
   ::after-кноб на светлых тумблерах.
   --------------------------------------------------------------------------- */
.player .toggle{
  flex:none;width:42px;height:25px;border-radius:var(--r-chip);
  background:var(--dark-surface-2);
  position:relative;cursor:pointer;border:none;
  transition:background var(--t-short) var(--ease-out);
}
.player .toggle::before{                         /* C7: невидимая тач-зона ≥44 */
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:48px;height:44px;
}
.player .toggle::after{
  content:"";position:absolute;top:3px;left:3px;
  width:19px;height:19px;border-radius:50%;
  background:var(--dark-muted);
  transition:transform var(--t-short) var(--ease-out),
             background var(--t-short) var(--ease-out);
}
.player .toggle.on{background:rgba(43,180,198,.45)}        /* teal @45% — нет токена */
.player .toggle.on::after{transform:translateX(17px);background:var(--cyan)}
.player .toggle:focus-visible{outline:none;box-shadow:var(--focus-ring-dark)}

/* -----------------------------------------------------------------------------
   5. slider — калибровка (track / fill / knob / mix / mixcap)
   Источник: sound-therapy .slider*
   Канон: teal-fill БЕЗ градиента (--dark-fill); mix — тихая риска-ориентир,
   НЕ красная (--dark-accent @55%); knob отзыв тенью одноразовый (B7);
   статичная отрисовка — без анимации заливки (анти-гипервигильность).
   --------------------------------------------------------------------------- */
.slider{
  position:relative;height:34px;
  display:flex;align-items:center;
  touch-action:none;cursor:pointer;
}
.slider .track{
  position:relative;flex:1;height:6px;border-radius:var(--r-chip);
  background:var(--dark-surface-2);
  border:1px solid rgba(255,255,255,.14);
}
.slider .fill{
  position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-chip);
  background:var(--dark-fill);opacity:.85;
}
.slider .knob{
  position:absolute;top:50%;width:20px;height:20px;border-radius:50%;
  background:#fff;border:2px solid var(--dark-fill);
  transform:translate(-50%,-50%);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  cursor:pointer;
  transition:box-shadow var(--t-micro) var(--ease-out);
}
.slider:focus-visible{outline:none}
.slider:focus-visible .knob{
  box-shadow:var(--focus-ring-dark),0 2px 6px rgba(0,0,0,.4);  /* фокус-кольцо на тёмном */
}
.slider .mix{                                    /* mixing-point — тихая риска, БЕЗ красного */
  position:absolute;top:50%;width:2px;height:16px;border-radius:2px;
  background:rgba(127,216,226,.55);
  transform:translate(-50%,-50%);
}
.mixcap{
  font-size:var(--fs-micro);color:var(--dark-text2);
  margin-top:5px;padding-left:2px;
}

/* -----------------------------------------------------------------------------
   6. chev — шеврон-указатель «›» (переход/раскрытие справа)
   Источник: общий — today .closestep/.qr-act .chev, sound-therapy .jcard .chev
   Дедуплицирован в один компонент + модификатор размера .chev--lg.
   Тихий декор-указатель (--muted2); aria-hidden на разметке.
   --------------------------------------------------------------------------- */
.chev{
  margin-left:auto;
  color:var(--muted2);
  font-size:18px;line-height:1;flex:none;
}
.chev--lg{font-size:20px}                         /* крупные карточки-намерения (.jcard) */


/* ===========================================================================
   COMPONENT GROUP · curator
   (источник-фрагмент: _frag-comp-curator.css)
   =========================================================================== */

/* =============================================================================
   Sonaura Design System — Группа КОМПОНЕНТОВ «curator»
   Фрагмент: живой Куратор (асинхронный человек-сопровождающий).
   Источник канона: program/templates/today/index.html (.cpresence / .gav).

   ПРИНЦИП: ни одного хардкод-цвета/тени/размера там, где есть токен из
   design-system/tokens.css. Все значения — через var(--*).

   КАНОН-ИНВАРИАНТЫ (DESIGN-GUIDE):
   · C6b — Куратор = фиолетовая система #7C6CD6 (токен --curator); срочность ~24 ч.
           Аватар — ФОТО Куратора в фиолетовой оправе-кольце (реш. DK R30
           2026-07-10); фолбэк без фото — фиолетовый диск с инициалом.
   · C6d — три контакта разведены по 4 осям: аватар / цвет / место / срочность.
           Куратор ≠ Sona (бирюза-градиент «S») ≠ SOS (белый диск, сердце-в-ладошках).
   · C6e — плита-присутствие Куратора (.cpresence) — ТОЛЬКО на «Сегодня».
   · C6g — подложка реплики = цвет говорящего: плита на --curator-tint.
   · B7  — маркер непрочитанного = СТАТИЧНАЯ фиолетовая точка (.cdot), не пульс,
           не красный, не бейдж-счётчик. Анимаций у компонента нет (только
           одноразовый press/фокус-отклик).
   · C7  — тап-цель плиты ≥44×44 (паддинги + высота аватара дают высоту),
           aria-hidden на декоре, смысловой текст на --ink.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   КОМПОНЕНТ: gav — аватар Куратора
   Плоский фиолетовый диск (--curator #7C6CD6) с инициалом куратора — фолбэк;
   канон-подача с ФОТО — img.gav (реш. DK R30 2026-07-10): фотография в круге,
   идентичность-цвет несёт фиолетовая оправа-кольцо (заливку закрывает фото).
   Самостоятельный примитив: используется внутри плиты .cpresence, но
   переиспользуем отдельно.

   Дедупликация: единственный размер из канона — 42px (--cur-av-size).
   Модификаторы размера задаются переопределением --cur-av-size, шрифт
   масштабируется через --cur-av-fs (по умолчанию --fs-h3).
   --------------------------------------------------------------------------- */
.gav{
  --cur-av-size:42px;            /* канон Today */
  --cur-av-fs:var(--fs-h3);      /* инициал 18px ≈ канон 17px */
  width:var(--cur-av-size);
  height:var(--cur-av-size);
  flex:none;
  border-radius:50%;
  background:var(--curator);     /* фиолетовый #7C6CD6 — C6b */
  /* V3: цветной нимб снят — идентичность несёт фиолетовая заливка (синхрон с program/templates/today) */
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:var(--cur-av-fs);
}
/* модификатор размера — мелкий аватар (напр. в списках/мета-строках) */
.gav--sm{ --cur-av-size:var(--sp-xl); --cur-av-fs:var(--fs-meta); } /* 32px */
/* фото-вариант (канон R30): у фото ось цвета C6b несёт оправа-кольцо --curator
   (у инициала оправа сливалась бы с заливкой — у него кольца нет). Фолбэк при
   отсутствии файла — onerror в разметке подменяет img на span.gav с инициалом. */
img.gav{
  object-fit:cover;
  display:block;
  padding:0;
  border:2px solid var(--curator);
}

/* ---------------------------------------------------------------------------
   КОМПОНЕНТ: cpresence — ПЛИТА-ПРИСУТСТВИЕ Куратора (реш. DK R30 2026-07-10,
   сменяет строку .guide; выбор DK из 5 концепций роя-генерации — «tinted»).
   C6e: только на «Сегодня». Куратор подан ТОЙ ЖЕ грамматикой, что Sona
   (.presence): плоская curator-tint поверхность БЕЗ рамки/тени/белой карточки
   (C6g «подложка = цвет говорящего»), метрики — зеркало .presence (padding
   18px, радиус --r-nested-lg, реплика 15px/1.5 как .presence .bubble).
   Состав: фото в фиолетовой оправе (img.gav) + роль-строка «Анна · твой
   куратор» (.cwho, зеркало «Sona · твой AI-проводник») + одна реплика живым
   голосом (.csay) + тихий текст-аффорданс «Написать ›» в углу (.cwrite —
   страховка аффорданса, НЕ вторая кнопка). Вся плита — ОДНА ссылка-тап-мишень
   в чат (≥44px, C7).

   ПЛИТА ЖИВАЯ — два состояния (контракт для ТЗ):
   · base   — реплика-заглушка «Я рядом. Пиши — отвечу в чате.»;
   · unread — есть непрочитанное сообщение Куратора: .csay несёт НАЧАЛО его
              последнего сообщения (обрезка ≤2 строк), в роль-строке видна
              статичная фиолетовая точка .cdot (B7: не пульс, не красный,
              не бейдж-счётчик); по прочтении чата маркер гаснет.

   Отклик — одноразовый ≤0.3s (B7): только фон на :active (--curator-tint-deep,
   фоном — не прожим-скейлом: scale закреплён за pulse-паттерном). Hover-заливки
   нет — мобильный канон тихих строк. Фокус — фиолетовое кольцо по прецеденту
   .tabs--curator (teal-кольцо не сработает: teal не из системы Куратора,
   а --curator-tint — это же фон плиты).
   --------------------------------------------------------------------------- */
.cpresence{
  display:flex;
  align-items:center;
  gap:var(--sp-md);
  margin-top:var(--sp-lg);       /* 24px отбивка от ленты дня */
  padding:18px;                  /* зеркало .presence */
  background:var(--curator-tint);
  border-radius:var(--r-nested-lg);
  text-decoration:none;
  transition:background var(--t-short) var(--ease-out);
}
.cpresence:active{background:var(--curator-tint-deep)}
.cpresence:focus-visible{outline:none;box-shadow:0 0 0 4px var(--curator-line)}
/* текстовый столбец */
.cpresence .ccol{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-xs)}
/* роль-строка — зеркало .coach .who, в чернилах Куратора */
.cpresence .cwho{
  display:flex;align-items:center;gap:var(--sp-sm);
  font-size:var(--fs-label);font-weight:700;color:var(--curator-ink);
}
/* тихий маркер непрочитанного — статичная фиолетовая точка (B7) */
.cpresence .cdot{width:8px;height:8px;border-radius:50%;background:var(--curator);flex:none}
/* реплика / превью последнего сообщения — тёмный --ink (C6g), обрезка ≤2 строк */
.cpresence .csay{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  font-size:15px;line-height:1.5;color:var(--ink);
}
/* тихий текст-аффорданс «Написать ›» в углу плиты — страховка перехода */
.cpresence .cwrite{
  align-self:flex-end;margin-top:2px;
  font-size:var(--fs-meta-sm);font-weight:600;color:var(--curator-ink);white-space:nowrap;
}

/* Легаси-строка .guide/.gt/.gcta/.gdot удалена (разлив R30 2026-07-10):
   daily/maintenance, daily/tfi-remeasure, daily/week-transition мигрированы
   на канон-плиту .cpresence (выше). */


/* ===========================================================================
   COMPONENT GROUP · forms
   (источник-фрагмент: _frag-comp-forms.css)
   =========================================================================== */

/* =============================================================================
   Sonaura — Компоненты: ГРУППА «FORMS» (формы ввода)
   Фрагмент дизайн-системы. Зависит от tokens.css — все значения через var(--*).

   Источники (канон извлечён и переписан на токены):
     practice/step-close/index.html   — textarea (свёрнутая заметка), focus-ring
     onboarding/_template/index.html  — .input/.field, radio .opt, checkbox .opt.check,
                                        .chips/.chip, .toggle, .notelink/.notewrap/.expl

   Канон-инварианты, удержанные в этой группе:
     • border полей = var(--line); focus → бирюза (border-color var(--teal)
       + кольцо var(--focus-ring)). Единое правило фокуса 4px тинтом (токены §9).
     • заливка выбранного состояния = var(--grad) (один бирюза-градиент-якорь).
     • анимации одноразовые, ≤0.3с, var(--ease-out) (§10). Без циклов/пульса.
     • радиусы только из шкалы (--r-btn / --r-chip), отступы из spacing-шкалы.
   Дедупликация:
     • textarea (practice-step-close) и textarea.input (onb) сведены в один
       примитив .input + модификатор textarea.input.
     • shortnote (тихая ссылка-раскрытие) и optnote (панель-пояснение .expl)
       сведены в одну группу .notelink + .notewrap (+ .expl как контент-вариант).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. ТЕКСТОВОЕ ПОЛЕ — .input (+ textarea.input), обёртка .field
   border var(--line), скруглённый --r-btn, focus → teal + кольцо.
   -------------------------------------------------------------------------- */
.field{display:block;margin-bottom:var(--sp-md)}
.field .lab{display:block;font-size:var(--fs-meta-sm);font-weight:600;color:var(--ink);margin:0 0 7px 2px}

.input{
  width:100%;
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--r-btn);
  padding:var(--sp-md);
  font-family:var(--sans);
  font-size:var(--fs-body);
  color:var(--ink);
  line-height:1.4;
}
.input::placeholder{color:var(--muted2)}
.input:focus{outline:none;border-color:var(--teal);box-shadow:var(--focus-ring)}

/* textarea-вариант одного примитива (свёрнутая заметка / многострочное поле) */
textarea.input{resize:none;min-height:84px;line-height:1.45}

/* -----------------------------------------------------------------------------
   2. RADIO-ВЫБОР (одиночный) — .opts / .opt
   Выбранный: border teal + tint-фон, точка заливается градиентом.
   -------------------------------------------------------------------------- */
.opts{display:flex;flex-direction:column;gap:9px}
.opt{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--r-btn);
  padding:var(--sp-md);
  cursor:pointer;
  transition:border-color var(--t-short) var(--ease-out),background var(--t-short) var(--ease-out);
}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .box{
  width:22px;height:22px;flex:none;border-radius:50%;
  border:1.5px solid var(--line);
  display:grid;place-items:center;
  transition:border-color var(--t-short) var(--ease-out);
}
.opt .box::after{
  content:'';width:10px;height:10px;border-radius:50%;
  background:var(--grad);
  transform:scale(0);
  transition:transform var(--t-short) var(--ease-out);
}
.opt .t{flex:1;min-width:0}
.opt .t b{display:block;font-size:var(--fs-body-sm);font-weight:600;color:var(--ink);line-height:1.25}
.opt .t span{display:block;font-size:var(--fs-label);color:var(--muted);margin-top:2px}
.opt:has(input:checked){border-color:var(--teal);background:var(--teal-tint)}
.opt:has(input:checked) .box{border-color:var(--teal)}
.opt:has(input:checked) .box::after{transform:scale(1)}
.opt:has(input:focus-visible){box-shadow:var(--focus-ring)}

/* -----------------------------------------------------------------------------
   3. CHECKBOX-ВЫБОР (множественный) — .opt.check (модификатор radio-строки)
   Квадратный box, галочка-чек; выбранный box заливается градиентом.
   -------------------------------------------------------------------------- */
.opt.check .box{border-radius:7px}
.opt.check .box::after{
  width:12px;height:12px;border-radius:0;
  background:transparent;
  border-bottom:2.4px solid #fff;border-right:2.4px solid #fff;
  transform:rotate(45deg) translate(-1px,-2px) scale(0);
  transform-origin:center;margin-top:-2px;
}
.opt.check:has(input:checked) .box{background:var(--grad);border-color:transparent}
.opt.check:has(input:checked) .box::after{transform:rotate(45deg) translate(-1px,-2px) scale(1)}

/* -----------------------------------------------------------------------------
   4. CHIP-РЯД (множественный выбор, компактный) — .chips / .chip
   pill-радиус --r-chip; выбранный — teal-tint + teal-ink текст.
   -------------------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-sm)}
.chip{
  position:relative;display:inline-flex;align-items:center;
  border:1.5px solid var(--line);
  background:var(--surface);
  border-radius:var(--r-chip);
  padding:9px 15px;
  font-size:var(--fs-meta);font-weight:600;color:var(--ink);
  cursor:pointer;
  transition:border-color var(--t-short) var(--ease-out),background var(--t-short) var(--ease-out),color var(--t-short) var(--ease-out);
}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip:has(input:checked){border-color:var(--teal);background:var(--teal-tint);color:var(--teal-ink)}
.chip:has(input:focus-visible){box-shadow:var(--focus-ring)}

/* -----------------------------------------------------------------------------
   5. TOGGLE (вкл/выкл — гейты модулей) — .toggle-row / .toggle
   Включённый трек = градиент; knob ездит, переход одноразовый ≤0.3с.
   -------------------------------------------------------------------------- */
.toggle-row{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--r-btn);
  padding:var(--sp-md);
}
.toggle-row .tt{flex:1;min-width:0}
.toggle-row .tt b{display:block;font-size:var(--fs-body-sm);font-weight:600;color:var(--ink)}
.toggle-row .tt span{display:block;font-size:var(--fs-label);color:var(--muted);margin-top:2px}

.toggle{
  position:relative;flex:none;width:46px;height:28px;
  border-radius:var(--r-chip);
  background:var(--bg2);
  border:1.5px solid var(--line);
  cursor:pointer;padding:0;
  transition:background var(--t-short) var(--ease-out),border-color var(--t-short) var(--ease-out);
}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle .knob{
  position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(30,41,59,.2);
  transition:transform var(--t-short) var(--ease-out);
}
.toggle:has(input:checked){background:var(--grad);border-color:transparent}
.toggle:has(input:checked) .knob{transform:translateX(18px)}
.toggle:has(input:focus-visible){box-shadow:var(--focus-ring)}

/* -----------------------------------------------------------------------------
   5b. toggle--flat — V3-вариант тумблера: вкл = плоская бирюза (не градиент)
   C1b: единственный градиент-якорь зоны остаётся на главной кнопке («Дальше»),
   поэтому тогглы-гейты в V3 включаются плоским --teal, а не --grad. База —
   светлый .toggle выше. Хитбокс ≥44 и фокус наследуются от базы.
   Источник: onboarding/gates (локальный фикс .gate .toggle).
   --------------------------------------------------------------------------- */
.toggle--flat:has(input:checked){ background:var(--teal); border-color:transparent; }

/* -----------------------------------------------------------------------------
   6. ТИХИЕ ПЛАШКИ-ЗАМЕТКИ — shortnote + optnote
   shortnote = ссылка-раскрытие .notelink (тихая, muted, шеврон-поворот).
   optnote   = раскрываемое содержимое .notewrap: либо textarea.input (заметка),
               либо панель-пояснение .expl (тихий bg2-слой «зачем»).
   Раскрытие одноразовое ≤0.3с (max-height/opacity), без цикла.
   -------------------------------------------------------------------------- */
.notelink{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-meta);color:var(--muted);font-weight:600;
  cursor:pointer;user-select:none;
  background:none;border:none;padding:6px 0;
  font-family:var(--sans);
}
.notelink .nch{font-size:var(--fs-micro);color:var(--muted2);transition:transform var(--t-short) var(--ease-out)}
.notelink[aria-expanded="true"] .nch{transform:rotate(90deg)}

.notewrap{
  max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height var(--t-medium) var(--ease-out),opacity var(--t-short) var(--ease-out),margin-top var(--t-medium) var(--ease-out);
}
.notelink[aria-expanded="true"]+.notewrap{max-height:260px;opacity:1;margin-top:10px}

/* -----------------------------------------------------------------------------
   6b. АЛИАСЫ СТАРОГО ИМЕНИ — раскрытие «Зачем шаг» (.whylink/.whybody/.wch/.wtext)
   Канон сведён в .notelink/.notewrap, но боевая разметка «Сегодня» (today)
   несёт ИСХОДНОЕ семейство .whylink → .whybody с дочерними .wch (шеврон) и
   .wtext (абзац-пояснение голосом Sona). Покрываем старые имена тем же каноном
   раскрытия (max-height/opacity, одноразово ≤0.3с, B7), чтобы экран рендерил
   раскрытие «Зачем шаг» БЕЗ правки HTML. Аватар-«S» внутри (.whybody .sav)
   уже покрыт в группе sona-voice (блок 1b). Канон-источник: program/templates/today
   (.whylink/.whybody/.wch/.wtext).
   --------------------------------------------------------------------------- */
.whylink{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-meta);color:var(--muted);font-weight:600;
  cursor:pointer;user-select:none;margin-top:2px;
  background:none;border:none;padding:4px 0;
  font-family:var(--sans);
}
.whylink .wch{
  font-size:var(--fs-micro);color:var(--muted2);
  transition:transform var(--t-short) var(--ease-out);
}
.whylink[aria-expanded="true"] .wch{transform:rotate(90deg)}
.whybody{
  display:flex;gap:9px;align-items:flex-start;
  max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height var(--t-medium) var(--ease-out),
             opacity var(--t-short) var(--ease-out),
             margin-top var(--t-medium) var(--ease-out);
}
.whylink[aria-expanded="true"]+.whybody{max-height:120px;opacity:1;margin-top:10px}
.whybody .wtext{
  flex:1;min-width:0;
  font-size:var(--fs-meta-sm);line-height:1.45;color:var(--teal-ink);
}
.whylink:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* optnote-контент: тихая панель-пояснение «зачем» (вариант наполнения notewrap) */
.notewrap .expl{
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:var(--r-btn);
  padding:var(--sp-md);
  font-size:var(--fs-meta-sm);line-height:1.5;color:var(--muted);
}
.notewrap .expl b{color:var(--ink)}

/* -----------------------------------------------------------------------------
   7. ФОКУС ПРИМИТИВОВ (единое кольцо) — :focus-visible на всей группе
   Канон §9: 4px бирюзовое кольцо тинтом на светлом (var(--focus-ring)).
   -------------------------------------------------------------------------- */
.input:focus-visible,
.notelink:focus-visible,
textarea.input:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* -----------------------------------------------------------------------------
   8. КАРКАС ФОРМ ОНБОРДИНГА — шапка вопроса, ярлык-группа, строки-флаги,
      сегмент «Нет/Да», карточка вопроса.
   Раньше эти скелет-классы дублировались локально в <style> экранов
   онбординга (safety, program-fit, tfi, sleep, phq9) и дрейфовали. Сведено в
   канон по правилу «большинство побеждает»; НАСТОЯЩИЕ per-screen оверрайды
   остаются локально в экранах (их <style> грузится ПОСЛЕ этого файла, поэтому
   при равной специфичности побеждает локальный).
   Источники: onboarding/{safety,program-fit,tfi,sleep,phq9}/index.html.
   -------------------------------------------------------------------------- */

/* 8.1 .onbhead — шапка экрана-вопроса: H1 + подзаголовок-ориентир.
   Контейнер .onbhead{margin} НЕ канонизируем — верхний отступ намеренно свой
   на каждом экране (6px / sp-md / sp-lg). line-height H1 = 1.16 (большинство:
   safety/program-fit/sleep/phq9); tfi оставляет локально line-height:1.12 +
   свой .onbhead h1.compact{font-size:var(--fs-h2)}. Подзаголовок-ориентир
   существует в двух изводах разметки (та же роль) → две канон-записи:
     span.sub (.onbhead .sub) — safety, program-fit;
     p        (.onbhead p)    — tfi, sleep, phq9. */
.onbhead h1{font-weight:700;font-size:var(--fs-h1);letter-spacing:-.02em;line-height:1.16;color:var(--ink)}
.onbhead .sub{display:block;font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:var(--sp-sm)}  /* 14.5px вне токен-шкалы — оставлен литералом */
.onbhead p{color:var(--muted);font-size:var(--fs-body-sm);line-height:1.5;margin-top:10px;max-width:34ch}
/* per-screen-оверрайды: tfi .onbhead p{font-size:var(--fs-meta);margin-top:9px}; sleep .onbhead p{max-width:32ch} */

/* 8.2 .qlabel — СЛИТ в .section-label + модификатор .section-label--q (решение DK).
   Разметка мигрирована: class="qlabel" → class="section-label section-label--q"
   (safety, program-fit). Типографика наследуется от .section-label; плотный низ
   (sp-xs=4px) сохранён модификатором — пиксель-в-пиксель. */

/* 8.3 .flaglist / .flag — список вопросов-флагов, разделённых тихим волоском
   (не рамками-карточками). .flag .q: канон font-weight 600 (safety);
   program-fit оставляет локально font-weight:700 + переносит низ-отступ на
   .qsub/.q.solo. Поэтому канон .flag .q идёт БЕЗ margin-bottom; safety
   оставляет локально .flag .q{margin-bottom:12px}. font-size:16px вне шкалы —
   литерал. */
.flaglist{margin-top:6px}
.flag{padding:var(--sp-md) 0}
.flag+.flag{border-top:1px solid var(--line)}
.flag .q{font-size:16px;font-weight:600;color:var(--ink);line-height:1.34}

/* 8.4 .seg — сегментированный контрол формы «Нет/Да» (НЕ путать с
   .onbdots .seg индикатора прогресса — тот в группе screen-shells). Канон =
   скелет + нейтральный slate-выбор, СКОУПЛЕННЫЙ на .no (совпадает с safety
   побайтно), + нейтральное фокус-кольцо. Маска-галочка ::before — тот же
   SVG-путь, что у .opt.check. 15px→var(--fs-body-sm); padding 11px /
   min-height 44px (тап-цель) / border 1.5px / галочка 15px — литералы.
   per-screen-оверрайды (намеренно локальные):
     safety: красный .seg label.yes:has(input:checked) +
             .seg label.yes:has(input:focus-visible){box-shadow:var(--safety-focus)} (Tier-1);
     program-fit: распространяет нейтрал на .yes своим
             .seg label.yes:has(input:checked)+::before (красный там запрещён). */
.seg{display:flex;gap:var(--sp-sm)}
.seg label{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;border:1.5px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:11px;font-size:var(--fs-body-sm);font-weight:600;color:var(--muted);cursor:pointer;transition:border-color var(--t-short) var(--ease-out),background var(--t-short) var(--ease-out),color var(--t-short) var(--ease-out)}
.seg label input{position:absolute;opacity:0;width:0;height:0}
.seg label.no:has(input:checked){border-color:var(--muted2);border-width:2px;background:var(--line);color:var(--ink);font-weight:700;padding-left:30px}
.seg label.no:has(input:checked)::before{content:'';position:absolute;left:11px;top:50%;width:15px;height:15px;margin-top:-7px;background:var(--check-fill);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4.5 4.5L19 7'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4.5 4.5L19 7'/></svg>") center/contain no-repeat}
.seg label:has(input:focus-visible){outline:none;box-shadow:var(--focus-ring-neutral)}

/* 8.5 .qcard — карточка одного вопроса (база, общая у tfi/sleep/phq9).
   Канон = общий знаменатель базы: surface + r-nested-lg + sh-card. Остальное
   намеренно остаётся локальным (дрейф по дизайну экрана):
     tfi:   border:1px solid line + position:relative + transition +
            .qcard.answered{border-color:var(--teal-line)} (аффорданс «отвечено») + padding + margin-top;
     sleep: padding + margin-top;
     phq9:  border:none + padding + margin-top, заголовок через .qcard .qtext (СВОЁ имя — не сводим).
   .qcard .q общий у tfi+sleep: канон line-height 1.3 / margin-bottom 18px (sleep);
   tfi оставляет локально line-height:1.28 + margin-bottom:var(--sp-lg) + letter-spacing. */
.qcard{background:var(--surface);border-radius:var(--r-nested-lg);box-shadow:var(--sh-card)}
.qcard .q{font-weight:600;font-size:var(--fs-h3);line-height:1.3;color:var(--ink);margin-bottom:18px}


/* ===========================================================================
   COMPONENT GROUP · nav-chrome
   (источник-фрагмент: _frag-comp-nav-chrome.css)
   =========================================================================== */

/* =============================================================================
   Sonaura — Группа компонентов «nav-chrome» (на токенах)
   Системный хром экрана: статусбар, нижняя навигация, недельная полоска,
   SOS-якорь. Все значения — через var(--*) из tokens.css; хардкод оставлен
   только там, где токена нет (тач-хитбокс ::after, точные размеры глифов
   нав-бара, альфа-обводка бейджа на стекле).

   Источники: program/templates/today/index.html, practice/sound-therapy/index.html
   Канон-инварианты гайда отмечены в комментариях у каждого компонента.

   ЗАВИСИМОСТЬ: подключать ПОСЛЕ tokens.css. Нав-бар требует <linearGradient
   id="navgrad"> в DOM (см. галерею) для активного глифа.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. statusbar — имитация системной строки (часы · сеть/батарея)
   Периферийный служебный слой (B5). На тёмной поверхности — модификатор.
   ----------------------------------------------------------------------------- */
.statusbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 4px 2px;            /* без токена — точная посадка под вырез */
  font-size:var(--fs-meta-sm);     /* 13px */
  font-weight:700;
  color:var(--ink);
}
.statusbar .r{ font-size:var(--fs-label); }   /* 12px — правый кластер */

/* модификатор: статусбар на тёмной иммерсивной поверхности (плеер) */
.statusbar--dark{ color:var(--dark-text); }


/* -----------------------------------------------------------------------------
   2. week — недельная полоска (.wd · позиция в структуре, НЕ счётчик)
   Гайд: B3b прогресс = только статичная позиция; B4 ноль игровых механик;
   A1b «позиция → полоска недели». Сегодня = today-плашка с градиентом.
   Полоска — вход в «Мой дневник» (daily/calendar): рендерится ссылкой
   (реш. DK 2026-07-04, разбор Гейта 2в п.1 — возврат поведения старого канона).
   ----------------------------------------------------------------------------- */
.week{
  display:flex;
  justify-content:space-between;
  gap:5px;                          /* без токена — узкий зазор между днями */
  margin:var(--sp-md) 0 0;
}
a.week{text-decoration:none;cursor:pointer}
a.week:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.wd{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;                          /* канон 6px — нет точного токена spacing */
  padding:7px 0;                    /* без токена — компактная высота дня */
  border-radius:var(--r-btn);       /* 14px */
}
.wd .lab{
  font-size:var(--fs-micro);        /* 11px */
  font-weight:600;
  color:var(--muted2);
}
/* число месяца (реш. DK 2026-07-07, R24) — под днём недели, тише .lab; вместе дают
   «Пн 7» — календарный якорь в реальном сегодня, не программный номер */
.wd .date{
  font-size:9px;
  font-weight:500;
  color:var(--muted2);
  opacity:.85;
}
.wd.today .date{ color:#fff; }
.wd .mk{                            /* маркер дня — пустой кружок (будущее) */
  width:8px;height:8px;
  border-radius:50%;
  background:transparent;
  border:1.5px solid var(--line);
}
/* пройденный день — залит бирюзой (статичная позиция, не награда) */
.wd.active .mk{
  background:var(--teal);
  border-color:var(--teal);
}
/* сегодня — единственная подсвеченная плашка дня (градиент-якорь, C1b) */
.wd.today{
  background:var(--grad);
  /* V3: teal-halo снят — позицию «сегодня» несёт сам градиент-якорь (синхрон с program/templates/today) */
}
.wd.today .lab{ color:#fff; }
.wd.today .mk{
  width:8px;height:8px;
  background:#fff;
  border:none;
  box-shadow:none;
}


/* -----------------------------------------------------------------------------
   3. nav — нижняя навигация (таб-бар: .nav a + .ic + .on + .has-badge)
   Гайд-инварианты:
   - B5 хром один слой — только нижняя навигация, шапки нет.
   - B6 активный таб = ТОТ ЖЕ контурный глиф, отличие только цветом:
        неактив stroke=currentColor (var(--muted2)); актив stroke=url(#navgrad).
        Активную иконку НЕ заливать, НЕ менять форму. «Сегодня» = кружок r=4.6.
   - B7 / C1a бейдж непрочитанного = СТАТИЧНАЯ точка (teal), не пульс, не красный,
        не счётчик.
   ----------------------------------------------------------------------------- */
.nav{
  position:absolute;
  bottom:0;left:0;right:0;
  background:var(--glass-surface);              /* полупрозрачное стекло */
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  display:flex;
  padding:9px 6px 16px;                         /* без токена — посадка над home-bar */
}
.nav a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-xs);                             /* 4px */
  font-size:9.5px;                              /* мельче шкалы — точная подпись таба */
  line-height:1;
  color:var(--muted2);                          /* неактивный таб (= currentColor глифа) */
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
}
.nav a.on{ color:var(--teal); }                 /* активный таб: цвет подписи бирюзовый */
.nav .ic{
  width:24px;height:24px;
  display:grid;place-items:center;
}
/* B6: активный таб отличается от неактивного ТОЛЬКО цветом — глиф, сетка и вес
   одинаковы. Вес задаётся здесь и поэтому перебивает инлайновый stroke-width в
   разметке: раньше активный таб приезжал на 1.9 против 1.75 у соседей, то есть
   кодировал состояние ещё и весом. Теперь оба состояния несут общий канон-вес
   (--icon-eff), разделяет их только обводка (currentColor против url(#navgrad)). */
/* Носители иконок (.gi/.gi--xs) вынесены в design-system/icons.css —
   их нужно подключать и там, где полный components.css не берут (кабинет). */

.nav .ic svg{
  --icon-px:24;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);
  stroke-width:calc(var(--icon-eff)*var(--icon-vb)/var(--icon-px));
}
/* статичная точка-бейдж непрочитанного — B7: НЕ пульс, НЕ красный, НЕ счётчик */
.nav a.has-badge .ic{ position:relative; }
.nav a.has-badge .ic::after{
  content:"";
  position:absolute;
  top:-2px;right:-2px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--teal);
  border:2px solid #fff;                        /* обводка под стекло нав-бара */
}


/* -----------------------------------------------------------------------------
   4. qranchor — плавающий SOS-якорь (сердце-в-ладошках)
   Гайд C6c (КАНОН, не переизобретать):
   - глиф сердце-в-ладошках, stroke teal (--teal), толщина 1.75;
   - белый диск, border --line, тихая тень;
   - НЕ красный, НЕ градиент-заливка; в зоне большого пальца внизу-справа;
   - один и тот же компонент на всех экранах с хромом (C6f).
   B7: анимация одноразовая ≤0.3с (нажатие — scale, transition --t-short).
   ----------------------------------------------------------------------------- */
/* .qranchor — единый дом в паттерне quick-relief ниже (якорь → переход на
   полноэкранный «Сейчас тяжело»); дубль-якорь здесь убран (значения идентичны) */


/* -----------------------------------------------------------------------------
   5. tabs — вкладки кабинета Куратора (десктоп, подчёркивание, не капсулы)
   Десктоп-компонент кабинета: переключение разделов горизонтальным рядом
   подчёркиваемых вкладок. Активная — тот же текст, отличие в цвете + нижняя
   риска-акцент (teal); вариант .tabs--curator — фиолетовая система кабинета.
   Канон-инварианты:
   - подчёркивание, НЕ капсулы; ровно один акцент на ряд.
   - КРАСНЫЙ в табах запрещён (C1a: красный — только Tier 1 safety).
   - точка-сигнал непрочитанного (.tab__dot) — СТАТИЧНАЯ (B7), не пульс.
   - тач-цель ≥44 по высоте (C7); фокус-кольцом outline.
   A11y-разметка: WAI-ARIA tabs — role="tablist"/"tab", aria-selected,
   roving-tabindex (активная tabindex=0, прочие −1). См. галерею.
   ----------------------------------------------------------------------------- */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line)}
.tab{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;                                /* C7: тач-цель */
  padding:9px 8px 11px;
  font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--muted);
  background:none;border:none;border-bottom:2px solid transparent;border-radius:0;
  cursor:pointer;margin-bottom:-1px;
  transition:color var(--t-micro) var(--ease-out),
             border-color var(--t-micro) var(--ease-out);
}
.tab.is-active{color:var(--ink);font-weight:700;border-bottom-color:var(--teal)}
.tab__count{font-size:11px;font-weight:700;color:var(--muted2);font-variant-numeric:tabular-nums}
.tab.is-active .tab__count{color:var(--teal-ink)}
.tab__dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none}
.tab:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tab:disabled{opacity:.45;cursor:not-allowed}
/* вариант кабинета Куратора — фиолетовая система (--curator / --curator-ink) */
.tabs--curator .tab.is-active{color:var(--curator-ink);border-bottom-color:var(--curator)}
.tabs--curator .tab.is-active .tab__count{color:var(--curator-ink)}
.tabs--curator .tab__dot{background:var(--curator)}
.tabs--curator .tab:focus-visible{box-shadow:0 0 0 4px var(--curator-tint)}  /* фиолетовое кольцо — вариант кабинета */


/* ===========================================================================
   COMPONENT GROUP · scale-data
   (источник-фрагмент: _frag-comp-scale-data.css)
   =========================================================================== */

/* =============================================================================
   Sonaura — Компоненты, группа «scale-data» (шкала самочувствия и индикаторы)
   Фрагмент дизайн-системы. Все значения — через токены из tokens.css (var(--*)).

   Источники (канон извлечён и переписан на токены):
     program/templates/today/index.html          — dot, scale/scalelab, pulse/pulsedone,
                                        sdot, schk, pchk, mk
     practice/step-close/index.html  — dot, scale/scalelab, rchk

   Инварианты гайда, удержанные в группе:
     B7  — анимация одноразовая ≤0.3 с (@keyframes tap = 0.2 с, не циклическая).
     C4  — точка-замер: кружок (не эмодзи/плашка) → подсказка при наведении →
           расцвет градиентом → гашение соседних (.scale.chosen) → свёртка
           в тихую строку (.pulsedone). Без графиков/чисел/истории.
     C1a — teal-tint галочка = «сделано» (schk/pchk/rchk/sdot — единый чек-диск).
     C7  — тап-цель ≥44×44: точка 30×30 + хитбокс ::after inset:-9px = 48×48.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. dot — точка шкалы (30×30 + хитбокс + одноразовая анимация нажатия)
   Канон: кружок-радио, не эмодзи и не плашка (C4). Хитбокс псевдоэлементом
   доводит цель до ≥44×44 (C7). При выборе — расцвет фирменным градиентом.
   --------------------------------------------------------------------------- */
.dot{
  position:relative;
  width:30px;height:30px;flex:none;
  border-radius:50%;
  background:var(--bg2);
  border:1.5px solid var(--line);
  cursor:pointer;padding:0;
  transition:transform var(--t-short) var(--ease-out),
             background var(--t-short) var(--ease-out),
             opacity var(--t-short) var(--ease-out),
             border-color var(--t-short) var(--ease-out);
}
/* хитбокс — доводит тап-цель до 48×48 (C7) */
.dot::after{content:'';position:absolute;inset:-9px;}
/* тап-отклик точки несёт .dot.on ниже (C4); hover на мобильных не используется
   (B7a · HOVER-01) — прототипы мобильные, указателя нет. */
/* выбрано — расцвет градиентом-якорем (C1) */
.dot.on{
  transform:scale(1.12);
  background:var(--grad);
  border-color:transparent;
  box-shadow:0 5px 14px rgba(43,180,198,.28); /* мягкий бирюзовый ореол выбора */
  animation:tap .2s var(--ease-out);          /* одноразовая, ≤0.3с (B7) */
}
/* одноразовая анимация нажатия (B7) — не циклическая */
@keyframes tap{0%{transform:scale(1)}45%{transform:scale(.94)}100%{transform:scale(1.12)}}

/* -----------------------------------------------------------------------------
   2. scale + scalelab — контейнер шкалы и подписи краёв
   .chosen — гашение невыбранных соседей (C4): тише и чуть мельче.
   --------------------------------------------------------------------------- */
.scale{display:flex;justify-content:space-between;align-items:center;}
/* после выбора — соседние точки гаснут (C4 «гашение соседних») */
.scale.chosen .dot:not(.on){opacity:.45;transform:scale(.96);}
/* подписи краёв шкалы — самый тихий текст */
.scalelab{
  display:flex;justify-content:space-between;
  margin-top:var(--sp-sm);
  font-size:var(--fs-micro);
  color:var(--muted2);
}
/* модификатор: 3-точечная шкала (onboarding/tfi · _template) — три подписи
   краёв/центра ровно по ширине. Старое имя .three из боевой разметки;
   канон-источник: onboarding/tfi (.scalelab.three). Совпадает с базовым
   space-between, фиксируем
   явным правилом, чтобы имя было застилено системой, а не зависело от экрана. */
.scalelab.three{justify-content:space-between}

/* -----------------------------------------------------------------------------
   3. pulse — карточка пульса «Как ты сегодня?» (источник: today)
   .answered — раскрытие реплики-отклика Sona (doseHint) после выбора.
   Здесь — каркас карточки и отклика; внутренние .scale/.dot — из блоков 1–2.
   --------------------------------------------------------------------------- */
.pulse{
  /* V3 (2026-07-05) → chromeless-merge (2026-07-08, реш. DK «Делай его основным»,
     DESIGN.md Decisions Log): пульс сам НЕ несёт фон/паддинг — на «Сегодня»
     заливку и радиус держит родитель .presence, единая teal-tint поверхность
     вместе с .coach/.bubble (группа sona-voice, секция PRESENCE ниже). Пульс
     участвует в общей плите, а не «плавает без плиты рядом с пузырём без плиты»
     (прежняя формулировка). Вне .presence (др. потребитель/витрина-компонент)
     пульс остаётся плоским по тому же принципу — сам никогда не рисует карточку.
     Контейнер несёт только состояние .answered (раскрытие doseHint). Вопрос
     «Как ты сейчас?» звучит из реплики Sona (последняя мысль зачина), поэтому
     жирный h3 в продукте скрыт — виден лишь в review-варианте ?zachin=under
     (правило h3 ниже сохранено для него и legacy-партиалов). */
  background:none;
  padding:0;
}
/* h3-вопрос пульса — только review-вариант (?zachin=under) и legacy-партиалы витрины;
   в едином блоке присутствия (OVER) он скрыт — вопрос несёт реплика Sona (C3/T1). */
.pulse h3{font-weight:700;font-size:var(--fs-body);margin-bottom:14px;}
/* doseHint — реплика-отклик Sona, зависит от выбранной точки (свёрнута по умолч.) */
.doseHint{
  display:flex;gap:9px;align-items:flex-start;
  margin-top:12px;opacity:0;max-height:0;overflow:hidden;
  transition:opacity var(--t-short) var(--ease-out),
             max-height var(--t-medium) var(--ease-out);
}
.pulse.answered .doseHint{opacity:1;max-height:96px;margin-top:14px;}
/* мини-аватар «S» в отклике (.doseHint .sav) определён в группе аватаров «1b» */
.doseHint .stext{
  flex:1;min-width:0;font-size:var(--fs-meta-sm);line-height:1.45;
  color:var(--teal-ink);font-weight:500;
}

/* -----------------------------------------------------------------------------
   4. pulsedone — тихая свёртка пульса после ответа (источник: today)
   C4 «свёртка в тихую строку-отметку»; B3a тихое завершение.
   --------------------------------------------------------------------------- */
.pulsedone{
  display:flex;align-items:center;gap:var(--sp-sm);
  background:var(--bg2);
  /* V3: рамка снята — тихая заливка bg2 держит строку (синхрон с program/templates/today) */
  border-radius:var(--r-nested-lg);
  padding:14px var(--sp-md);
  color:var(--muted);font-size:var(--fs-meta);
  cursor:pointer;
}

/* -----------------------------------------------------------------------------
   4b. relief — блок-вопрос замера «Насколько удалось расслабиться?»
   Источник: practice/step-close/index.html (.relief, V3-вид).
   Плоский V3-извод: НЕ карточка-плита — прозрачный фон, без рамки и тени;
   внутри — та же .scale/.dot/.scalelab из блоков 1–2 (C4: шкала-точки, без
   предвыбора, без графиков/чисел). Иерархию держат воздух и заголовок, не
   рамка (V3-минимализм). Паддинг/раскладка сохранены.
   --------------------------------------------------------------------------- */
.relief{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:15px var(--sp-md);
}
.relief h3{font-weight:700;font-size:var(--fs-body);margin-bottom:14px;}

/* -----------------------------------------------------------------------------
   5. Чек-индикаторы «сделано» — единый teal-tint чек-диск (C1a)
   Дедуплицировано: pchk (пульс), schk (шаг), rchk (маршрутизация) —
   ОДИН компонент .chk, размеры через модификаторы. sdot — точка-маркер (не чек).

   Базовый чек-диск: бирюзовый тинт, галочка teal-ink.
   --------------------------------------------------------------------------- */
.chk{
  width:22px;height:22px;flex:none;border-radius:50%;
  background:var(--teal-tint);display:grid;place-items:center;
}
.chk svg{
  --icon-px:12;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);
  stroke:var(--teal-ink);stroke-width:calc(var(--icon-eff-xs)*var(--icon-vb)/var(--icon-px));fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
/* модификатор размера: маршрутизация — мельче (18×18, галочка 11) */
.chk--sm{width:18px;height:18px;}
.chk--sm svg{--icon-px:11;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);stroke-width:calc(var(--icon-eff-xs)*var(--icon-vb)/var(--icon-px))}

/* Алиасы канона (сохранены имена из исходных экранов → единый компонент) */
.pchk,                       /* pulsedone: «самочувствие отмечено» (today)   */
.step .schk{                 /* блок-шаг: «шаг пройден» (today)               */
  width:22px;height:22px;flex:none;border-radius:50%;
  background:var(--teal-tint);display:grid;place-items:center;
}
.pchk svg,
.step .schk svg{
  --icon-px:12;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);
  stroke:var(--teal-ink);stroke-width:calc(var(--icon-eff-xs)*var(--icon-vb)/var(--icon-px));fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.routed .rchk{               /* строка-факт маршрутизации (day-close) — мельче */
  width:18px;height:18px;flex:none;border-radius:50%;
  background:var(--teal-tint);display:grid;place-items:center;
}
.routed .rchk svg{
  --icon-px:11;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);
  stroke:var(--teal-ink);stroke-width:calc(var(--icon-eff-xs)*var(--icon-vb)/var(--icon-px));fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}

/* -----------------------------------------------------------------------------
   6. sdot — тихая точка-маркер в плашке «сегодня короче» (источник: today)
   Декоративная slate-точка (не чек, не интерактив) — самый тихий цвет.
   --------------------------------------------------------------------------- */
.shortnote .sdot{
  width:6px;height:6px;flex:none;border-radius:50%;
  background:var(--muted2);
}

/* -----------------------------------------------------------------------------
   7. mk — маркер дня в недельной полосе (источник: today)
   B3b «прогресс = только статичная позиция»: полоска недели, один индикатор.
   Состояния: default (контур), .active (залит teal), .today (белый на градиенте).
   --------------------------------------------------------------------------- */
.mk{
  width:8px;height:8px;border-radius:50%;
  background:transparent;border:1.5px solid var(--line);
}
.wd.active .mk{background:var(--teal);border-color:var(--teal);}
.wd.today .mk{width:8px;height:8px;background:#fff;border:none;box-shadow:none;}


/* ===========================================================================
   COMPONENT GROUP · sona-voice
   (источник-фрагмент: _frag-comp-sona-voice.css)
   =========================================================================== */

/* =============================================================================
   Sonaura — Группа компонентов «sona-voice» (голос Sona)
   Фрагмент дизайн-системы. Всё на токенах из tokens.css — без хардкода там,
   где есть токен.

   Источники канона:
     program/templates/today/index.html           — coach (зачин), bubble, .av/.sav (аватар-S),
                                         doseHint, presence (chromeless-merge, реш. DK 2026-07-08)
     practice/sound-therapy/index.html — guardnote, .av (аватар-S)

   Инварианты гайда, удерживаемые здесь:
     C2  Блок-зачин Sona — только «Сегодня»; иконка = аватар-«S» (буква S в
         градиент-кружке), не фото; строка «Sona · твой проводник» (teal-ink);
         пузырь-приветствие — teal-tint, НЕ тёмный.
     C6a Аватар-«S» — единый канон-компонент, одинаковый на всех экранах.
     C1c teal зарезервирован за ГРАДИЕНТОМ-якорём; аватар-S несёт фирменный
         градиент как контакт «Sona», это санкционировано (голос продукта).
     B7  Анимация только одноразовая, ≤0.3 с — раскрытие doseHint на --t-medium
         (340 мс) одноразовое, без циклов.
     C3  Два регистра голоса Sona: T1 — приветствие (bubble в coach),
         T2 — отклик на пульс (doseHint).
     C7  Аватар декоративен → aria-hidden; смысловой текст --teal-ink (контраст).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. АВАТАР-«S» (.savatar) — единый компонент + размерные модификаторы
   Дедуплицировано из: .coach .av (38) · .guardnote .av (30) · .doseHint .sav (22)
   · .whybody .sav (20). Один глиф «S» в градиент-кружке, мягкая тень.
   Размер и тень масштабируются модификатором --sav-* (см. варианты ниже).
   -------------------------------------------------------------------------- */
.savatar{
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--grad);
  color:#fff;
  font-weight:700;
  /* размерные значения берутся из переменных-модификаторов */
  width:var(--sav-size, 38px);
  height:var(--sav-size, 38px);
  font-size:var(--sav-font, var(--fs-h3-sm));
  box-shadow:var(--sav-shadow, 0 5px 14px rgba(43,180,198,.35));
}
/* варианты размера — задают только переменные, разметка одна */
.savatar.is-lg{   /* зачин Sona (coach) — 38px */
  --sav-size:38px; --sav-font:var(--fs-h3-sm);
  --sav-shadow:0 5px 14px rgba(43,180,198,.35);
}
.savatar.is-md{   /* строка проводника (guardnote) — 30px */
  --sav-size:30px; --sav-font:var(--fs-meta-sm);
  --sav-shadow:0 4px 12px rgba(43,180,198,.30);
}
.savatar.is-sm{   /* Sona-отклик (doseHint) — 22px */
  --sav-size:22px; --sav-font:var(--fs-label-sm);
  --sav-shadow:0 3px 9px rgba(43,180,198,.32);
}
.savatar.is-xs{   /* инлайн «Зачем шаг» (whybody) — 20px, без тени */
  --sav-size:20px; --sav-font:var(--fs-micro);
  --sav-shadow:none;
}

/* -----------------------------------------------------------------------------
   1b. АВАТАР-«S» — реальная разметка .av / .sav с контекст-сайзингом.
   На 33 экранах используется не .savatar.is-*, а .av/.sav внутри контейнера.
   Эти правила покрывают боевую разметку системно (иначе аватар без размера:
   onb-tfi <svg class="av"> раздувался до intrinsic, sound-therapy давал
   голую «S», today-done — прозрачный кружок). Базовое правило + контекст-
   размеры воспроизводят канон из program/templates/today, practice/sound-therapy, daily/done.
   -------------------------------------------------------------------------- */
.av, .sav{
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--grad);
  color:#fff;
  font-weight:700;
  width:30px;height:30px;                 /* база — контекст переопределяет ниже */
  font-size:var(--fs-meta-sm);
  box-shadow:0 4px 12px rgba(43,180,198,.30);
  overflow:hidden;                         /* SVG-аватар (onb-tfi) обрезается по кругу */
}
.coach .av{   /* зачин Sona (Today) — 38px */
  width:38px;height:38px;
  font-size:var(--fs-h3-sm);
  box-shadow:0 5px 14px rgba(43,180,198,.35);
}
.guardnote .av{   /* строка-присутствие проводника — 30px */
  width:30px;height:30px;
  font-size:13px;
  box-shadow:0 4px 12px rgba(43,180,198,.30);
}
.doseHint .sav{   /* Sona-отклик на пульс — 22px */
  width:22px;height:22px;
  font-size:var(--fs-label-sm);
  margin-top:1px;
  box-shadow:0 3px 9px rgba(43,180,198,.32);
}
.whybody .sav{   /* инлайн «Зачем шаг» — 20px, без тени */
  width:20px;height:20px;
  font-size:var(--fs-micro);
  margin-top:1px;
  box-shadow:none;
}
/* АЛИАС: Sona-отклик на TFI-замере (onb-tfi) — мини-аватар .dav (инлайн-SVG «S»
   в градиент-кружке) + абзац .dtx. Боевая разметка несёт ИСХОДНЫЕ имена dav/dtx
   вместо sav/stext; .dav наследует базовый аватар-«S» (.av,.sav: grad-кружок +
   overflow:hidden обрезает SVG по кругу), здесь — только размер/посадка 22px,
   .dtx — teal-строка отклика. Канон-источник: onboarding/tfi (.doseHint .dav/.dtx). */
.doseHint .dav{
  flex:none;display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--grad);color:#fff;font-weight:700;
  font-size:var(--fs-label-sm);
  margin-top:1px;overflow:hidden;          /* SVG-аватар обрезается по кругу */
  box-shadow:0 3px 9px rgba(43,180,198,.32);
}
.doseHint .dtx{
  flex:1;min-width:0;
  font-size:var(--fs-meta-sm);line-height:1.42;color:var(--teal-ink);
}

/* -----------------------------------------------------------------------------
   2. COACH — блок-зачин Sona (ТОЛЬКО «Сегодня», инвариант C2)
   аватар-S (.is-lg) + строка «Sona · твой проводник» + позиция + bubble.
   -------------------------------------------------------------------------- */
.coach{
  display:flex;
  gap:11px;
  align-items:flex-start;
  margin:var(--sp-md) 0 22px;
}
.coach .col{flex:1;min-width:0}
.coach .who{
  font-size:var(--fs-label);
  font-weight:700;
  color:var(--teal-ink);          /* дословная строка teal-ink (C2) */
  margin:3px 0 3px 2px;
}
.coach .sona-pos{                  /* ориентир: неделя · тема · день (A2-исключение) */
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted2);
  margin:0 0 var(--sp-sm) 2px;
}

/* -----------------------------------------------------------------------------
   3. BUBBLE — пузырь-приветствие Sona (регистр T1, инвариант C2/C3)
   teal-tint, НЕ тёмный (тёмный пузырь коуча отменён DK).
   -------------------------------------------------------------------------- */
.bubble{
  background:var(--teal-tint);
  /* V3: декор-граница и тень сняты — фон teal-tint + воздух держат пузырь (синхрон с program/templates/today) */
  border-radius:5px var(--r-nested) var(--r-nested) var(--r-nested);
  padding:13px 15px;
  font-size:14.5px;
  line-height:1.46;
  color:var(--ink);
}
.bubble b{color:var(--teal-ink);font-weight:700}

/* -----------------------------------------------------------------------------
   3b. bridge — тёплая фраза-мост Sona (строка-проводник между этапами)
   Одна мысль голосом Sona ИНЛАЙН на чистом фоне (без teal-подложки-плашки).
   Снимает тревогу перехода («дальше — программа», «это обратимо»). Аватар-«S» —
   канон .savatar (эта же группа sona-voice). Подложку сняли (рой gates + реш. DK,
   design-wide): бирюза точечно, не лишняя заполненная зона; цвет несёт teal-ink текста.
   Источник: onboarding/expectations|gates|save (.bridge).
   --------------------------------------------------------------------------- */
.bridge{
  display:flex; gap:11px; align-items:center;
  margin-top:var(--sp-lg);               /* 24px отбивка; экран может усилить до 40px */
}
.bridge .savatar{ flex:none; }
.bridge p{ font-size:var(--fs-meta); line-height:1.45; color:var(--teal-ink); }
.bridge p b{ font-weight:700; }

/* -----------------------------------------------------------------------------
   4. doseHint — реплика Sona-отклика на пульс (регистр T2, инвариант C3/C4)
   мини-аватар-S (.is-sm) + teal-строка; раскрытие одноразовое (B7).
   Текст «эффект ответа виден» — один из ≥2 каналов отклика (C4).
   -------------------------------------------------------------------------- */
.doseHint{
  display:flex;
  gap:9px;
  align-items:flex-start;
  margin-top:var(--sp-md);
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:opacity var(--t-short) var(--ease-out),
             max-height var(--t-medium) var(--ease-out);   /* ≤0.34 с, одноразово */
}
.doseHint .stext{
  flex:1;
  min-width:0;
  font-size:var(--fs-meta-sm);
  line-height:1.45;
  color:var(--teal-ink);
  font-weight:500;
}
/* раскрытое состояние — управляется состоянием контейнера-пульса */
.pulse.answered .doseHint{opacity:1;max-height:96px;margin-top:14px}

/* -----------------------------------------------------------------------------
   4b. PRESENCE — единая поверхность блока присутствия (COACH ⇄ PULSE слиты)
   Chromeless-merge (реш. DK 2026-07-08 — «Да, принимаю вариант Chromeless.
   Делай его основным», DESIGN.md Decisions Log; заменяет R25 pulseinbubble-
   эксперимент v1/v2, полностью superseded). Рой-валидация 5 концепций слияния
   зачина Sona и пульса-чек-ина (chips/grouped/chromeless/thread/offer); арбитр
   рекомендовал chips как более безопасный вариант, DK осознанно выбрал
   chromeless. Один плоский teal-tint контейнер несёт ВЕСЬ жизненный цикл
   присутствия Sona на «Сегодня»: зачин (.coach/.bubble, видно всегда) → шкала-
   пульс (.pulse, до ответа) → реакция такта-2 (.doseHint, после ответа) →
   тихая строка-отметка (.pulsedone, свёрнуто). Между стадиями меняется не
   контейнер (он один и тот же .presence), а то, что показано под сообщением —
   шва между «сообщением» и «пульсом» физически нет, сливать нечего.
   Источник: program/templates/today/index.html (пока единственный потребитель;
   компонент общесистемный — переиспользуем при появлении второго).
   Трейд-офф (осознанно принят DK при утверждении направления, не тихая
   потеря): радиус r-nested-lg СИММЕТРИЧЕН на всех 4 углах — асимметричный
   «хвост»-радиус пузыря-приветствия (речевой аффорданс «это говорит Sona»)
   здесь снят ради цельности поверхности блока; асимметрия визуально маркировала
   пузырь отдельной формой и спорила с круглыми точками-шкалой рядом.
   -------------------------------------------------------------------------- */
.presence{
  background:var(--teal-tint);
  border-radius:var(--r-nested-lg);
  padding:18px;
  margin:14px 0 22px;
}
.presence .coach{margin:0}
/* канон .coach{display:flex} перекрыл бы [hidden] — явный оверрайд скрытия
   (вариант ?zachin=under прячет строку имя+сообщение, пульс остаётся) */
.presence .coach[hidden]{display:none}
.presence .coach[hidden] + .pulse{margin-top:0}
.presence .bubble{background:none;border-radius:0;padding:0;font-size:15px;line-height:1.5}

.presence .pulse,
.presence .pulsedone{margin:16px 0 0}
.presence .pulse[hidden],
.presence .pulsedone[hidden]{display:none}

/* точки шкалы — центрированная группа (шаг центр-в-центр 58px, хитбокс 48×48
   < 58 → без мис-тапов). Заливка невыбранной точки поднята до белой: canon-
   заливка bg2 почти сливается по светлоте с teal-tint родителя — тап-цель
   теряла бы читаемый контур; белая «бусина» + бирюзовая линия-контур держат
   affordance точки собственным контуром, а не формой-контейнером, конкурирующей
   с .presence. */
.presence .scale{justify-content:center;gap:28px}
.presence .dot:not(.on){background:var(--surface);border-color:var(--teal-line)}
.presence .scale.chosen .dot:not(.on){opacity:.5;transform:scale(.96)}
.presence .scalelab{width:262px;margin:var(--sp-sm) auto 0}

.presence .doseHint{margin-top:14px}

/* свёрнутая строка-отметка — фон/радиус несёт только .presence (без card-in-
   card). Тонкий верхний контур + паддинг держат намёк «тут можно нажать»
   (role=button, тап переоткрывает пульс) без реанимации canon-пилюли bg2.
   pchk-галочка НЕ переопределена — остаётся canon teal-tint (инвариант C1a). */
.presence .pulsedone{
  background:none;border-radius:0;
  padding:12px 0 0;border-top:1px solid var(--teal-line);
  display:flex;align-items:center;gap:var(--sp-sm);
  color:var(--muted);font-size:var(--fs-meta);cursor:pointer;
}
.presence .dot:focus-visible,.presence .pulsedone:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* -----------------------------------------------------------------------------
   5. guardnote — тихая строка-присутствие проводника (анти-зависимость)
   на не-Today поверхностях (звукотерапия): аватар-S (.is-md) + teal-абзац.
   teal-tint-плашка; не градиент-заливка, спокойный регистр.
   -------------------------------------------------------------------------- */
.guardnote{
  margin-top:var(--sp-lg);
  display:flex;
  gap:11px;
  align-items:flex-start;
  background:var(--teal-tint);
  border-radius:var(--r-nested);
  padding:14px 16px;
}
.guardnote p{
  font-size:var(--fs-meta-sm);
  line-height:1.5;
  color:var(--teal-ink);
}


/* ===========================================================================
   COMPONENT GROUP · step-card
   (источник-фрагмент: _frag-comp-step-card.css)
   =========================================================================== */

/* =============================================================================
   Sonaura — Component fragment: ГРУППА «step-card»
   Шаги дневной ленты, активная карточка-шаг, узлы таймлайна, карточки-намерения,
   тихие строки-факты и терминальная галочка. Всё на токенах из tokens.css.

   Источники (канон извлечён и переписан на var(--*)):
     program/templates/today/index.html           — step / sico / schk / fnode / maincard / closestep
     practice/sound-therapy/index.html — jcard (карточка-намерение)
     practice/step-close/index.html   — check (терминальная галочка) / routed (строка-факт)
     onboarding/result/index.html     — levelcard (словесный уровень без балла)

   ПРИНЦИП: ни одного хардкод-цвета/радиуса/тени/тайминга там, где есть токен.
   Дедупликация: единый мотив-слот .sico с модификаторами размера (--s34/--s40/--s46);
   единый чип-галочка .schk с модификатором размера. Канон-инварианты сохранены:
     • активный шаг = РОВНО ОДИН яркий градиент-блок (B2/C1b);
     • «сделано» = teal-tint галочка, не залитый бейдж (C1a);
     • тихие шаги = моно-slate мотив в bg2-плашке, НЕ бирюза (A1b);
     • переходы одноразовые ≤0.3с, без циклической анимации (B7);
     • тихое завершение: check — спокойная точка, без салюта (B3a/B4).
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. sico — мини-мотив (единый слот-иконка)
   Дедуплицирован из .step .sico (34), .levelcard .lico (40), .jcard .sico (46).
   База — тихий моно-slate мотив в bg2-плашке. Размер — модификатором.
   Тинтовый вариант (--tint) — teal-tint слот с teal-ink глифом (levelcard, schk-семья).
   ----------------------------------------------------------------------------- */
.sico{
  flex:none;
  display:grid;place-items:center;
  width:34px;height:34px;
  border-radius:var(--r-sm);
  background:var(--bg2);
}
.sico svg{
  --icon-vb:34;--icon-px:28;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);display:block;
  stroke:var(--muted2);stroke-width:calc(var(--icon-eff)*var(--icon-vb)/var(--icon-px));fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
/* размерные модификаторы */
.sico--s40{width:40px;height:40px;border-radius:12px}
.sico--s40 svg{--icon-vb:24;--icon-px:22;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px)}  /* здесь глифы обычной сетки 24, не мотивы */
.sico--s46{width:46px;height:46px;border-radius:var(--r-btn)}
.sico--s46 svg{--icon-vb:36;--icon-px:30;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px)}  /* глифы звукотерапии — сетка 36 */
/* тинтовый вариант (спокойная единая teal-tint заливка — C1d) */
.sico--tint{background:var(--teal-tint)}
.sico--tint svg{stroke:var(--teal-ink)}


/* -----------------------------------------------------------------------------
   2. check — терминальная галочка (тихое завершение)
   Источник: practice-step-close / onb-bridge — всегда внутри .done-head.
   B3a: спокойная точка, не салют. Размер ≈44px = тап-минимум как
   зрительный якорь (C7). ЗАСКОУПЛЕНО под .done-head, чтобы НЕ клоберить
   .opt.check (квадратный чекбокс-выбор онбординга, см. группу выше).
   ----------------------------------------------------------------------------- */
.done-head .check{
  width:44px;height:44px;
  border-radius:50%;
  background:var(--grad);
  display:grid;place-items:center;
  margin:0 auto var(--sp-md);
  color:#fff;
  box-shadow:var(--sh-cta);
}
/* ИСКЛЮЧЕНИЕ из контракта иконок (ADR-6): .done-head .check — не иконка, а
   отметка-акцент (белая галочка на градиентном диске). Вес намеренный: под
   канон-весом иконок она худеет и теряет вес «сделано» — отметка крупная и
   живёт по типографской логике, не по иконочной. */
.done-head .check svg{
  width:22px;height:22px;
  stroke:#fff;stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}


/* -----------------------------------------------------------------------------
   3. node-card (.fnode) — узел вертикального таймлайна шага
   Источник: today .fnode. Состояния: будущий (база) / done (градиент) / now (фокус-кольцо).
   Лежит на нити .flow::before; единственный «now» несёт teal-tint фокус-кольцо.
   ----------------------------------------------------------------------------- */
/* .fnode — единый дом в паттерне day-flow ниже; дубль здесь убран
   (значения идентичны, вычисленный стиль не менялся) */


/* -----------------------------------------------------------------------------
   4. step — тихая строка шага (пассивное состояние блока-шага)
   Источник: today .step. Моно-slate мотив + текст + чип-галочка.
   .done — пройденный (гасим тень/текст). Активный вид — отдельный .maincard (см. 5).
   ----------------------------------------------------------------------------- */
/* .step — единое определение ниже (см. step-card §, бывш. дубль здесь убран:
   был полностью перекрыт каскадом, вычисленный стиль не менялся) */

/* schk — чип-галочка «сделано» (teal-tint, C1a). Дедуплицирован: один компонент,
   размер модификатором (.schk = 22, .schk--sm = 18 для строки-факта routed). */
.schk{
  width:22px;height:22px;flex:none;
  border-radius:50%;
  background:var(--teal-tint);
  display:grid;place-items:center;
}
.schk svg{
  --icon-px:12;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);
  stroke:var(--teal-ink);stroke-width:calc(var(--icon-eff-xs)*var(--icon-vb)/var(--icon-px));fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.schk--sm{width:18px;height:18px}
.schk--sm svg{--icon-px:11;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);stroke-width:calc(var(--icon-eff-xs)*var(--icon-vb)/var(--icon-px))}


/* -----------------------------------------------------------------------------
   5. maincard — активный шаг (ЕДИНСТВЕННЫЙ яркий блок зоны, B2/C1b)
   Источник: today .maincard + .hero(ссылка)/.tag/.playbig/.heromotif/.cardbody/.start.
   ----------------------------------------------------------------------------- */
/* .maincard (+ .hero/.tag/.playbig/.heromotif/.cardbody и связь строка↔карточка) — единый дом
   в паттерне day-flow ниже; дубль здесь убран (значения идентичны). Бирюзовая
   CTA «Начать» внутри карточки — .maincard .start там же; общая bare-кнопка
   .start определена в группе actions выше. */


/* -----------------------------------------------------------------------------
   6. closestep — строка-вход «Оглянуться на день» (тихая, не яркая)
   Источник: today .closestep. Делит .sico со step. Терминальный язык привязан
   к практике/дню как тихая ссылка, не CTA (B3a).
   ----------------------------------------------------------------------------- */
/* .closestep — единое определение ниже (бывш. дубль здесь убран:
   был полностью перекрыт каскадом, вычисленный стиль не менялся) */


/* -----------------------------------------------------------------------------
   7. jcard — карточка-намерение (тихий slate, ни одна не «активна»)
   Источник: sound-therapy .jcard. sico размера 46 (.sico--s46).
   ----------------------------------------------------------------------------- */
.jcard{
  display:flex;align-items:center;gap:14px;
  width:100%;text-align:left;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--sp-md);
  box-shadow:var(--sh-card);
  cursor:pointer;text-decoration:none;
  transition:border-color var(--t-short) var(--ease-out),box-shadow var(--t-short) var(--ease-out);
}
.jcard + .jcard{margin-top:var(--sp-md)}
.jcard:active{background:var(--bg2)}
.jcard .col{flex:1;min-width:0}
.jcard .col b{display:block;font-size:var(--fs-h3-sm);font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.jcard .col span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.35}
.jcard .chev{flex:none;color:var(--muted2);font-size:20px}


/* -----------------------------------------------------------------------------
   8. levelcard — словесный уровень без балла (спокойная нейтральная плашка)
   Источник: onb-result .levelcard. sico-tint размера 40 (.sico--s40.sico--tint).
   B4: без числа-балла, не дашборд.
   ----------------------------------------------------------------------------- */
.levelcard{
  display:flex;align-items:center;gap:13px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-nested-lg);
  padding:15px 16px;
  box-shadow:var(--sh-card);
}
.levelcard .lt{flex:1;min-width:0}
.levelcard .lt .lk{font-size:var(--fs-label-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2)}
.levelcard .lt b{display:block;font-size:var(--fs-h3-sm);font-weight:700;color:var(--ink);margin-top:3px;line-height:1.2}
.levelcard .lt span{display:block;font-size:var(--fs-meta-sm);color:var(--muted);margin-top:3px;line-height:1.4}


/* -----------------------------------------------------------------------------
   9. routed — тихая строка-факт маршрутизации (не карточка-салют, B3a/B4)
   Источник: practice-step-close .routed. Использует .schk--sm.
   ----------------------------------------------------------------------------- */
.routed{
  display:flex;align-items:center;gap:9px;
  margin-top:var(--sp-lg);
  font-size:var(--fs-meta-sm);color:var(--muted);font-weight:500;
}
.routed b{color:var(--ink);font-weight:600}


/* ===========================================================================
   COMPONENT GROUP · safety
   Бейдж и баннер безопасности (Tier 1) — единственное место красного в системе.
   =========================================================================== */

/* =============================================================================
   Sonaura — Группа КОМПОНЕНТОВ «safety» (Tier 1 безопасность / кризис)
   Зависит от tokens.css — все значения через var(--*).

   Канон-инвариант (DESIGN-GUIDE C1a / C5):
   · Красный (--safety и подпалитра --safety-tint/--safety-line/--safety-ink) —
     ТОЛЬКО на Tier 1 safety / кризис / медскрининг. Больше нигде красного нет
     (амбер-предупреждение --warn-* — это другой смысл и другой цвет, не сюда).
   · Тон формулировок — «сигнал к суждению специалиста, не автоматический
     вердикт»; компонент маркирует, что нужно внимание, но не ставит диагноз.
   Связь: экраны onb-safety / onb-crisis.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. sbadge — компактный бейдж безопасности (метка-флаг Tier 1)
   Маленькая красная плашка-пилюля с иконкой-предупреждением: помечает пункт,
   требующий внимания специалиста. Бледно-красный фон, красная граница и текст.
   --------------------------------------------------------------------------- */
.sbadge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--safety-tint);
  color:var(--safety);
  border:1px solid var(--safety-line);
  font-size:12px;font-weight:700;
  padding:5px 10px;
  border-radius:var(--r-chip);
}
.sbadge svg{display:block}

/* ---------------------------------------------------------------------------
   2. sbanner — баннер безопасности (Tier 1): иконка + заголовок + пояснение
   Бледно-красная плашка с красной верхней риской-акцентом. Сообщает, что
   ситуация требует внимания специалиста — это сигнал к суждению, не вердикт.
   --------------------------------------------------------------------------- */
.sbanner{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--safety-tint);
  border:1px solid var(--safety-line);
  border-top:3px solid var(--safety);
  border-radius:0 0 var(--r-nested) var(--r-nested);
  padding:16px 18px;
  color:var(--safety-ink);
}
.sbanner__ic{
  width:30px;height:30px;flex:none;border-radius:8px;
  background:var(--safety);color:#fff;
  display:grid;place-items:center;
  font-size:17px;font-weight:700;margin-top:1px;
}
.sbanner__t b{
  display:block;font-size:15px;font-weight:700;
  color:var(--safety-ink);letter-spacing:-.01em;
}
.sbanner__t span{
  display:block;font-size:13.5px;line-height:1.5;
  color:var(--safety-ink);margin-top:4px;
}

/* ---------------------------------------------------------------------------
   3. ДВУХТИРОВАЯ МОДЕЛЬ SAFETY (онбординг · экран onb-safety) — канон
   Решение DK (эта сессия): два визуальных тира безопасности НЕ конкурируют
   красным. Верхний тир (острые нейросимптомы) — НЕЙТРАЛЬНЫЙ slate-инфоблок;
   красный зарезервирован за РЕАКТИВНОЙ плашкой флагов (появляется по «Да»).
   Два красных рядом конкурируют — реактивную можно не заметить.

   3a. .emergency — нейтральный нейро-инфоблок (верхний тир, всегда видим).
   Вес держим ФОРМОЙ (тёмный ink-рейл border-left + круглый слот-иконка),
   НЕ цветом. Без красного. Раньше был локален в onb-safety — поднят в канон.
   --------------------------------------------------------------------------- */
.emergency{display:flex;gap:13px;align-items:flex-start;margin-top:22px;
  background:var(--bg2);border:1px solid var(--line);
  border-left:4px solid var(--ink);border-radius:var(--r-nested);padding:15px 16px}
.emergency .ei{flex:none;width:46px;height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center}
.emergency .ei svg{--icon-px:23;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);stroke:var(--ink);stroke-width:calc(var(--icon-eff)*var(--icon-vb)/var(--icon-px));fill:none;stroke-linecap:round;stroke-linejoin:round}
.emergency .et{flex:1;min-width:0}
.emergency .et h3{font-size:var(--fs-h3-sm);font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:-.01em}
.emergency .et ul{list-style:none;margin:9px 0 0;padding:0}
.emergency .et li{position:relative;font-size:var(--fs-meta);color:var(--ink);line-height:1.5;padding-left:15px;margin-top:3px}
.emergency .et li::before{content:'—';position:absolute;left:0;color:var(--muted)}
.emergency .et .act{display:block;font-size:var(--fs-meta);color:var(--ink);font-weight:700;line-height:1.45;margin-top:11px}

/* ---------------------------------------------------------------------------
   3b. .safety / .safety-wrap — РЕАКТИВНАЯ красная плашка флагов (нижний тир).
   Единственное место красного на экране. Появляется СРАЗУ при «Да» (триггер) —
   обёртка-тоггл .safety-wrap.show. Спокойная, но чёткая: «сперва к врачу».
   Это плашка-в-потоке (отлична от статичного .sbanner с верхней риской —
   тот баннер-сообщение, эта плашка реактивна и тоггл-управляема). Поднята
   в канон из onb-safety; те же safety-токены, что .sbanner.
   --------------------------------------------------------------------------- */
.safety{display:flex;gap:12px;align-items:flex-start;background:var(--safety-tint);border:1px solid var(--safety-line);border-radius:var(--r-nested);padding:15px;margin-top:20px}
.safety .ico{width:24px;height:24px;flex:none;margin-top:1px}
.safety .ico svg{--icon-px:24;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);stroke:var(--safety);stroke-width:calc(var(--icon-eff)*var(--icon-vb)/var(--icon-px));fill:none;stroke-linecap:round;stroke-linejoin:round}
.safety .st{flex:1;min-width:0}
.safety .st b{display:block;font-size:15px;font-weight:700;color:var(--safety-ink-strong);line-height:1.3}
.safety .st p{font-size:13.5px;color:var(--safety-ink);line-height:1.45;margin-top:5px}
.safety-wrap{display:none}
.safety-wrap.show{display:block}

/* ---------------------------------------------------------------------------
   3c. .crisis-help — тёмный нейтральный кризис-ресурс (SOS-экран)
   Поднят из inline `.xc-*` экрана program/templates/crisis в канон (реш. DK
   2026-07-13, DS-долг: экран реализовывал грамматику .emergency на тёмных
   токенах прямо в своём <style>). НЕЙТРАЛЬНЫЙ (не красный, DESIGN-GUIDE C1f /
   C6h): вес держит ФОРМА — тёмный ink-рейл (border-left --dark-text) + круглый
   слот-иконка, как у .emergency, но на --dark-* токенах (тёмная иммерсивная
   поверхность SOS). Без teal (зарезервирован за якорем/чипом-запуском, C1b) и
   без красного (Tier-1 у .safety). ДВА КО-РАВНЫХ канала — звонок + текст, оба
   ≥44px (приложение про слух: голос доступен не всем), глифы телефон/письмо.
   Блок ВТОРИЧНЫЙ (тайтлы --fs-meta — тише набора и опор), тихий хвост под
   founder-сидом. Кнопка-плейсхолдер (.is-placeholder) НЕактивна, пока реальный
   контакт не подключён (US 988 live — жёсткий гейт Лёвы). Композиция SOS-экрана
   и роль блока — DESIGN-GUIDE C6h.
   --------------------------------------------------------------------------- */
/* тихий хвост под founder-сидом — natural-flow, БЕЗ margin-top:auto; воздух сверху (B8) */
.crisis-help{padding-top:34px}
/* одна тихая нейтральная строка-фрейм над ресурсом (--dark-text2 — регистр тепла,
   как founder-строка): гуманная строка отделена от служебных сносок ниже. */
.crisis-help-lead{margin:0 2px;font-size:var(--fs-meta-sm);line-height:1.45;color:var(--dark-text2)}
/* ресурс-блок: грамматика .emergency сведена к несущим-форму элементам — ink-рейл
   (border-left) + круглый слот-иконка, БЕЗ заливки и полнопериметровой рамки (на
   SOS-экране опоры над блоком chromeless; периметр инвертировал бы субординацию).
   Рейл --dark-text = самый сильный ink на тёмном: «присутствие держит ФОРМА». */
.crisis-help-list{margin-top:13px;background:none;
  border-left:4px solid var(--dark-text);border-radius:var(--r-nested)}
.crisis-help-row{display:flex;align-items:center;gap:13px;padding:13px 14px}
.crisis-help-row+.crisis-help-row{border-top:1px solid var(--dark-divider)}
/* слот-диск 36px/19px — диск-лестница «набор 28 < опоры 36 = кризис 36»:
   два ко-равных диска не перевешивают опоры (тише опор). */
.crisis-help-ico{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--dark-surface-2)}
.crisis-help-ico svg{--icon-px:19;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);display:block;fill:none;stroke:var(--dark-text2);stroke-width:calc(var(--icon-eff)*var(--icon-vb)/var(--icon-px));stroke-linecap:round;stroke-linejoin:round}
.crisis-help-txt{flex:1;min-width:0}
/* тирожная иерархия: тайтл-действие (--fs-meta, --dark-text) над строкой-условием
   (--fs-meta-sm, --dark-muted) — вес несёт weight+color, размер тише опор. */
.crisis-help-txt b{display:block;font-size:var(--fs-meta);font-weight:600;letter-spacing:-.01em;color:var(--dark-text);line-height:1.3}
.crisis-help-txt span{display:block;margin-top:3px;font-size:var(--fs-meta-sm);line-height:1.4;color:var(--dark-muted)}
/* КО-РАВНЫЙ контрол ≥44px (C7). Плейсхолдер (.is-placeholder) — ghost-контур
   пунктиром: «ещё не подключено» ПРЯМО на контроле, не «живо-выглядящая мёртвая
   кнопка» (реальные tel:/sms: ждут Лёву). box-sizing:border-box (глоб.) — пунктир
   внутри, тап-цель остаётся 44px. */
.crisis-help-go{flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 16px;border-radius:var(--r-btn);
  font-family:var(--sans);font-size:var(--fs-meta);font-weight:600}
.crisis-help-go.is-placeholder{background:none;border:1px dashed var(--dark-border);color:var(--dark-muted);cursor:default}
/* сноска-честность + тихая демо-метка — обе тихие --dark-muted (служебная метка не
   громче честной сноски). */
.crisis-help-note{margin:14px 2px 0;font-size:var(--fs-label-sm);line-height:1.45;color:var(--dark-muted)}
.crisis-help-demo{margin:6px 2px 0;font-size:var(--fs-micro);line-height:1.4;color:var(--dark-muted)}


/* ===========================================================================
   COMPONENT GROUP · notes
   Нейтральные РЕАКТИВНЫЕ ноты онбординга (slate, НЕ красные): спокойная
   обратная связь по ответам. Появляются СРАЗУ при триггере (как реактивная
   красная плашка), но без мед-веса — это не safety. Единая конвенция тоггла:
   базовое состояние display:none, показ через класс .show. Глиф — нейтральный
   --muted (бирюза зарезервирована за CTA + активным сегментом, см. DESIGN-GUIDE
   C1/D5). Раньше .calmline/.softnote были локальны и ДРЕЙФОВАЛИ по экранам
   (safety: видна по умолчанию + .is-hidden + teal-ink; program-fit: .show +
   muted) — сведены в один канон.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. .calmline — тихая строка-успокоение (одна строка: глиф-галочка + текст).
   Положительный/спокойный сигнал «всё в порядке, идём дальше». Скрыта по
   умолчанию; показ через .show. На onb-safety рендерится со .show изначально
   (нет тревожного ответа) и гаснет при появлении красной плашки.
   --------------------------------------------------------------------------- */
.calmline{display:none;gap:9px;align-items:center;font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:18px;padding:0 2px}
.calmline.show{display:flex}
.calmline .lf{width:18px;height:18px;flex:none}
.calmline .lf svg{--icon-px:18;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);stroke:var(--muted);stroke-width:calc(var(--icon-eff)*var(--icon-vb)/var(--icon-px));fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------------------
   2. .softnote — нейтральная нота несовпадения (иконка + заголовок + строка).
   Мягкий серый сигнал «возможно, это не совсем твой случай» (onb-program-fit).
   НЕ блокирует переход, НЕ красная. Скрыта по умолчанию; показ через .show.
   --------------------------------------------------------------------------- */
.softnote{display:none;gap:11px;align-items:flex-start;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-nested);padding:13px 15px;margin-top:18px}
.softnote.show{display:flex}
.softnote .lf{width:20px;height:20px;flex:none;margin-top:1px}
.softnote .lf svg{--icon-px:20;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);stroke:var(--muted);stroke-width:calc(var(--icon-eff)*var(--icon-vb)/var(--icon-px));fill:none;stroke-linecap:round;stroke-linejoin:round}
.softnote .st b{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.32}
.softnote .st p{font-size:13px;color:var(--muted);line-height:1.45;margin-top:4px}


/* ===========================================================================
   COMPONENT GROUP · typography
   Заголовки экрана и подписи секций — общие типографические примитивы,
   которые раньше были scoped по экранам. Сведены на токены.
   =========================================================================== */

/* =============================================================================
   Sonaura — Группа КОМПОНЕНТОВ «typography»
   Зависит от tokens.css — все значения через var(--*).

   Источники (канон извлечён и переписан на токены):
     practice/sound-therapy/index.html — .pagetitle (H1 светлого экрана)
     practice/step-close/index.html   — .block-label (uppercase-подпись секции)
     program/templates/today/index.html           — .coach .sona-pos (uppercase-ориентир)
     onboarding/_template/index.html  — .onbdots .seclabel (uppercase-подпись)

   Дедупликация: три ранее scoped uppercase-подписи секций (.block-label,
   .coach .sona-pos, .onbdots .seclabel) сведены в один компонент
   .section-label + модификаторы. Старые имена оставлены как алиасы в экранах;
   новые экраны используют .section-label.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. pagetitle — заголовок-H1 светлого экрана
   Источник: practice/sound-therapy/index.html .pagetitle.
   Крупный slate-заголовок страницы (--fs-h1 / --ink), плотный трекинг.
   --------------------------------------------------------------------------- */
.pagetitle{
  font-size:var(--fs-h1);                /* 27px */
  font-weight:700;
  letter-spacing:-.025em;                /* плотный трекинг крупного заголовка */
  color:var(--ink);
  margin-top:14px;                       /* посадка под статусбар — нет токена */
  margin-bottom:22px;
}

/* -----------------------------------------------------------------------------
   1b. screen-anchor — V3-якорь экрана (умеренный H2-заголовок + ориентир-строка)
   Дедуплицировано из идентичных локальных якорей: .todayanchor (today,
   tfi-remeasure), .doneanchor (done), .proganchor (program), .weekanchor
   (week-transition), .jrnlanchor (calendar), .hubanchor (hub), .skillsanchor
   (skills), .screenanchor (settings — через модификатор --tight по margin).
   Заголовок — H2 (НЕ display 30px); .sub — приглушённая строка-ориентир;
   акцент-span (.day/.now/.next/.accent) — teal-ink. Источник: program/templates/today (.todayanchor).
   .scrhead (profile) НЕ сведён — там flex-шапка с аватаром (другой компонент).
   --------------------------------------------------------------------------- */
.screen-anchor{ margin-top:20px; }
.screen-anchor h1{
  font-size:var(--fs-h2);font-weight:700;line-height:1.25;
  color:var(--ink);letter-spacing:-.01em;margin:0;
}
.screen-anchor .sub{
  margin:6px 0 0;font-size:var(--fs-meta);font-weight:500;
  color:var(--muted);line-height:1.4;
}
.screen-anchor .sub .day,
.screen-anchor .sub .now,
.screen-anchor .sub .next,
.screen-anchor .sub .accent{ color:var(--teal-ink);font-weight:600; }
/* модификатор: якорь настроек (вертикальная отбивка 18/0/4 вместо top-20) */
.screen-anchor--tight{ margin:18px 0 4px; }

/* -----------------------------------------------------------------------------
   2. section-label — uppercase-подпись секции (единый компонент)
   Дедуплицировано из .block-label (day-close), .coach .sona-pos (today),
   .onbdots .seclabel (onb). Тихая uppercase-метка раздела (--fs-label-sm
   / --muted2), разрядка. Модификаторы — под исходные регистры.
   --------------------------------------------------------------------------- */
.section-label{
  font-size:var(--fs-label-sm);          /* 11.5px */
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);            /* реш. DK 2026-07-14 (DS-q1): смысловая метка → --muted (канон C7, WCAG AA); было --muted2 (~2.6:1, провал) */
}
/* модификатор: подпись-разделитель блока с вертикальной отбивкой (day-close) */
.section-label--block{ margin:28px 2px 11px; }
/* модификатор: ярлык-группа над вопросами (слияние бывшего .qlabel — safety,
   program-fit). Плотный низ: верх sp-lg=24px, низ sp-xs=4px — побайтно как был .qlabel. */
.section-label--q{ margin:var(--sp-lg) 2px var(--sp-xs); }

/* -----------------------------------------------------------------------------
   2b. АЛИАС СТАРОГО ИМЕНИ — bare .block-label (боевая разметка 33 экранов)
   Разметка 12 онб/практик-экранов не переписана под .section-label: она несёт
   ИСХОДНОЕ bare-имя секционной подписи .block-label. Рефактор увёл общий визуал
   в .section-label (+ модификатор --block), но локального правила .block-label
   у экранов нет в общей системе — без этого алиаса bare .block-label остаётся
   неостилованной (uppercase-метки секций «слетают» в обычный текст).
   Канон-источник: practice/step-close (margin 28/2/11), onboarding/_template
   (margin 24/2/11). Берём общий случай — 24px сверху.
   (.coach .sona-pos и .onbdots .seclabel — старые scoped-имена — уже покрыты
   каноном в группах sona-voice и screen-shells соответственно.)
   --------------------------------------------------------------------------- */
.block-label{
  font-size:var(--fs-label-sm);          /* 11.5px */
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted2);
  margin:24px 2px 11px;                  /* канон bare-подписи секции */
}

/* -----------------------------------------------------------------------------
   3. lede — главная мысль экрана крупно (display-якорь V3)
   Тезис/вопрос «сам как заголовок» (--fs-display ≈1.9× body); одна строка
   .sub снимает неоднозначность. Иерархия размером и воздухом, без рамок.
   Рядом со .screen-anchor — оба верхних якоря экрана, .lede — крупный display.
   Источник: onboarding/expectations|gates (.lede).
   --------------------------------------------------------------------------- */
.lede{ margin:12px 0 4px; }
.lede h1{
  font-size:var(--fs-display);           /* 30px — V3-якорь, доминирует над h1 */
  font-weight:700;
  letter-spacing:-.025em;                /* плотный трекинг крупного заголовка */
  line-height:1.16;
  color:var(--ink);
}
.lede .sub{
  font-size:16px;                        /* чуть крупнее body — подзаголовок-уточнение */
  line-height:1.5;
  color:var(--muted);
  margin-top:12px;
  max-width:32ch;                        /* комфортная мера строки */
}


/* ===========================================================================
   COMPONENT GROUP · facts-list
   (список живых фактов без рамок — извлечён из V3-онбординга)
   =========================================================================== */

/* =============================================================================
   Sonaura — Группа КОМПОНЕНТОВ «facts-list»
   Зависит от tokens.css — все значения через var(--*).

   Вертикальный stack живых фактов БЕЗ рамок/разделителей — антипод криптоплиток.
   Извлечён и унифицирован из V3-экранов онбординга (источник: onboarding/
   expectations — локальные .facts3 / .fact3).

   Дедупликация: разрозненные .facts3/.fact3 (expectations) и т.п. сведены в
   единый .facts/.fact; маркер-точка фактов — .fact .marker (НЕ путать со
   scale-data .dot 30px и nav-chrome .mk 8px — разные роли).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   facts — вертикальный stack живых фактов БЕЗ рамок/разделителей
   Антипод криптоплиток: каждый факт — живая фраза (жирный тезис + тихое
   уточнение). Единственный акцент — бирюзовая маркер-точка .marker слева.
   Macro-воздух (--sp-lg 24px) группирует факты как один список.
   Источник: onboarding/expectations (.facts3/.fact3 → унифицировано).
   --------------------------------------------------------------------------- */
.facts{ display:flex; flex-direction:column; gap:var(--sp-lg); margin-top:34px; }
.fact{ display:flex; gap:14px; align-items:flex-start; }
.fact .marker{                           /* маркер-точка факта — единственный акцент */
  width:9px; height:9px; flex:none;
  border-radius:50%;
  background:var(--teal);
  margin-top:8px;                        /* оптическое выравнивание к первой строке */
}
.fact .ft{ flex:1; min-width:0; }
.fact .ft b{
  display:block;
  font-size:17px;                        /* тезис-фраза — крупнее body, легче h3 */
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
  letter-spacing:-.01em;
}
.fact .ft span{
  display:block;
  font-size:var(--fs-meta);              /* 14px — тихое уточнение */
  color:var(--muted);
  line-height:1.5;
  margin-top:5px;
}

/* -----------------------------------------------------------------------------
   mirrors — ЗЕРКАЛО РЕЗУЛЬТАТОВ замера (итог-экран): три тихие строки-домена
   «домен полужирно — человеческая фраза-маркер», БЕЗ чисел/полос/радара/светофора.
   Антипод дашборда тяжести: отражает ответы словами. Слева приглушённая бирюзовая
   точка-маркер (единственный акцент ряда, не градиент-якорь).
   Источник: onboarding/result (.mirrors/.mirror).
   --------------------------------------------------------------------------- */
.mirrors{ display:flex; flex-direction:column; gap:13px; }
.mirror{ display:flex; gap:11px; align-items:flex-start; }
.mirror::before{
  content:''; width:7px; height:7px; flex:none;
  border-radius:50%; background:var(--teal); margin-top:8px;
}
.mirror .m{ font-size:var(--fs-body); line-height:1.45; color:var(--ink); }
.mirror .m b{ font-weight:700; }

/* -----------------------------------------------------------------------------
   valueline — тихая СТРОКА-ЦЕННОСТИ на итог/смыкающих экранах (эмоциональный
   стержень «время не зря»). Чуть крупнее meta, воздух над/под.
   profileline — честная строка-сноска «детали — в профиле / экспорт PDF».
   Канон-замена антипаттерну «раскрытие подробнее» с пустыми заглушками:
   НЕ обещай раскрытие контента, которого на экране нет — назови реальное место.
   Источник: onboarding/result.
   --------------------------------------------------------------------------- */
.valueline{ font-size:var(--fs-body); line-height:1.5; color:var(--ink); margin-top:var(--sp-xl); }
.profileline{ font-size:var(--fs-meta-sm); line-height:1.5; color:var(--muted); margin-top:var(--sp-lg); }


/* #############################################################################
   #                                                                           #
   #   СЛОЙ 3 · ПАТТЕРНЫ (PATTERNS)                                             #
   #                                                                           #
   ############################################################################# */


/* ===========================================================================
   PATTERN · day-flow
   (источник-фрагмент: _frag-pat-day-flow.css)
   =========================================================================== */

/* =============================================================================
   Sonaura — Pattern: «Нить дня» (.flow) — day-flow
   Организм/шаблон экрана: вертикальный поток узлов на одной нити.

   Канонический паттерн дневной петли (DESIGN-GUIDE B1): экран — связанный
   вертикальный поток, не стопка карточек. Узлы (.fnode) нанизаны на одну
   вертикальную нить (.flow::before); каждый шаг (.fstep) — пройденный (done),
   текущий (now) или будущий (без модификатора). Та же нить в горизонтальном
   изводе — таймлайн-рельса (.rail) на «Программе».

   Источник (сведено и разрешено):
     program/templates/today/index.html   — вертикальная .flow (нить, .fstep/.fnode, шаги, закрытие)
     daily/program/index.html — горизонтальная .rail (та же нить как таймлайн недель)

   ПРИНЦИП: ни одного хардкод-цвета/числа — всё на токенах из tokens.css.
   Подключать ПОСЛЕ tokens.css.

   Что в файле:
     1. Метка зоны (.steplabel)
     2. Нить и узлы (.flow / .fstep / .fnode  + done/now)
     3. Тихий шаг-строка (.step  + done)
     4. Оглянуться на день (.closestep)  — терминальный узел нити
     5. Яркая карточка активного шага (.maincard)  — ровно один на нить (B2/C1b)
     6. Горизонтальный извод нити — рельса недель (.rail / .rnode  + done/now/up/sel)
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. МЕТКА ЗОНЫ — uppercase-подпись над нитью («Твой день»)
   --------------------------------------------------------------------------- */
.steplabel{
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted2);
  margin:11px 0 12px;
}

/* ---------------------------------------------------------------------------
   2. НИТЬ И УЗЛЫ
   .flow         — контейнер потока; ::before рисует вертикальную нить
   .fstep        — один шаг (отступ слева под узел)
   .fnode        — кружок-узел на нити; .done (пройден, градиент), .now (текущий)
   --------------------------------------------------------------------------- */
.flow{position:relative;margin-left:var(--sp-xs)}
.flow::before{
  content:'';position:absolute;left:15px;top:16px;bottom:30px;
  width:2px;background:var(--line);
}

.fstep{position:relative;padding-left:46px;margin-bottom:12px}

.fnode{
  position:absolute;left:0;top:8px;width:32px;height:32px;
  border-radius:50%;display:grid;place-items:center;z-index:1;
  font-size:var(--fs-meta-sm);font-weight:700;
  background:var(--surface);border:2px solid var(--line);color:var(--muted2);
}
.fnode.done{background:var(--grad);border-color:transparent;color:#fff}
/* «сейчас» — ореол --halo-now, не --focus-ring (см. .rnode.now). */
.fnode.now{
  background:var(--surface);border-color:var(--teal);color:var(--teal-ink);
  box-shadow:var(--halo-now);
}
/* Вес выводится контрактом и для НЕ-done состояния: раньше строка веса стояла
   только у .fnode.done, поэтому обычный узел рисовал глиф с наследованным
   штрихом (эффективные 0.94 против канонных 1.5). */
.fnode svg{
  --icon-px:15;
  width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);display:block;
  fill:none;stroke-width:calc(var(--icon-eff)*var(--icon-vb)/var(--icon-px));
  stroke-linecap:round;stroke-linejoin:round;
}
.fnode.done svg{stroke:#fff;stroke-width:calc(var(--icon-eff)*var(--icon-vb)/var(--icon-px));fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------------------
   3. ТИХИЙ ШАГ-СТРОКА (.step) — пассивный вид шага (B2: пройден ↔ будущий)
   Иконка-мотив (.sico) — моно-slate в тинт-плашке, НЕ бирюза (C1).
   --------------------------------------------------------------------------- */
.step{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-nested);padding:13px 14px;box-shadow:var(--sh-card);
}
.step .sico,.closestep .sico{
  width:34px;height:34px;flex:none;border-radius:var(--r-sm);
  background:var(--bg2);display:grid;place-items:center;
}
.step .sico svg,.closestep .sico svg{
  --icon-vb:34;--icon-px:28;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);stroke:var(--muted2);stroke-width:calc(var(--icon-eff)*var(--icon-vb)/var(--icon-px));fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.step .stxt{flex:1;min-width:0}
.step .stxt b{display:block;font-size:var(--fs-body);font-weight:600;color:var(--ink);line-height:1.25}
.step .stxt span{display:block;font-size:var(--fs-meta-sm);color:var(--muted2);margin-top:2px;font-weight:500}
/* галочка «сделано» — teal-tint (C1a) */
.step .schk{width:22px;height:22px;flex:none;border-radius:50%;background:var(--teal-tint);display:grid;place-items:center}
.step .schk svg{--icon-px:12;width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);stroke:var(--teal-ink);stroke-width:calc(var(--icon-eff-xs)*var(--icon-vb)/var(--icon-px));fill:none;stroke-linecap:round;stroke-linejoin:round}
/* пройденный шаг — тише фоном, без тени */
.step.done{box-shadow:none;background:var(--bg)}
.step.done .stxt b{color:var(--muted);font-weight:500}
.step.done .sico svg{opacity:.6}
/* тихая метка «по желанию сегодня» на будущих шагах — скрыта по умолчанию */
.step .stxt .optnote{display:none;font-size:var(--fs-label-sm);color:var(--muted2);font-weight:500;margin-top:5px}
.flow.light-day .fstep[data-optional] .step .stxt .optnote{display:block}

/* ---------------------------------------------------------------------------
   4. ЗАКРЫТИЕ ДНЯ (.closestep) — терминальный нейтральный узел нити (B3a)
   --------------------------------------------------------------------------- */
/* базовый терминал — ТИХАЯ прозрачная строка, зеркало .step (chromeless): пока день
   НЕ завершён, «Оглянуться на день» не должен читаться выделенной белой карточкой и
   конкурировать с реально активной .maincard за «выбранность» (B2 — один яркий на нить;
   R21, реш. DK 2026-07-06, вернуто 2026-07-07 после случайной потери при откате —
   подтверждено рой-валидацией R26). Яркой приподнятой карточкой становится ТОЛЬКО
   .closestep.active — когда все шаги ✓ и активной .maincard больше нет. */
.closestep{
  display:flex;align-items:center;gap:10px;
  background:transparent;border:none;
  border-radius:var(--r-nested);padding:12px 10px;
  text-decoration:none;color:var(--muted);
  transition:background var(--t-short) var(--ease-out);
}
.closestep:active{background:var(--bg2)}                                 /* tap-отклик — всегда активен (B7a) */
.closestep .ct{font-size:var(--fs-meta)}
.closestep .ct b{color:var(--ink);font-weight:600;font-size:14.5px}
.closestep .chev{margin-left:auto;color:var(--muted2);font-size:18px}

/* ---------------------------------------------------------------------------
   5. ЯРКАЯ КАРТОЧКА АКТИВНОГО ШАГА (.maincard)
   Ровно ОДИН яркий/градиентный блок на нить (B2 / C1b). Раскрывается из
   пассивной строки активного шага. Содержит hero, тело, CTA «Начать».
   --------------------------------------------------------------------------- */
.maincard{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--sh-elevated);
  padding:7px 7px 16px;overflow:hidden;
}
/* герой = КЛИКАБЕЛЬНОЕ поле-превью (ссылка на тот же href, что CTA; две отдельные
   <a>, не вложенные). Поле-постер по умолчанию — брендовый САУНДВЕЙВ (свечение +
   звуковые волны, см. фон ниже), НЕ градиент — чтобы плейсхолдер не был вторым
   градиент-якорем и не перевешивал CTA; единственный градиент-якорь зоны остаётся
   за CTA .start (C1b). Poster-картинка инстанса — inline background-image (класс
   .hasposter), перекрывает саундвейв. Высота ~150px (ближе к 16:9) — превью/лицо
   доминирует, но активная карточка (заголовок + CTA) выглядывает над сгибом и на 375×667. */
.maincard .hero{
  position:relative;display:block;border-radius:15px;overflow:hidden;height:120px;
  /* плейсхолдер-герой = мягкий бирюзовый САУНДВЕЙВ (свечение + звуковые волны) — намёк на
     будущее наполнение (реш. DK 2026-07-06); перекрывается реальным постером в .hasposter.
     Значение-фолбэк цвет держит контраст, пока svg грузится. */
  background:#E4F6F8 url('hero-soundwave.svg') center/cover no-repeat;
  text-decoration:none;cursor:pointer;
  transition:transform var(--t-short) var(--ease-out);
}
.maincard a.hero:active{transform:scale(.99)}
.maincard a.hero:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* poster инстанса (если задан) — покрытие + лёгкий скрим снизу, чтобы чип/play читались на фото */
.maincard .hero.hasposter{background-size:cover;background-position:center}
.maincard .hero.hasposter::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,23,42,0) 45%,rgba(15,23,42,.30));
}
/* мотив-глиф типа шага поверх фона — ТОЛЬКО у НЕ-медиа (fill → карандаш и т.п.);
   идентичность шага не «прыгает» при раскрытии (тот же per-type icoFor, что и в
   свёрнутой строке .step .sico). У медиа мотива нет — там центральная кнопка .playbig.
   Декор: белый контур, приглушён; крупнее строкового, но тише кнопки-действия. */
.maincard .hero .heromotif{position:absolute;inset:0;display:grid;place-items:center}
.maincard .hero .heromotif svg{
  width:58px;height:58px;stroke:#fff;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;opacity:.88;
}
/* ЦЕНТРАЛЬНАЯ кнопка play — ЕДИНСТВЕННЫЙ play на карточке (только медиа video/audio):
   белый диск-СИГНИФИКАТОР поверх поля-постера, как на реальном видео-превью. НЕ градиент —
   единственный градиент-ЯКОРЬ зоны остаётся у CTA .start (C1b): play зовёт взглядом,
   CTA — действием, два ярких градиента не конкурируют. Углового диска .play больше нет. */
.maincard .hero .playbig{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:var(--sh-disc);
}
.maincard .hero .playbig svg{width:26px;height:26px;fill:var(--teal);margin-left:2px}
.maincard .hero .tag{
  position:absolute;left:12px;bottom:12px;
  background:rgba(255,255,255,.92);color:var(--teal-ink);
  border-radius:var(--r-chip);padding:5px 11px;font-size:var(--fs-label-sm);font-weight:700;
}
.maincard .cardbody{padding:14px 12px 0}
.maincard .cardbody h2{font-weight:700;font-size:var(--fs-h2);letter-spacing:-.02em;line-height:1.12;margin-bottom:4px}
.maincard .cardbody .cmeta{font-size:var(--fs-meta-sm);color:var(--muted);margin-bottom:14px}
/* CTA «Начать» — единственное главное действие зоны (A3 / C1) */
.maincard .start{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:var(--grad);color:#fff;border:none;border-radius:var(--r-btn);padding:15px;
  font-family:var(--sans);font-size:16px;font-weight:700;cursor:pointer;
  text-decoration:none;transition:transform var(--t-short) var(--ease-out);margin-top:14px;
}
.maincard .start:active{transform:scale(.985)}
.maincard .start::after{content:'→'}

/* связь строка↔карточка: по умолчанию показана строка, активный шаг — карточка (B2) */
.fstep .maincard{display:none}
.fstep.active .maincard{display:block}
.fstep.active .step,.fstep.active .closestep{display:none}

/* ---------------------------------------------------------------------------
   7. ГОРИЗОНТАЛЬНЫЙ ИЗВОД НИТИ — рельса недель (.rail)
   Та же нить, но горизонтальная: таймлайн-таймлайн прогресса на «Программе».
   Прогресс = только статичная позиция в фиксированной структуре (B3b).
   Узлы: .done (пройдено), .now (текущая), .up (впереди), .sel (выбрана).

   РЯД ВОСЬМИМЕСТНЫЙ И НЕ РАСТЯГИВАЕТСЯ (замер 2026-07-14): на .device 390px
   рельсе доступно 342px; 8 узлов дают шаг между центрами 44.3px при минимуме
   C7 44px — ровно на границе. Девятая тап-цель ломает C7 (шаг 38.8px, хитбоксы
   налезают); уменьшение диаметра не помогает — ограничение в ШАГЕ. Всё, что
   после программы, живёт НЕ узлом (см. .railnote §7a).
   --------------------------------------------------------------------------- */
.rail{
  position:relative;display:flex;justify-content:space-between;align-items:center;
  margin-top:var(--sp-lg);padding:0 var(--sp-xs);
}
/* Линия связывает восемь узлов и КОНЧАЕТСЯ на последнем — ровно как структура,
   которую она изображает.
   ОТМЕНЁННЫЙ ХОД (реш. DK 2026-07-14, не возвращать): линия продолжалась за узел
   8 и гасла градиентом — «путь идёт дальше», сказанное графикой. Идея честная, но
   в рендере хвост читался обрубком-артефактом, а не жестом. DK: «некрасиво
   выглядит». Работу «дальше есть жизнь» полностью несёт строка .railnote (§7a) —
   словом, и этого достаточно: слово никогда и не нуждалось в графической опоре. */
.rail::before{
  content:'';position:absolute;left:8px;right:8px;top:50%;transform:translateY(-50%);
  height:2px;background:var(--line);z-index:0;
}
.rnode{
  position:relative;z-index:1;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-size:var(--fs-meta-sm);font-weight:700;
  background:var(--surface);border:1.5px solid var(--line);color:var(--muted2);
  cursor:pointer;transition:transform var(--t-short) var(--ease-out);
}
/* хитбокс ≥44×44 псевдоэлементом (C7) */
.rnode::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%}
.rnode:active{transform:scale(.92)}
.rnode.done{background:var(--bg2);border-color:var(--line);color:var(--muted)}
/* «сейчас» — ореол --halo-now, НЕ --focus-ring: состояние покоя не должно быть
   нарисовано как клавиатурный фокус, иначе фокус на этом узле не виден вовсе. */
.rnode.now{background:var(--surface);border:2px solid var(--teal);color:var(--teal-ink);box-shadow:var(--halo-now)}
.rnode.up{background:var(--surface);border-color:var(--line);color:var(--muted2)}
.rnode.sel::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--teal);opacity:.55}
.rnode.now.sel::after{display:none}
/* Галочка «пройдено» внутри узла рельсы. Вес выводится контрактом, как у всех
   иконок: был вписан руками (2.4 → эффективные 1.4) и молча расходился с каноном.
   Носитель 14px, поэтому потолок --icon-eff-xs.
   Фон и радиус гасим намеренно: имя .chk на svg столкнулось с компонентом-диском
   .chk (обёртка 22px, :1054) — svg подхватывал его заливку и рисовал бирюзовый
   кружок внутри серого узла. Диск здесь — сам .rnode, второй фон лишний. */
.rnode .chk{
  --icon-px:14;
  width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);
  background:none;border-radius:0;
  stroke:var(--muted);fill:none;
  stroke-width:calc(var(--icon-eff-xs)*var(--icon-vb)/var(--icon-px));
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---------------------------------------------------------------------------
   7a. СТРОКА-ОРИЕНТИР ПОД РЕЛЬСОЙ (.railnote) — то, что после программы.

   ИСТОРИЯ (важна, чтобы не повторить): сначала здесь жил ХВОСТ .rtail —
   пилюля «После · поддержка» с пунктирным отводом от узла 8. DK отверг
   («не нравится визуал»), рой-валидация вскрыла корень: это была ОШИБКА
   КАТЕГОРИИ — КОНТРОЛ поставили там, где по работе нужна АННОТАЦИЯ.
   Пилюля 146.9px совпадала с чипом .wcchip (147.3px) с точностью 0.4px и
   читалась статус-чипом; кольцо .sel вокруг прямоугольника читалось
   фокус-рамкой поля; композиция «ряд до края + линия вниз к объекту» —
   сигнатура overflow-wrap, то есть макет сообщал «неделя 9, которая не
   влезла», что канон запрещает трижды. Компонент снят целиком (реш. DK
   2026-07-14, вариант «line»).

   ДВЕ РАБОТЫ РАЗВЕДЕНЫ ПО НОСИТЕЛЯМ — в этом вся суть:
     «путь идёт дальше»  → графика: линия .rail::before гаснет за узлом 8
                           (см. §7). Ноль слов, ноль объектов, ноль мишеней;
     «дальше есть жизнь» → слова: эта строка. Заявление нужно ВСЕ 56 дней,
                           каждому, в покое, без нажатия (Program Principles
                           §7: пользователь должен ЗНАТЬ, а не мочь перейти).

   Стоит по ЛЕВОМУ краю рельсы — максимально далеко от узла 8, чтобы не
   срастись с неделей 8 («Жизнь после программы»). Роль тапа та же, что у
   узла: рисует превью в карточке, шаг дня отсюда не стартует.
   Замка нет (B2): строка тапабельна, превью открыто; заперт только вход.
   Состояния лестницей чернил: --muted (покой) → --ink (выбрано) →
   --teal-ink (наступило). Кольца НЕТ — см. правило ниже.

   ⚠ ПРАВИЛО СИСТЕМЫ, выведенное этим провалом: «ВЫБРАНО» У КРУГЛОЙ ФОРМЫ —
   КОЛЬЦО, У ТЕКСТА / НЕ-КРУГЛОЙ ФОРМЫ — ЦВЕТ. Кольцо вокруг прямоугольника
   всегда читается фокус-рамкой поля.
   --------------------------------------------------------------------------- */
.railnote{
  position:relative;display:flex;width:fit-content;align-items:center;
  /* своя ступень воздуха: 12px (метка→рельса, внутригрупповое) < 16px
     (рельса→строка = «связано, но иной природы») < 28px (секция). Ту работу,
     которую пытался и не смог сделать пунктирный отвод, делает интервал. */
  margin-top:var(--sp-md);margin-left:calc(-1 * var(--sp-xs));
  padding:11px var(--sp-sm);
  background:none;border:none;border-radius:var(--r-nested);
  font-family:inherit;font-size:var(--fs-meta-sm);font-weight:600;
  letter-spacing:-.01em;line-height:1.3;text-align:left;
  color:var(--muted);   /* смысловая метка → --muted (C7). НЕ --muted2: 2.56:1 не проходит */
  cursor:pointer;
  transition:background var(--t-short) var(--ease-out),color var(--t-short) var(--ease-out);
}
/* аффорданс — системный словарь: канон .chev «›» = переход/раскрытие справа.
   Псевдоэлемент, не <span>: textContent строки переписывается в кадре выпуска
   и стёр бы ребёнка. Вне a11y-дерева, как и требует канон. ~10px² чернил. */
.railnote::after{content:'›';margin-left:6px;color:var(--muted2);font-size:var(--fs-h3);line-height:1}
/* хитбокс ≥44px невидимым псевдоэлементом — приём уже в системе (.rnode::before):
   11+18(шеврон)+11 = 40px; inset -3px по вертикали → 46px (C7). */
.railnote::before{content:'';position:absolute;inset:-3px 0;border-radius:var(--r-nested)}
.railnote:active{background:var(--bg2)}
.railnote.sel{color:var(--ink);font-weight:700}
/* наступило — зеркало .rnode.now «ты здесь». Объявлено ПОСЛЕ .sel при равной
   специфичности: у элемента-«сейчас» выбор не выражается, он и так позиция —
   тот же контракт, что .rnode.now.sel::after{display:none}. */
.railnote.now{color:var(--teal-ink);font-weight:700}

/* ---------------------------------------------------------------------------
   8. ФОКУС — единое бирюзовое кольцо (DESIGN-GUIDE C7, tokens §9)
   --------------------------------------------------------------------------- */
.start:focus-visible,
.closestep:focus-visible,.step:focus-visible,
.rnode:focus-visible,.railnote:focus-visible{outline:none;box-shadow:var(--focus-ring)}


/* ===========================================================================
   PATTERN · immersive-player
   (источник-фрагмент: _frag-pat-immersive-player.css)
   =========================================================================== */

/* =============================================================================
   Sonaura — ПАТТЕРН «immersive-player» (композиция / шаблон-каркас экрана)
   Иммерсивный полноэкранный плеер: тёмная поверхность, выход только ✕,
   БЕЗ нижней навигации и БЕЗ SOS (реш. DK — C6f).

   Канон сведён и дедуплицирован из:
     practice/audio-player/index.html     (вариант: ring-таймер по центру)
     practice/sound-therapy/index.html    (вариант: прокручиваемая поверхность-микшер)

   ПРИНЦИП: ни одного «магического числа»/хардкод-цвета — всё на токенах
   из ./tokens.css. Тёмная тема плеера — санкционированные токены --player-*,
   --dark-* и --focus-ring-dark.

   ЗАВИСИТ ОТ: ./tokens.css (подключить ПЕРЕД этим файлом).
   КАРКАС, НЕ КОНТЕНТ: конкретные практики/слои/тексты — в экранах-потомках.

   Гайд-инварианты, которые держит паттерн:
     C6f — иммерсивные плееры идут без хрома и SOS; всегда видимый ✕ → «Сегодня»
     B5  — модальный полноэкранный режим: нижнего таб-бара нет
     C7  — тап-цель ≥44×44 (хитбокс псевдоэлементами), aria-label на интерактиве,
           к аудио — текстовая альтернатива (ссылка-расшифровка .cc)
     §7  — видимое кольцо фокуса, адаптированное под тёмную поверхность
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. КАРКАС: тёмная иммерсивная поверхность
   Заполняет .device целиком: .player занимает поток (flex:1), напр. ring-плеер.
   ----------------------------------------------------------------------------- */
.player{
  position:relative;flex:1;display:flex;flex-direction:column;min-height:0;
  background:radial-gradient(120% 80% at 50% 30%,var(--player-bg) 0,var(--navy) 64%);
  color:var(--dark-text);
}

/* статусбар на тёмном */
.player .statusbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--sp-md) 22px var(--sp-xs);
  font-size:var(--fs-meta-sm);font-weight:700;color:var(--dark-text);
}
.player .statusbar .r{font-size:var(--fs-label)}

/* -----------------------------------------------------------------------------
   2. ВЕРХ: выход ✕ (слева) + тихий заголовок практики/задачи
   Это единственный хром паттерна. Никакой шапки/хедера.
   ----------------------------------------------------------------------------- */
.top{display:flex;flex-direction:column;align-items:center;padding:var(--sp-sm) 22px 0;position:relative}

.close{
  position:absolute;left:14px;top:2px;width:38px;height:38px;border-radius:50%;
  background:var(--dark-surface-1);border:1px solid var(--dark-border);
  color:var(--dark-text);display:grid;place-items:center;
  font-size:18px;text-decoration:none;cursor:pointer;
}
/* C7: визуальные 38px, но тап-цель расширена до ≥44×44 хитбоксом */
.close::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%}

.title{text-align:center;margin-top:var(--sp-sm)}
.title .lbl{font-size:var(--fs-label-sm);letter-spacing:.07em;text-transform:uppercase;color:var(--dark-muted);font-weight:700}
.title .ttl{font-weight:600;font-size:var(--fs-h3);margin-top:var(--sp-xs);letter-spacing:-.01em;color:var(--dark-text)}
/* тихий субтитр-ориентир (опц.) */
.title .sub{font-size:var(--fs-meta-sm);font-weight:500;line-height:1.4;color:var(--dark-text);margin-top:10px;max-width:30ch;opacity:.85}

/* C7 + медиа-канон: текстовая альтернатива к аудио — тихая ссылка-расшифровка */
.title .cc{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:var(--fs-label);font-weight:600;letter-spacing:.02em;color:var(--dark-muted);text-decoration:none;position:relative}
.title .cc .ccmark{font-size:9.5px;font-weight:800;letter-spacing:.04em;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:1px 4px;line-height:1.1}
/* C7: расширяем тап-цель ссылки-расшифровки до ≥44px по высоте */
.title .cc::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;transform:translateY(-50%);height:44px}

/* -----------------------------------------------------------------------------
   3a. ВАРИАНТ A — ring-таймер по центру (плеер практики)
   Оставшееся время в центре, точка-прогресс на дуге. Без пульсации, без
   тревожных цветов — мягкий ориентир, не «отсчёт» (B4 / гайд).
   ----------------------------------------------------------------------------- */
.ringwrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:var(--sp-sm) 20px}
.ring{position:relative;width:264px;height:264px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block;overflow:visible}
.ring .bgtrack{fill:none;stroke:var(--dark-divider);stroke-width:5}
.ring .arc{
  fill:none;stroke:url(#ringgrad);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:791;stroke-dashoffset:230;
  transition:stroke-dashoffset var(--t-tick) linear;
}
/* точка-прогресс на конце дуги — спокойная, без пульсации */
.ring .dot{fill:var(--dark-dot);filter:drop-shadow(0 0 6px rgba(92,203,215,.7))}
.ring .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring .remain{font-size:46px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--dark-text);line-height:1}
.ring .rlabel{font-size:var(--fs-label);font-weight:600;letter-spacing:.04em;color:var(--dark-muted);margin-top:var(--sp-sm)}

/* низ варианта A: тонкий линейный прогресс + время прошло/всего, тихо */
.linebar{padding:18px 26px 22px}
.linebar .digits{display:flex;justify-content:space-between;font-size:var(--fs-label-sm);font-weight:600;color:var(--dark-muted);font-variant-numeric:tabular-nums;margin-bottom:9px}
.linebar .track{height:3px;border-radius:var(--r-chip);background:var(--dark-surface-2);overflow:hidden}
.linebar .track i{display:block;height:100%;width:29%;background:var(--grad);border-radius:var(--r-chip);transition:width var(--t-tick) linear}

/* -----------------------------------------------------------------------------
   3b. ВАРИАНТ B — прокручиваемая тёмная поверхность (микшер звукотерапии)
   Поверхность под заголовком: блоки-секции (.dlabel), слайдеры, тумблеры, чипы.
   Это НЕ плеер практики: без кольца, без «осталось N», без перемотки.
   ----------------------------------------------------------------------------- */
.surface{flex:1;display:flex;flex-direction:column;min-height:0;padding:22px 24px 0}

/* блок-заголовок секции на тёмном */
.dlabel{font-size:var(--fs-micro);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dark-muted);margin-bottom:11px}
.divider{height:1px;background:var(--dark-divider);margin:22px 0}

/* слайдер-компонент (teal-трек на navy, без градиента — анти-гипервигильность):
   .slider / .track / .fill / .knob / .mix / .mixcap — единый дом в группе
   actions выше; дубль здесь убран (значения идентичны). Калибровочная обвязка
   .calib — локальна паттерну (микшер звукотерапии). */
.calib{margin-bottom:var(--sp-sm)}
.calib .hint{font-size:var(--fs-meta);line-height:1.5;color:var(--dark-accent);font-weight:500;margin-bottom:14px}

/* строка-слой микшера: имя + слайдер + тумблер */
.layer{display:flex;align-items:center;gap:13px;padding:9px 0}
.layer .lname{flex:none;width:96px;font-size:var(--fs-meta);font-weight:600;color:var(--dark-text2)}
.layer .slider{flex:1}
.layer.off .lname{color:var(--dark-muted)}
.layer.off .slider .fill{opacity:.3}

/* КОНТЕКСТ-СКОУП (.player): тёмный тумблер/чип микшера НЕ должны перебивать
   светлую онбординг-версию .toggle/.chip на светлых экранах. Скоуп через
   потомка повышает специфичность — тёмный вариант действует только на тёмной
   поверхности плеера. (См. ту же логику в блоке 3 immersive-player выше.) */
.player .toggle{flex:none;width:42px;height:25px;border-radius:var(--r-chip);background:rgba(255,255,255,.12);position:relative;cursor:pointer;transition:background var(--t-short) var(--ease-out);border:none}
/* C7: невидимая тач-зона ≥44px вокруг тумблера */
.player .toggle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:44px}
.player .toggle::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--muted2);transition:transform var(--t-short) var(--ease-out),background var(--t-short) var(--ease-out)}
.player .toggle.on{background:rgba(43,180,198,.45)}
.player .toggle.on::after{transform:translateX(17px);background:var(--cyan)}
.player .toggle:focus-visible{outline:none;box-shadow:var(--focus-ring-dark)}

/* чипы (таймер сна и т.п.) — pill 999px на тёмном */
.player .chips{display:flex;gap:var(--sp-sm);flex-wrap:wrap}
.player .chip{display:inline-flex;align-items:center;min-height:44px;padding:var(--sp-sm) var(--sp-md);border-radius:var(--r-chip);background:var(--dark-surface-1);border:1px solid var(--dark-border);color:var(--dark-muted);font-size:var(--fs-meta-sm);font-weight:600;cursor:pointer;transition:background var(--t-short) var(--ease-out),color var(--t-short) var(--ease-out),border-color var(--t-short) var(--ease-out)}
.player .chip.on{background:rgba(43,180,198,.18);border-color:rgba(43,180,198,.5);color:var(--dark-accent)}
.player .chip:focus-visible{outline:none;box-shadow:var(--focus-ring-dark)}

/* -----------------------------------------------------------------------------
   4. КОНТРОЛЫ: крупная play/pause по центру + опц. перемотка −15с (вариант A)
   В варианте B controls «прилипают» снизу прокручиваемой поверхности.
   ----------------------------------------------------------------------------- */
.controls{display:flex;align-items:center;justify-content:center;gap:30px;padding:var(--sp-sm) 20px var(--sp-xs)}
/* вариант B: закреплены снизу прокрутки, всегда на виду */
.surface .controls{position:sticky;bottom:0;z-index:2;padding:20px 20px 14px;background:linear-gradient(to bottom,rgba(30,41,59,0),var(--navy) 38%)}

/* .cbtn / .cbtn.main — единый дом в группе actions выше (там же переведён на
   токены иконок). Дубль отсюда убран: значения СОВПАДАЛИ НЕ ВСЕ — здесь стояла
   тень --sh-player-play против --sh-cta в доме, и побеждал этот блок. Дом
   приведён к тому, что реально рисовалось. */
.spacer{width:52px;height:52px}

/* §7: видимое кольцо фокуса — токен под тёмную поверхность */
.close:focus-visible,.cbtn:focus-visible,.cc:focus-visible{outline:none;box-shadow:var(--focus-ring-dark)}
.cbtn.main:focus-visible{box-shadow:var(--focus-ring-dark),var(--sh-player-play)}

/* -----------------------------------------------------------------------------
   5. АДАПТАЦИЯ / ДОСТУПНОСТЬ
   ----------------------------------------------------------------------------- */
@media(max-width:520px){
  .player .statusbar{padding-top:max(var(--sp-md),env(safe-area-inset-top))}
  .linebar{padding-bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px))}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* ===========================================================================
   PATTERN · quick-relief
   (источник-фрагмент: _frag-pat-quick-relief.css)
   =========================================================================== */

/* =============================================================================
   Sonaura — PATTERN: Quick Relief (SOS) — плавающий якорь → переход в острый слой
   Фрагмент дизайн-системы. Зависит от tokens.css (подключать первым).

   КАНОН (реш. DK 2026-07-10/11): SOS = плавающий якорь .qranchor → ПЕРЕХОД на
   полноэкранный «Сейчас тяжело» (program/templates/crisis) с ?ret= (тихий ✕
   возвращает туда, откуда пришли). Шторка qr-sheet/qr-backdrop УПРАЗДНЕНА —
   любое появление шторки на любой поверхности = дефект (VALIDATION CON-04).
   «Быстрая помощь» и SOS-якорь — один функционал, один экран.

   Сам экран «Сейчас тяжело» — иммерсивная тёмная поверхность по канону плееров
   (палитра --dark-*, без таб-бара и без SOS-якоря — C6f): заголовок-вопрос,
   3 инструмента, «Твои опоры», мост к куратору. Его слои живут локально в
   program/templates/crisis/index.html; зеркало в галерее —
   _gal-pat-quick-relief.html.

   Канон гайда (DESIGN-GUIDE.md):
     • C6c — SOS = глиф «сердце-в-ладошках» (stroke teal 1.75) на БЕЛОМ диске
       (border --line); НЕ красный, НЕ градиент-заливка; единый вход; тап —
       переход в crisis (не шторка, не href="../sos/").
     • C6f — SOS на всех НЕ-иммерсивных экранах с хромом; в иммерсивных
       поверхностях (плееры и сам «Сейчас тяжело») SOS нет.
     • C1a — красный зарезервирован ТОЛЬКО за Tier-1 safety; SOS им не красится.
     • B5 — SOS у края (зона большого пальца), не в шапке (шапки нет).
   ============================================================================= */

/* --- ЯКОРЬ (плавающая SOS-кнопка) — канон-компонент qranchor ----------------- */
.qranchor{
  position:absolute; right:var(--sp-md); bottom:78px;     /* зона большого пальца, над нав-баром */
  width:48px; height:48px;                                 /* тап-цель ≥44 (C7) */
  display:grid; place-items:center;
  border:none; padding:0; background:transparent; cursor:pointer;
  z-index:30;
  transition:transform var(--t-short) var(--ease-out);
}
.qranchor:active{transform:scale(.96)}
.qranchor .disc{
  width:44px; height:44px; border-radius:50%;
  background:var(--surface);                               /* БЕЛЫЙ диск (C6c) */
  border:1px solid var(--line);
  box-shadow:var(--sh-disc);
  display:grid; place-items:center;
}
/* Глиф SOS под общим контрактом иконок: вес выводится из --icon-eff, как у всех.
   Раньше он был единственным местом, где вес стоял инлайном (1.75 в 27 файлах) —
   и при смене канон-веса остался бы не в ногу со всем набором. Цвет — teal (C6c). */
.qranchor .disc svg{
  --icon-vb:24;--icon-px:24;
  width:calc(var(--icon-px)*1px);height:calc(var(--icon-px)*1px);
  stroke:var(--teal);stroke-width:calc(var(--icon-eff)*var(--icon-vb)/var(--icon-px));
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}

/* --- ФОКУС (единое правило системы) ----------------------------------------- */
.qranchor:focus-visible{outline:none; box-shadow:var(--focus-ring)}


/* ===========================================================================
   PATTERN · screen-shells
   (источник-фрагмент: _frag-pat-screen-shells.css)
   =========================================================================== */

/* =============================================================================
   Sonaura — Pattern: «screen-shells» — каркасы-шаблоны экранов
   Композиция-шаблон экрана: пустой каркас, в который вкладывается контент.

   Этот паттерн владеет ОБОЛОЧКОЙ экрана — рамкой устройства, прокруткой,
   статусбаром, хромом (нав-бар снизу / низ-навигация онбординга) и типовой
   раскладкой. Сам контент (нить дня, формы, шкалы, плеер) — в других
   паттернах/компонентах; здесь — только «коробка», куда он ложится.

   ДЕМАРКАЦИЯ (что НЕ продукт): .device / .scroll / .vbadge — леса
   прототипа (рамка телефона, ревью-бейдж); в ТЗ продукта не
   закладываются. Продуктовый хром: .statusbar / .nav / .onbnav / .onbdots.

   Пять канон-каркасов:
     1. Today-shell     — мобильная рамка + scroll + statusbar + нижняя
                          таб-навигация (.nav). База дневной петли и хаба.
     2. Onb-shell       — мобильная рамка БЕЗ хрома; сверху .onbdots+seclabel
                          (тихий индикатор раздела), снизу .onbnav
                          (Назад/Дальше). Один шаг визарда.
     3. Terminal-shell  — Today-shell + центрированный тихий финал
                          (.done-head / .terminal). Закрытие практики/дня.
     4. Focus-shell     — иммерсивная рамка БЕЗ хрома и БЕЗ SOS; всегда
                          видимый ✕-возврат на «Сегодня». Плеер/полноэкранный
                          один-в-один.
     5. Cabinet-shell   — ДЕСКТОП-рамка кабинета куратора: широкий .cabinet
                          + sticky .topbar + .wrap. Не телефон.

   Источник (сведено и разрешено):
     program/templates/today/index.html           — Today-shell (device/scroll/statusbar/.nav)
     onboarding/_template/index.html  — Onb-shell (.onbdots/seclabel/.onbnav)
     practice/step-close/index.html   — Terminal-shell (.done-head/check, .nav)
     daily/done/index.html            — Terminal-shell (.terminal)  [референс]
     cabinet/list/index.html          — Cabinet-shell (.cabinet/.topbar/.wrap) [референс]

   ПРИНЦИП: ни одного хардкод-цвета/числа — всё на токенах из tokens.css.
   Подключать ПОСЛЕ tokens.css. Контент-паттерны (.flow, формы, .scale,
   .qranchor) — поверх каркаса из своих фрагментов.

   Что в файле:
     0. Фон-подложка устройства (body)
     1. Рамка устройства (.device)  — мобильная
     2. Прокручиваемая область (.scroll)  + statusbar
     3. Нижняя таб-навигация (.nav)  — хром Today/Terminal
     4. Низ-навигация онбординга (.onbnav)  + кнопки (.btn-back/.btn-next)
     5. Тихий индикатор раздела (.onbdots / seg / seclabel)
     6. Терминальный финал (.done-head / .check / .terminal)
     7. Десктоп-каркас кабинета (.cabinet / .topbar / .brand / .wrap)
     8. vbadge + адаптив (≤520 моб / ≤980 спецпанель) + reduced-motion
   ============================================================================= */

/* ---------------------------------------------------------------------------
   0. ФОН-ПОДЛОЖКА УСТРОЙСТВА — navy-радиал, рамка плавает по центру.
      Общий для всех мобильных каркасов.
   --------------------------------------------------------------------------- */
body{
  font-family:var(--sans);
  background:radial-gradient(120% 90% at 50% 0,var(--player-surf) 0,var(--backdrop) 60%);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:var(--sp-xl) var(--sp-lg);gap:36px;
}

/* ---------------------------------------------------------------------------
   1. РАМКА УСТРОЙСТВА — мобильный экран 390×844 с двойной обводкой-«корпусом».
      overflow:hidden обрезает scroll/нав по скруглению. Общая для каркасов 1–4.
   --------------------------------------------------------------------------- */
.device{
  position:relative;
  width:390px;height:min(844px,94vh);
  background:var(--bg);
  border-radius:48px;overflow:hidden;
  box-shadow:var(--sh-device),0 0 0 11px #0b1220,0 0 0 12px rgba(255,255,255,.04);
}

/* ---------------------------------------------------------------------------
   2. ПРОКРУЧИВАЕМАЯ ОБЛАСТЬ — единственный скролл; нижний padding = высота хрома.
      .statusbar — тихая строка времени/батареи, первая в потоке.
      Модификаторы паддинга под разный хром (есть/нет нав-бара).
   --------------------------------------------------------------------------- */
.scroll{
  height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 var(--sp-md) 104px;       /* запас под нижнюю таб-навигацию */
}
.scroll.has-onbnav{padding-bottom:108px}   /* онбординг: запас под .onbnav */

/* .statusbar — единый дом в группе nav-chrome выше (+ модификатор .statusbar--dark);
   дубль здесь убран (значения идентичны) */

/* ---------------------------------------------------------------------------
   3. НИЖНЯЯ ТАБ-НАВИГАЦИЯ (.nav) — единственный слой хрома (DESIGN-GUIDE B5).
      Прижата к низу рамки, полупрозрачная с blur. Шапки/хедера нет.
      Активный таб .on (teal); статичная точка-бейдж .has-badge (B7, не пульс).
      Канон-глифы и правило «один глиф, отличие в цвете» (B6) — в nav-chrome.
   --------------------------------------------------------------------------- */
/* .nav — единый дом в группе nav-chrome выше; дубль screen-shells убран
   (паттерн не переопределяет компонент; значения идентичны) */

/* ---------------------------------------------------------------------------
   4. НИЗ-НАВИГАЦИЯ ОНБОРДИНГА (.onbnav) — каркас 2 (Onb-shell).
      Хедера и таб-бара НЕТ. Снизу (absolute) ровно два управления:
      «Назад» — тихая slate-кнопка; «Дальше» — единственный градиент-якорь
      экрана (C1b: один градиент на зону). Градиент-низ растворяет контент.
   --------------------------------------------------------------------------- */
.onbnav{
  position:absolute;bottom:0;left:0;right:0;
  padding:14px var(--sp-md) 22px;
  background:linear-gradient(180deg,transparent,var(--bg) 28%);
  display:flex;align-items:center;gap:var(--sp-md);
}
.btn-back{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:104px;
  background:var(--bg2);border:1px solid var(--line);color:var(--muted);
  border-radius:var(--r-btn);padding:15px 18px;
  font-family:var(--sans);font-size:var(--fs-body-sm);font-weight:600;
  cursor:pointer;text-decoration:none;transition:background var(--t-short) var(--ease-out);
}
.btn-back:active{background:var(--line)}
.btn-back::before{content:'‹';font-size:18px;line-height:1;margin-top:-1px}
.btn-next{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--grad);color:#fff;border:none;
  border-radius:var(--r-btn);padding:var(--sp-md);
  font-family:var(--sans);font-size:16px;font-weight:700;
  cursor:pointer;text-decoration:none;
  transition:transform var(--t-short) var(--ease-out);
  box-shadow:var(--sh-cta);
}
.btn-next:active{transform:scale(.985)}
.btn-next::after{content:'→'}

/* ───────────────────────────────────────────────────────────────────────────
   GATE — «живая кнопка-проводник» (контракт gate.js, стек-агностичный).
   КОНТРАКТ-АТРИБУТЫ: data-gate (корень-ПРЕДКЕ, на нём capture-guard) ·
   data-gate-field (поле-единица счёта) · data-filled (ЕДИНСТВЕННЫЙ сигнал
   «удовлетворено», ставит адаптер ввода — ПРОИЗВОДНАЯ модели, восстанавливается
   при ре-рендере) · data-gate-scope+hidden (под-области multi-step) ·
   data-hard-gate (жёсткий стоп, ядро не снимает; ставится СИНХРОННО с data-filled)
   · data-gate-hardgate / [role=alert] (цель фокуса перехвата) · data-gate-next
   (кнопка; data-gate-state выставляет ТОЛЬКО ядро) · [data-gate-count] aria-live
   (опц. счётчик; кнопка ссылается aria-describedby).
   ВАЖНО: guard — capture на корне-ПРЕДКЕ, не на кнопке. Ядро НЕ знает типов
   инпутов. aria-disabled на гейт-кнопке НЕ ставить — она реально совершает
   действие (скролл+спотлайт+фокус). Ни в одном состоянии нет pointer-events:none
   → тап/Enter/Space всегда живые, gate.js перехватывает в capture. */
.btn-next[data-gate-state="pending"]{background:var(--bg2);color:var(--muted2);box-shadow:none}
.btn-next[data-gate-state="pending"]::after{color:var(--muted2)}
.btn-next[data-gate-state="ready"]{background:var(--grad);color:#fff;box-shadow:var(--sh-cta)} /* = база: полный фирменный градиент при готовности */
.btn-next[data-gate-state="blocked"]{display:none}
.onbnav.is-hardgated .btn-back{flex:1} /* «Назад» растягивается; зеркало .onbnav.intercepted .btn-back */

/* DEPRECATED: .is-disabled / aria-disabled на .btn-next — устаревшие.
   Новый контракт = data-gate-state. Оставлен лишь визуал-алиас pending на случай
   немигрированной разметки; pointer-events УБРАН (был причиной «мёртвого тапа»). */
.btn-next.is-disabled{background:var(--bg2);color:var(--muted2);box-shadow:none}
.btn-next.is-disabled::after{color:var(--muted2)}

/* Кольцо-спотлайт (тап-когда-неполно): бирюза-акцент, НЕ красный (красный — только
   safety-плашка/перехват). box-shadow-кольцо повторяет радиус и НЕ сдвигает раскладку. */
.gate-spotlight{border-radius:var(--r-nested-lg);box-shadow:0 0 0 2px var(--teal),0 0 0 6px var(--teal-tint);transition:box-shadow var(--t-short) var(--ease-out)}
/* строка-хинт живого счётчика гейта (data-gate-count): тихая, у кнопки «Дальше» */
.gatehint{font-size:var(--fs-meta-sm);color:var(--muted2);margin:20px 2px 0;text-align:center}
@media (prefers-reduced-motion:reduce){.gate-spotlight{transition:none}}

/* C7/§9: клавиатура/switch — видимый фокус на обеих кнопках низ-навигации онбординга
   (раньше отсутствовал; единственные интерактивы на ряде экранов-мостов). Канон-кольцо.
   Теперь работает и в pending (кнопка фокусируема, aria-disabled снят). */
.btn-next:focus-visible,
.btn-back:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------------------------------------------------------------------------
   5. ТИХИЙ ИНДИКАТОР РАЗДЕЛА (.onbdots) — верх Onb-shell.
      Мягкие сегменты по разделам входа. БЕЗ процентов, БЕЗ «шаг N из 9»
      (B4c: процент-заливка допустима ТОЛЬКО в онбординге, прочая
      геймификация запрещена и тут). data-step="K" → K-й сегмент текущий.
      .seclabel — тихая подпись текущего раздела (без номера/процентов).
   --------------------------------------------------------------------------- */
.onbdots{display:flex;gap:6px;align-items:center;padding:14px 0 2px}
.onbdots .seg{height:4px;flex:1;border-radius:var(--r-chip);background:var(--line);transition:background .3s ease}
.onbdots .seg.done{background:var(--seg-done)}  /* пройденный раздел — teal-tint глубже (--seg-done) */
.onbdots .seg.now{background:var(--teal)}       /* текущий раздел — V3: плоская бирюза-акцент (не градиент) */
.onbdots .seclabel{
  flex:none;font-size:var(--fs-micro);font-weight:600;color:var(--muted2);
  letter-spacing:.01em;margin-left:var(--sp-xs);white-space:nowrap;
}

/* ---------------------------------------------------------------------------
   6. ТЕРМИНАЛЬНЫЙ ФИНАЛ — каркас 3 (Terminal-shell).
      Тихое завершение (B3a): спокойная точка, без салюта/очков/серий (B4).
      .done-head — компактная галочка ~44px + умеренный заголовок (закрытие
      одного шага практики). .terminal — teal-tint реплика Sona-закрытия
      (закрытие дня; голос Sona вне «Сегодня» допустим, C2).
   --------------------------------------------------------------------------- */
.done-head{text-align:center;padding:22px 0 6px}
/* галочка .done-head .check определена в группе «2. check» выше (дубль удалён,
   чтобы bare .check не клоберил .opt.check) */
.done-head h1{font-weight:700;font-size:20px;letter-spacing:-.015em}
.done-head p{color:var(--muted);font-size:var(--fs-body);margin-top:var(--sp-xs)}

.terminal{
  margin:22px 0 0;
  background:var(--teal-tint);border:1px solid var(--teal-line);
  border-radius:var(--r-card);padding:22px 20px;text-align:center;
}
.terminal .av{
  width:44px;height:44px;border-radius:50%;margin:0 auto 12px;
  background:var(--grad);color:#fff;font-weight:700;font-size:19px;
  display:grid;place-items:center;box-shadow:0 5px 14px rgba(43,180,198,.35);
}
.terminal p{font-size:var(--fs-body);line-height:1.5;color:var(--ink)}
.terminal p b{color:var(--teal-ink);font-weight:700}

/* ---------------------------------------------------------------------------
   7. ДЕСКТОП-КАРКАС КАБИНЕТА (.cabinet) — каркас 5 (Cabinet-shell).
      НЕ телефон: широкая рабочая область куратора. Подложка та же navy,
      но рамка прижата к верху (align-items:flex-start). Sticky .topbar:
      бренд-лого слева, аккаунт Куратора (фиолетовое кольцо) справа.
      .wrap — одноколоночный экран.
   --------------------------------------------------------------------------- */
.cabinet{
  width:100%;max-width:1100px;flex:1 1 auto;
  background:var(--bg);border-radius:var(--r-card-lg);overflow:hidden;
  box-shadow:0 50px 100px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);
  min-height:calc(100vh - 56px);
}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;
  background:var(--glass-surface);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:13px var(--sp-lg);
}
.topbar .spacer{flex:1}
.brand{display:flex;align-items:center;gap:11px}
.brand .logo{
  width:34px;height:34px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;box-shadow:0 4px 12px rgba(43,180,198,.3);
}
.brand .logo svg{display:block}
.brand .bt{display:flex;flex-direction:column;line-height:1.15}
.brand .bt b{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.brand .bt span{font-size:var(--fs-label-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2)}

/* обёртка контента кабинета — одноколоночный лист */
.wrap{max-width:760px;margin:0 auto;padding:34px var(--sp-lg) 60px}
.head h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.025em;color:var(--ink);line-height:1.1}
.head .meta{margin-top:7px;font-size:var(--fs-meta);color:var(--muted);font-variant-numeric:tabular-nums}
.head .meta b{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------------------
   8. ВОДЯНОЙ ЗНАК ВЕРСИИ + АДАПТИВ + REDUCED-MOTION
      .vbadge — служебная плашка версии прототипа (скрыта на узком).
      ≤980 — прячем ревью-спецпанель; ≤520 — рамка во весь экран (safe-area);
      reduced-motion — обнуляем переходы/анимации (C7 a11y).
   --------------------------------------------------------------------------- */
.vbadge{
  position:fixed;right:14px;bottom:14px;font-size:var(--fs-micro);
  color:var(--muted2);background:rgba(255,255,255,.06);
  padding:4px 9px;border-radius:var(--r-chip);border:1px solid rgba(255,255,255,.1);
}
@media(max-width:980px){.specpanel{display:none}}
@media(max-width:520px){
  body{display:block;padding:0;background:var(--bg)}
  .device{width:100%;height:100vh;height:100dvh;border-radius:0;box-shadow:none}
  .cabinet{max-width:none;border-radius:0;box-shadow:none;min-height:100vh}
  .scroll{padding-top:env(safe-area-inset-top)}
  .nav{padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .onbnav{padding-bottom:max(22px,env(safe-area-inset-bottom))}
  .vbadge{display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;animation-iteration-count:1!important;
  }
}