/* ============================================================
   ФУНКЦИЯ ДИЗАЙНА · КОНТЕНТ-КОМПОНЕНТЫ
   Универсальные блоки лонгридов (сетки, таблицы, таймлайны,
   драматические блоки, карточки уровней и т.д.). Композиция
   сохранена из исходных материалов; стили переведены на токены,
   цвет — через шкалу --level. Тёмная тема поддержана.
   Зависит от tokens.css + base.css + reading.css.
   ============================================================ */

/* ─── СЕТКА СТИКЕРОВ (цитаты-«бампер-стикеры») ─── */
.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-md);margin:var(--space-lg) 0}
.sticker{background:var(--level-deep);color:var(--level-contrast);padding:1.25rem 1.4rem;border-radius:var(--radius-lg);
  font-family:var(--font-sans);font-size:1.02rem;font-style:italic;line-height:1.45;
  border:1px solid color-mix(in srgb,var(--level-bright) 20%,transparent);
  display:flex;flex-direction:column;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.sticker:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);
  border-color:color-mix(in srgb,var(--level-bright) 45%,transparent)}
/* небольшая яркая кавычка-акцент в потоке — не наезжает на текст */
.sticker::before{content:'\201C';font-family:var(--font-display);font-weight:700;
  font-size:1.7rem;line-height:.5;height:.85rem;color:var(--level-bright);
  margin-bottom:.7rem;font-style:normal}

/* ─── СЕТКА ЦЕННОСТЕЙ ─── */
/* Грид ценностей: атомы .tag.lg во всю ширину ячейки + hover (раньше — .value-tag, удалён). */
.values-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem;margin:var(--space-lg) 0}
.values-grid .tag{display:block;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.values-grid .tag:hover{background:var(--level-mist);border-color:var(--level)}

/* ─── ДВОЙНАЯ ПАНЕЛЬ (здоровое / нездоровое) ─── */
.dual-panel{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin:var(--space-lg) 0}
.panel{border-radius:var(--radius);padding:1.4rem 1.5rem;border:1px solid hsl(var(--border))}
.panel ul{list-style:none;padding-left:0;margin:0}
.panel li{font-size:.87rem;color:hsl(var(--foreground) / .8);margin-bottom:.4rem;padding-left:1.3rem;position:relative}
.panel-healthy{background:var(--level-fog);border-color:color-mix(in srgb,var(--level) 40%,hsl(var(--border)))}
.panel-unhealthy{background:color-mix(in srgb,var(--warn) 8%,hsl(var(--card)));border-color:color-mix(in srgb,var(--warn) 35%,hsl(var(--border)))}
.panel-title{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.8rem}
.panel-healthy .panel-title{color:var(--level)}
.panel-unhealthy .panel-title{color:var(--warn)}
.panel-healthy li::before{content:'✓';color:var(--level);position:absolute;left:0;top:.05rem;font-size:.8rem}
.panel-unhealthy li::before{content:'✗';color:var(--warn);position:absolute;left:0;top:.05rem;font-size:.8rem}

/* ─── КАРТОЧКИ СВЯЗИ УРОВНЕЙ ─── */
.level-grid{display:grid;grid-template-columns:1fr;gap:var(--space-md);margin:var(--space-lg) 0}
.level-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);
  padding:1.25rem 1.5rem;display:grid;grid-template-columns:80px 1fr;gap:1.25rem;align-items:start}
.level-badge{width:64px;height:64px;border-radius:var(--radius);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.2rem;flex-shrink:0}
.level-badge .lname{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em}
.level-badge .lcode{font-family:var(--font-mono);font-size:.62rem;opacity:.7}
.level-text{min-width:0}
.level-text h4{margin:0 0 .5rem;font-size:.82rem;letter-spacing:.04em}
.level-text p{font-size:.87rem;margin:0;line-height:1.6;color:hsl(var(--foreground) / .8)}
/* цветные бейджи уровней — через 8 системных переменных */
.lb-beige{background:color-mix(in srgb,var(--beige) 16%,hsl(var(--card)));color:var(--beige)}
.lb-purple{background:color-mix(in srgb,var(--purple) 16%,hsl(var(--card)));color:var(--purple)}
.lb-red{background:color-mix(in srgb,var(--red) 16%,hsl(var(--card)));color:var(--red)}
.lb-blue{background:color-mix(in srgb,var(--blue) 16%,hsl(var(--card)));color:var(--blue)}
.lb-orange{background:color-mix(in srgb,var(--orange) 16%,hsl(var(--card)));color:var(--orange)}
.lb-green{background:color-mix(in srgb,var(--green) 16%,hsl(var(--card)));color:var(--green)}
.lb-yellow{background:color-mix(in srgb,var(--yellow) 16%,hsl(var(--card)));color:var(--yellow)}
.lb-turquoise{background:color-mix(in srgb,var(--turquoise) 16%,hsl(var(--card)));color:var(--turquoise)}

/* level-card как «список связей» с акцентом --c (§19) */
.level-grid .level-card{grid-template-columns:1fr;border-left:4px solid var(--c,var(--level))}
.level-grid .level-card .level-name{font-family:var(--font-mono);font-size:.78rem;font-weight:500;
  letter-spacing:.04em;margin-bottom:.5rem;color:var(--c,var(--level))}
.level-grid .level-card p{font-size:.87rem;margin:0;line-height:1.6}

/* ─── ПСЕВДО-УРОВНИ ─── */
.pseudo-card{border-radius:var(--radius);padding:1.4rem 1.6rem;margin:var(--space-md) 0;
  border-left:4px solid var(--level);position:relative;background:var(--level-fog)}
.pseudo-card::before{content:attr(data-level);position:absolute;top:1rem;right:1.1rem;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;opacity:.5}
.pseudo-purple{background:color-mix(in srgb,var(--purple) 8%,hsl(var(--card)));border-color:var(--purple)}
.pseudo-red{background:color-mix(in srgb,var(--red) 8%,hsl(var(--card)));border-color:var(--red)}
.pseudo-blue{background:color-mix(in srgb,var(--blue) 8%,hsl(var(--card)));border-color:var(--blue)}
.pseudo-orange{background:color-mix(in srgb,var(--orange) 8%,hsl(var(--card)));border-color:var(--orange)}
.pseudo-green{background:color-mix(in srgb,var(--green) 8%,hsl(var(--card)));border-color:var(--green)}
.pseudo-yellow{background:color-mix(in srgb,var(--yellow) 8%,hsl(var(--card)));border-color:var(--yellow)}
.pseudo-title{font-family:var(--font-display);font-size:1.1rem;font-weight:600;margin-bottom:.6rem;color:hsl(var(--foreground))}
.pseudo-card p{font-size:.9rem;margin-bottom:.5rem}
.pseudo-card p:last-child{margin-bottom:0}

/* ─── ДРАМАТИЧЕСКИЙ БЛОК «СКАЧОК» ─── */
.leap-block,.conclusion,.leadership-cover{background:var(--level-deep);color:var(--level-contrast);
  border-radius:var(--radius-lg);padding:3rem;margin:var(--space-2xl) 0;position:relative;overflow:hidden}
.leap-block::before{content:'→';position:absolute;right:-.6rem;top:50%;transform:translateY(-50%);
  font-size:12rem;color:color-mix(in srgb, var(--level-contrast) 4%, transparent);font-family:var(--font-display)}
.leap-block h3,.leap-title{font-family:var(--font-display);font-size:1.6rem;color:var(--level-bright);
  margin:0 0 1rem;border-left:none;padding-left:0}
.leap-block p{color:color-mix(in srgb, var(--level-contrast) 72%, transparent);font-size:.95rem;max-width:600px}
.leap-arrows{display:flex;align-items:center;gap:var(--space-md);margin:1.5rem 0 1rem;flex-wrap:wrap}
.leap-level{background:color-mix(in srgb, var(--level-contrast) 8%, transparent);border:1px solid color-mix(in srgb, var(--level-contrast) 15%, transparent);
  border-radius:var(--radius-sm);padding:.6rem 1.2rem;font-family:var(--font-mono);font-size:.82rem;
  letter-spacing:.1em;color:color-mix(in srgb, var(--level-contrast) 82%, transparent)}
.leap-level.beige-l{background:color-mix(in srgb,var(--beige) 22%,transparent);border-color:var(--beige);color:var(--beige)}
.leap-level.purple-l{background:color-mix(in srgb,var(--purple) 22%,transparent);border-color:var(--purple);color:var(--purple)}
.leap-level.red-l{background:color-mix(in srgb,var(--red) 22%,transparent);border-color:var(--red);color:var(--red)}
.leap-level.blue-l{background:color-mix(in srgb,var(--blue) 22%,transparent);border-color:var(--blue);color:var(--blue)}
.leap-level.orange-l{background:color-mix(in srgb,var(--orange) 22%,transparent);border-color:var(--orange);color:var(--orange)}
.leap-level.green-l{background:color-mix(in srgb,var(--green) 22%,transparent);border-color:var(--green);color:var(--green)}
.leap-level.yellow-l{background:color-mix(in srgb,var(--yellow) 22%,transparent);border-color:var(--yellow);color:var(--yellow)}
.leap-level.turq-l{background:color-mix(in srgb,var(--turquoise) 22%,transparent);border-color:var(--turquoise);color:var(--turquoise)}
.leap-arrow{font-size:1.5rem;color:var(--level-bright);opacity:.7}

/* ─── СЕТКА АВТОРОВ ─── */
.authors-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin:var(--space-lg) 0}
.author-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius-lg);
  padding:1.4rem;text-align:center}
.author-initials{width:56px;height:56px;background:var(--level-deep);border-radius:50%;display:flex;
  align-items:center;justify-content:center;margin:0 auto .9rem;font-family:var(--font-display);
  font-size:1.3rem;color:var(--level-contrast)}
.author-name{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:hsl(var(--foreground));margin-bottom:.25rem}
.author-dates{font-family:var(--font-mono);font-size:.62rem;color:hsl(var(--muted-fg));margin-bottom:.8rem;letter-spacing:.08em}
.author-tone{display:inline-block;background:var(--level-fog);border:1px solid hsl(var(--border));
  border-radius:var(--radius-full);padding:.15rem .65rem;font-size:.7rem;color:var(--level);margin-bottom:.6rem}
.author-text{font-size:.82rem;color:hsl(var(--muted-fg));line-height:1.6;text-align:left}

/* ─── ГРУППЫ МАРКЕР-ТЕГОВ ─── */
.marker-group{margin:var(--space-lg) 0}
.marker-group-title{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--level);margin-bottom:.8rem;display:flex;align-items:center;gap:.6rem}
.marker-group-title::after{content:'';flex:1;height:1px;background:hsl(var(--border))}
.marker-tags{display:flex;flex-wrap:wrap;gap:.5rem}
/* — Tag — мягкий тег-пилюля-метка (атом). Единый канон: .marker-tag и .value-tag
   мигрированы на .tag в разметке СД и удалены (2026-06-05). Варианты: .accent (акцент
   уровня), .lg (крупный sans — для .values-grid). Ещё не сведены: .evidence-tag,
   .tv-label, .profile-badge (другие семейства). NB: имя .chip занято интерактивным
   фильтр-чипом (forms.css) — это другой компонент; статическая метка-тег = .tag. */
.tag{background:var(--level-fog);border:1px solid hsl(var(--border));border-radius:var(--radius-sm);
  padding:.3rem .75rem;font-family:var(--font-mono);font-size:.72rem;color:hsl(var(--foreground));display:inline-block}
.tag.accent{background:color-mix(in srgb,var(--level) 14%,hsl(var(--card)));border-color:transparent;color:var(--level)}
.tag.lg{font-family:var(--font-sans);font-size:.87rem;padding:.65rem .9rem;text-align:center}

/* ─── ЗАКЛЮЧЕНИЕ ─── */
.conclusion::before{content:attr(data-watermark);position:absolute;right:-1rem;bottom:-2.5rem;
  font-family:var(--font-display);font-size:13rem;font-weight:300;color:color-mix(in srgb, var(--level-contrast) 4%, transparent);line-height:1}
.conclusion h2{font-family:var(--font-display);font-size:2.2rem;font-weight:600;color:var(--level-bright);
  margin-bottom:1.5rem;line-height:1.2}
.conclusion p{color:color-mix(in srgb, var(--level-contrast) 72%, transparent);font-size:1rem;line-height:1.75;max-width:680px}
.conclusion p strong{color:var(--level-bright)}

/* ─── ТАЙМЛАЙН СТАДИЙ (горизонтальный, §короткие) ─── */
.stage-timeline.horizontal{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:var(--space-lg) 0;position:relative}
.stage-timeline.horizontal::before{content:'';position:absolute;top:28px;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,var(--level-mist),var(--level),var(--level-deep));z-index:0}
.stage-timeline.horizontal .stage-card{text-align:center;padding:0 1rem;position:relative;z-index:1;background:none;border:none}
.stage-dot{width:56px;height:56px;background:hsl(var(--background));border:3px solid var(--level);border-radius:50%;
  margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-size:1.3rem;color:var(--level);font-weight:600}
.stage-card.exit .stage-dot{background:var(--level-deep);color:var(--level-contrast);border-color:var(--level-deep)}
.stage-name{font-family:var(--font-display);font-size:1.1rem;color:hsl(var(--foreground));margin-bottom:.25rem;font-weight:600}
.stage-code{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:hsl(var(--muted-fg));margin-bottom:.8rem}
.stage-text{font-size:.82rem;color:hsl(var(--foreground) / .8);line-height:1.6;text-align:left;
  background:var(--level-fog);border:1px solid hsl(var(--border));border-radius:var(--radius);padding:.9rem 1rem;margin-top:.5rem}

/* Таймлайн стадий (вертикальные карточки, §длинные) — по умолчанию */
.stage-timeline{display:block;margin:var(--space-lg) 0}
.stage-card{text-align:left;background:var(--level-fog);border:1px solid hsl(var(--border));
  border-left:4px solid var(--level);border-radius:var(--radius);padding:1.4rem 1.6rem 1.4rem 4.4rem;
  margin-bottom:.9rem;position:relative}
.stage-num{position:absolute;left:1.25rem;top:1.4rem;width:38px;height:38px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.2rem;font-weight:600;
  color:var(--level-contrast);background:var(--level)}
.stage-title{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:hsl(var(--foreground));margin-bottom:.6rem}
.stage-card p{font-size:.9rem;margin-bottom:.6rem;line-height:1.65}
.stage-card p:last-child{margin-bottom:0}

/* ─── СЕТКА ЛИЧНОСТЕЙ — вариант канона .person-card с верхней планкой ─── */
/* Бывш. .persona-card / .personality-card сведены в канон .person-card (2026-06-05; базовые
   свойства совпадали). В этой сетке у карточки — верхняя планка-акцент (вариант через контекст
   .personality-grid; .people-grid — плоский, см. ниже). Дочерние .persona-* сохранены. */
.personality-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin:var(--space-lg) 0}
.personality-grid .person-card{position:relative;overflow:hidden}
.personality-grid .person-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--level)}
.persona-icon{font-family:var(--font-display);font-size:1.5rem;color:var(--level);font-style:italic;margin-bottom:.4rem}
.persona-name,.personality-name{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:hsl(var(--foreground));margin-bottom:.6rem}
.persona-text,.personality-grid .person-card p{font-size:.85rem;color:hsl(var(--foreground) / .8);line-height:1.6}
.persona-tag{display:inline-block;background:var(--level-fog);color:var(--level);border-radius:var(--radius-sm);
  padding:.1rem .5rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;margin-bottom:.5rem}

/* ─── КАРТА КУЛЬТУР ─── */
.culture-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin:var(--space-lg) 0}
.culture-card{background:var(--level-fog);border:1px solid hsl(var(--border));border-radius:var(--radius-lg);padding:1.4rem 1.5rem}
.culture-flag{font-family:var(--font-display);font-size:1.1rem;color:hsl(var(--foreground));font-weight:600;
  margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:1px solid hsl(var(--border))}
.culture-card p{font-size:.87rem;margin-bottom:.5rem}
.culture-card p:last-child{margin-bottom:0}

/* ─── РЕГРЕССИЯ (драм-блок) ─── */
.regression-block{background:var(--level-deep);color:var(--level-contrast);border-radius:var(--radius-lg);padding:2rem;margin:var(--space-lg) 0}
.regression-block .callout__label,.regression-block .card-label{color:var(--level-bright)}
.regression-flow{display:flex;flex-direction:column;gap:.8rem;margin-top:1.25rem}
.regression-row{display:grid;grid-template-columns:130px 30px 1fr;gap:var(--space-md);align-items:center;
  padding:.8rem 1rem;background:color-mix(in srgb, var(--level-contrast) 5%, transparent);border-radius:var(--radius);border-left:3px solid var(--level-bright)}
.regression-trigger{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--level-bright);text-transform:uppercase}
.regression-arrow{color:var(--level-bright);text-align:center;font-size:1.1rem}
.regression-result{font-size:.85rem;color:color-mix(in srgb, var(--level-contrast) 85%, transparent);line-height:1.55}

/* ─── DATA-ROW — канон строки «метка → значение» ─── */
/* База: грид с пунктирным разделителем. Колонки/отступы — в варианте. Mobile → 1 колонка (см. медиа ниже).
   Варианты: .translation-row (словарь переводов, 200px), .day-row (день из жизни, 80px).
   NB: .regression-row (заливная строка в тёмном .regression-block) и .era-card (карточка) —
   намеренно НЕ варианты: иной визуальный паттерн. */
.data-row{display:grid;border-bottom:1px dashed hsl(var(--border))}
.data-row:last-child{border-bottom:none}

/* ─── ДЕНЬ ИЗ ЖИЗНИ ─── */
.day-row{grid-template-columns:80px 1fr;gap:1.25rem;padding:1rem 0}
.day-time{font-family:var(--font-mono);font-size:.82rem;color:var(--level);letter-spacing:.05em;font-weight:600}
.day-text,.day-event{font-size:.9rem;color:hsl(var(--foreground) / .8);line-height:1.65}

/* ─── ЭПОХИ / ИСТОРИЯ ─── */
.era-card{background:var(--level-fog);border:1px solid hsl(var(--border));border-radius:var(--radius);
  padding:1.25rem 1.5rem;margin-bottom:.9rem;display:grid;grid-template-columns:130px 1fr;gap:1.4rem;align-items:start}
.era-card.block{display:block}
.era-decade{font-family:var(--font-display);font-size:1.25rem;color:hsl(var(--foreground));font-weight:600;text-align:right}
.era-period{font-family:var(--font-display);font-size:1.1rem;color:hsl(var(--foreground));font-weight:600;text-align:left;
  margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid hsl(var(--border))}
.era-content{font-size:.87rem;color:hsl(var(--foreground) / .8);line-height:1.65}
.era-content strong,.era-card p strong{color:hsl(var(--foreground))}
.era-card p{font-size:.87rem;color:hsl(var(--foreground) / .8);line-height:1.65;margin:0}

/* ─── СЛОВАРЬ ПЕРЕВОДОВ ─── */
/* .translation-table — обёртка-рамка вокруг строк словаря (как .panel, острые углы).
   Раньше была orphan (без CSS). Используется: spiraldynamics/green,blue,orange (секция «Словарь переводов»). */
.translation-table{border:1px solid hsl(var(--border));border-radius:var(--radius);padding:.2rem 1.5rem}
.translation-row{grid-template-columns:200px 1fr;gap:1.5rem;padding:1.4rem 0}  /* вариант .data-row */
.translation-concept{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:hsl(var(--foreground));text-align:right;padding-top:.25rem}
.translation-versions{display:grid;grid-template-columns:1fr;gap:.5rem}
.translation-version{display:grid;grid-template-columns:70px 1fr;gap:.9rem;align-items:baseline;font-size:.87rem;line-height:1.55}
.tv-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;
  padding:.1rem .4rem;border-radius:var(--radius-sm);font-weight:500}
.tv-purple{background:color-mix(in srgb,var(--purple) 14%,hsl(var(--card)));color:var(--purple)}
.tv-red{background:color-mix(in srgb,var(--red) 14%,hsl(var(--card)));color:var(--red)}
.tv-blue{background:color-mix(in srgb,var(--blue) 14%,hsl(var(--card)));color:var(--blue)}
.tv-orange{background:color-mix(in srgb,var(--orange) 14%,hsl(var(--card)));color:var(--orange)}
.tv-green{background:color-mix(in srgb,var(--green) 14%,hsl(var(--card)));color:var(--green)}
.tv-yellow{background:color-mix(in srgb,var(--yellow) 14%,hsl(var(--card)));color:var(--yellow)}
.tv-text{color:hsl(var(--foreground) / .8)}

/* ─── ЛИДЕРСТВО ─── */
.leadership-cover{padding:3.5rem 3rem}
.leadership-cover::before{content:attr(data-watermark);position:absolute;right:-.6rem;bottom:-1.8rem;
  font-family:var(--font-display);font-size:6.5rem;font-weight:300;color:color-mix(in srgb, var(--level-contrast) 5%, transparent);letter-spacing:-.02em;line-height:1}
.leadership-cover .chapter-mark{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;
  color:var(--level-bright);text-transform:uppercase;margin-bottom:.9rem}
.leadership-cover h2{font-family:var(--font-display);font-size:2.4rem;font-weight:600;color:var(--level-contrast);
  line-height:1.1;margin-bottom:1rem;max-width:600px;position:relative;z-index:1}
.leadership-cover h2 em{color:var(--level-bright);font-style:normal}
.leadership-cover .lead-desc{font-size:.95rem;color:color-mix(in srgb, var(--level-contrast) 62%, transparent);max-width:540px;line-height:1.7;position:relative;z-index:1}
.lead-section{margin-bottom:var(--space-2xl)}
.lead-section-num{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;color:var(--level-ink);text-transform:uppercase;margin-bottom:.4rem}
.lead-section h3{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:hsl(var(--foreground));margin:0 0 1rem;padding-left:0;border-left:none}
.leader-archetype{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius-lg);
  padding:1.4rem 1.6rem;margin-bottom:.9rem;border-left:4px solid var(--level)}
.leader-archetype-name{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:hsl(var(--foreground));margin-bottom:.4rem}
.leader-archetype-quote{font-style:italic;color:var(--level);margin-bottom:.8rem;font-family:var(--font-sans);font-size:1rem}
.leader-archetype p{font-size:.9rem;margin-bottom:.5rem}

/* ─── ФРЕЙМВОРК ─── */
.framework-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin:var(--space-lg) 0}
.framework-card{background:var(--level-fog);border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1.25rem 1.4rem}
.framework-num{font-family:var(--font-mono);font-size:.62rem;color:var(--level);letter-spacing:.15em;margin-bottom:.4rem}
.framework-title{font-family:var(--font-display);font-size:1.05rem;color:hsl(var(--foreground));font-weight:600;margin-bottom:.5rem}
.framework-card p{font-size:.82rem;margin:0}

/* ─── РЕЖИМЫ ПРОВАЛА ─── */
.failure-list{counter-reset:fail}
.failure-card{counter-increment:fail;background:color-mix(in srgb,var(--warn) 10%,hsl(var(--card)));
  border-left:4px solid var(--warn);border-radius:var(--radius);padding:1.1rem 1.4rem 1.1rem 3.75rem;margin-bottom:.75rem;position:relative}
.failure-card::before{content:counter(fail,decimal-leading-zero);position:absolute;left:1.1rem;top:1rem;
  font-family:var(--font-display);font-size:1.3rem;color:var(--warn);font-weight:600}
.failure-title{font-weight:600;color:hsl(var(--foreground));margin-bottom:.4rem;font-size:.92rem}
.failure-desc{font-size:.85rem;color:hsl(var(--foreground) / .8);line-height:1.6}

/* ─── ИНСТРУМЕНТАРИЙ ─── */
.toolbox-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:var(--space-lg) 0}
.tool-item{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:.9rem 1rem;text-align:center}
.tool-name{font-family:var(--font-mono);font-size:.72rem;color:hsl(var(--foreground));letter-spacing:.05em;margin-bottom:.25rem;font-weight:600}
.tool-desc{font-size:.72rem;color:hsl(var(--muted-fg));line-height:1.45}

/* ─── КЕЙСЫ ─── */
.case-card{background:var(--level-fog);border:1px solid hsl(var(--border));border-left:4px solid var(--level);
  border-radius:var(--radius);padding:1.4rem 1.6rem;margin-bottom:var(--space-md)}
.case-name{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:hsl(var(--foreground));margin-bottom:.6rem}
.case-card p{font-size:.9rem;margin-bottom:.6rem}
.case-card p:last-child{margin-bottom:0}

/* ─── ТАЙМЛАЙН ПЕРЕХОДА α-β-γ-δ-new α ─── */
.transition-block{margin:var(--space-2xl) 0}
.transition-block h4{font-family:var(--font-display);font-size:1.25rem;margin-bottom:.9rem;color:hsl(var(--foreground))}
.phase-timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-sm);margin:var(--space-lg) 0 1.1rem;position:relative}
.phase-timeline::before{content:'';position:absolute;top:30px;left:6%;right:6%;height:2px;
  background:linear-gradient(90deg,var(--level-mist),var(--level-soft),var(--level),var(--level-deep),var(--level-bright));z-index:0;opacity:.7}
.phase-card{text-align:center;padding:0 .4rem;position:relative;z-index:1}
.phase-dot{width:60px;height:60px;background:hsl(var(--background));border:2px solid var(--level);border-radius:50%;
  margin:0 auto .9rem;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-size:1.6rem;color:var(--level);font-weight:600;font-style:italic}
.phase-card.delta .phase-dot{border-color:var(--level-bright);background:var(--level-pale)}
.phase-card.newalpha .phase-dot{border-color:var(--level-deep);background:var(--level-deep);color:var(--level-contrast)}
.phase-card .phase-name{font-family:var(--font-display);font-size:1rem;color:hsl(var(--foreground));margin-bottom:.2rem;font-weight:600}
.phase-code{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--muted-fg));margin-bottom:.6rem}
.phase-text{font-size:.78rem;line-height:1.5;color:hsl(var(--foreground) / .8);text-align:left}
.gamma-outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:var(--space-lg) 0}
.gamma-outcome{background:var(--level-fog);border-left:3px solid var(--level);border-radius:var(--radius-sm);padding:1rem 1.1rem}
.gamma-outcome.breakthrough{border-left-color:var(--level-bright)}
.gamma-outcome.regress{border-left-color:var(--warn)}
.gamma-outcome.stuck{border-left-color:hsl(var(--muted-fg))}
.gamma-outcome-title{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--level-ink);margin-bottom:.5rem}
.gamma-outcome p{font-size:.82rem;line-height:1.6;color:hsl(var(--foreground) / .8)}

/* ─── ВВОДНАЯ ВРЕЗКА-ПРЕДУПРЕЖДЕНИЕ (top-caveat) ─── */
.top-caveat{background:color-mix(in srgb,var(--warn) 9%,hsl(var(--card)));
  border:1px solid color-mix(in srgb,var(--warn) 35%,hsl(var(--border)));border-radius:var(--radius-lg);
  padding:1.6rem 1.8rem;margin-bottom:var(--space-2xl);position:relative}
.top-caveat::before{content:'⚠';position:absolute;top:1.3rem;left:1.6rem;font-size:1.3rem;color:var(--warn)}
.top-caveat-title{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--warn-ink);margin-bottom:.7rem;padding-left:2rem}
.top-caveat p{font-size:.92rem;color:hsl(var(--foreground) / .85);margin-bottom:.5rem;padding-left:2rem;line-height:1.65}
.top-caveat p:last-child{margin-bottom:0}

/* ─── ПАРАДОКС-ВРЕЗКА ─── */
.paradox-card{background:color-mix(in srgb,var(--warn) 10%,hsl(var(--card)));
  border:1px solid color-mix(in srgb,var(--warn) 35%,hsl(var(--border)));border-radius:var(--radius-lg);
  padding:1.5rem 1.75rem;margin:var(--space-md) 0}
.paradox-card .pseudo-title{color:var(--warn-ink);margin-bottom:.7rem}
.paradox-card p{font-size:.9rem}
.paradox-card strong{color:hsl(var(--foreground))}

/* ─── БИОГРАФИИ ─── */
.bio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin:var(--space-lg) 0}
.bio-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1.1rem 1.4rem}
.bio-name{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:hsl(var(--foreground));margin-bottom:.25rem}
.bio-arc{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;color:var(--level-ink);margin-bottom:.6rem;text-transform:uppercase}
.bio-text{font-size:.82rem;color:hsl(var(--foreground) / .8);line-height:1.65}

/* ─── ЭПОХИ (грид-вариант со стопкой era-card) ─── */
.eras-grid{display:grid;grid-template-columns:1fr;gap:0;margin:var(--space-lg) 0}
.eras-grid .era-card{background:none;border:none;border-bottom:1px dashed hsl(var(--border));border-radius:0;
  margin:0;padding:1.4rem 0;display:grid;grid-template-columns:110px 1fr;gap:1.5rem;align-items:start}
.eras-grid .era-card:last-child{border-bottom:none}
.eras-grid .era-decade{color:var(--level)}
.eras-grid .era-content h4{margin:0 0 .5rem;font-size:.82rem;color:hsl(var(--foreground));letter-spacing:.04em}
.eras-grid .era-content p{font-size:.87rem;margin-bottom:.4rem}

/* ─── БЛОК «ДЕНЬ ИЗ ЖИЗНИ» (обёртка) ─── */
.day-block{background:var(--level-fog);border:1px solid hsl(var(--border));border-radius:var(--radius-lg);
  padding:2rem;margin:var(--space-lg) 0}
.day-block .day-row{border-bottom:1px solid hsl(var(--border))}

/* ─── ЭМПИРИЧЕСКАЯ ЦИТАТА ─── */
.empirical-quote{background:var(--level-fog);border:1px solid hsl(var(--border));border-left:4px solid var(--level);
  border-radius:0 var(--radius) var(--radius) 0;padding:1.6rem 2rem;margin:var(--space-lg) 0;position:relative}
.empirical-quote::before{content:'\201C';position:absolute;top:-.2rem;left:.7rem;font-size:3.5rem;
  color:color-mix(in srgb,var(--level) 40%,transparent);font-family:var(--font-display);line-height:1}
.empirical-quote-text{font-family:var(--font-sans);font-size:1.05rem;font-style:italic;
  color:hsl(var(--foreground));line-height:1.6;margin-bottom:.7rem}
.empirical-quote-source{font-family:var(--font-mono);font-size:.7rem;color:hsl(var(--muted-fg));letter-spacing:.05em}

/* ─── РАСХОЖДЕНИЯ АВТОРОВ (divergence) ─── */
.divergence-row{display:grid;grid-template-columns:140px 1fr;gap:1.5rem;padding:1.1rem 1.25rem;
  border-bottom:1px solid hsl(var(--border));align-items:start}
.divergence-row:last-child{border-bottom:none}
.divergence-row:nth-child(odd){background:var(--level-fog);border-radius:var(--radius-sm)}
.divergence-aspect{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:hsl(var(--foreground));text-align:right;padding-top:.25rem}
.divergence-positions{display:grid;grid-template-columns:1fr;gap:.5rem}
.divergence-position{display:grid;grid-template-columns:90px 1fr;gap:.9rem;align-items:baseline;font-size:.87rem;line-height:1.55}
.dp-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;
  padding:.1rem .4rem;border-radius:var(--radius-sm);font-weight:500;
  background:color-mix(in srgb,var(--level) 16%,hsl(var(--card)));color:var(--level)}
.dp-text{color:hsl(var(--foreground) / .8)}

/* ─── БЛОКИ ДОКАЗАТЕЛЬСТВ (evidence) ─── */
.evidence-block{background:var(--level-fog);border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1.5rem 1.75rem;margin:var(--space-md) 0}
.evidence-block-title{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:hsl(var(--foreground));margin-bottom:.6rem}
.evidence-block p{font-size:.9rem;margin-bottom:.5rem}
.evidence-block p:last-child{margin-bottom:0}
.evidence-tag{display:inline-block;background:color-mix(in srgb,var(--level) 16%,hsl(var(--card)));color:var(--level);
  border-radius:var(--radius-sm);padding:.1rem .5rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;margin-bottom:.6rem}
.evidence-tag.weak{background:color-mix(in srgb,var(--warn) 14%,hsl(var(--card)));color:var(--warn)}

/* ─── СЕТКА ПЕРСОН (people) ─── */
.people-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin:var(--space-lg) 0}
.person-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1.25rem 1.4rem}
.person-name{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:hsl(var(--foreground));margin-bottom:.15rem}
.person-meta{font-family:var(--font-mono);font-size:.62rem;color:var(--level);margin-bottom:.6rem;letter-spacing:.06em}
.person-text{font-size:.82rem;color:hsl(var(--foreground) / .8);line-height:1.6}
.person-source{font-size:.7rem;color:hsl(var(--muted-fg));margin-top:.5rem;font-style:italic}

/* ─── доп. цветовые чипы ─── */
.lb-coral{background:color-mix(in srgb,var(--coral) 16%,hsl(var(--card)));color:color-mix(in srgb,var(--coral) 72%,#000)}
.pseudo-turquoise{background:color-mix(in srgb,var(--turquoise) 8%,hsl(var(--card)));border-color:var(--turquoise)}
.tv-turquoise{background:color-mix(in srgb,var(--turquoise) 14%,hsl(var(--card)));color:var(--turquoise)}
.translation-text{color:hsl(var(--foreground) / .8)}

/* ─── СТИКЕР-ГРИД адаптив ─── */
@media(max-width:768px){
  .dual-panel,.authors-grid,.personality-grid,.culture-grid,.framework-grid,
  .bio-grid,.people-grid,.divergence-row,.divergence-position,
  .stage-timeline.horizontal,.gamma-outcomes,.phase-timeline{grid-template-columns:1fr}
  .divergence-aspect{text-align:left}
  .phase-timeline::before,.stage-timeline.horizontal::before{display:none}
  .toolbox-grid{grid-template-columns:1fr 1fr}
  .data-row,.era-card{grid-template-columns:1fr;gap:.5rem}
  .translation-concept,.era-decade{text-align:left}
  .regression-row{grid-template-columns:1fr;gap:.5rem}
  .leap-block,.conclusion,.leadership-cover{padding:2rem 1.5rem}
}

/* ════════════════════════════════════════════════════════════
   КОНТЕНТ-БЛОКИ ЛОНГРИДА (подняты из emotional-core, теперь общие).
   Применяются в .reading-main/.prose любого раздела. Акцент — --level.
   Используются: emotional-core/{methodology,fear,guilt,shame,triumph}.html.
   ════════════════════════════════════════════════════════════ */

/* — Метка-капс внутри .card (моно, аптренд). Цвет — акцент уровня. — */
.card-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--level-ink);margin-bottom:10px}

/* — Карточка-«мыслитель»: портрет автора/концепции (вариант .card) — */
.card.thinker{border-left:3px solid var(--level)}
.card.thinker .thinker-name{font-family:var(--font-display);font-size:1.35rem;
  color:hsl(var(--foreground));margin-bottom:2px}
.card.thinker .thinker-years{font-family:var(--font-mono);font-size:.7rem;
  color:hsl(var(--muted-fg));margin-bottom:14px}

/* — Обложка-врезка темы: крупная буква-watermark + тег + заголовок + лид.
     Цвет — инлайновый --c (фолбэк на --level). Кликабельная — a.emotion-cover. — */
.emotion-cover{display:block;margin:40px 0 36px;padding:42px 44px;background:hsl(var(--card));
  border:1px solid hsl(var(--border));border-left:4px solid var(--c,var(--level));
  border-radius:var(--radius-lg);position:relative;overflow:hidden}
.emotion-cover::after{content:attr(data-letter);position:absolute;right:-20px;bottom:-50px;
  font-family:var(--font-display);font-style:italic;font-size:220px;
  color:color-mix(in srgb,hsl(var(--foreground)) 3%,transparent);line-height:1;pointer-events:none}
.emotion-cover-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:color-mix(in srgb,var(--c,var(--level)) 72%,hsl(var(--foreground)));margin-bottom:14px}
.emotion-cover h2{font-family:var(--font-display);font-weight:600;font-size:2.4rem;line-height:1.1;
  color:hsl(var(--foreground));margin-bottom:8px}
.emotion-cover h2 em{color:var(--c,var(--level));font-style:italic}
.emotion-cover-sub{font-size:.95rem;line-height:1.7;color:hsl(var(--foreground) / .82);
  max-width:620px;position:relative;z-index:1}
/* кликабельный вариант (карточка-ссылка на хабе/странице фигуры) */
a.emotion-cover{text-decoration:none;color:inherit;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
a.emotion-cover:hover{border-color:var(--c,var(--level));box-shadow:var(--shadow-card);transform:translateY(-2px)}
a.emotion-cover .emotion-cover-go{position:absolute;right:28px;top:26px;z-index:1;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--c,var(--level)) 72%,hsl(var(--foreground)))}
/* в сетке хаба (.hub) обложки выступают карточками — гасим собственные отступы */
.hub .emotion-cover{margin:0;height:100%}

/* — Сравнительная таблица (параметр × сущности), адаптив в стопку — */
.compare{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);
  overflow:hidden;margin:30px 0}
.compare-row{display:grid;grid-template-columns:minmax(150px,0.9fr) 1fr 1fr;border-bottom:1px solid hsl(var(--border))}
.compare-row:last-child{border-bottom:none}
.compare-row.header{background:hsl(var(--muted-bg))}
.compare-row.header>div{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--level-ink);padding:14px 18px}
/* min-width:0 + перенос — длинные слова метки не вылезают в соседнюю колонку
   (фикс наезда «Криминальная вина»/«гордость» в emotional-core guilt/triumph) */
.compare-cell{padding:16px 20px;font-size:.84rem;line-height:1.55;color:hsl(var(--foreground) / .82);
  border-right:1px solid hsl(var(--border));min-width:0;overflow-wrap:break-word}
.compare-cell:last-child{border-right:none}
.compare-cell.label{font-family:var(--font-display);font-size:1.05rem;font-style:italic;color:hsl(var(--foreground));
  hyphens:auto}
.compare-cell strong{color:hsl(var(--foreground))}
@media(max-width:900px){.compare-row{grid-template-columns:1fr}
  .compare-cell{border-right:none;border-bottom:1px solid hsl(var(--border))}}

/* — Таймлайн истории (даты/события по вертикальной оси) — */
.timeline{margin:28px 0;position:relative;padding-left:30px;border-left:1px solid hsl(var(--border))}
.timeline-item{margin-bottom:22px;position:relative}
.timeline-item::before{content:'';position:absolute;left:-36px;top:6px;width:11px;height:11px;
  background:hsl(var(--background));border:2px solid var(--level);border-radius:50%}
.timeline-date{font-family:var(--font-mono);font-size:.7rem;color:var(--level);letter-spacing:.1em;margin-bottom:4px}
.timeline-title{font-family:var(--font-display);font-size:1.12rem;color:hsl(var(--foreground));margin-bottom:6px}
.timeline-body{font-size:.84rem;line-height:1.6;color:hsl(var(--foreground) / .82)}

/* ============================================================
   КАРТОЧКИ-БЛОКИ В СТИЛЕ MAKERS (острые углы, рамки, серые подложки)
   Все на токенах, светлая/тёмная тема.
   ============================================================ */

/* — Сетка карточек (1–4 в ряд) — */
.block-grid{display:grid;gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* — FEATURE-CARD: номер + заголовок + цитата + лейбл-вывод — */
.feature-card{background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:var(--radius);padding:var(--space-xl)}
.feature-card__num{font-family:var(--font-mono);font-size:.85rem;font-weight:700;letter-spacing:.12em;
  color:hsl(var(--muted-fg));margin-bottom:var(--space-md)}
.feature-card__title{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);
  line-height:1.2;letter-spacing:-.01em;margin:0 0 var(--space-md)}
.feature-card__quote{border-left:3px solid var(--level);padding:.1rem 0 .1rem 1rem;margin:0 0 var(--space-md);
  font-style:italic;font-size:.95rem;line-height:1.55;color:hsl(var(--foreground) / .8)}
.feature-card__label{font-size:.95rem;line-height:1.6;color:hsl(var(--muted-fg))}
.feature-card__label b,.feature-card__label strong{color:hsl(var(--foreground));font-weight:600}
/* буллет-список внутри (стиль makers: квадратный маркер акцентом) */
.feature-card ul{list-style:none;margin:var(--space-sm) 0 0;padding:0;display:grid;gap:.7rem}
.feature-card ul li{position:relative;padding-left:1.1rem;font-size:.95rem;line-height:1.5;color:hsl(var(--foreground) / .85)}
.feature-card ul li::before{content:"";position:absolute;left:0;top:.5em;width:.4rem;height:.4rem;background:var(--level)}

/* тёмная секция-обёртка под карточки (как «Узнаёшь себя?») */
.section--dark{background:hsl(var(--primary));color:hsl(var(--primary-fg));
  padding:var(--space-2xl) clamp(1.25rem,4vw,3rem);margin:var(--space-2xl) 0}
.section--dark .feature-card{background:transparent;border-color:hsl(var(--primary-fg) / .22)}
.section--dark .feature-card__title{color:hsl(var(--primary-fg))}
.section--dark .feature-card ul li{color:hsl(var(--primary-fg) / .82)}
.section--dark .feature-card.is-highlight{border-color:hsl(var(--primary-fg) / .6)}

/* — STEP-CARD: верхняя планка + блёклый номер + серая подложка — */
.step-card{background:hsl(var(--muted-bg));border-top:3px solid hsl(var(--foreground));
  padding:var(--space-xl)}
.step-card__num{font-family:var(--font-display);font-weight:700;font-size:3rem;line-height:1;
  color:hsl(var(--foreground) / .14);margin-bottom:var(--space-md)}
.step-card__title{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);
  line-height:1.2;margin:0 0 var(--space-sm)}
.step-card__text{font-size:.95rem;line-height:1.6;color:hsl(var(--muted-fg))}

/* — PRICE-CARD: тариф (в рамке) + featured (инверт-чёрная) + тег — */
.price-card{background:hsl(var(--card));border:1px solid hsl(var(--foreground));
  padding:var(--space-xl);position:relative}
.price-card__name{font-family:var(--font-display);font-weight:600;font-size:var(--text-2xl);margin:0 0 .3rem}
.price-card__sub{font-size:.95rem;color:hsl(var(--muted-fg));margin:0 0 var(--space-lg)}
.price-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.price-card ul li{position:relative;padding-left:1.3rem;font-size:.95rem;line-height:1.5}
.price-card ul li::before{content:"";position:absolute;left:0;top:.5em;width:.4rem;height:.4rem;background:var(--level)}
.price-card__price{font-family:var(--font-display);font-weight:700;font-size:var(--text-3xl);
  margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid hsl(var(--border))}
.price-card__price span{font-size:1rem;font-weight:400;color:hsl(var(--muted-fg))}
.price-tag{position:absolute;top:var(--space-lg);right:var(--space-lg);font-family:var(--font-mono);
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--level);color:var(--level-contrast);padding:.3rem .6rem}
/* featured — инвертированная тёмная карточка */
.price-card.is-featured{background:hsl(var(--primary));color:hsl(var(--primary-fg));border-color:hsl(var(--primary))}
.price-card.is-featured .price-card__sub{color:hsl(var(--primary-fg) / .7)}
.price-card.is-featured .price-card__price{border-top-color:hsl(var(--primary-fg) / .2)}
.price-card.is-featured .price-card__price span{color:hsl(var(--primary-fg) / .7)}

/* ============================================================
   СРАВНЕНИЕ ДВУХ КОЛОНОК — .compare-cols
   Две помеченные колонки бок о бок (напр. «Архетип / Реальность»
   в Пути героя). Острые углы, акцент --level, светлая/тёмная.
   Вариант .compare-cols--accent — планка-акцент слева; первая
   колонка курсивом (.compare-cols__quote) — для «цитата vs факт».
   ============================================================ */
.compare-cols{display:grid;grid-template-columns:1fr 1fr;
  border:1px solid hsl(var(--border));margin:1.6em 0}
.compare-cols--accent{border-left:4px solid var(--level)}
.compare-cols > div{padding:var(--space-lg) var(--space-xl)}
.compare-cols > div:first-child{border-right:1px solid hsl(var(--border))}
.compare-cols__label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--level-ink);font-weight:600;margin-bottom:var(--space-sm)}
.compare-cols__text{font-size:.95rem;line-height:1.6;color:hsl(var(--foreground) / .85)}
.compare-cols__quote{font-style:italic;font-size:.95rem;line-height:1.6;color:hsl(var(--foreground) / .8)}
@media(max-width:640px){
  .compare-cols{grid-template-columns:1fr}
  .compare-cols > div:first-child{border-right:none;border-bottom:1px solid hsl(var(--border))}
}

/* ════════════════════════════════════════════════════════════
   CARD-GRID — сетка карточек (организм). Атомарно: .card-grid (организм)
   = .card-grid__item × N, карточка = атом .eyebrow + заголовок + текст.
   Канон вместо theory-grid/spec-grid/submotifs-grid/connection-cards.
   Вариант .card-grid--dark — тёмная «драм»-сетка (фон --level-deep).
   Используется: контент-сетки лонгридов (оси/модели/связи).
   ════════════════════════════════════════════════════════════ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-md);margin:var(--space-xl) 0}
.card-grid__item{display:block;background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-top:2px solid var(--level);border-radius:var(--radius);padding:var(--space-lg);min-width:0;
  text-decoration:none;color:inherit;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
/* карточка-ссылка (a.card-grid__item) — лёгкий подъём на ховере */
a.card-grid__item:hover{border-color:var(--level);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.card-grid__item .eyebrow{margin-bottom:.5rem}
.card-grid__item h3{font-family:var(--font-display);font-weight:600;font-size:1.1rem;
  line-height:1.25;margin:.1rem 0 .5rem;color:hsl(var(--foreground))}
.card-grid__item p{font-size:.88rem;line-height:1.6;color:hsl(var(--foreground) / .8);margin:0}
/* тёмный вариант — карточки на глубоком фоне уровня */
.card-grid--dark .card-grid__item{background:var(--level-deep);border-color:transparent;
  border-top-color:var(--level-bright)}
.card-grid--dark .card-grid__item h3{color:var(--level-contrast)}
.card-grid--dark .card-grid__item p{color:color-mix(in srgb,var(--level-contrast) 78%,transparent)}
.card-grid--dark .card-grid__item .eyebrow{color:var(--level-bright)}
@media(max-width:520px){.card-grid{grid-template-columns:1fr}}


/* ════════════════════════════════════════════════════════════
   СЛОЙ: ХАБЫ / ЛЕНДИНГ (бывш. home.css — слит сюда, единая база компонентов)
   ════════════════════════════════════════════════════════════ */
/* ============================================================
   ФУНКЦИЯ ДИЗАЙНА · СТАРТОВАЯ СТРАНИЦА (ХАБ)
   Hero курса и сетка карточек-разделов. Зависит от
   tokens.css + base.css + layout.css.
   ============================================================ */
.home{max-width:var(--content-width);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
/* модификатор для страниц-списков без hero (напр. content.html «Материалы») —
   добавляет верхний отступ, чтобы контент не прилипал к sticky-шапке */
.home--list{padding-top:var(--space-2xl)}

/* — Hero курса — */
.home-hero{padding:var(--space-3xl) 0 var(--space-2xl);max-width:760px}
.home-hero .pill{margin-bottom:var(--space-lg)}
.home-hero h1{font-size:clamp(3.25rem,2.2rem + 5vw,5.75rem);line-height:1.02;margin-bottom:var(--space-lg)}
.home-hero p{font-size:var(--text-xl);line-height:1.55;color:hsl(var(--muted-fg));
  max-width:54ch;margin-bottom:var(--space-lg)}
.home-hero .row{gap:var(--space-md)}

/* — Hero раздела-разводящей (методологические подразделы): компактнее корневого —
   заголовок вдвое меньше, без бейджа, меньше отступ до блоков-разводящих — */
.home--hub .home-hero{padding:var(--space-2xl) 0 var(--space-md);max-width:680px}
.home--hub .home-hero h1{font-size:clamp(1.625rem,1.1rem + 2.5vw,2.875rem);margin-bottom:var(--space-md)}
.home--hub .home-hero p{margin-bottom:0}
.home--hub .home-hero + .tier-row,
.home--hub .home-hero + .section-eyebrow{margin-top:var(--space-lg)}

/* — Заголовок секции списка разделов — */
.section-eyebrow{display:flex;align-items:center;gap:.75rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:hsl(var(--muted-fg));margin:var(--space-2xl) 0 var(--space-lg)}
.section-eyebrow .line{height:1px;flex:1;background:hsl(var(--border))}

/* — Карточки-ссылки контекстно-независимы — */
/* Эти компоненты — блочные ссылки (<a>), которые на реальных страницах живут вне
   прозы. Но если их вставить в .reading-main/.prose, prose-правило ссылки
   (.reading-main a / .prose a → подчёркивание + цвет --level) перебивает их базовый
   text-decoration:none по специфичности. Подтверждаем no-underline с приоритетом,
   чтобы карточка всегда выглядела как карточка, в любом контексте (в т.ч. витрина). */
.reading-main a.hub-card,.prose a.hub-card,
.reading-main a.level,.prose a.level,
.reading-main a.card-grid__item,.prose a.card-grid__item,
.reading-main a.emotion-cover,.prose a.emotion-cover{text-decoration:none;color:inherit}

/* — Сетка карточек-разделов — */
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-lg)}
.hub-card{
  position:relative;display:flex;flex-direction:column;
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:var(--radius-lg);padding:var(--space-xl);text-decoration:none;color:inherit;
  box-shadow:var(--shadow-sm);overflow:hidden;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.hub-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--level);opacity:.85}
.hub-card:hover{border-color:var(--level);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
/* Обложка курса (FD-182): вытянута на всю ширину карточки поверх внутренних
   отступов, рисуется под акцентной полосой. Без обложки слот не выводится. */
.hub-card__cover{display:block;width:calc(100% + var(--space-xl) * 2);
  margin:calc(var(--space-xl) * -1) calc(var(--space-xl) * -1) var(--space-lg);
  aspect-ratio:16 / 9;object-fit:cover;background:hsl(var(--muted-bg))}
.hub-card__index{font-family:var(--font-mono);font-size:.75rem;color:var(--level);
  margin-bottom:var(--space-md);letter-spacing:.05em}
.hub-card__title{font-family:var(--font-display);font-weight:600;font-size:var(--text-2xl);
  letter-spacing:-.02em;line-height:1.15;margin-bottom:.5rem}
.hub-card__desc{color:hsl(var(--muted-fg));font-size:.95rem;line-height:1.55;margin-bottom:var(--space-lg)}
.hub-card__meta{margin-top:auto;display:flex;align-items:center;gap:.5rem;
  font-size:.78rem;color:hsl(var(--muted-fg));font-family:var(--font-mono)}
.hub-card__arrow{margin-left:auto;color:var(--level);transition:transform var(--dur-fast) var(--ease)}
.hub-card:hover .hub-card__arrow{transform:translateX(3px)}
/* Вариант «Скоро» (FD-242): карточка курса-заглушки — содержимое ещё не готово.
   Некликабельна (рендерится <div>, не ссылкой), приглушена; вместо стрелки __arrow —
   пилюля __soon. Гасим hover-подъём базы (она реагирует на :hover у любого .hub-card).
   Применяется: каталог курсов /trainer (курсы со status="coming_soon"). */
.hub-card--soon{cursor:default}
.hub-card--soon:hover{border-color:hsl(var(--border));box-shadow:var(--shadow-sm);transform:none}
.hub-card--soon::before{opacity:.35}
.hub-card--soon .hub-card__title{color:hsl(var(--muted-fg))}
.hub-card__soon{margin-left:auto;display:inline-flex;align-items:center;
  padding:.2rem .6rem;border-radius:var(--radius-full);
  background:hsl(var(--muted-bg));color:hsl(var(--muted-fg));
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}

/* — Лента точек-уровней (визуальный мостик спирали) — */
.level-strip{display:flex;gap:.4rem;margin-top:var(--space-sm)}
.level-strip i{width:14px;height:14px;border-radius:50%;display:block}

/* — Карта соответствий уровень → роль — */
.map-block{border:1px solid hsl(var(--border));border-radius:var(--radius-lg);
  padding:var(--space-xl);background:hsl(var(--muted-bg) / .4);margin-top:var(--space-lg)}

/* — Мета-полоса (числа под hero) — */
.meta-strip{display:flex;gap:var(--space-2xl);flex-wrap:wrap;margin-top:var(--space-xl)}
.meta-strip .num{font-family:var(--font-display);font-weight:600;font-size:var(--text-4xl);
  line-height:1;color:var(--level)}
.meta-strip .lbl{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:hsl(var(--muted-fg));margin-top:.5rem}

/* — Разделитель-ярус — */
.tier-row{display:flex;align-items:center;gap:var(--space-md);margin:var(--space-2xl) 0 var(--space-md)}
.tier-row .tier-name{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--level-ink);font-weight:600;white-space:nowrap}
.tier-row .tier-line{flex:1;height:1px;background:hsl(var(--border))}
.tier-row .tier-note{font-size:.8rem;color:hsl(var(--muted-fg));font-style:italic}

/* — Ряды-уровни (ссылки на материалы) — */
.levels{display:flex;flex-direction:column;gap:var(--space-md)}
.level{display:grid;grid-template-columns:84px 1fr auto;align-items:stretch;
  background:hsl(var(--card));border:1px solid hsl(var(--border));border-left:3px solid var(--level);
  border-radius:var(--radius-lg);text-decoration:none;color:inherit;overflow:hidden;position:relative;
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.level:hover{transform:translateX(5px);border-color:var(--level);box-shadow:var(--shadow-lg)}
.level-idx{background:color-mix(in srgb,var(--level) 12%,hsl(var(--card)));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  padding:1.2rem 0;border-right:1px solid hsl(var(--border))}
.level-dot{width:22px;height:22px;border-radius:50%;background:var(--level)}
.level-roman{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;color:hsl(var(--muted-fg))}
.level-body{padding:1.2rem 1.6rem;min-width:0}
.level-head{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:.4rem}
.level-name{font-family:var(--font-display);font-weight:600;font-size:1.4rem;line-height:1.1}
.level:hover .level-name{color:var(--level)}
.level-code{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--level);
  border:1px solid color-mix(in srgb,var(--level) 45%,transparent);border-radius:var(--radius-full);padding:.15rem .6rem}
.level-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--muted-fg))}
.level-desc{font-size:.9rem;line-height:1.55;color:hsl(var(--muted-fg))}
.level-status{position:absolute;top:.9rem;right:5rem;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--muted-fg))}
.level-go{display:flex;align-items:center;padding:0 1.6rem}
.level-go .circle{width:42px;height:42px;border-radius:50%;border:1px solid hsl(var(--border));
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:hsl(var(--muted-fg));
  transition:all var(--dur-fast) var(--ease)}
.level:hover .level-go .circle{border-color:var(--level);background:var(--level);color:var(--level-contrast);transform:rotate(-45deg)}

/* — Вариант .levels--mono — ряды-уровни без цветового акцента (ч/б). Кружок,
   левая тонировка, ховер-рамка/заголовок и круглая стрелка — чёрно-белые
   (foreground/muted) вместо --level. Для хаб-секций-директорий, оформленных
   как ряды (напр. «теоретические основы»). Реальные ряды-уровни остаются цветными. */
.levels--mono .level{border-left-color:hsl(var(--foreground))}
.levels--mono .level-idx{background:hsl(var(--muted-bg))}
.levels--mono .level-dot{background:hsl(var(--foreground))}
.levels--mono .level:hover{border-color:hsl(var(--foreground))}
.levels--mono .level:hover .level-name{color:hsl(var(--foreground))}
.levels--mono .level:hover .level-go .circle{border-color:hsl(var(--foreground));
  background:hsl(var(--foreground));color:hsl(var(--background))}

/* — Слот .level-icon — тематическая векторная иконка вместо кружка .level-dot
   в индексе раздела (content.html). Inline-SVG в стиле Lucide (stroke=currentColor),
   поэтому цвет наследуется: акцент по умолчанию, foreground в .levels--mono. */
.level-icon{width:28px;height:28px;color:var(--level);display:flex;align-items:center;justify-content:center}
.level-icon svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.levels--mono .level-icon{color:hsl(var(--foreground))}
.level:hover .level-icon{color:var(--level)}
.levels--mono .level:hover .level-icon{color:hsl(var(--foreground))}

/* — Разделитель-метка раздела — */
.section-mark{display:flex;align-items:center;gap:var(--space-md);margin:var(--space-2xl) 0 var(--space-lg)}
.section-mark::before,.section-mark::after{content:"";height:1px;background:hsl(var(--border));flex:1}
.section-mark span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:hsl(var(--muted-fg));white-space:nowrap}

/* — Блок «о серии» — */
.about{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius-lg);
  padding:var(--space-xl)}
.about h2{margin-bottom:var(--space-md)}
.about p{color:hsl(var(--muted-fg));margin-bottom:.9rem}
.about strong{color:hsl(var(--foreground));font-weight:600}
.about .caveat{margin-top:var(--space-md);padding:var(--space-md) var(--space-lg);
  background:color-mix(in srgb,var(--level) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--level) 25%,transparent);border-radius:var(--radius);
  font-size:.9rem;line-height:1.65;color:hsl(var(--muted-fg))}
.about .caveat strong{color:var(--level)}

/* — Принципы — */
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}
.principle{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);
  padding:var(--space-lg)}
.principle .p-num{font-family:var(--font-mono);font-size:.72rem;color:var(--level);letter-spacing:.08em;margin-bottom:.6rem}
.principle h3{margin-bottom:.4rem}
.principle p{font-size:.88rem;line-height:1.6;color:hsl(var(--muted-fg))}

@media(max-width:720px){
  .level{grid-template-columns:60px 1fr}
  .level-go{display:none}
  .level-status{right:1rem}
  .principles{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hub{grid-template-columns:1fr}
  .home-hero{padding-top:var(--space-2xl)}
  .meta-strip{gap:var(--space-lg)}
}

/* ════════════════════════════════════════════════════════════
   ЛЕНДИНГ (T-LANDING) — маркетинговая страница курса (index.html).
   Каркас .home + центрированный hero, ряды-секции, CTA-ряды, форма-заявка.
   Все цвета — токены; акцент страницы — --level. Переиспользует .def-grid,
   .card-grid, .card.thinker, .tag, .btn, .callout, форму forms.css. Адаптив <760px.
   ════════════════════════════════════════════════════════════ */
.landing{padding-bottom:var(--space-3xl)}
/* hero/оффер — по центру */
.landing-hero{max-width:880px;margin:0 auto;text-align:center;padding:var(--space-3xl) 0 var(--space-2xl)}
.landing-hero .eyebrow{margin-bottom:var(--space-md)}
.landing-hero h1{font-size:clamp(2.6rem,1.4rem + 5.5vw,5rem);line-height:1.02;letter-spacing:-.03em;margin-bottom:var(--space-lg)}
.landing-hero h1 em{color:var(--level);font-style:normal}
.landing-hero__lede{font-size:var(--text-lg);line-height:1.6;color:hsl(var(--muted-fg));max-width:660px;margin:0 auto var(--space-xl)}
.landing-hero__tags{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:var(--space-xl)}
/* ряды CTA */
.landing-cta-row{display:flex;flex-wrap:wrap;gap:var(--space-md);margin:var(--space-md) 0}
.landing-hero .landing-cta-row{justify-content:center}
.landing-cta-row--center{justify-content:center;margin-top:var(--space-lg)}
/* вводный абзац секции */
.landing-intro{max-width:660px;margin:0 auto var(--space-lg);text-align:center;font-size:var(--text-lg);line-height:1.6;color:hsl(var(--muted-fg))}
/* сегменты — 2 карточки */
.landing-segments{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin:var(--space-md) 0}
/* мини-урок */
.landing-mini{max-width:760px;margin:var(--space-md) auto}
.landing-h2{font-family:var(--font-display);font-weight:600;font-size:var(--text-3xl);letter-spacing:-.02em;line-height:1.1;margin-bottom:var(--space-md)}
/* лист ожидания — копия + форма */
.landing-waitlist{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);align-items:start;margin:var(--space-md) 0}
.landing-waitlist__copy p{color:hsl(var(--muted-fg));line-height:1.65;margin-bottom:var(--space-md)}
.landing-form{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius-lg);padding:var(--space-xl)}
.landing-form .btn{width:100%;justify-content:center}
.landing-form .field__hint{margin-top:var(--space-sm)}
@media(max-width:760px){
  .landing-segments,.landing-waitlist{grid-template-columns:1fr}
  .landing-hero{padding-top:var(--space-2xl)}
}

/* ═══════════════════════════════════════════════════════════
   T-LANDING · БЛОКИ ТРЕНАЖЁРА (уникальные для лендинга)
   Стилистика ДС: токены/шрифты/острые углы. Интерактив — CSS + лёгкий инлайн-JS.
   ═══════════════════════════════════════════════════════════ */

/* ── «Знакомо?» — интерактивный селектор симптомов (клик отмечает, счётчик-вердикт) ── */
.symptoms{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin:var(--space-lg) auto;max-width:880px}
.symptom{display:flex;gap:var(--space-md);align-items:flex-start;text-align:left;
  padding:var(--space-lg);background:hsl(var(--card));border:1px solid hsl(var(--border));
  font:inherit;color:inherit;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),transform .08s var(--ease)}
.symptom:hover{border-color:var(--level)}
.symptom:active{transform:translateY(1px)}
.symptom.is-on{border-color:var(--level);background:var(--level-fog)}
.symptom__box{flex:none;width:26px;height:26px;margin-top:.1rem;
  border:2px solid hsl(var(--border));background:transparent;
  display:flex;align-items:center;justify-content:center;
  color:var(--level-contrast);font-size:.95rem;line-height:1;
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.symptom__box::after{content:"✓";opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.symptom.is-on .symptom__box{background:var(--level);border-color:var(--level)}
.symptom.is-on .symptom__box::after{opacity:1}
.symptom__text strong{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--text-base);margin-bottom:.15rem}
.symptom__text span{color:hsl(var(--muted-fg));font-size:var(--text-sm);line-height:1.4}
.symptoms__verdict{max-width:880px;margin:var(--space-lg) auto 0;text-align:center}
.symptoms__count{font-family:var(--font-display);font-weight:700;color:var(--level)}
.symptoms__msg{font-size:var(--text-lg);color:hsl(var(--foreground));margin:var(--space-xs) 0 var(--space-md)}
.symptoms__cta{display:none}
.symptoms__cta.is-shown{display:inline-flex}

/* ── «Что вы получите» — интерактивный аккордеон (native <details>) ── */
.gains{max-width:820px;margin:var(--space-lg) auto;display:flex;flex-direction:column;gap:var(--space-sm)}
.gain{background:hsl(var(--card));border:1px solid hsl(var(--border));border-left:3px solid transparent;
  transition:border-color var(--dur-fast) var(--ease)}
.gain[open]{border-left-color:var(--level)}
.gain__summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-md);padding:var(--space-lg)}
.gain__summary::-webkit-details-marker{display:none}
.gain__num{flex:none;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--level)}
.gain__title{flex:1;font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);letter-spacing:-.01em}
.gain__plus{flex:none;color:hsl(var(--muted-fg));font-size:1.3rem;line-height:1;transition:transform var(--dur-fast) var(--ease)}
.gain[open] .gain__plus{transform:rotate(45deg);color:var(--level)}
.gain__body{padding:0 var(--space-lg) var(--space-lg) calc(var(--space-lg) + 2ch + var(--space-md));color:hsl(var(--muted-fg));line-height:1.6}
.gain__result{display:block;margin-top:var(--space-sm);color:hsl(var(--foreground));font-weight:500}
.gain__result::before{content:"→ ";color:var(--level)}

/* ── Отзывы — карусель на scroll-snap (стрелки листают, инлайн-JS) ── */
.reviews{margin:var(--space-lg) 0}
.reviews__nav{display:flex;gap:var(--space-sm);justify-content:flex-end;margin-bottom:var(--space-md)}
.reviews__arrow{width:44px;height:44px;border-radius:var(--radius-full);
  border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));
  font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.reviews__arrow:hover{border-color:var(--level);color:var(--level)}
.reviews__track{display:flex;gap:var(--space-lg);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:var(--space-sm);scrollbar-width:none;-ms-overflow-style:none}
.reviews__track::-webkit-scrollbar{display:none}
.review-card{flex:0 0 min(420px,82vw);scroll-snap-align:start;
  background:hsl(var(--card));border:1px solid hsl(var(--border));padding:var(--space-xl);
  display:flex;flex-direction:column;gap:var(--space-md)}
.review-card__stars{color:var(--level);letter-spacing:.12em;font-size:var(--text-sm)}
.review-card__quote{flex:1;font-size:var(--text-lg);line-height:1.55;color:hsl(var(--foreground))}
.review-card__author{display:flex;align-items:center;gap:var(--space-md)}
.review-card__avatar{flex:none;width:46px;height:46px;border-radius:var(--radius-full);
  background:var(--level-mist);color:var(--level);font-family:var(--font-display);font-weight:600;
  display:flex;align-items:center;justify-content:center}
.review-card__name{font-weight:600}
.review-card__role{color:hsl(var(--muted-fg));font-size:var(--text-sm)}

/* ── Тарифы — 3 карточки (самостоятельно / с консультацией / для команд) ── */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);margin:var(--space-lg) 0;align-items:start}
/* Лендинговая карта тарифа — заскоуплена под .pricing, чтобы не конфликтовать
   с makers-картой .price-card из components.css (другой компонент, то же имя). */
.pricing .price-card{position:relative;display:flex;flex-direction:column;gap:var(--space-md);
  background:hsl(var(--card));border:1px solid hsl(var(--border));padding:var(--space-xl)}
.pricing .price-card--featured{border-color:var(--level);box-shadow:var(--shadow-lg)}
.pricing .price-card__badge{position:absolute;top:0;right:var(--space-lg);transform:translateY(-50%);
  background:var(--level);color:var(--level-contrast);font-family:var(--font-mono);
  font-size:var(--text-xs);letter-spacing:.04em;padding:.25rem .7rem;border-radius:var(--radius-full)}
.pricing .price-card__name{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl)}
.pricing .price-card__price{font-family:var(--font-display);font-weight:700;font-size:var(--text-4xl);letter-spacing:-.02em;line-height:1}
.pricing .price-card__price small{font-family:var(--font-sans);font-weight:400;font-size:var(--text-base);color:hsl(var(--muted-fg))}
.pricing .price-card__note{color:hsl(var(--muted-fg));font-size:var(--text-sm);line-height:1.5}
.pricing .price-card__features{list-style:none;display:flex;flex-direction:column;gap:var(--space-sm);margin:var(--space-xs) 0;flex:1}
.pricing .price-card__features li{display:flex;gap:.55rem;align-items:flex-start;line-height:1.45}
.pricing .price-card__features li::before{content:"✓";color:var(--level);flex:none}
.pricing .price-card__features li.off{color:hsl(var(--muted-fg))}
.pricing .price-card__features li.off::before{content:"–";color:hsl(var(--muted-fg))}
.pricing .price-card .btn{width:100%;margin-top:auto}

/* ── Об авторе — фото + био (реальный автор) ── */
.landing-author{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2xl);align-items:center;
  max-width:920px;margin:var(--space-lg) auto;
  background:hsl(var(--card));border:1px solid hsl(var(--border));padding:var(--space-2xl)}
.landing-author__photo{width:180px;height:180px;border-radius:var(--radius-full);overflow:hidden;flex:none;background:var(--level-mist)}
.landing-author__photo img{width:100%;height:100%;object-fit:cover;display:block}
.landing-author__role{color:var(--level);font-weight:500;font-size:var(--text-sm);margin-bottom:var(--space-xs)}
.landing-author__name{font-family:var(--font-display);font-weight:600;font-size:var(--text-2xl);letter-spacing:-.02em;margin-bottom:var(--space-sm)}
.landing-author__bio{color:hsl(var(--muted-fg));line-height:1.6;margin-bottom:var(--space-md)}
.landing-author__facts{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem var(--space-lg);margin-bottom:var(--space-lg)}
.landing-author__facts li{display:flex;gap:.45rem;align-items:center;font-size:var(--text-sm)}
.landing-author__facts li::before{content:"✦";color:var(--level)}
.landing-author__links{display:flex;flex-wrap:wrap;gap:var(--space-md)}

/* ── Финальный CTA — акцентная «сочная» полоса ── */
.landing-final{text-align:center;background:var(--level);color:var(--level-contrast);
  padding:var(--space-3xl) var(--space-xl);margin:var(--space-2xl) 0 0}
.landing-final h2{color:var(--level-contrast);font-family:var(--font-display);font-weight:700;
  font-size:var(--text-4xl);letter-spacing:-.02em;line-height:1.1;margin-bottom:var(--space-md);max-width:720px;margin-inline:auto}
.landing-final p{color:var(--level-contrast);opacity:.9;font-size:var(--text-lg);line-height:1.55;max-width:560px;margin:0 auto var(--space-xl)}
.landing-final .landing-cta-row{justify-content:center}

@media(max-width:760px){
  .symptoms,.pricing{grid-template-columns:1fr}
  .landing-author{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--space-lg);padding:var(--space-xl)}
  .landing-author__facts{justify-content:center}
  .landing-author__links{justify-content:center}
}


/* ════════════════════════════════════════════════════════════
   СЛОЙ: БЛОКИ МЕТОДОЛОГИИ (бывш. methodology.css — слит сюда)
   ════════════════════════════════════════════════════════════ */
/* ============================================================
   ФУНКЦИЯ ДИЗАЙНА · МЕТОДОЛОГИЧЕСКИЙ ЛОНГРИД (универсальный)
   Контент-блоки для разборов-методологий любого раздела.
   Каркас (.reading), сайдбар, плавающая навигация и типографика —
   из reading.css. Здесь — только уникальные блоки документа.

   Article-agnostic: ни одного имени, привязанного к конкретной
   статье или серии. Акцент страницы — одна переменная --level
   (класс level-XXX на <html>); оттенки выводятся через color-mix,
   поэтому всё корректно в светлой и тёмной теме. Hex не хардкодим.

   Блоки:
     .doc-hero        — шапка-введение с разбивкой «I/II/III»
     .doc-content     — обёртка прозы
     .doc-section     — смысловой раздел (заголовок + подзаголовок + тело)
     .profile-stack / .profile-card  — карточка-профиль сущности
     .spec-grid / .spec              — сетка помеченных спецификаций
     .phase-list / .phase            — последовательность фаз/шагов
     .doc-callout     — выноска-предупреждение
     .doc-footer      — нижняя навигация документа
   ============================================================ */

/* ---------- Шапка-введение ---------- */
.doc-hero {
  margin-bottom: var(--space-2xl);
  padding: 0 0 var(--space-xl);
  border-bottom: 1px solid hsl(var(--border));
}
.doc-hero-inner { max-width: none; }
/* Надзаголовок doc-hero — атом .eyebrow (base.css); тут только увеличенный
   нижний отступ под крупную шапку-введение. (Было .doc-hero-eyebrow.) */
.doc-hero .eyebrow { margin-bottom: var(--space-lg); }
.doc-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: hsl(var(--foreground));
  margin: 0 0 var(--space-md);
}
.doc-hero-subtitle {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: hsl(var(--foreground) / .78);
  margin: 0 0 var(--space-xl);
  max-width: 48ch;
}
.doc-hero-parts {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding-top: var(--space-lg);
  border-top: 1px solid hsl(var(--border));
}
.doc-hero-parts > div {
  font-size: .95rem;
  line-height: 1.5;
  color: hsl(var(--muted-fg));
}
.doc-hero-parts strong { color: var(--level); font-weight: 600; }

/* ---------- Обёртка прозы ---------- */
.doc-content { max-width: none; margin: 0; padding: 0; }
.doc-content ul, .doc-content ol { margin: 1.1rem 0; padding-left: 1.4rem; }
.doc-content li { margin-bottom: .5rem; line-height: 1.7; }
.doc-content ul li::marker { color: var(--level); }

/* ---------- Смысловой раздел ---------- */
.doc-section {
  margin: var(--space-2xl) 0;
  padding-bottom: var(--space-xl);
  scroll-margin-top: 2rem;
  border-bottom: 1px solid hsl(var(--border) / .6);
}
.doc-section:last-of-type { border-bottom: none; }
.doc-section-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: hsl(var(--foreground));
  margin: 0 0 .4rem;
}
.doc-section-subtitle {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 1.1rem;
  color: hsl(var(--foreground) / .7);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--level);
}
.doc-section-body { font-size: 1.05rem; line-height: 1.75; }
.doc-section-body p { margin-bottom: 1.1rem; }

/* ---------- Карточка-профиль ----------
   Каждая карточка задаёт свой акцент инлайн: style="--level:var(--beige)".
   Оттенки выводятся отсюда — карточку не нужно красить вручную. */
.profile-stack {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin: 3rem 0;
}
.profile-card {
  --level-deep: color-mix(in srgb, var(--level) 70%, hsl(var(--foreground)));
  --level-soft: color-mix(in srgb, var(--level) 40%, hsl(var(--border)));
  --level-bg:   color-mix(in srgb, var(--level) 12%, hsl(var(--card)));
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-left: 6px solid var(--level);
  border-radius: var(--radius);
  overflow: hidden;
  scroll-margin-top: 2rem;
  box-shadow: var(--shadow-sm);
}

/* Заголовок карточки */
.profile-card-header {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.6rem 1.8rem 1.4rem;
  background: linear-gradient(180deg, var(--level-bg) 0%, hsl(var(--card)) 100%);
  border-bottom: 1px solid hsl(var(--border));
}
.profile-card-num-wrap { text-align: center; }
.profile-card-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--level-deep);
}
.profile-card-code {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--level);
  margin-top: .4rem;
}
.profile-card-title-wrap { flex: 1; }
.profile-card-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--level-deep);
  margin: 0 0 .2rem;
}
.profile-card-title-en {
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 600;
  color: var(--level);
  margin-bottom: .6rem;
}
.profile-card-tagline-en {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: hsl(var(--muted-fg));
}
.profile-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
  margin-top: .5rem;
}
.profile-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--level-deep);
  background: var(--level-bg);
  padding: .25rem .7rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--level-soft);
}
.profile-meta-item {
  font-family: var(--font-sans);
  font-size: .75rem;
  color: hsl(var(--muted-fg));
}

/* Тело карточки: поля */
.profile-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem 2rem;
  padding: 1.5rem 1.8rem;
}
.profile-field { break-inside: avoid; }
.profile-field-label {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--level-deep);
  margin-bottom: .4rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--level-soft);
}
.profile-field-en {
  font-weight: 500;
  letter-spacing: .1em;
  color: hsl(var(--muted-fg));
  margin-left: .5rem;
}
.profile-field-text {
  font-family: var(--font-sans);
  font-size: .95rem;
  line-height: 1.6;
  color: hsl(var(--foreground) / .85);
}

/* ---------- Выноска-предупреждение ---------- */
.doc-callout {
  margin: 0 1.8rem 1.5rem;
  padding: 1rem 1.2rem;
  background: color-mix(in srgb, var(--level) 12%, hsl(var(--card)));
  border-left: 4px solid var(--level);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: .92rem;
  line-height: 1.55;
  color: hsl(var(--foreground) / .85);
}

/* ---------- Сетка спецификаций ---------- */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0;
}
.spec {
  padding: 1.1rem 1.3rem;
  background: hsl(var(--muted-bg));
  border: 1px solid hsl(var(--border));
  border-left: 4px solid var(--level);
  border-radius: var(--radius-sm);
}
.spec-header {
  display: flex;
  gap: .8rem;
  align-items: baseline;
  margin-bottom: .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid hsl(var(--border));
}
.spec-code {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
  color: var(--level);
}
.spec-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  color: hsl(var(--foreground));
}
.spec-name-en {
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: hsl(var(--muted-fg));
}
.spec-body {
  font-family: var(--font-sans);
  font-size: .92rem;
  line-height: 1.6;
  color: hsl(var(--foreground) / .82);
}

/* ---------- Последовательность фаз ---------- */
.phase-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}
.phase {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 1.2rem;
  align-items: start;
  padding: 1.2rem 1.4rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
}
/* Маркер — словесные метки (Alpha…New Alpha), а не одиночные глифы:
   колонка шире, кегль умеренный, overflow-wrap — чтобы длинное слово не
   вылезало в .phase-body (фикс наезда на sd.html / spiraldynamics/methodology). */
.phase-marker {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--level);
}
/* заскоуплено под .phase — не конфликтовать с .phase-name из .phase-timeline (components.css) */
.phase .phase-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: .4rem;
}
.phase-label {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  color: hsl(var(--foreground) / .7);
}
.phase-desc {
  font-family: var(--font-sans);
  font-size: .95rem;
  line-height: 1.65;
  color: hsl(var(--foreground) / .82);
}

/* ---------- Нижняя навигация документа ---------- */
.doc-footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid hsl(var(--border));
  font-size: .92rem;
  line-height: 1.6;
  color: hsl(var(--muted-fg));
}
.doc-footer p { margin: 0 0 .8rem; }
.doc-footer a { color: var(--level); text-decoration: none; }
.doc-footer a:hover { text-decoration: underline; }

/* ---------- Отзывчивость ---------- */
@media (max-width: 960px) {
  .profile-card-body { grid-template-columns: 1fr; gap: 1rem; padding: 1.2rem; }
  .profile-card-header { grid-template-columns: 70px 1fr; gap: 1rem; padding: 1.2rem; }
  .profile-card-num { font-size: 2.5rem; }
  .profile-card-title { font-size: 1.5rem; }
  .doc-section-title { font-size: 1.7rem; }
  .spec-grid { grid-template-columns: 1fr; }
  .phase { grid-template-columns: 76px 1fr; gap: .8rem; padding: 1rem; }
  .phase-marker { font-size: 1.2rem; }
}
@media (max-width: 600px) {
  .profile-card-meta { gap: .4rem; }
  .profile-meta-item { font-size: .7rem; }
}

/* ============================================================
   ████  СЛОЙ: ИНТЕРФЕЙС ПРИЛОЖЕНИЯ (APP UI)  ████
   Прикладные компоненты платформы (LMS / админка / CMS / кабинет):
   фидбек, оверлеи, навигация, данные. В отличие от контент-блоков
   лонгрида выше — это «обвязка приложения». Стилистика общая:
   острые углы, токены, акцент --level, фокус-кольцо --ring, тёмная
   тема и мобайл из коробки. Группировка — по канонической таксономии
   (Polaris/Carbon): Иконки · Фидбек/Статусы · (далее — оверлеи,
   навигация, данные добавляются партиями).
   Документация: DESIGN-SYSTEM.md §APP UI. Витрина: Разработка → ДС.
   ============================================================ */

/* ─────────────────────────────────────────────
   ИКОНКИ — утилита для спрайта assets/img/icons.svg
   <svg class="ic"><use href="…/icons.svg#name"/></svg>
   Размер наследуется от font-size (1em); модификаторы — фикс. размеры.
   ───────────────────────────────────────────── */
.ic{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.2em;
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic .fill{fill:currentColor;stroke:none}
.ic--sm{width:1em;height:1em}
.ic--md{width:1.4rem;height:1.4rem}
.ic--lg{width:2rem;height:2rem}
.ic--xl{width:3rem;height:3rem}
.ic--spin{animation:fd-spin .9s linear infinite}
@keyframes fd-spin{to{transform:rotate(360deg)}}

/* ─────────────────────────────────────────────
   SPINNER — индикатор загрузки (кольцо)
   Состояния: размеры sm/lg; центр-блок с подписью (--block).
   ───────────────────────────────────────────── */
.spinner{display:inline-block;width:1.25rem;height:1.25rem;border:2px solid color-mix(in srgb,var(--level) 25%,transparent);
  border-top-color:var(--level);border-radius:50%;animation:fd-spin .7s linear infinite;vertical-align:-.2em}
.spinner--sm{width:1rem;height:1rem}
.spinner--lg{width:2rem;height:2rem;border-width:3px}
.spinner-block{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  padding:var(--space-2xl) var(--space-lg);color:hsl(var(--muted-fg));font-size:.9rem}

/* ─────────────────────────────────────────────
   SKELETON — заглушка контента при загрузке
   Варианты: --text (строка), --title, --circle (аватар), --block.
   Анимация мерцания гасится prefers-reduced-motion (см. base.css).
   ───────────────────────────────────────────── */
.skeleton{display:block;border-radius:var(--radius);
  background:linear-gradient(90deg,hsl(var(--muted-bg)) 0%,
    color-mix(in srgb,hsl(var(--muted-bg)) 55%,hsl(var(--border))) 50%,hsl(var(--muted-bg)) 100%);
  background-size:200% 100%;animation:fd-shimmer 1.4s var(--ease) infinite}
.skeleton--text{height:.8em;margin:.4em 0;border-radius:var(--radius-sm)}
.skeleton--title{height:1.4em;width:55%;margin:.2em 0 .6em}
.skeleton--circle{border-radius:50%;width:2.5rem;height:2.5rem}
.skeleton--block{height:120px}
@keyframes fd-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ─────────────────────────────────────────────
   PROGRESS — линейный прогресс
   Значение — ширина .progress__bar (inline width / style).
   Варианты: --indeterminate (бегущая полоса), статусы цвета через --level.
   ───────────────────────────────────────────── */
.progress{height:6px;width:100%;background:hsl(var(--muted-bg));border-radius:var(--radius-full);overflow:hidden}
.progress__bar{height:100%;width:0;background:var(--level);border-radius:inherit;
  transition:width var(--dur) var(--ease)}
.progress--lg{height:10px}
.progress--indeterminate{position:relative}
.progress--indeterminate .progress__bar{width:40%;animation:fd-progress 1.2s var(--ease) infinite}
@keyframes fd-progress{0%{margin-left:-40%}100%{margin-left:100%}}

/* PROGRESS RING — круговой прогресс (conic + маска-дырка, surface-agnostic).
   Значение — --val (0..100). Размер — на .progress-ring-box. */
.progress-ring{display:inline-block;width:var(--size,48px);height:var(--size,48px);border-radius:50%;
  background:conic-gradient(var(--level) calc(var(--val,0)*1%),hsl(var(--muted-bg)) 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - var(--ring-w,5px)),#000 0);
          mask:radial-gradient(farthest-side,#0000 calc(100% - var(--ring-w,5px)),#000 0)}
.progress-ring-box{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:var(--size,48px);height:var(--size,48px)}
.progress-ring-box .progress-ring{position:absolute;inset:0;width:100%;height:100%}
.progress-ring-box__val{position:relative;font-family:var(--font-mono);font-weight:600;font-size:.72rem;
  color:hsl(var(--foreground))}

/* ─────────────────────────────────────────────
   ALERT — статусное инлайн-сообщение (≠ редакторский .callout)
   Варианты: --info / --success / --warn / --danger. Слоты:
   __icon · __title · __body · __close (dismissible).
   ───────────────────────────────────────────── */
.alert{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem 1rem;
  background:hsl(var(--muted-bg));border:1px solid hsl(var(--border));border-left-width:3px;
  font-size:.92rem;line-height:1.5;color:hsl(var(--foreground))}
.alert__icon{flex:none;margin-top:.05rem;color:hsl(var(--muted-fg))}
.alert__content{flex:1;min-width:0}
.alert__title{font-family:var(--font-sans);font-weight:600;margin:0 0 .15rem}
.alert__body{margin:0;color:hsl(var(--foreground) / .85)}
.alert__close{flex:none;margin:-.2rem -.3rem 0 .3rem;background:none;border:0;cursor:pointer;
  color:hsl(var(--muted-fg));line-height:0;padding:.2rem;transition:color var(--dur-fast) var(--ease)}
.alert__close:hover{color:hsl(var(--foreground))}
.alert--info{border-left-color:var(--info);background:color-mix(in srgb,var(--info) 8%,hsl(var(--card)))}
.alert--info .alert__icon{color:var(--info)}
.alert--success{border-left-color:var(--success);background:color-mix(in srgb,var(--success) 8%,hsl(var(--card)))}
.alert--success .alert__icon{color:var(--success)}
.alert--warn{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,hsl(var(--card)))}
.alert--warn .alert__icon{color:var(--warn)}
.alert--danger{border-left-color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,hsl(var(--card)))}
.alert--danger .alert__icon{color:var(--danger)}

/* ─────────────────────────────────────────────
   TOAST — всплывающее уведомление (поведение — JS)
   Регион .toast-region фиксирован (правый-нижний по умолчанию).
   Состояния: вход (animation), уход (.is-leaving). Варианты — статусы.
   ───────────────────────────────────────────── */
.toast-region{position:fixed;z-index:var(--z-toast);bottom:var(--space-lg);right:var(--space-lg);
  display:flex;flex-direction:column;gap:.6rem;width:min(380px,calc(100vw - 2rem));pointer-events:none}
.toast-region--top{top:var(--space-lg);bottom:auto}
.toast-region--left{left:var(--space-lg);right:auto}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.6rem;padding:.8rem .9rem;
  background:hsl(var(--background));border:1px solid hsl(var(--border));border-left:3px solid var(--level);
  box-shadow:var(--shadow-lg);font-size:.9rem;line-height:1.45;animation:fd-toast-in var(--dur) var(--ease)}
.toast__icon{flex:none;margin-top:.05rem;color:var(--level)}
.toast__content{flex:1;min-width:0}
.toast__title{font-weight:600;margin:0 0 .1rem}
.toast__body{margin:0;color:hsl(var(--foreground) / .8)}
.toast__close{flex:none;background:none;border:0;cursor:pointer;color:hsl(var(--muted-fg));line-height:0;padding:.15rem;transition:color var(--dur-fast) var(--ease)}
.toast__close:hover{color:hsl(var(--foreground))}
.toast--success{border-left-color:var(--success)}.toast--success .toast__icon{color:var(--success)}
.toast--warn{border-left-color:var(--warn)}.toast--warn .toast__icon{color:var(--warn)}
.toast--danger{border-left-color:var(--danger)}.toast--danger .toast__icon{color:var(--danger)}
.toast--info{border-left-color:var(--info)}.toast--info .toast__icon{color:var(--info)}
.toast.is-leaving{animation:fd-toast-out var(--dur-fast) var(--ease) forwards}
@keyframes fd-toast-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes fd-toast-out{to{opacity:0;transform:translateX(16px)}}

/* ─────────────────────────────────────────────
   BADGE / STATUS-DOT — метка-счётчик и точка-индикатор
   .badge — статусная метка (mono-капс). --accent/--solid/статусы.
   .badge--count — круглый счётчик. .status-dot — точка состояния.
   ───────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-mono);font-size:.62rem;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .5rem;border-radius:var(--radius);
  border:1px solid hsl(var(--border));color:hsl(var(--muted-fg));background:hsl(var(--card));white-space:nowrap}
.badge--accent{color:var(--level);border-color:color-mix(in srgb,var(--level) 40%,transparent);background:var(--level-fog)}
.badge--solid{color:var(--level-contrast);background:var(--level);border-color:transparent}
.badge--success{color:var(--success);border-color:color-mix(in srgb,var(--success) 40%,transparent);background:color-mix(in srgb,var(--success) 9%,hsl(var(--card)))}
.badge--warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 9%,hsl(var(--card)))}
.badge--danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:color-mix(in srgb,var(--danger) 9%,hsl(var(--card)))}
.badge--info{color:var(--info);border-color:color-mix(in srgb,var(--info) 40%,transparent);background:color-mix(in srgb,var(--info) 9%,hsl(var(--card)))}
.badge--count{min-width:1.2rem;height:1.2rem;justify-content:center;padding:0 .35rem;border:0;border-radius:var(--radius-full);
  background:var(--danger);color:#fff;font-size:.62rem;letter-spacing:0}
.status-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;flex:none;
  background:hsl(var(--muted-fg));vertical-align:middle}
.status-dot--success{background:var(--success)}
.status-dot--warn{background:var(--warn)}
.status-dot--danger{background:var(--danger)}
.status-dot--info{background:var(--info)}
.status-dot--pulse{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 60%,transparent);animation:fd-pulse 1.8s var(--ease) infinite}
@keyframes fd-pulse{70%{box-shadow:0 0 0 .4rem transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ─────────────────────────────────────────────
   EMPTY STATE — пустое состояние списка/раздела
   Слоты: __icon · __title · __text · __action.
   ───────────────────────────────────────────── */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;
  padding:var(--space-2xl) var(--space-lg);color:hsl(var(--muted-fg))}
.empty__icon{color:hsl(var(--muted-fg));opacity:.55;margin-bottom:.2rem}
.empty__title{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);color:hsl(var(--foreground));margin:0}
.empty__text{max-width:38ch;font-size:.92rem;margin:0;line-height:1.55}
.empty__action{margin-top:.6rem}

/* ─────────────────────────────────────────────
   TOOLTIP — подсказка на CSS (атрибут data-tooltip)
   Появляется на :hover/:focus-visible. Сторона — data-tip-side.
   ───────────────────────────────────────────── */
[data-tooltip]{position:relative}
[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);background:hsl(var(--foreground));color:hsl(var(--background));
  font-family:var(--font-sans);font-size:.72rem;font-weight:500;line-height:1.3;padding:.35rem .55rem;
  white-space:nowrap;max-width:min(60vw,18rem);box-shadow:var(--shadow-card);z-index:var(--z-dropdown);
  opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
[data-tooltip]:hover::after,[data-tooltip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
[data-tooltip][data-tip-side="bottom"]::after{bottom:auto;top:calc(100% + 8px);transform:translateX(-50%) translateY(-4px)}
[data-tooltip][data-tip-side="bottom"]:hover::after,[data-tooltip][data-tip-side="bottom"]:focus-visible::after{transform:translateX(-50%) translateY(0)}

/* ─────────────────────────────────────────────
   AVATAR — аватар (фото или инициалы) + группа
   Размеры sm/lg. Fallback — инициалы на тинте уровня.
   ───────────────────────────────────────────── */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;
  border-radius:50%;overflow:hidden;background:var(--level-mist);color:var(--level);text-transform:uppercase;
  font-family:var(--font-display);font-weight:600;font-size:.9rem;line-height:1}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar--sm{width:1.8rem;height:1.8rem;font-size:.72rem}
.avatar--lg{width:3.5rem;height:3.5rem;font-size:1.2rem}
.avatar-group{display:inline-flex;align-items:center}
.avatar-group .avatar{border:2px solid hsl(var(--background));margin-left:-.6rem}
.avatar-group .avatar:first-child{margin-left:0}

/* ─────────────────────────────────────────────
   ОВЕРЛЕИ · MODAL / DIALOG  (единый канон)
   Канонический источник модалки (раньше .modal жил в backend.css —
   сведён сюда без дублей). Слоты: __head/__title/__sub/__close/__body/__foot.
   Размеры: --sm/--lg/--full. Подтверждение: --confirm (+ --danger).
   Поведение (открытие, Escape, фокус-трап, scroll-lock) — на JS/React.
   ───────────────────────────────────────────── */
.modal-backdrop{position:fixed;inset:0;z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center;
  padding:var(--space-lg);background:var(--overlay-bg);backdrop-filter:blur(2px);animation:fd-fade var(--dur-fast) var(--ease)}
.modal{z-index:var(--z-modal);display:flex;flex-direction:column;width:100%;max-width:560px;max-height:86vh;
  background:hsl(var(--background));border:1px solid hsl(var(--border));box-shadow:var(--shadow-lg);
  animation:fd-modal-in var(--dur) var(--ease)}
.modal--sm{max-width:420px}
.modal--lg{max-width:760px}
.modal--full{max-width:min(1100px,calc(100vw - 2rem));max-height:92vh}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:var(--space-md) var(--space-lg);border-bottom:1px solid hsl(var(--border))}
.modal__title{font-family:var(--font-display);font-weight:600;font-size:1.05rem;line-height:1.25}
.modal__sub{font-family:var(--font-mono);font-size:.66rem;color:hsl(var(--muted-fg));margin-top:.15rem}
.modal__close{flex:none;background:none;border:1px solid hsl(var(--border));color:hsl(var(--muted-fg));
  width:32px;height:32px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:0;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.modal__close:hover{color:hsl(var(--foreground));border-color:hsl(var(--foreground))}
.modal__body{overflow-y:auto;padding:var(--space-lg)}
.modal__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.6rem;
  padding:var(--space-md) var(--space-lg);border-top:1px solid hsl(var(--border))}
.modal--confirm{max-width:440px}
.modal--confirm .modal__body{display:flex;gap:.8rem;align-items:flex-start}
.modal__icon{flex:none;color:var(--level);margin-top:.1rem}
.modal--danger .modal__icon{color:var(--danger)}
@keyframes fd-modal-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@keyframes fd-fade{from{opacity:0}to{opacity:1}}

/* ─────────────────────────────────────────────
   ОВЕРЛЕИ · DROPDOWN / MENU (поповер-меню)
   .dropdown — обёртка (триггер + меню), раскрытие через
   .menu.is-open или [data-open="true"] на .dropdown. Поведение — JS/React.
   ───────────────────────────────────────────── */
.dropdown{position:relative;display:inline-flex}
.menu{position:absolute;top:calc(100% + 6px);left:0;z-index:var(--z-dropdown);min-width:12rem;
  background:hsl(var(--background));border:1px solid hsl(var(--border));box-shadow:var(--shadow-lg);
  padding:.3rem;display:none;animation:fd-modal-in var(--dur-fast) var(--ease)}
.menu.is-open,.dropdown[data-open="true"] .menu{display:block}
.menu--right{left:auto;right:0}
.menu__label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:hsl(var(--muted-fg));padding:.45rem .6rem .25rem}
.menu__item{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;font:inherit;font-size:.9rem;
  color:hsl(var(--foreground));background:none;border:0;cursor:pointer;padding:.5rem .6rem;text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease)}
.menu__item:hover,.menu__item:focus-visible{background:hsl(var(--muted-bg));outline:none}
.menu__item[aria-disabled="true"],.menu__item:disabled{opacity:.5;pointer-events:none}
.menu__item .ic{color:hsl(var(--muted-fg))}
.menu__item.is-checked{font-weight:600}
.menu__item--danger,.menu__item--danger .ic{color:var(--danger)}
.menu__sep{height:1px;background:hsl(var(--border));margin:.3rem 0}

/* ─────────────────────────────────────────────
   НАВИГАЦИЯ · TABS с панелями (вариант .tabs из forms.css)
   .tabs/.tab — сегментированные (forms.css). Здесь — вариант подчёркивания
   для табов, переключающих контент, + сами панели. ARIA: role=tablist/tab/tabpanel.
   ───────────────────────────────────────────── */
.tabs--underline{gap:0;border-bottom:1px solid hsl(var(--border));flex-wrap:nowrap;overflow-x:auto}
.tabs--underline .tab{border-radius:0;padding:.6rem .9rem;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs--underline .tab:hover{background:none;color:hsl(var(--foreground))}
.tabs--underline .tab.is-active{background:none;color:var(--level);border-bottom-color:var(--level)}
.tab-panels{padding-top:var(--space-md)}
.tab-panel{display:none}
.tab-panel.is-active{display:block;animation:fd-fade var(--dur-fast) var(--ease)}

/* ─────────────────────────────────────────────
   НАВИГАЦИЯ · BREADCRUMBS (хлебные крошки)
   ───────────────────────────────────────────── */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.85rem;color:hsl(var(--muted-fg))}
.breadcrumbs a{color:hsl(var(--muted-fg));text-decoration:none;transition:color var(--dur-fast) var(--ease)}
.breadcrumbs a:hover{color:var(--level)}
.breadcrumbs__sep{opacity:.55;display:inline-flex;color:hsl(var(--muted-fg))}
.breadcrumbs [aria-current="page"]{color:hsl(var(--foreground));font-weight:500}

/* ─────────────────────────────────────────────
   НАВИГАЦИЯ · PAGINATION (постраничная навигация)
   Состояния: .is-active (текущая), :disabled/[aria-disabled] (края).
   ───────────────────────────────────────────── */
.pagination{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.3rem}
.pagination__item{display:inline-flex;align-items:center;justify-content:center;min-width:2.2rem;height:2.2rem;padding:0 .5rem;
  font-family:var(--font-mono);font-size:.8rem;color:hsl(var(--foreground));background:hsl(var(--card));
  border:1px solid hsl(var(--border));cursor:pointer;text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.pagination__item:hover{border-color:var(--level)}
.pagination__item.is-active{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-fg))}
.pagination__item:disabled,.pagination__item[aria-disabled="true"]{opacity:.45;pointer-events:none}
.pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2.2rem;height:2.2rem;color:hsl(var(--muted-fg))}

/* ─────────────────────────────────────────────
   ДАННЫЕ · DATA-TABLE (.dtable) — интерактивная таблица приложения
   ≠ редакторская <table> (reading.css). Обёртка со скроллом, сортируемые
   заголовки, ховер/выбор строк, sticky-заголовок (--sticky), плотность (--compact).
   ───────────────────────────────────────────── */
.dtable{width:100%;overflow-x:auto;border:1px solid hsl(var(--border))}
.dtable table{width:100%;border-collapse:collapse;font-size:.9rem;margin:0}
.dtable th,.dtable td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid hsl(var(--border));white-space:nowrap;vertical-align:middle}
.dtable thead th{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:hsl(var(--muted-fg));background:hsl(var(--muted-bg))}
.dtable--sticky thead th{position:sticky;top:0;z-index:1}
.dtable tbody tr{transition:background-color var(--dur-fast) var(--ease)}
.dtable tbody tr:hover{background:hsl(var(--muted-bg) / .5)}
.dtable tbody tr.is-selected{background:var(--level-fog)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable--compact th,.dtable--compact td{padding:.45rem .7rem}
.dtable__th--sortable{cursor:pointer;user-select:none}
.dtable__th--sortable:hover{color:hsl(var(--foreground))}
.dtable__sort{display:inline-flex;vertical-align:-.2em;margin-left:.3rem;opacity:.4}
.dtable__th--sortable[aria-sort="ascending"] .dtable__sort,
.dtable__th--sortable[aria-sort="descending"] .dtable__sort{opacity:1;color:var(--level)}

/* ─────────────────────────────────────────────
   РАСКРЫТИЕ · ACCORDION (на нативном <details>/<summary>)
   Без JS. Иконка-шеврон поворачивается на [open].
   ───────────────────────────────────────────── */
.accordion{border:1px solid hsl(var(--border))}
.accordion__item{border-bottom:1px solid hsl(var(--border))}
.accordion__item:last-child{border-bottom:0}
.accordion__head{display:flex;align-items:center;gap:.7rem;cursor:pointer;list-style:none;
  padding:.9rem 1rem;font-family:var(--font-sans);font-weight:600;color:hsl(var(--foreground));
  transition:background-color var(--dur-fast) var(--ease)}
.accordion__head::-webkit-details-marker{display:none}
.accordion__head:hover{background:hsl(var(--muted-bg) / .5)}
.accordion__icon{flex:none;margin-left:auto;color:hsl(var(--muted-fg));transition:transform var(--dur-fast) var(--ease)}
.accordion__item[open] .accordion__head .accordion__icon{transform:rotate(180deg)}
.accordion__body{padding:0 1rem 1rem;color:hsl(var(--foreground) / .85);font-size:.92rem;line-height:1.6}

/* ─────────────────────────────────────────────
   ОВЕРЛЕИ · POPOVER (произвольный контент в поповере)
   Как .dropdown, но контент произвольный (не меню). Раскрытие — .is-open
   или [data-open] на .dropdown-обёртке. Поведение — JS/React.
   ───────────────────────────────────────────── */
.popover{position:absolute;top:calc(100% + 8px);left:0;z-index:var(--z-dropdown);min-width:14rem;max-width:22rem;
  background:hsl(var(--background));border:1px solid hsl(var(--border));box-shadow:var(--shadow-lg);
  padding:var(--space-md);display:none;animation:fd-modal-in var(--dur-fast) var(--ease)}
.popover.is-open,.dropdown[data-open="true"] .popover{display:block}
.popover--right{left:auto;right:0}
.popover__title{font-family:var(--font-display);font-weight:600;font-size:.95rem;margin:0 0 .35rem}
.popover__text{margin:0;font-size:.88rem;color:hsl(var(--foreground) / .8);line-height:1.55}

/* ─────────────────────────────────────────────
   ВВОД · COMBOBOX / AUTOCOMPLETE (+ Listbox)
   Поле .input + выпадающий список .combobox__list. Состояния опции:
   hover/.is-active (клавиатурный фокус)/[aria-selected]. Пусто — __empty.
   ───────────────────────────────────────────── */
.combobox{position:relative}
.combobox__list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--z-dropdown);
  max-height:16rem;overflow-y:auto;background:hsl(var(--background));border:1px solid hsl(var(--border));
  box-shadow:var(--shadow-lg);padding:.25rem;display:none}
.combobox.is-open .combobox__list{display:block}
.combobox__option{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;font-size:.9rem;cursor:pointer;
  color:hsl(var(--foreground));transition:background-color var(--dur-fast) var(--ease)}
.combobox__option:hover,.combobox__option.is-active{background:hsl(var(--muted-bg))}
.combobox__option[aria-selected="true"]{font-weight:600;color:var(--level)}
.combobox__option[aria-selected="true"] .ic{margin-left:auto;color:var(--level)}
.combobox__empty{padding:.7rem;color:hsl(var(--muted-fg));font-size:.88rem;text-align:center}

/* ─────────────────────────────────────────────
   ВВОД · TAGS-INPUT / MULTI-SELECT
   Поле с чипами-выбором + ввод. Подсказки — через .combobox__list.
   ───────────────────────────────────────────── */
.tags-input{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.4rem .5rem;min-height:2.7rem;cursor:text;
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.tags-input:focus-within{border-color:var(--level);box-shadow:var(--ring)}
.tags-input__tag{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;padding:.15rem .2rem .15rem .5rem;
  background:var(--level-fog);color:var(--level);border:1px solid color-mix(in srgb,var(--level) 35%,transparent)}
.tags-input__remove{display:inline-flex;background:none;border:0;cursor:pointer;color:inherit;line-height:0;padding:.1rem;opacity:.7}
.tags-input__remove:hover{opacity:1}
.tags-input__field{flex:1;min-width:6rem;border:0;outline:none;background:none;font:inherit;font-size:.9rem;
  color:hsl(var(--foreground));padding:.2rem}

/* ─────────────────────────────────────────────
   ВВОД · CALENDAR / DATE-PICKER
   Состояния дня: muted (соседний месяц), today, selected, disabled.
   ───────────────────────────────────────────── */
.calendar{display:inline-block;width:18rem;background:hsl(var(--card));border:1px solid hsl(var(--border));padding:var(--space-md)}
.calendar__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.calendar__title{font-family:var(--font-display);font-weight:600;font-size:.95rem}
.calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;line-height:0;cursor:pointer;
  background:none;border:1px solid hsl(var(--border));color:hsl(var(--muted-fg));
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.calendar__nav:hover{color:var(--level);border-color:var(--level)}
.calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calendar__dow{text-align:center;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.04em;
  text-transform:uppercase;color:hsl(var(--muted-fg));padding:.3rem 0}
.calendar__day{aspect-ratio:1;display:inline-flex;align-items:center;justify-content:center;font-size:.82rem;
  font-family:var(--font-mono);background:none;border:0;cursor:pointer;color:hsl(var(--foreground));
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.calendar__day:hover{background:hsl(var(--muted-bg))}
.calendar__day.is-muted{color:hsl(var(--muted-fg) / .5)}
.calendar__day.is-today{box-shadow:inset 0 0 0 1px var(--level);color:var(--level)}
.calendar__day.is-selected{background:var(--level);color:var(--level-contrast)}
.calendar__day:disabled{opacity:.35;pointer-events:none}

/* ─────────────────────────────────────────────
   ДАННЫЕ · TREE-VIEW (дерево, напр. структура курса в CMS)
   Состояния строки: hover, .is-selected, [aria-expanded] (поворот шеврона).
   ───────────────────────────────────────────── */
.tree{font-size:.9rem}
.tree__row{display:flex;align-items:center;gap:.4rem;width:100%;text-align:left;padding:.3rem .4rem;cursor:pointer;
  background:none;border:0;color:hsl(var(--foreground));font:inherit;font-size:.9rem;
  transition:background-color var(--dur-fast) var(--ease)}
.tree__row:hover{background:hsl(var(--muted-bg) / .6)}
.tree__row.is-selected{background:var(--level-fog);color:var(--level)}
.tree__toggle{flex:none;display:inline-flex;color:hsl(var(--muted-fg));transition:transform var(--dur-fast) var(--ease)}
.tree__row[aria-expanded="true"] .tree__toggle{transform:rotate(90deg)}
.tree__toggle--leaf{visibility:hidden}
.tree__icon{flex:none;color:hsl(var(--muted-fg))}
.tree__row.is-selected .tree__icon{color:var(--level)}
.tree__children{margin-left:1.1rem;border-left:1px solid hsl(var(--border));padding-left:.3rem}

/* ─────────────────────────────────────────────
   ДЕЙСТВИЯ · ICON-BUTTON (канон; ранее .icon-btn в backend.css)
   Бесрамочная иконка-кнопка. Варианты: --outline (рамка), --solid (заливка),
   --lg. Состояния: hover→level, focus, disabled, .is-done (успех).
   ───────────────────────────────────────────── */
.icon-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;line-height:0;cursor:pointer;
  border:0;background:none;padding:0;color:hsl(var(--muted-fg));
  transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.icon-btn:hover{color:var(--level)}
.icon-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.icon-btn:disabled,.icon-btn.is-disabled{opacity:.5;pointer-events:none}
.icon-btn.is-done{color:var(--success)}
.icon-btn--outline{border:1px solid hsl(var(--border));padding:.45rem}
.icon-btn--outline:hover{border-color:var(--level)}
.icon-btn--solid{background:var(--level);color:var(--level-contrast);padding:.45rem}
.icon-btn--solid:hover{color:var(--level-contrast);filter:brightness(1.08)}
.icon-btn--lg{padding:.55rem}

/* ─────────────────────────────────────────────
   ДЕЙСТВИЯ · TOGGLE-GROUP (сегментированные переключатели)
   Состояние: [aria-pressed="true"] / .is-on — залит.
   ───────────────────────────────────────────── */
.toggle-group{display:inline-flex;border:1px solid hsl(var(--border));overflow:hidden}
.toggle-btn{display:inline-flex;align-items:center;gap:.4rem;background:hsl(var(--card));border:0;cursor:pointer;font:inherit;
  font-size:.85rem;color:hsl(var(--muted-fg));padding:.5rem .8rem;border-right:1px solid hsl(var(--border));
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.toggle-btn:last-child{border-right:0}
.toggle-btn:hover{color:hsl(var(--foreground))}
.toggle-btn[aria-pressed="true"],.toggle-btn.is-on{background:hsl(var(--primary));color:hsl(var(--primary-fg))}
.toggle-btn:disabled{opacity:.5;pointer-events:none}

/* ─────────────────────────────────────────────
   ВВОД · NUMBER-STEPPER · PASSWORD · OTP · RATING · DROPZONE · COLOR-PICKER
   ───────────────────────────────────────────── */
.number-input{display:inline-flex;align-items:stretch;border:1px solid hsl(var(--border));background:hsl(var(--card))}
.number-input:focus-within{border-color:var(--level);box-shadow:var(--ring)}
.number-input__btn{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;background:none;border:0;cursor:pointer;
  color:hsl(var(--muted-fg));line-height:0;transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.number-input__btn:hover{color:var(--level);background:hsl(var(--muted-bg))}
.number-input__btn:disabled{opacity:.4;pointer-events:none}
.number-input__field{width:3.5rem;text-align:center;border:0;border-left:1px solid hsl(var(--border));border-right:1px solid hsl(var(--border));
  background:none;font:inherit;font-family:var(--font-mono);color:hsl(var(--foreground));padding:.5rem 0;outline:none;-moz-appearance:textfield}
.number-input__field::-webkit-outer-spin-button,.number-input__field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.password{position:relative;display:block}
.password .input{padding-right:2.6rem}
.password__toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%)}

.otp{display:inline-flex;gap:.5rem}
.otp__cell{width:2.6rem;height:3rem;text-align:center;font-family:var(--font-mono);font-size:1.2rem;
  border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));outline:none;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.otp__cell:focus{border-color:var(--level);box-shadow:var(--ring)}
.otp__cell.is-filled{border-color:var(--level)}

.rating{display:inline-flex;gap:.15rem}
.rating--readonly{pointer-events:none}
.rating__star{background:none;border:0;cursor:pointer;padding:.1rem;line-height:0;color:hsl(var(--muted-fg) / .45);
  transition:color var(--dur-fast) var(--ease)}
.rating__star.is-on,.rating__star:hover{color:var(--level)}

.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;cursor:pointer;
  padding:var(--space-2xl) var(--space-lg);border:1.5px dashed hsl(var(--border));background:hsl(var(--muted-bg) / .4);color:hsl(var(--muted-fg));
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.dropzone:hover{border-color:var(--level)}
.dropzone.is-dragover{border-color:var(--level);background:var(--level-fog);color:var(--level)}
.dropzone__icon{color:hsl(var(--muted-fg))}
.dropzone.is-dragover .dropzone__icon{color:var(--level)}
.dropzone__hint{font-size:.82rem}

.color-picker{display:flex;flex-wrap:wrap;gap:.5rem}
.color-picker__sw{width:1.8rem;height:1.8rem;border-radius:50%;border:2px solid transparent;cursor:pointer;background:var(--c);
  box-shadow:0 0 0 1px hsl(var(--border));transition:transform var(--dur-fast) var(--ease)}
.color-picker__sw:hover{transform:scale(1.12)}
.color-picker__sw.is-selected{border-color:hsl(var(--background));box-shadow:0 0 0 2px var(--c)}

/* ─────────────────────────────────────────────
   КОНТЕНТ · CODE-BLOCK (обёртка для кода)
   ───────────────────────────────────────────── */
.code-block{border:1px solid hsl(var(--border));background:hsl(var(--muted-bg))}
.code-block__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .7rem;
  border-bottom:1px solid hsl(var(--border));color:hsl(var(--muted-fg));font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.06em;text-transform:uppercase}
.code-block pre{margin:0;padding:.8rem;overflow-x:auto}
.code-block code{font-family:var(--font-mono);font-size:.82rem;color:hsl(var(--foreground));background:none;padding:0}

/* ─────────────────────────────────────────────
   ФИДБЕК · BANNER (глобальная полоса-уведомление)
   Варианты: --accent / --warn. Слоты __icon/__content/__actions/__close.
   ───────────────────────────────────────────── */
.banner{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;font-size:.9rem;
  background:hsl(var(--primary));color:hsl(var(--primary-fg))}
.banner__icon{flex:none}
.banner__content{flex:1;min-width:0}
.banner__actions{display:flex;gap:.5rem;align-items:center}
.banner__close{flex:none;background:none;border:0;cursor:pointer;color:inherit;line-height:0;opacity:.8;padding:.2rem}
.banner__close:hover{opacity:1}
.banner--accent{background:var(--level);color:var(--level-contrast)}
.banner--warn{background:color-mix(in srgb,var(--warn) 14%,hsl(var(--card)));color:hsl(var(--foreground));
  border-bottom:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.banner--warn .banner__icon{color:var(--warn)}

/* ─────────────────────────────────────────────
   ОВЕРЛЕИ · HOVER-CARD (поповер по наведению, CSS-only)
   ───────────────────────────────────────────── */
.hover-card{position:relative;display:inline-flex}
.hover-card__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:var(--z-dropdown);min-width:14rem;max-width:20rem;
  background:hsl(var(--background));border:1px solid hsl(var(--border));box-shadow:var(--shadow-lg);padding:var(--space-md);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility var(--dur-fast)}
.hover-card:hover .hover-card__panel,.hover-card:focus-within .hover-card__panel{opacity:1;visibility:visible;transform:none}

/* ─────────────────────────────────────────────
   НАВИГАЦИЯ · STEPPER / WIZARD (шаги процесса приложения)
   Состояния шага: .is-complete / .is-current / (по умолчанию — upcoming).
   ───────────────────────────────────────────── */
.stepper{display:flex;align-items:flex-start}
.stepper__step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;position:relative}
.stepper__step::before{content:"";position:absolute;top:.9rem;left:-50%;width:100%;height:2px;background:hsl(var(--border));z-index:0}
.stepper__step:first-child::before{display:none}
.stepper__step.is-complete::before,.stepper__step.is-current::before{background:var(--level)}
.stepper__dot{position:relative;z-index:1;width:1.8rem;height:1.8rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:hsl(var(--card));border:2px solid hsl(var(--border));font-family:var(--font-mono);font-size:.75rem;color:hsl(var(--muted-fg))}
.stepper__step.is-current .stepper__dot{border-color:var(--level);color:var(--level)}
.stepper__step.is-complete .stepper__dot{background:var(--level);border-color:var(--level);color:var(--level-contrast)}
.stepper__label{font-size:.8rem;color:hsl(var(--muted-fg))}
.stepper__step.is-current .stepper__label{color:hsl(var(--foreground));font-weight:600}
@media(max-width:560px){.stepper__label{display:none}}

/* ─────────────────────────────────────────────
   ОВЕРЛЕИ · DRAWER / SHEET (боковая шторка; обобщение .ls-sheet)
   Сторона: справа по умолчанию, --left. Поведение — JS/React.
   ───────────────────────────────────────────── */
.drawer-backdrop{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--overlay-bg);animation:fd-fade var(--dur-fast) var(--ease)}
.drawer{position:fixed;top:0;bottom:0;right:0;z-index:var(--z-modal);width:min(420px,calc(100vw - 3rem));
  display:flex;flex-direction:column;background:hsl(var(--background));border-left:1px solid hsl(var(--border));
  box-shadow:var(--shadow-lg);animation:fd-drawer-in var(--dur) var(--ease)}
.drawer--left{right:auto;left:0;border-left:0;border-right:1px solid hsl(var(--border));animation:fd-drawer-in-left var(--dur) var(--ease)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:var(--space-md) var(--space-lg);border-bottom:1px solid hsl(var(--border))}
.drawer__title{font-family:var(--font-display);font-weight:600;font-size:1.05rem}
.drawer__body{flex:1;overflow-y:auto;padding:var(--space-lg)}
.drawer__foot{display:flex;justify-content:flex-end;gap:.6rem;padding:var(--space-md) var(--space-lg);border-top:1px solid hsl(var(--border))}
@keyframes fd-drawer-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes fd-drawer-in-left{from{transform:translateX(-100%)}to{transform:none}}

/* ─────────────────────────────────────────────
   ОВЕРЛЕИ · COMMAND PALETTE (⌘K — быстрый поиск действий)
   ───────────────────────────────────────────── */
.cmdk-backdrop{position:fixed;inset:0;z-index:var(--z-overlay);display:flex;justify-content:center;align-items:flex-start;
  padding:12vh var(--space-lg) var(--space-lg);background:var(--overlay-bg);animation:fd-fade var(--dur-fast) var(--ease)}
.cmdk{width:100%;max-width:560px;max-height:60vh;display:flex;flex-direction:column;background:hsl(var(--background));
  border:1px solid hsl(var(--border));box-shadow:var(--shadow-lg);animation:fd-modal-in var(--dur) var(--ease)}
.cmdk__search{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid hsl(var(--border));color:hsl(var(--muted-fg))}
.cmdk__input{flex:1;border:0;outline:none;background:none;font:inherit;font-size:1rem;color:hsl(var(--foreground))}
.cmdk__list{overflow-y:auto;padding:.3rem}
.cmdk__group{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted-fg));padding:.5rem .6rem .25rem}
.cmdk__item{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;cursor:pointer;font-size:.9rem;color:hsl(var(--foreground))}
.cmdk__item .ic{color:hsl(var(--muted-fg))}
.cmdk__item.is-active,.cmdk__item:hover{background:hsl(var(--muted-bg))}
.cmdk__hint{margin-left:auto;font-family:var(--font-mono);font-size:.6rem;color:hsl(var(--muted-fg));border:1px solid hsl(var(--border));padding:.05rem .3rem}
.cmdk__empty{padding:1rem;text-align:center;color:hsl(var(--muted-fg));font-size:.9rem}

/* ─────────────────────────────────────────────
   ВИЗУАЛИЗАЦИЯ ДАННЫХ · CHARTS (чистый SVG, без зависимостей)
   Цвет — через --chart-accent (по умолчанию = --level, т.е. акцент страницы;
   переопределяется классом level-XXX или инлайн). Всё на токенах →
   светлая/тёмная тема из коробки, без хардкода hex. Рендерят React-компоненты
   platform/components/charts/* (Sparkline, Donut, BarChart). Для статики при
   необходимости — тот же CSS + свой SVG-рендер.
   ───────────────────────────────────────────── */
.chart{--chart-accent:var(--level);--chart-soft:color-mix(in srgb,var(--chart-accent) 14%,transparent);position:relative;display:block;width:100%}
.chart__svg{display:block;width:100%;height:auto;overflow:visible}
.chart__grid{stroke:hsl(var(--border));stroke-width:1;shape-rendering:crispEdges}
.chart__axis-label{font-family:var(--font-mono);font-size:.6rem;fill:hsl(var(--muted-fg))}
.chart__caption{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--muted-fg));margin-bottom:.35rem}

/* — Спарклайн / area-тренд — */
.spark__area{fill:var(--chart-soft);stroke:none}
.spark__line{fill:none;stroke:var(--chart-accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark__dot{fill:var(--chart-accent);stroke:hsl(var(--card));stroke-width:2}

/* — Столбцы (вертикальные) — */
.bars{display:flex;align-items:flex-end;gap:.4rem;width:100%}
.bars__col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:0}
.bars__track{width:100%;display:flex;align-items:flex-end;justify-content:center}
.bars__bar{width:100%;max-width:2.4rem;background:var(--chart-accent);border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  transition:background-color var(--dur-fast) var(--ease)}
.bars__bar--muted{background:hsl(var(--muted-bg))}
.bars__col:hover .bars__bar{background:color-mix(in srgb,var(--chart-accent) 80%,hsl(var(--foreground)))}
.bars__val{font-family:var(--font-mono);font-size:.62rem;font-weight:600;color:hsl(var(--foreground));line-height:1}
.bars__lbl{font-family:var(--font-mono);font-size:.58rem;color:hsl(var(--muted-fg));text-align:center;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* Кольцо-доля (донат) — НЕ дублируем: переиспользуем существующий .progress-ring
   (conic-gradient, --val/--size/--ring-w). См. APP UI выше + DESIGN-SYSTEM.md §5.2.
   Подпись под кольцом — обычным текстом рядом (см. дашборд аналитики). */

/* — Легенда — */
.chart-legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:.5rem}
.chart-legend__item{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;color:hsl(var(--muted-fg))}
.chart-legend__dot{width:.7rem;height:.7rem;border-radius:var(--radius-sm);background:var(--c,var(--chart-accent));flex:none}

/* ─────────────────────────────────────────────
   ИНТЕРАКТИВ ГРАФИКОВ (FD-150): единый тултип + hover-подсветка.
   Тултип позиционируется хук-ом useChartTip у курсора внутри .chart
   (position:relative), не перехватывает мышь, озвучивается скринридером.
   ───────────────────────────────────────────── */
.chart-tip{position:absolute;z-index:10;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));
  background:hsl(var(--card));border:1px solid hsl(var(--border));box-shadow:var(--shadow-lg);
  padding:.4rem .55rem;border-radius:var(--radius-sm);font-size:.72rem;line-height:1.35;
  white-space:nowrap;max-width:18rem;color:hsl(var(--foreground));animation:chartTipIn var(--dur-fast) var(--ease)}
.chart-tip__title{font-weight:600;margin-bottom:.25rem}
.chart-tip__row{display:flex;align-items:center;gap:.45rem}
.chart-tip__row + .chart-tip__row{margin-top:.15rem}
.chart-tip__dot{width:.55rem;height:.55rem;border-radius:var(--radius-sm);background:var(--c,var(--chart-accent));flex:none}
.chart-tip__key{color:hsl(var(--muted-fg))}
.chart-tip__val{font-family:var(--font-mono);font-weight:600;margin-left:auto;padding-left:.8rem;color:hsl(var(--foreground))}
@keyframes chartTipIn{from{opacity:0;transform:translate(-50%,calc(-100% - 6px))}to{opacity:1;transform:translate(-50%,calc(-100% - 12px))}}

/* Линейный: вертикальный crosshair + увеличенная «горячая» точка под курсором,
   прозрачный слой-ловушка событий поверх области построения. */
.ch-crosshair{stroke:hsl(var(--border));stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.ch-hot{stroke:hsl(var(--card));stroke-width:2;pointer-events:none}
.ch-capture{fill:transparent;cursor:crosshair}

/* Hover-подсветка элементов (значение — в тултипе). */
.donut__seg{transition:opacity var(--dur-fast) var(--ease);cursor:pointer}
.donut.is-hovering .donut__seg{opacity:.4}
.donut.is-hovering .donut__seg.is-active{opacity:1}
.radar__dot{cursor:pointer}
.radar__hit{fill:transparent;cursor:pointer}
.rank__track,.funnel__row,.bars__col,.heatmap__cell,.ch-bar{cursor:pointer}
.heatmap__cell{transition:outline-color var(--dur-fast) var(--ease);outline:2px solid transparent;outline-offset:-1px}
.heatmap__cell:hover{outline-color:hsl(var(--foreground))}
.rank__bar,.funnel__bar{transition:width var(--dur) var(--ease),filter var(--dur-fast) var(--ease)}
.rank__row:hover .rank__bar,.funnel__row:hover .funnel__bar{filter:brightness(1.08)}
.spark__hot{stroke:hsl(var(--card));stroke-width:2;pointer-events:none}
.spark__capture{fill:transparent;cursor:crosshair}

@media (prefers-reduced-motion:reduce){.chart-tip{animation:none}}

/* ─────────────────────────────────────────────
   ГРАФИКИ АНАЛИТИКИ · расширение семейства CHARTS
   Полный набор для дашбордов аналитики (как Метрика/GA4): линейный/область
   (мульти-серия, стек), колонки (групп./стек), горизонт. рейтинг top-N,
   донат/пирог (мультисегмент + легенда), воронка конверсии, тепловая карта
   «час×день», KPI-карточка, ячейка-метр для таблиц. Цвета серий/сегментов —
   категориальная палитра --cat-1..8 (передаётся инлайн как --c; одиночный
   график без серий берёт --chart-accent). Всё на токенах → свет/тьма из
   коробки, без хардкода hex. Рендерят platform/components/charts/*
   (StatCard, LineChart, ColumnChart, RankBars, DonutChart, FunnelChart,
   Heatmap). См. DESIGN-SYSTEM.md §5 (Charts).
   ───────────────────────────────────────────── */
/* Ось-базлайн (LineChart/ColumnChart): сплошная линия нуля/края */
.chart__axis{stroke:hsl(var(--border));stroke-width:1;shape-rendering:crispEdges}

/* — Линейный / область (мульти-серия, стек) — */
.ch-area{fill:var(--c,var(--chart-accent));opacity:.14;stroke:none}
.ch-line{fill:none;stroke:var(--c,var(--chart-accent));stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ch-dot{fill:var(--c,var(--chart-accent));stroke:hsl(var(--card));stroke-width:1.5}

/* — Колонки (SVG-прямоугольники; групп./стек) — */
.ch-bar{fill:var(--c,var(--chart-accent));transition:opacity var(--dur-fast) var(--ease)}
.ch-bar--muted{fill:hsl(var(--muted-bg))}
.ch-bar:hover{opacity:.82}

/* — Горизонтальный рейтинг top-N — */
.rank{display:flex;flex-direction:column;gap:.55rem;width:100%}
.rank__row{display:grid;grid-template-columns:minmax(5rem,9rem) 1fr auto;align-items:center;gap:.6rem}
.rank__label{font-size:.8rem;color:hsl(var(--foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank__track{position:relative;height:.85rem;background:hsl(var(--muted-bg));overflow:hidden}
.rank__bar{position:absolute;inset:0 auto 0 0;width:calc(var(--pct,0)*1%);background:var(--c,var(--chart-accent));
  transition:width var(--dur) var(--ease)}
.rank__val{font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:hsl(var(--foreground));text-align:right;min-width:2.5rem}

/* — Донат / пирог (мультисегмент, stroke-дуги). Одиночная доля — это
     .progress-ring (см. APP UI). Здесь — много сегментов + центр-метка. — */
.donut-box{position:relative;display:inline-flex;align-items:center;justify-content:center}
.donut{display:block;overflow:visible;transform:rotate(-90deg)}
.donut__track{fill:none;stroke:hsl(var(--muted-bg))}
.donut__seg{fill:none;stroke:var(--c,var(--chart-accent))}
.donut-box__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.donut-box__num{font-family:var(--font-mono);font-weight:700;font-size:1.2rem;line-height:1;color:hsl(var(--foreground))}
.donut-box__cap{font-size:.6rem;color:hsl(var(--muted-fg));margin-top:.15rem;text-transform:uppercase;letter-spacing:.05em}

/* — Радар-паутинка (профиль по осям 0..max: PAEI Адизеса, 8 уровней СД) —
   Сетка-кольца + оси из --border, профиль — акцент семейства (--chart-accent =
   --level, заливка --chart-soft), метки-кружки на концах осей красятся цветом оси
   (--cat-* или заданный), текст кода — контраст к акценту. Источник: RadarChart.tsx. */
.radar{display:block;max-width:100%;height:auto;overflow:visible}
.radar__grid,.radar__axis{stroke:hsl(var(--border));fill:none}
.radar__profile{fill:var(--chart-soft);stroke:var(--chart-accent);stroke-width:2;stroke-linejoin:round}
.radar__dot{stroke:hsl(var(--card));stroke-width:1.5}
.radar__dot-label{fill:var(--level-contrast);font:700 12px var(--font-mono)}

/* — Воронка конверсии (центрированные сужающиеся полосы) — */
.funnel{display:flex;flex-direction:column;gap:.25rem;width:100%}
.funnel__head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-bottom:.15rem}
.funnel__label{font-size:.8rem;color:hsl(var(--foreground))}
.funnel__val{font-family:var(--font-mono);font-size:.74rem;font-weight:600;color:hsl(var(--foreground))}
.funnel__track{display:flex;justify-content:center;height:1.6rem;background:hsl(var(--muted-bg))}
.funnel__bar{height:100%;width:calc(var(--pct,0)*1%);background:var(--chart-accent);transition:width var(--dur) var(--ease)}
.funnel__drop{font-family:var(--font-mono);font-size:.62rem;color:hsl(var(--muted-fg));text-align:center;padding:.1rem 0}
.funnel__drop b{color:var(--danger);font-weight:600}

/* — Тепловая карта (час×день, когорты) — */
.heatmap{display:grid;gap:2px;width:100%}
.heatmap__cell{aspect-ratio:1;min-height:.85rem;
  background:color-mix(in srgb,var(--chart-accent) calc(var(--v,0)*1%),hsl(var(--muted-bg)));
  transition:outline var(--dur-fast) var(--ease)}
.heatmap__cell:hover{outline:2px solid hsl(var(--foreground));outline-offset:-2px}
.heatmap__lbl{font-family:var(--font-mono);font-size:.55rem;color:hsl(var(--muted-fg));display:flex;align-items:center}
.heatmap__lbl--col{justify-content:center}
.heatmap-scale{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.58rem;color:hsl(var(--muted-fg));margin-top:.5rem}
.heatmap-scale__bar{width:5rem;height:.6rem;background:linear-gradient(90deg,hsl(var(--muted-bg)),var(--chart-accent))}

/* — KPI-карточка (метрика + дельта + спарклайн) — */
.statcard{display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.15rem;background:hsl(var(--card));border:1px solid hsl(var(--border))}
.statcard__label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--muted-fg))}
.statcard__row{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.statcard__value{font-family:var(--font-mono);font-size:1.7rem;font-weight:700;line-height:1;color:hsl(var(--foreground))}
.statcard__delta{display:inline-flex;align-items:center;gap:.15rem;font-family:var(--font-mono);font-size:.72rem;font-weight:600}
.statcard__delta--up{color:var(--success)}
.statcard__delta--down{color:var(--danger)}
.statcard__delta--flat{color:hsl(var(--muted-fg))}
.statcard__spark{margin-top:.15rem}

/* — Ячейка-метр (инлайн-бар в .data-table: «top страниц/источников») — */
.cell-meter{display:flex;align-items:center;gap:.5rem;min-width:6rem}
.cell-meter__track{position:relative;flex:1;height:.5rem;background:hsl(var(--muted-bg));overflow:hidden}
.cell-meter__bar{position:absolute;inset:0 auto 0 0;width:calc(var(--pct,0)*1%);background:var(--c,var(--chart-accent))}
.cell-meter__val{font-family:var(--font-mono);font-size:.7rem;color:hsl(var(--muted-fg));min-width:2.5rem;text-align:right}

/* ─────────────────────────────────────────────
   УТИЛИТЫ · ASPECT-RATIO · VISUALLY-HIDDEN
   ───────────────────────────────────────────── */
.aspect{position:relative;width:100%;aspect-ratio:var(--ratio,16/9);overflow:hidden;background:hsl(var(--muted-bg))}
.aspect>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   КАРТА ЭМПАТИИ (Empathy Map) — модуль раздела «Инструменты»
   Канвас 6 секторов (Слышит/Видит/Говорит/Делает/Думает-Чувствует
   + опц. Боли/Выгоды). Используется на /tools/empathy-map.
   Док: Docs/product-discovery/фреймворки-каталог-и-ТЗ.md (§4.3).
   ============================================================ */
.empathy-map{display:flex;flex-direction:column;gap:var(--space-lg)}

/* Персона */
.empathy-map__persona{display:flex;flex-direction:column;gap:6px}
.empathy-map__persona-label{font-size:.8rem;font-weight:600;color:hsl(var(--muted-fg));text-transform:uppercase;letter-spacing:.04em}
.empathy-map__persona-input{width:100%;padding:12px 14px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:1rem}
.empathy-map__persona-input:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}

/* Сетка секторов: 2 колонки, «Думает и чувствует» — на всю ширину */
.empathy-map__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}
.emp-sector{display:flex;flex-direction:column;gap:10px;border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md)}
.emp-sector--wide{grid-column:1/-1}
.emp-sector__head{display:flex;flex-direction:column;gap:2px}
.emp-sector__title{margin:0;font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:hsl(var(--foreground))}
.emp-sector__title::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--level);margin-right:8px;vertical-align:middle}
.emp-sector__hint{margin:0;font-size:.82rem;line-height:1.45;color:hsl(var(--muted-fg))}
.emp-sector__field{width:100%;resize:vertical;min-height:84px;padding:10px 12px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.95rem;line-height:1.5}
.emp-sector__field::placeholder{color:hsl(var(--muted-fg));opacity:.7}
.emp-sector__field:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}

/* Думает и чувствует: 4 подкатегории */
.emp-tf{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm,10px)}
.emp-tf__field{display:flex;flex-direction:column;gap:4px}
.emp-tf__label{font-size:.9rem;font-weight:600;color:hsl(var(--foreground))}
.emp-tf__hint{font-size:.76rem;line-height:1.35;color:hsl(var(--muted-fg))}

/* Палитра эмоций — чипы-переключатели */
.emp-palette{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:var(--space-md);border-top:1px dashed hsl(var(--border))}
.emp-palette__caption{font-size:.82rem;font-weight:600;color:hsl(var(--muted-fg))}
.emp-palette__group{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.emp-palette__group-name{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:hsl(var(--muted-fg));min-width:64px}
.emp-palette__chips{display:flex;flex-wrap:wrap;gap:6px}
.emp-chip{padding:4px 12px;border:1px solid hsl(var(--border));border-radius:999px;background:hsl(var(--background));color:hsl(var(--muted-fg));font-size:.83rem;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.emp-chip:hover{border-color:var(--level);color:hsl(var(--foreground))}
.emp-chip:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.emp-chip--on{background:color-mix(in srgb,var(--level) 16%,transparent);border-color:var(--level);color:hsl(var(--foreground));font-weight:600}

/* Мост к VPC: Боли/Выгоды */
.empathy-map__bridges{display:flex;flex-direction:column;gap:var(--space-md)}
.empathy-map__bridges-toggle{align-self:flex-start;padding:8px 14px;border:1px dashed hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:.9rem;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.empathy-map__bridges-toggle:hover{border-color:var(--level);color:hsl(var(--foreground))}
.empathy-map__bridges-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}

/* Статус сохранения */
.empathy-map__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:1.4em;font-size:.85rem}
.empathy-map__save{color:hsl(var(--muted-fg));transition:color var(--dur-fast) var(--ease)}
.empathy-map__save--saved,.empathy-map__save--local{color:var(--level)}
.empathy-map__save--error{color:hsl(var(--warn,0 70% 55%))}
.empathy-map__login-hint{color:hsl(var(--muted-fg))}
.empathy-map__login-hint a{color:var(--level);font-weight:600}

@media (max-width:720px){
  .empathy-map__grid,.emp-tf,.empathy-map__bridges-grid{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────
   ДИАГНОСТИКА · экраны прохождения и результата тестов (FD-196)
   Перенос из легаси Contents/tests на канон ДС. Скоуп под .diag-run
   (прохождение) и .diag-result (результат) — обобщённые имена
   (.bar, .axis, .clr-NNN, .validity) не конфликтуют с другими компонентами.
   Акцент — через --level (канон), не легаси --accent. Радар результата —
   интерактивный компонент RadarChart, а не статичный SVG.
   ───────────────────────────────────────────── */
.diag-page{max-width:48rem;margin:0 auto;padding:var(--space-xl) var(--space-lg) calc(var(--space-xl) * 2)}
.diag-radar{display:flex;justify-content:center;margin:6px 0 4px}
.diag-loading{padding:var(--space-xl) 0;color:hsl(var(--muted-fg))}

/* — Прохождение — */
.diag-run__title{font-size:1.05rem;font-weight:600;margin:0 0 14px;color:hsl(var(--muted-fg))}
.diag-run .qh{font-size:1.15rem;font-weight:600;line-height:1.4;margin:18px 0 4px}
.diag-run .pcount{font-size:12px;color:hsl(var(--muted-fg));margin:8px 0 26px;font-family:var(--font-mono);letter-spacing:.02em}
.diag-run .opts{display:flex;flex-direction:column;gap:10px}
.diag-run .opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:15px 18px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:16px;cursor:pointer;transition:background-color .12s var(--ease),border-color .12s var(--ease),transform .08s var(--ease)}
.diag-run .opt:hover{border-color:var(--level);background:color-mix(in srgb,var(--level) 5%,transparent)}
.diag-run .opt:active{transform:scale(.99)}
.diag-run .opt:focus-visible{outline:2px solid var(--level);outline-offset:2px}
.diag-run .opt.on{border-color:var(--level);background:color-mix(in srgb,var(--level) 10%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--level) 15%,transparent)}
.diag-run .opt[disabled]{opacity:.6;cursor:default}
.diag-run .pip{width:14px;height:14px;border-radius:50%;flex:none;background:hsl(var(--muted-bg));border:1px solid hsl(var(--border))}
.diag-run .lk1 .pip{background:var(--red);border-color:var(--red)}
.diag-run .lk2 .pip{background:var(--warn);border-color:var(--warn)}
.diag-run .lk3 .pip{background:hsl(var(--muted-fg));border-color:hsl(var(--muted-fg))}
.diag-run .lk4 .pip{background:color-mix(in srgb,var(--green) 60%,hsl(var(--card)));border-color:color-mix(in srgb,var(--green) 60%,hsl(var(--card)))}
.diag-run .lk5 .pip{background:var(--green);border-color:var(--green)}

/* — Результат: описание + полосы интенсивности — */
.diag-result .desc p{margin:0 0 12px}
.diag-result .desc b{font-weight:600}
.diag-result .bars{margin:6px 0}
.diag-result .bar{margin:14px 0}
.diag-result .bar .top{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.diag-result .bar .cap{font-size:12.5px;color:hsl(var(--muted-fg));margin:2px 0 6px}
.diag-result .bar .track{height:12px;background:hsl(var(--muted-bg));border-radius:999px;overflow:hidden}
.diag-result .bar .fill{height:100%;border-radius:999px;transition:width .8s var(--ease)}

/* — Результат: оси смещения с маркером — */
.diag-result .axis{margin:18px 0}
.diag-result .axis .top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px}
.diag-result .axis .track{position:relative;height:10px;border-radius:999px}
.diag-result .axis.im .track{background:linear-gradient(90deg,var(--blue),hsl(var(--muted-bg)) 50%,var(--orange))}
.diag-result .axis.tier .track{background:linear-gradient(90deg,var(--purple),hsl(var(--muted-bg)) 50%,var(--turquoise))}
.diag-result .axis .mark{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:hsl(var(--card));border:3px solid var(--level);transform:translate(-50%,-50%);box-shadow:var(--shadow-card);transition:left .8s var(--ease)}
.diag-result .axis .cap{display:flex;justify-content:space-between;font-size:12px;margin-top:7px;color:hsl(var(--muted-fg))}
.diag-result .axis .read{font-size:13.5px;color:hsl(var(--muted-fg));margin-top:9px}

/* — Результат: достоверность ответов — */
.diag-result .validity{border-left:3px solid var(--level);background:color-mix(in srgb,var(--level) 6%,transparent);padding:14px 16px;border-radius:var(--radius);margin:18px 0;font-size:14px}
.diag-result .validity.warn{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,transparent)}
.diag-result .validity.bad{border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,transparent)}

/* — Результат: код PAEI — */
.diag-result .code-badge{font-family:var(--font-mono);font-weight:700;letter-spacing:.14em;font-size:clamp(2.2rem,1.6rem + 2.4vw,3rem);line-height:1;margin:.15rem 0 0}
.diag-result .code-badge .lc{color:hsl(var(--muted-fg));font-weight:300;text-transform:lowercase}

/* — Результат: цветной текст по уровню/функции — */
.diag-result .clr-beige{color:var(--beige)}
.diag-result .clr-purple{color:var(--purple)}
.diag-result .clr-red{color:var(--red)}
.diag-result .clr-blue{color:var(--blue)}
.diag-result .clr-orange{color:var(--orange)}
.diag-result .clr-green{color:var(--green)}
.diag-result .clr-yellow{color:var(--yellow)}
.diag-result .clr-turquoise{color:var(--turquoise)}

/* — Результат: подробности по уровням/функциям — */
.diag-result details{margin:10px 0;border:1px solid hsl(var(--border));border-radius:var(--radius);padding:0 16px;background:hsl(var(--card))}
.diag-result details summary{cursor:pointer;padding:14px 0;font-weight:500;list-style:none}
.diag-result details summary::-webkit-details-marker{display:none}
.diag-result details .body{padding:0 0 14px;color:hsl(var(--muted-fg));font-size:14.5px;line-height:1.6}

/* — Связка тестов «ценности → стиль» — */
.diag-result .bridge{border:1px solid color-mix(in srgb,var(--level) 35%,transparent);background:color-mix(in srgb,var(--level) 6%,transparent);border-radius:var(--radius-lg);padding:var(--space-xl);margin:var(--space-xl) 0}
.diag-result .bridge h3{margin:0 0 .5rem}
.diag-result .bridge p{margin:0 0 .65rem;font-size:.95rem;line-height:1.6;color:hsl(var(--muted-fg))}
.diag-result .bridge p b{color:hsl(var(--foreground))}
.diag-result .map-list{margin:.5rem 0 0;padding:0;list-style:none;font-size:.85rem;color:hsl(var(--muted-fg))}
.diag-result .map-list li{margin:.3rem 0;display:flex;align-items:center;gap:.15rem}

/* ============================================================
   VALUE PROPOSITION CANVAS (VPC) — модуль раздела «Инструменты»
   Профиль клиента (Задачи/Боли/Выгоды) + карта ценности
   (Продукты/Болеутолители/Выгодогенераторы) + генератор USP.
   /tools/vpc · Док §4.4. Передача данных: импорт из «Карты эмпатии».
   ============================================================ */
.vpc{display:flex;flex-direction:column;gap:var(--space-lg)}

/* Тулбар импорта */
.vpc__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.vpc__import{padding:9px 16px;border:1px solid var(--level);border-radius:var(--radius);background:color-mix(in srgb,var(--level) 8%,transparent);color:hsl(var(--foreground));font-size:.9rem;font-weight:600;cursor:pointer;transition:background var(--dur-fast) var(--ease)}
.vpc__import:hover{background:color-mix(in srgb,var(--level) 16%,transparent)}
.vpc__import:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.vpc__import-msg{font-size:.85rem;color:hsl(var(--muted-fg))}

/* Канвас: профиль | ценность */
.vpc__canvas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);align-items:start}
.vpc__side{display:flex;flex-direction:column;gap:var(--space-md);border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md)}
.vpc__side-title{margin:0;font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:hsl(var(--foreground))}

/* Блок канваса */
.vpc-block{display:flex;flex-direction:column;gap:8px}
.vpc-block__head{display:flex;flex-direction:column;gap:2px}
.vpc-block__title{margin:0;font-size:.98rem;font-weight:600;color:hsl(var(--foreground))}
.vpc-block__title::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--level);margin-right:7px;vertical-align:middle}
.vpc-block__hint{margin:0;font-size:.78rem;line-height:1.4;color:hsl(var(--muted-fg))}
.vpc-block__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.vpc-block__add{align-self:flex-start;padding:5px 12px;border:1px dashed hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:.85rem;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.vpc-block__add:hover{border-color:var(--level);color:hsl(var(--foreground))}

/* Строка списка */
.vpc-row{display:flex;align-items:center;gap:6px}
.vpc-row__text{flex:1 1 auto;min-width:0;padding:7px 10px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.9rem}
.vpc-row__text:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.vpc-row__tag{flex:0 0 auto;padding:7px 8px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--muted-fg));font-size:.8rem;cursor:pointer;max-width:130px}
.vpc-row__tag:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.vpc-row__del{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;border:1px solid hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:1.1rem;line-height:1;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.vpc-row__del:hover{border-color:var(--warn,0 70% 55%);color:hsl(var(--warn,0 70% 55%))}
.vpc-row__del:focus-visible{outline:2px solid var(--level);outline-offset:1px}

/* USP */
.vpc__usp{display:flex;flex-direction:column;gap:10px;border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md)}
.vpc__usp-hint{margin:0;font-size:.82rem;color:hsl(var(--muted-fg))}
.vpc__usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vpc__usp-field{display:flex;flex-direction:column;gap:4px}
.vpc__usp-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;color:hsl(var(--muted-fg))}
.vpc__usp-field input{padding:8px 10px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.9rem}
.vpc__usp-field input:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.vpc__usp-result{margin:6px 0 0;padding:14px 16px;border-left:3px solid var(--level);background:color-mix(in srgb,var(--level) 6%,transparent);border-radius:var(--radius);font-size:1rem;line-height:1.55;color:hsl(var(--foreground))}

/* Подвал-статус */
.vpc__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:1.4em;font-size:.85rem}
.vpc__save{color:hsl(var(--muted-fg))}
.vpc__save--saved,.vpc__save--local{color:var(--level)}
.vpc__save--error{color:hsl(var(--warn,0 70% 55%))}
.vpc__login-hint{color:hsl(var(--muted-fg))}
.vpc__login-hint a{color:var(--level);font-weight:600}

@media (max-width:820px){
  .vpc__canvas{grid-template-columns:1fr}
  .vpc__usp-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){ .vpc__usp-grid{grid-template-columns:1fr} }

/* ============================================================
   JOBS TO BE DONE (JTBD) — модуль раздела «Инструменты»
   Канвас push→pull + формулировка работы + генератор Job Story.
   /tools/jtbd · Док §4.6. Импорт из «Карты эмпатии», экспорт в VPC.
   ============================================================ */
.jtbd{display:flex;flex-direction:column;gap:var(--space-lg)}
.jtbd__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.jtbd__import{padding:9px 16px;border:1px solid var(--level);border-radius:var(--radius);background:color-mix(in srgb,var(--level) 8%,transparent);color:hsl(var(--foreground));font-size:.88rem;font-weight:600;cursor:pointer;transition:background var(--dur-fast) var(--ease)}
.jtbd__import:hover{background:color-mix(in srgb,var(--level) 16%,transparent)}
.jtbd__import:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.jtbd__import-msg{font-size:.85rem;color:hsl(var(--muted-fg))}

.jtbd__canvas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);align-items:start}
.jtbd__col{display:flex;flex-direction:column;gap:var(--space-md);border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md)}
.jtbd__col--push{border-left:3px solid color-mix(in srgb,var(--level) 60%,transparent)}
.jtbd__col--pull{border-left:3px solid var(--level)}
.jtbd__col-title{margin:0;font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:hsl(var(--foreground))}

.jtbd-field{display:flex;flex-direction:column;gap:3px}
.jtbd-field__label{font-size:.9rem;font-weight:600;color:hsl(var(--foreground))}
.jtbd-field__hint{font-size:.76rem;line-height:1.35;color:hsl(var(--muted-fg))}
.jtbd-field__area{width:100%;resize:vertical;min-height:52px;padding:9px 11px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.92rem;line-height:1.5}
.jtbd-field__area:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}

.jtbd-block{display:flex;flex-direction:column;gap:7px}
.jtbd-block__head{display:flex;flex-direction:column;gap:2px}
.jtbd-block__title{margin:0;font-size:.95rem;font-weight:600;color:hsl(var(--foreground))}
.jtbd-block__hint{margin:0;font-size:.76rem;line-height:1.4;color:hsl(var(--muted-fg))}
.jtbd-block__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.jtbd-block__add{align-self:flex-start;padding:5px 12px;border:1px dashed hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:.85rem;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.jtbd-block__add:hover{border-color:var(--level);color:hsl(var(--foreground))}
.jtbd-row{display:flex;align-items:center;gap:6px}
.jtbd-row__text{flex:1 1 auto;min-width:0;padding:7px 10px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.9rem}
.jtbd-row__text:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.jtbd-row__del{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;border:1px solid hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:1.1rem;line-height:1;cursor:pointer}
.jtbd-row__del:hover{border-color:var(--warn,0 70% 55%);color:hsl(var(--warn,0 70% 55%))}
.jtbd-row__del:focus-visible{outline:2px solid var(--level);outline-offset:1px}

.jtbd__job{display:flex;flex-direction:column;gap:10px;border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md)}
.jtbd__job-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.jtbd__stories{display:flex;flex-direction:column;gap:10px;border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md)}
.jtbd__stories-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.jtbd-story{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background))}
.jtbd-story__fields{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:end}
.jtbd-story__f{display:flex;flex-direction:column;gap:3px}
.jtbd-story__f span{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:hsl(var(--muted-fg))}
.jtbd-story__f input{padding:7px 10px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.9rem}
.jtbd-story__f input:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.jtbd-story__preview{margin:0;padding:8px 12px;border-left:3px solid var(--level);background:color-mix(in srgb,var(--level) 6%,transparent);border-radius:var(--radius);font-size:.92rem;line-height:1.5;color:hsl(var(--foreground))}
.jtbd__stories-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.jtbd__presets summary{cursor:pointer;font-size:.85rem;color:hsl(var(--muted-fg))}
.jtbd__presets ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.jtbd__presets button{text-align:left;width:100%;padding:7px 10px;border:1px dashed hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:.85rem;line-height:1.4;cursor:pointer}
.jtbd__presets button:hover{border-color:var(--level);color:hsl(var(--foreground))}

.jtbd__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:1.4em;font-size:.85rem}
.jtbd__save{color:hsl(var(--muted-fg))}
.jtbd__save--saved,.jtbd__save--local{color:var(--level)}
.jtbd__save--error{color:hsl(var(--warn,0 70% 55%))}
.jtbd__login-hint{color:hsl(var(--muted-fg))}
.jtbd__login-hint a{color:var(--level);font-weight:600}

@media (max-width:820px){
  .jtbd__canvas,.jtbd__job-grid{grid-template-columns:1fr}
  .jtbd-story__fields{grid-template-columns:1fr}
}

/* ============================================================
   CUSTOMER JOURNEY MAP (CJM) — модуль раздела «Инструменты»
   8 этапов-колонок × слои + кривая эмоций + метрики по этапам +
   режим AS IS / TO BE. /tools/cjm · Док §4.13.
   ============================================================ */
.cjm{display:flex;flex-direction:column;gap:var(--space-lg)}
.cjm__toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px}
.cjm__persona{display:flex;flex-direction:column;gap:4px;min-width:240px;flex:1 1 240px}
.cjm__persona span{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:hsl(var(--muted-fg))}
.cjm__persona input{padding:10px 12px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.95rem}
.cjm__persona input:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.cjm__mode{display:inline-flex;border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden}
.cjm__mode-btn{padding:9px 14px;border:0;background:transparent;color:hsl(var(--muted-fg));font-size:.85rem;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.cjm__mode-btn+.cjm__mode-btn{border-left:1px solid hsl(var(--border))}
.cjm__mode-btn.is-on{background:color-mix(in srgb,var(--level) 16%,transparent);color:hsl(var(--foreground));font-weight:600}
.cjm__mode-btn:focus-visible{outline:2px solid var(--level);outline-offset:-2px}
.cjm__import{padding:9px 14px;border:1px solid var(--level);border-radius:var(--radius);background:color-mix(in srgb,var(--level) 8%,transparent);color:hsl(var(--foreground));font-size:.85rem;font-weight:600;cursor:pointer}
.cjm__import:hover{background:color-mix(in srgb,var(--level) 16%,transparent)}
.cjm__import:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.cjm__import-msg{font-size:.85rem;color:hsl(var(--muted-fg))}

/* Кривая эмоций */
.cjm__curve{margin:0;border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:8px 10px}
.cjm__curve svg{display:block;width:100%;height:100px}
.cjm__curve-axis{stroke:hsl(var(--border));stroke-width:1;stroke-dasharray:4 4}
.cjm__curve-line{stroke:var(--level);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.cjm__curve-dot{fill:var(--level)}

/* Доска этапов (горизонтальная прокрутка) */
.cjm__board{display:flex;gap:var(--space-md);overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.cjm-col{flex:0 0 230px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md)}
.cjm-col__head{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid hsl(var(--border));padding-bottom:8px}
.cjm-col__title{margin:0;font-family:var(--font-display);font-size:1rem;font-weight:700;color:hsl(var(--foreground))}
.cjm-col__caption{margin:0;font-size:.74rem;line-height:1.35;color:hsl(var(--muted-fg))}
.cjm-col__emotion{display:flex;flex-direction:column;gap:3px}
.cjm-col__emotion select{padding:6px 8px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-size:.85rem;cursor:pointer}
.cjm-col__emotion select:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.cjm-field{display:flex;flex-direction:column;gap:3px}
.cjm-field__label{font-size:.76rem;font-weight:600;color:hsl(var(--muted-fg))}
.cjm-field__area{width:100%;resize:vertical;min-height:46px;padding:7px 9px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.85rem;line-height:1.45}
.cjm-field__area::placeholder{color:hsl(var(--muted-fg));opacity:.6}
.cjm-field__area:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.cjm-col__metrics{display:flex;flex-direction:column;gap:5px}
.cjm-col__chips{display:flex;flex-wrap:wrap;gap:5px}
.cjm-chip{padding:3px 9px;border:1px solid hsl(var(--border));border-radius:999px;background:hsl(var(--background));color:hsl(var(--muted-fg));font-size:.76rem;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.cjm-chip:hover{border-color:var(--level);color:hsl(var(--foreground))}
.cjm-chip:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.cjm-chip--on{background:color-mix(in srgb,var(--level) 16%,transparent);border-color:var(--level);color:hsl(var(--foreground));font-weight:600}

.cjm__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:1.4em;font-size:.85rem}
.cjm__save{color:hsl(var(--muted-fg))}
.cjm__save--saved,.cjm__save--local{color:var(--level)}
.cjm__save--error{color:hsl(var(--warn,0 70% 55%))}
.cjm__login-hint{color:hsl(var(--muted-fg))}
.cjm__login-hint a{color:var(--level);font-weight:600}

/* ============================================================
   RICE SCORE — модуль раздела «Инструменты»
   Таблица приоритизации идей: (Reach×Impact×Confidence)/Effort.
   /tools/rice · Док §4.11.
   ============================================================ */
.rice{display:flex;flex-direction:column;gap:var(--space-md)}
.rice__formula{margin:0;padding:12px 14px;border-left:3px solid var(--level);background:color-mix(in srgb,var(--level) 6%,transparent);border-radius:var(--radius);font-family:var(--font-mono);font-size:.92rem;color:hsl(var(--foreground))}
.rice__period{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rice__period span{font-size:.85rem;font-weight:600;color:hsl(var(--muted-fg))}
.rice__period input{padding:7px 11px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));color:hsl(var(--foreground));font-size:.9rem;max-width:200px}
.rice__period input:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}

.rice__table-wrap{overflow-x:auto;border:1px solid hsl(var(--border));border-radius:var(--radius-lg)}
.rice__table{width:100%;border-collapse:collapse;min-width:640px}
.rice__table th,.rice__table td{padding:9px 10px;text-align:left;border-bottom:1px solid hsl(var(--border));vertical-align:middle}
.rice__table thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;color:hsl(var(--foreground));background:hsl(var(--muted-bg));white-space:nowrap}
.rice__th-rank{width:42px;text-align:center}
.rice__th-score{text-align:right}
.rice__table tbody tr:last-child td{border-bottom:0}
.rice__row--top{background:color-mix(in srgb,var(--level) 7%,transparent)}
.rice__rank{text-align:center;font-family:var(--font-mono);font-weight:600;color:hsl(var(--muted-fg))}
.rice__row--top .rice__rank{color:var(--level)}
.rice__name{width:100%;min-width:140px;padding:6px 9px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-size:.9rem}
.rice__num{width:84px;padding:6px 8px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-size:.9rem;font-family:var(--font-mono)}
.rice__sel{padding:6px 8px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-size:.88rem;cursor:pointer}
.rice__name:focus-visible,.rice__num:focus-visible,.rice__sel:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.rice__score{text-align:right;font-family:var(--font-mono);font-weight:700;font-size:1rem;color:hsl(var(--foreground))}
.rice__row--top .rice__score{color:var(--level)}
.rice__del{width:28px;height:28px;display:grid;place-items:center;border:1px solid hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:1.1rem;line-height:1;cursor:pointer}
.rice__del:hover{border-color:var(--warn,0 70% 55%);color:hsl(var(--warn,0 70% 55%))}
.rice__del:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.rice__empty{text-align:center;color:hsl(var(--muted-fg));font-size:.9rem;padding:18px}

.rice__add{align-self:flex-start;padding:8px 16px;border:1px dashed hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:.9rem;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.rice__add:hover{border-color:var(--level);color:hsl(var(--foreground))}

.rice__legend summary{cursor:pointer;font-size:.85rem;color:hsl(var(--muted-fg))}
.rice__legend-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.rice__legend-grid b{font-size:.85rem;color:hsl(var(--foreground))}
.rice__legend-grid ul{margin:6px 0 0;padding-left:18px;font-size:.82rem;line-height:1.5;color:hsl(var(--muted-fg))}

.rice__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:1.4em;font-size:.85rem}
.rice__save{color:hsl(var(--muted-fg))}
.rice__save--saved,.rice__save--local{color:var(--level)}
.rice__save--error{color:hsl(var(--warn,0 70% 55%))}
.rice__login-hint{color:hsl(var(--muted-fg))}
.rice__login-hint a{color:var(--level);font-weight:600}

@media (max-width:560px){ .rice__legend-grid{grid-template-columns:1fr} }

/* ============================================================
   HOW MIGHT WE (HMW) — модуль раздела «Инструменты»
   Генератор главного вопроса. /tools/hmw · Док §4.7.
   ============================================================ */
.hmw{display:flex;flex-direction:column;gap:var(--space-md)}
.hmw__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hmw__import{padding:9px 16px;border:1px solid var(--level);border-radius:var(--radius);background:color-mix(in srgb,var(--level) 8%,transparent);color:hsl(var(--foreground));font-size:.88rem;font-weight:600;cursor:pointer}
.hmw__import:hover{background:color-mix(in srgb,var(--level) 16%,transparent)}
.hmw__import:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.hmw__import-msg{font-size:.85rem;color:hsl(var(--muted-fg))}
.hmw__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hmw__field{display:flex;flex-direction:column;gap:4px}
.hmw__label{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:hsl(var(--muted-fg))}
.hmw__field input{padding:9px 12px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.95rem}
.hmw__field input:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.hmw__result-box{display:flex;flex-direction:column;gap:10px;border:1px solid hsl(var(--border));border-left:3px solid var(--level);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--level) 6%,transparent);padding:var(--space-md)}
.hmw__result-cap{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:hsl(var(--muted-fg))}
.hmw__result{margin:0;font-family:var(--font-display);font-size:1.25rem;line-height:1.4;font-weight:600;color:hsl(var(--foreground))}
.hmw__copy{align-self:flex-start;padding:7px 14px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));color:hsl(var(--foreground));font-size:.85rem;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.hmw__copy:hover{border-color:var(--level)}
.hmw__copy:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.hmw__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:1.4em;font-size:.85rem}
.hmw__save{color:hsl(var(--muted-fg))}
.hmw__save--saved,.hmw__save--local{color:var(--level)}
.hmw__save--error{color:hsl(var(--warn,0 70% 55%))}
.hmw__login-hint{color:hsl(var(--muted-fg))}
.hmw__login-hint a{color:var(--level);font-weight:600}
@media (max-width:560px){ .hmw__grid{grid-template-columns:1fr} }

/* ============================================================
   ЦВЕТОК ЛОТОСА (Lotus Blossom) — модуль раздела «Инструменты»
   Центр-цель + 8 лепестков-ассоциаций × до 8 идей (до 64).
   /tools/lotus · Док §4.8.
   ============================================================ */
.lotus{display:flex;flex-direction:column;gap:var(--space-md)}
.lotus__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.lotus__import{padding:9px 16px;border:1px solid var(--level);border-radius:var(--radius);background:color-mix(in srgb,var(--level) 8%,transparent);color:hsl(var(--foreground));font-size:.88rem;font-weight:600;cursor:pointer}
.lotus__import:hover{background:color-mix(in srgb,var(--level) 16%,transparent)}
.lotus__import:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.lotus__import-msg{font-size:.85rem;color:hsl(var(--muted-fg))}
.lotus__count{margin-left:auto;font-family:var(--font-mono);font-size:.85rem;color:hsl(var(--muted-fg))}
.lotus__goal{display:flex;flex-direction:column;gap:4px}
.lotus__goal-label{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:hsl(var(--muted-fg))}
.lotus__goal textarea{width:100%;resize:vertical;min-height:52px;padding:10px 12px;border:1px solid hsl(var(--border));border-left:3px solid var(--level);border-radius:var(--radius);background:color-mix(in srgb,var(--level) 5%,transparent);color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.98rem;line-height:1.45}
.lotus__goal textarea:focus-visible{outline:2px solid var(--level);outline-offset:1px}

.lotus__petals{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}
.lotus-petal{display:flex;flex-direction:column;gap:7px;border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:12px}
.lotus-petal__head{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.lotus-petal__letter{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:color-mix(in srgb,var(--level) 16%,transparent);color:hsl(var(--foreground));font-family:var(--font-mono);font-weight:700;font-size:.8rem}
.lotus-petal__title{flex:1 1 90px;min-width:0;padding:6px 9px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-size:.9rem;font-weight:600}
.lotus-petal__title:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.lotus-petal__hint{flex:0 0 100%;font-size:.72rem;color:hsl(var(--muted-fg))}
.lotus-petal__ideas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.lotus-idea{display:flex;align-items:center;gap:5px}
.lotus-idea input{flex:1 1 auto;min-width:0;padding:6px 8px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-size:.85rem}
.lotus-idea input:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.lotus-idea__del{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border:1px solid hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:1rem;line-height:1;cursor:pointer}
.lotus-idea__del:hover{border-color:var(--warn,0 70% 55%);color:hsl(var(--warn,0 70% 55%))}
.lotus-idea__del:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.lotus-petal__add{align-self:flex-start;padding:4px 10px;border:1px dashed hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:.8rem;cursor:pointer}
.lotus-petal__add:hover{border-color:var(--level);color:hsl(var(--foreground))}

.lotus__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:1.4em;font-size:.85rem}
.lotus__save{color:hsl(var(--muted-fg))}
.lotus__save--saved,.lotus__save--local{color:var(--level)}
.lotus__save--error{color:hsl(var(--warn,0 70% 55%))}
.lotus__login-hint{color:hsl(var(--muted-fg))}
.lotus__login-hint a{color:var(--level);font-weight:600}

@media (max-width:900px){ .lotus__petals{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .lotus__petals{grid-template-columns:1fr} }

/* ============================================================
   SCAMPER — модуль раздела «Инструменты»
   7 приёмов (аккордеон) с банками вопросов и сбором идей.
   /tools/scamper · Док §4.9.
   ============================================================ */
.scamper{display:flex;flex-direction:column;gap:var(--space-md)}
.scamper__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.scamper__import{padding:9px 16px;border:1px solid var(--level);border-radius:var(--radius);background:color-mix(in srgb,var(--level) 8%,transparent);color:hsl(var(--foreground));font-size:.88rem;font-weight:600;cursor:pointer}
.scamper__import:hover{background:color-mix(in srgb,var(--level) 16%,transparent)}
.scamper__import:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.scamper__import-msg{font-size:.85rem;color:hsl(var(--muted-fg))}
.scamper__count{margin-left:auto;font-family:var(--font-mono);font-size:.85rem;color:hsl(var(--muted-fg))}
.scamper__subject{display:flex;flex-direction:column;gap:4px}
.scamper__subject-label{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:hsl(var(--muted-fg))}
.scamper__subject textarea{width:100%;resize:vertical;min-height:48px;padding:10px 12px;border:1px solid hsl(var(--border));border-left:3px solid var(--level);border-radius:var(--radius);background:color-mix(in srgb,var(--level) 5%,transparent);color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.95rem;line-height:1.45}
.scamper__subject textarea:focus-visible{outline:2px solid var(--level);outline-offset:1px}

.scamper__techniques{display:flex;flex-direction:column;gap:8px}
.scamper-tech{border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));overflow:hidden}
.scamper-tech__sum{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none}
.scamper-tech__sum::-webkit-details-marker{display:none}
.scamper-tech__letter{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:6px;background:color-mix(in srgb,var(--level) 16%,transparent);color:hsl(var(--foreground));font-family:var(--font-mono);font-weight:700}
.scamper-tech__name{flex:1 1 auto;font-weight:600;color:hsl(var(--foreground))}
.scamper-tech__badge{flex:0 0 auto;min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:hsl(var(--muted-bg));color:hsl(var(--muted-fg));font-size:.78rem;font-family:var(--font-mono)}
.scamper-tech__body{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}
.scamper-tech__questions{margin:0;padding-left:18px;font-size:.84rem;line-height:1.5;color:hsl(var(--muted-fg))}
.scamper-tech__ideas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.scamper-idea{display:flex;align-items:center;gap:6px}
.scamper-idea input{flex:1 1 auto;min-width:0;padding:7px 10px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-size:.9rem}
.scamper-idea input:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.scamper-idea__del{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:1px solid hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:1rem;line-height:1;cursor:pointer}
.scamper-idea__del:hover{border-color:var(--warn,0 70% 55%);color:hsl(var(--warn,0 70% 55%))}
.scamper-idea__del:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.scamper-tech__add{align-self:flex-start;padding:5px 12px;border:1px dashed hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:.83rem;cursor:pointer}
.scamper-tech__add:hover{border-color:var(--level);color:hsl(var(--foreground))}

.scamper__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:1.4em;font-size:.85rem}
.scamper__save{color:hsl(var(--muted-fg))}
.scamper__save--saved,.scamper__save--local{color:var(--level)}
.scamper__save--error{color:hsl(var(--warn,0 70% 55%))}
.scamper__login-hint{color:hsl(var(--muted-fg))}
.scamper__login-hint a{color:var(--level);font-weight:600}

/* ============================================================
   6 ШЛЯП МЫШЛЕНИЯ (де Боно) — модуль раздела «Инструменты»
   Оценка идеи с 6 точек зрения. /tools/sixhats · Док §4.10.
   Цвета шляп — данные метода (в sixhats.ts swatch), не токены темы.
   ============================================================ */
.hats{display:flex;flex-direction:column;gap:var(--space-md)}
.hats__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hats__import{padding:9px 16px;border:1px solid var(--level);border-radius:var(--radius);background:color-mix(in srgb,var(--level) 8%,transparent);color:hsl(var(--foreground));font-size:.88rem;font-weight:600;cursor:pointer}
.hats__import:hover{background:color-mix(in srgb,var(--level) 16%,transparent)}
.hats__import:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.hats__import-msg{font-size:.85rem;color:hsl(var(--muted-fg))}
.hats__subject{display:flex;flex-direction:column;gap:4px}
.hats__subject-label{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:hsl(var(--muted-fg))}
.hats__subject textarea{width:100%;resize:vertical;min-height:48px;padding:10px 12px;border:1px solid hsl(var(--border));border-left:3px solid var(--level);border-radius:var(--radius);background:color-mix(in srgb,var(--level) 5%,transparent);color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.95rem;line-height:1.45}
.hats__subject textarea:focus-visible{outline:2px solid var(--level);outline-offset:1px}

.hats__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
.hat{display:flex;flex-direction:column;gap:8px;border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md)}
.hat__head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hat__swatch{flex:0 0 auto;width:18px;height:18px;border-radius:5px;border:1px solid hsl(var(--border))}
.hat__title{margin:0;font-size:1rem;font-weight:700;color:hsl(var(--foreground))}
.hat__mode{flex:0 0 100%;font-size:.78rem;color:hsl(var(--muted-fg))}
.hat__questions{margin:0;padding-left:18px;font-size:.82rem;line-height:1.5;color:hsl(var(--muted-fg))}
.hat__notes{width:100%;resize:vertical;min-height:64px;padding:9px 11px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.9rem;line-height:1.5}
.hat__notes:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}

.hats__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:1.4em;font-size:.85rem}
.hats__save{color:hsl(var(--muted-fg))}
.hats__save--saved,.hats__save--local{color:var(--level)}
.hats__save--error{color:hsl(var(--warn,0 70% 55%))}
.hats__login-hint{color:hsl(var(--muted-fg))}
.hats__login-hint a{color:var(--level);font-weight:600}

@media (max-width:720px){ .hats__list{grid-template-columns:1fr} }

/* ============================================================
   AIDA (+семейство) — модуль раздела «Инструменты»
   Воронка коммуникации: степпер + переключатель модели.
   /tools/aida · Док §4.12.
   ============================================================ */
.aida{display:flex;flex-direction:column;gap:var(--space-md)}
.aida__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.aida__models{display:inline-flex;flex-wrap:wrap;border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden}
.aida__model-btn{padding:8px 13px;border:0;background:transparent;color:hsl(var(--muted-fg));font-size:.85rem;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.aida__model-btn+.aida__model-btn{border-left:1px solid hsl(var(--border))}
.aida__model-btn.is-on{background:color-mix(in srgb,var(--level) 16%,transparent);color:hsl(var(--foreground));font-weight:600}
.aida__model-btn:focus-visible{outline:2px solid var(--level);outline-offset:-2px}
.aida__import{padding:8px 14px;border:1px solid var(--level);border-radius:var(--radius);background:color-mix(in srgb,var(--level) 8%,transparent);color:hsl(var(--foreground));font-size:.85rem;font-weight:600;cursor:pointer}
.aida__import:hover{background:color-mix(in srgb,var(--level) 16%,transparent)}
.aida__import:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.aida__import-msg{font-size:.85rem;color:hsl(var(--muted-fg))}

.aida__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.aida-step{display:flex;gap:12px;border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md)}
.aida-step__num{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--level) 16%,transparent);color:hsl(var(--foreground));font-family:var(--font-mono);font-weight:700}
.aida-step__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.aida-step__title{margin:0;font-size:1rem;font-weight:600;color:hsl(var(--foreground))}
.aida-step__hint{margin:0;font-size:.8rem;color:hsl(var(--muted-fg))}
.aida-step__area{width:100%;resize:vertical;min-height:52px;margin-top:4px;padding:9px 11px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.92rem;line-height:1.5}
.aida-step__area:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}

.aida__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:1.4em;font-size:.85rem}
.aida__save{color:hsl(var(--muted-fg))}
.aida__save--saved,.aida__save--local{color:var(--level)}
.aida__save--error{color:hsl(var(--warn,0 70% 55%))}
.aida__login-hint{color:hsl(var(--muted-fg))}
.aida__login-hint a{color:var(--level);font-weight:600}

/* ============================================================
   NORTH STAR METRIC — модуль раздела «Инструменты»
   Главная метрика ценности + валидатор + поддерживающие метрики.
   /tools/nsm · Док §4.19.
   ============================================================ */
.nsm{display:flex;flex-direction:column;gap:var(--space-md)}
.nsm__label{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:hsl(var(--muted-fg))}
.nsm__hint{margin:2px 0 0;font-size:.8rem;color:hsl(var(--muted-fg))}
.nsm__main{display:flex;flex-direction:column;gap:5px}
.nsm__main input{padding:12px 14px;border:1px solid hsl(var(--border));border-left:3px solid var(--level);border-radius:var(--radius);background:color-mix(in srgb,var(--level) 5%,transparent);color:hsl(var(--foreground));font-family:var(--font-display);font-size:1.1rem;font-weight:600}
.nsm__main input:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.nsm__warn{margin:0;padding:10px 13px;border-radius:var(--radius);background:color-mix(in srgb,var(--warn,0 70% 55%) 10%,transparent);border:1px solid color-mix(in srgb,var(--warn,0 70% 55%) 40%,transparent);font-size:.88rem;line-height:1.5;color:hsl(var(--foreground))}
.nsm__ok{margin:0;font-size:.88rem;color:var(--level)}
.nsm__why{display:flex;flex-direction:column;gap:5px}
.nsm__why textarea{width:100%;resize:vertical;min-height:48px;padding:9px 11px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.92rem;line-height:1.5}
.nsm__why textarea:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.nsm__sup{display:flex;flex-direction:column;gap:6px}
.nsm__sup-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.nsm-row{display:flex;align-items:center;gap:6px}
.nsm-row input{flex:1 1 auto;min-width:0;padding:8px 10px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-size:.9rem}
.nsm-row input:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.nsm-row__del{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;border:1px solid hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:1.1rem;line-height:1;cursor:pointer}
.nsm-row__del:hover{border-color:var(--warn,0 70% 55%);color:hsl(var(--warn,0 70% 55%))}
.nsm-row__del:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.nsm__add{align-self:flex-start;padding:6px 13px;border:1px dashed hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:.85rem;cursor:pointer}
.nsm__add:hover{border-color:var(--level);color:hsl(var(--foreground))}
.nsm__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:1.4em;font-size:.85rem}
.nsm__save{color:hsl(var(--muted-fg))}
.nsm__save--saved,.nsm__save--local{color:var(--level)}
.nsm__save--error{color:hsl(var(--warn,0 70% 55%))}
.nsm__login-hint{color:hsl(var(--muted-fg))}
.nsm__login-hint a{color:var(--level);font-weight:600}

/* ============================================================
   ИНСТРУМЕНТЫ · батч модулей (HEART/AARRR/Retention/GrowthLoop/
   Бриф/Интервью/Bain/Usability/HADI/Гипотеза/MVP/Pivot/Калькуляторы)
   /tools/* · Каталог: Docs/product-discovery.
   ============================================================ */
/* Общие подвалы-статусы для батча */
.heart__foot,.aarrr__foot,.ret__foot,.gloop__foot,.brief__foot,.intv__foot,.bain__foot,.usab__foot,.hadi__foot,.hypo__foot,.mvp__foot,.pivot__foot,.mcalc__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:1.4em;font-size:.85rem;margin-top:var(--space-md)}
.heart__save,.aarrr__save,.ret__save,.gloop__save,.brief__save,.intv__save,.bain__save,.usab__save,.hadi__save,.hypo__save,.mvp__save,.pivot__save,.mcalc__save{color:hsl(var(--muted-fg))}
.heart__save--saved,.heart__save--local,.aarrr__save--saved,.aarrr__save--local,.ret__save--saved,.ret__save--local,.gloop__save--saved,.gloop__save--local,.brief__save--saved,.brief__save--local,.intv__save--saved,.intv__save--local,.bain__save--saved,.bain__save--local,.usab__save--saved,.usab__save--local,.hadi__save--saved,.hadi__save--local,.hypo__save--saved,.hypo__save--local,.mvp__save--saved,.mvp__save--local,.pivot__save--saved,.pivot__save--local,.mcalc__save--saved,.mcalc__save--local{color:var(--level)}
[class$="__login-hint"]{color:hsl(var(--muted-fg))}
[class$="__login-hint"] a{color:var(--level);font-weight:600}
/* Общий импорт-бар */
.aarrr__toolbar,.hadi__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:var(--space-md)}
.aarrr__import,.hadi__import{padding:9px 16px;border:1px solid var(--level);border-radius:var(--radius);background:color-mix(in srgb,var(--level) 8%,transparent);color:hsl(var(--foreground));font-size:.88rem;font-weight:600;cursor:pointer}
.aarrr__import:hover,.hadi__import:hover{background:color-mix(in srgb,var(--level) 16%,transparent)}
.aarrr__import:focus-visible,.hadi__import:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.aarrr__import-msg,.hadi__import-msg{font-size:.85rem;color:hsl(var(--muted-fg))}
/* Общий textarea для батча */
.heart__area,.aarrr-stage__area,.ret__notes textarea,.gloop-node__area,.brief__area,.intv__sec textarea,.intv__group textarea,.usab__field textarea,.usab__table textarea,.hadi-field textarea,.pivot__why textarea{width:100%;resize:vertical;padding:8px 10px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);font-size:.9rem;line-height:1.5}
.heart__area:focus-visible,.aarrr-stage__area:focus-visible,.gloop-node__area:focus-visible,.brief__area:focus-visible,.hadi-field textarea:focus-visible,.pivot__why textarea:focus-visible,.usab__field textarea:focus-visible,.intv__sec textarea:focus-visible,.intv__group textarea:focus-visible,.usab__table textarea:focus-visible,.ret__notes textarea:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.brief__label,.intv__label,.usab__label,.hadi-field__label,.pivot__label,.gloop__type span,.gloop__metric span,.ret__cohort span,.ret__notes span{font-size:.8rem;font-weight:600;color:hsl(var(--muted-fg))}
.brief__hint,.intv__hint{font-size:.78rem;color:hsl(var(--muted-fg))}

/* HEART — матрица */
.heart__table-wrap{overflow-x:auto;border:1px solid hsl(var(--border));border-radius:var(--radius-lg)}
.heart__table{width:100%;border-collapse:collapse;min-width:680px}
.heart__table th,.heart__table td{padding:9px 10px;text-align:left;border-bottom:1px solid hsl(var(--border));border-right:1px solid hsl(var(--border));vertical-align:top}
.heart__table thead th{font-size:.8rem;color:hsl(var(--foreground));background:hsl(var(--muted-bg))}
.heart__corner{width:170px}
.heart__dim{background:hsl(var(--card))}
.heart__dim-title{display:block;font-weight:600;font-size:.9rem;color:hsl(var(--foreground))}
.heart__dim-hint{display:block;font-size:.75rem;color:hsl(var(--muted-fg))}

/* AARRR / GrowthLoop / AIDA-подобные степперы */
.aarrr__stages,.gloop__nodes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.aarrr-stage,.gloop-node{display:flex;gap:12px;border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md)}
.aarrr-stage__num,.gloop-node__num{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--level) 16%,transparent);color:hsl(var(--foreground));font-family:var(--font-mono);font-weight:700}
.aarrr-stage__body,.gloop-node__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.aarrr-stage__title,.gloop-node__title{margin:0;font-size:1rem;font-weight:600;color:hsl(var(--foreground))}
.aarrr-stage__desc,.gloop-node__hint{margin:0;font-size:.8rem;color:hsl(var(--muted-fg))}
.aarrr-stage__meta{margin:2px 0;font-size:.78rem;color:hsl(var(--muted-fg))}
.aarrr-stage__area,.gloop-node__area{min-height:48px;margin-top:4px}
.aarrr__k,.gloop__type,.gloop__metric{display:flex;flex-direction:column;gap:6px;margin-top:var(--space-md);border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md)}
.aarrr__k-title{margin:0;font-size:1rem;font-weight:700}
.aarrr__k-hint{margin:0;font-size:.8rem;color:hsl(var(--muted-fg))}
.aarrr__k-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.aarrr__k-row label{display:flex;flex-direction:column;gap:3px;font-size:.78rem;color:hsl(var(--muted-fg))}
.aarrr__k-row input,.gloop__type select,.gloop__metric input,.ret__cohort input,.ret__num,.ret__label,.hypo__field input,.hadi-next input,.mcalc-in input,.nsm-row input{padding:8px 10px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-size:.9rem;font-family:var(--font-sans)}
.aarrr__k-row input{width:120px;font-family:var(--font-mono)}
.aarrr__k-row input:focus-visible,.gloop__type select:focus-visible,.gloop__metric input:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.aarrr__k-val{font-family:var(--font-mono);font-weight:700;font-size:1.05rem;color:hsl(var(--foreground))}
.aarrr__k-val--viral{color:var(--level)}
.gloop__type,.gloop__metric{flex-direction:column}
.gloop-node__title{font-size:.95rem}

/* Retention */
.ret{display:flex;flex-direction:column;gap:var(--space-md)}
.ret__top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px}
.ret__cohort{display:flex;flex-direction:column;gap:4px}
.ret__churn{font-size:.9rem;color:hsl(var(--muted-fg))}
.ret__curve{margin:0;border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:8px 10px}
.ret__curve svg{display:block;width:100%;height:120px}
.ret__curve-axis{stroke:hsl(var(--border));stroke-dasharray:4 4}
.ret__curve-line{stroke:var(--level);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ret__curve-dot{fill:var(--level)}
.ret__table-wrap{overflow-x:auto;border:1px solid hsl(var(--border));border-radius:var(--radius-lg)}
.ret__table{width:100%;border-collapse:collapse;min-width:420px}
.ret__table th,.ret__table td{padding:8px 10px;text-align:left;border-bottom:1px solid hsl(var(--border))}
.ret__table thead th{font-size:.78rem;color:hsl(var(--foreground));background:hsl(var(--muted-bg))}
.ret__label{width:80px}.ret__num{width:110px;font-family:var(--font-mono)}
.ret__pct{font-family:var(--font-mono);font-weight:700;color:var(--level)}
.ret__del,.usab__del{width:28px;height:28px;display:grid;place-items:center;border:1px solid hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:1.1rem;line-height:1;cursor:pointer}
.ret__del:hover,.usab__del:hover{border-color:var(--warn,0 70% 55%);color:hsl(var(--warn,0 70% 55%))}
.ret__add,.usab__add,.hadi__add{align-self:flex-start;padding:6px 13px;border:1px dashed hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:.85rem;cursor:pointer}
.ret__add:hover,.usab__add:hover,.hadi__add:hover{border-color:var(--level);color:hsl(var(--foreground))}
.ret__notes{display:flex;flex-direction:column;gap:4px}

/* GrowthLoop */
.gloop{display:flex;flex-direction:column;gap:var(--space-md)}

/* Бриф / Интервью */
.brief,.intv{display:flex;flex-direction:column;gap:var(--space-md)}
.brief__field,.intv__sec,.intv__group{display:flex;flex-direction:column;gap:4px}
.intv__groups{display:flex;flex-direction:column;gap:var(--space-md);border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md)}
.intv__groups-cap{margin:0;font-size:.85rem;font-weight:600;color:hsl(var(--muted-fg))}

/* Bain */
.bain{display:flex;flex-direction:column;gap:var(--space-md)}
.bain__count{margin:0;font-size:.9rem;color:hsl(var(--foreground))}
.bain-level{display:flex;flex-direction:column;gap:7px}
.bain-level__title{margin:0;font-size:.95rem;font-weight:700;color:hsl(var(--foreground))}
.bain-level__chips{display:flex;flex-wrap:wrap;gap:6px}
.bain-chip,.usab-chip{padding:5px 12px;border:1px solid hsl(var(--border));border-radius:999px;background:hsl(var(--background));color:hsl(var(--muted-fg));font-size:.83rem;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.bain-chip:hover,.usab-chip:hover{border-color:var(--level);color:hsl(var(--foreground))}
.bain-chip:focus-visible,.usab-chip:focus-visible{outline:2px solid var(--level);outline-offset:1px}
.bain-chip--on,.usab-chip--on{background:color-mix(in srgb,var(--level) 16%,transparent);border-color:var(--level);color:hsl(var(--foreground));font-weight:600}

/* Usability */
.usab{display:flex;flex-direction:column;gap:var(--space-md)}
.usab__field,.usab__scales,.usab__results{display:flex;flex-direction:column;gap:5px}
.usab__scale-chips{display:flex;flex-wrap:wrap;gap:6px}
.usab__table-wrap{overflow-x:auto;border:1px solid hsl(var(--border));border-radius:var(--radius-lg)}
.usab__table{width:100%;border-collapse:collapse;min-width:720px}
.usab__table th,.usab__table td{padding:7px 8px;text-align:left;border-bottom:1px solid hsl(var(--border));border-right:1px solid hsl(var(--border));vertical-align:top}
.usab__table thead th{font-size:.78rem;color:hsl(var(--foreground));background:hsl(var(--muted-bg));white-space:nowrap}
.usab__table textarea{min-height:42px}
.usab__empty,.hadi__empty,.rice__empty{text-align:center;color:hsl(var(--muted-fg));font-size:.9rem;padding:16px}

/* HADI */
.hadi{display:flex;flex-direction:column;gap:var(--space-md)}
.hadi__cycles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.hadi-cycle{border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md);display:flex;flex-direction:column;gap:10px}
.hadi-cycle__head{display:flex;align-items:center;gap:10px}
.hadi-cycle__n{font-weight:700;color:hsl(var(--foreground))}
.hadi-cycle__status{margin-left:auto;padding:6px 9px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-size:.85rem;cursor:pointer}
.hadi-cycle__del{width:28px;height:28px;display:grid;place-items:center;border:1px solid hsl(var(--border));border-radius:var(--radius);background:transparent;color:hsl(var(--muted-fg));font-size:1.1rem;cursor:pointer}
.hadi-cycle__del:hover{border-color:var(--warn,0 70% 55%);color:hsl(var(--warn,0 70% 55%))}
.hadi-cycle__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hadi-field,.hadi-next{display:flex;flex-direction:column;gap:3px}

/* Гипотеза */
.hypo{display:flex;flex-direction:column;gap:var(--space-md)}
.hypo__types,.aida__models,.cjm__mode{}
.hypo__types{display:inline-flex;flex-wrap:wrap;border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden;align-self:flex-start}
.hypo__type-btn{padding:8px 14px;border:0;background:transparent;color:hsl(var(--muted-fg));font-size:.85rem;cursor:pointer}
.hypo__type-btn+.hypo__type-btn{border-left:1px solid hsl(var(--border))}
.hypo__type-btn.is-on{background:color-mix(in srgb,var(--level) 16%,transparent);color:hsl(var(--foreground));font-weight:600}
.hypo__type-btn:focus-visible{outline:2px solid var(--level);outline-offset:-2px}
.hypo__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.hypo__field{display:flex;flex-direction:column;gap:4px}
.hypo__label{font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;color:hsl(var(--muted-fg))}
.hypo__field input:focus-visible,.hadi-next input:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.hypo__result-box{display:flex;flex-direction:column;gap:8px;border:1px solid hsl(var(--border));border-left:3px solid var(--level);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--level) 6%,transparent);padding:var(--space-md)}
.hypo__result-cap{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:hsl(var(--muted-fg))}
.hypo__result{margin:0;font-family:var(--font-display);font-size:1.15rem;line-height:1.45;font-weight:600;color:hsl(var(--foreground))}

/* MVP */
.mvp{display:flex;flex-direction:column;gap:var(--space-md)}
.mvp__pyramid{display:flex;flex-direction:column;align-items:center;gap:8px}
.mvp-level{display:flex;gap:10px;border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:12px;max-width:100%}
.mvp-level__tier{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:6px;background:color-mix(in srgb,var(--level) 16%,transparent);color:hsl(var(--foreground));font-family:var(--font-mono);font-weight:700}
.mvp-level__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.mvp-level__title{margin:0;font-size:.95rem;font-weight:600;color:hsl(var(--foreground))}
.mvp-level__hint{font-size:.76rem;color:hsl(var(--muted-fg))}
.mvp-level textarea{width:100%;resize:vertical;min-height:40px;margin-top:3px;padding:7px 9px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--background));color:hsl(var(--foreground));font-size:.88rem}
.mvp-level textarea:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}

/* Pivot */
.pivot{display:flex;flex-direction:column;gap:var(--space-md)}
.pivot__types{border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md);display:flex;flex-direction:column;gap:6px;margin:0}
.pivot__legend{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:hsl(var(--muted-fg));padding:0 4px}
.pivot-opt{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;font-size:.9rem;color:hsl(var(--foreground))}
.pivot-opt:hover{background:hsl(var(--muted-bg))}
.pivot-opt.is-on{border-color:var(--level);background:color-mix(in srgb,var(--level) 8%,transparent)}
.pivot-opt input{margin-top:3px;accent-color:var(--level)}
.pivot__why{display:flex;flex-direction:column;gap:4px}

/* Калькуляторы метрик */
.mcalc{display:flex;flex-direction:column;gap:var(--space-md)}
.mcalc__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}
.mcalc-card{display:flex;flex-direction:column;gap:8px;border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:hsl(var(--card));padding:var(--space-md)}
.mcalc-card__title{margin:0;font-size:.98rem;font-weight:700;color:hsl(var(--foreground))}
.mcalc-in{display:flex;flex-direction:column;gap:3px;font-size:.78rem;color:hsl(var(--muted-fg))}
.mcalc-in input{font-family:var(--font-mono)}
.mcalc-in input:focus-visible,.nsm-row input:focus-visible{outline:2px solid var(--level);outline-offset:1px;border-color:var(--level)}
.mcalc-card__res{margin:4px 0 0;padding:9px 11px;border-left:3px solid var(--level);background:color-mix(in srgb,var(--level) 6%,transparent);border-radius:var(--radius);font-family:var(--font-mono);font-weight:700;color:hsl(var(--foreground))}
.mcalc-card__res--good{color:var(--level)}

@media (max-width:720px){
  .hadi-cycle__grid,.hypo__grid,.mcalc__grid{grid-template-columns:1fr}
}

/* ============================================================
   ВЫРАЗИТЕЛЬНЫЕ БЛОКИ ОФОРМЛЕНИЯ КОНТЕНТА (курс-тренажёр)
   Богатые блоки для уроков: диалог с аватарами, цитата-реплика,
   карточка персонажа, чек-лист, сравнение «слабо→сильно»,
   карточка-определение, шаги-модель, спойлер, врезки-варианты,
   keystone (ключевая мысль). Применяются классами внутри HTML
   блоков урока (richtext/callout) — DS-CSS грузится глобально,
   санитайзер пропускает class/style/data-*.
   Цвет — только токенами (--level, --cat-N, --success, --danger);
   инлайн --c задаёт цвет персонажа/акцента. Углы острые (makers);
   круги — только аватары и номера. Метки — mono-капс.
   Витрина: Разработка → Дизайн-система → «Блоки контента».
   ============================================================ */

/* — Аватар-кружок (инициал/эмодзи); цвет — инлайн --c (умолчание --level) — */
.avatar{--c:var(--level);flex:0 0 auto;width:40px;height:40px;border-radius:var(--radius-full);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:1rem;
  line-height:1;color:var(--level-contrast);background:var(--c);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 28%,transparent)}
/* Вариант: аватар-персонаж (Open Peeps) — голова-в-круге вместо буквы. Внутрь
   движок вставляет inline-SVG; контур = currentColor, заливка = поверхность.
   Применяется в диалогах через data-peep (см. lib/characters/enrich). */
/* Без круга — только сам персонаж (фон/рамка/обрезка убраны; заливка прозрачная) */
.avatar--peep{background:transparent;color:hsl(var(--foreground));--peep-paper:transparent;
  box-shadow:none;border-radius:0;overflow:visible;padding:0}
.avatar--peep svg{display:block;width:100%;height:100%}

/* — Диалог: облачка-сообщения с хвостиком от аватара; .is-right — ответная сторона — */
.dialogue{display:flex;flex-direction:column;gap:var(--space-md);margin:1.7em 0}
.dialogue-line{--c:var(--level);display:flex;gap:.7rem;align-items:flex-start;max-width:90%}
.dialogue-line.is-right{align-self:flex-end;flex-direction:row-reverse}
.dialogue-line .bubble{position:relative;background:color-mix(in srgb,var(--c) 8%,hsl(var(--card)));
  border:1px solid color-mix(in srgb,var(--c) 28%,hsl(var(--border)));
  padding:.65rem .95rem}
/* Хвостик — повёрнутый квадрат у верхнего угла со стороны аватара (как в мессенджерах) */
.dialogue-line .bubble::before{content:"";position:absolute;top:11px;left:-6px;width:11px;height:11px;
  background:inherit;border-left:inherit;border-bottom:inherit;border-top:0;border-right:0;
  transform:rotate(45deg)}
.dialogue-line.is-right .bubble{text-align:right}
.dialogue-line.is-right .bubble::before{left:auto;right:-6px;
  border-left:0;border-bottom:0;border-right:inherit;border-top:inherit}
/* Аватар-персонаж на ответной стороне зеркалится — «смотрит» в сторону облачка */
.dialogue-line.is-right .avatar--peep{transform:scaleX(-1)}
/* Крупный аватар в диалоге (буква-фолбэк масштабируется тоже) */
.dialogue-line .avatar{width:96px;height:96px;font-size:2.4rem}
.bubble__name{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c) 72%,hsl(var(--foreground)));font-weight:700;margin-bottom:.25rem}
.bubble p{margin:0}
.bubble p + p{margin-top:.5em}

/* — Цитата-реплика: крупная фраза персонажа с аватаром и подписью — */
.speech{--c:var(--level);display:flex;gap:var(--space-md);align-items:center;margin:1.8em 0;
  padding:var(--space-lg) var(--space-xl);background:color-mix(in srgb,var(--c) 7%,hsl(var(--card)));
  border-left:3px solid var(--c)}
.speech .avatar{width:56px;height:56px;font-size:1.4rem}
.speech__text{font-family:var(--font-display);font-size:1.2rem;line-height:1.4;font-style:italic;
  color:hsl(var(--foreground));margin:0}
.speech__who{margin-top:.5rem;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;color:color-mix(in srgb,var(--c) 72%,hsl(var(--foreground)))}

/* — Карточки персонажей: каст кейса; цвет каждого — инлайн --c — */
.character-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-md);margin:1.7em 0}
.character-card{--c:var(--level);display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.35rem;border:1px solid hsl(var(--border));border-top:3px solid var(--c);
  background:hsl(var(--card));padding:var(--space-md)}
.character-card .avatar{width:48px;height:48px;font-size:1.2rem}
/* Персонаж с торсом (бюст) вместо аватара-кружка */
.character-card .peep--bust{width:120px;margin-bottom:.2rem}
.character-card__name{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:hsl(var(--foreground))}
.character-card__role{font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;
  color:color-mix(in srgb,var(--c) 72%,hsl(var(--foreground)));margin:.15rem 0 .4rem}
.character-card__bio{font-size:.9rem;color:hsl(var(--muted-fg));margin:0}

/* — Чек-лист: ✓ по умолчанию; .todo — пустые боксы; .cross — ✕ красные — */
.checklist{list-style:none;padding-left:0;margin:1.3em 0;display:flex;flex-direction:column;gap:.5rem}
.checklist li{position:relative;padding-left:2rem;line-height:1.5}
.checklist li::before{content:"✓";position:absolute;left:0;top:.05em;width:1.35rem;height:1.35rem;
  border-radius:var(--radius-full);display:grid;place-items:center;font-size:.78rem;font-weight:700;
  color:var(--level-contrast);background:color-mix(in srgb,var(--success) 88%,#000)}
.checklist.todo li::before{content:"";background:transparent;box-sizing:border-box;
  border:2px solid color-mix(in srgb,var(--muted-fg) 55%,transparent)}
.checklist.cross li::before{content:"✕";background:var(--danger)}

/* — Сравнение «слабо → сильно» / «было → стало» — */
.versus{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-sm);align-items:stretch;margin:1.7em 0}
.versus__side{border:1px solid hsl(var(--border));padding:var(--space-md);background:hsl(var(--card))}
.versus__side.is-weak{border-top:3px solid var(--danger);
  background:color-mix(in srgb,var(--danger) 5%,hsl(var(--card)))}
.versus__side.is-strong{border-top:3px solid var(--success);
  background:color-mix(in srgb,var(--success) 5%,hsl(var(--card)))}
.versus__tag{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;margin-bottom:.4rem;display:flex;align-items:center;gap:.35rem}
.versus__side.is-weak .versus__tag{color:color-mix(in srgb,var(--danger) 80%,hsl(var(--foreground)))}
.versus__side.is-strong .versus__tag{color:color-mix(in srgb,var(--success) 70%,hsl(var(--foreground)))}
.versus__side p:last-child{margin-bottom:0}
.versus__arrow{display:grid;place-items:center;color:hsl(var(--muted-fg));font-size:1.3rem;font-weight:700}
@media (max-width:640px){.versus{grid-template-columns:1fr}.versus__arrow{transform:rotate(90deg)}}

/* — Определение: ключевой термин урока. Без подложки, акцентная черта слева
     (перенос макета из prototypes/.../9-definition.html, вариант A). — */
.definition{margin:1.5em 0;border-left:3px solid var(--level);padding-left:1.3rem}
.definition__kind{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--level-ink);font-weight:700;margin-bottom:.4rem}
.definition__term{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:hsl(var(--foreground));
  line-height:1.25;margin-bottom:.55rem}
.definition p:last-child{margin-bottom:0}

/* — Шаги-модель: цепочка нумерованных шагов со стрелками-связками — */
.flow{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin:1.7em 0;align-items:stretch}
.flow__step{flex:1 1 150px;display:flex;flex-direction:column;gap:.45rem;position:relative;
  border:1px solid hsl(var(--border));border-top:3px solid var(--level);background:hsl(var(--card));padding:var(--space-md)}
.flow__num{width:1.8rem;height:1.8rem;border-radius:var(--radius-full);display:grid;place-items:center;
  background:var(--level);color:var(--level-contrast);font-family:var(--font-display);font-weight:600;font-size:.95rem}
.flow__title{font-family:var(--font-display);font-weight:600;font-size:1rem;color:hsl(var(--foreground))}
.flow__step p{margin:0;font-size:.88rem;color:hsl(var(--muted-fg))}
.flow__step:not(:last-child)::after{content:"→";position:absolute;right:calc(-1 * var(--space-sm) * .5);
  top:50%;transform:translate(50%,-50%);color:hsl(var(--muted-fg));font-size:1.05rem;z-index:1}
.flow--vertical{flex-direction:column}
.flow--vertical .flow__step{flex:1 1 auto}
.flow--vertical .flow__step:not(:last-child)::after{content:"↓";right:auto;left:calc(var(--space-md) + .9rem);
  top:auto;bottom:calc(-1 * var(--space-sm) * .5);transform:translate(-50%,50%)}
@media (max-width:640px){.flow{flex-direction:column}
  .flow__step:not(:last-child)::after{content:"↓";right:auto;left:calc(var(--space-md) + .9rem);
    top:auto;bottom:calc(-1 * var(--space-sm) * .5);transform:translate(-50%,50%)}}

/* — Спойлер: раскрытие по клику (native <details>) — активное припоминание:
     «сначала подумай → открой разбор». JS не нужен. — */
.reveal{margin:1.4em 0;border:1px solid color-mix(in srgb,var(--level) 28%,hsl(var(--border)));
  border-left:3px solid var(--level);background:color-mix(in srgb,var(--level) 4%,hsl(var(--card)))}
.reveal>summary{cursor:pointer;list-style:none;padding:var(--space-md) var(--space-lg);
  font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--level-ink);display:flex;align-items:center;gap:.55rem}
.reveal>summary::-webkit-details-marker{display:none}
.reveal>summary::before{content:"►";font-size:.62rem;transition:transform var(--dur-fast) var(--ease)}
.reveal[open]>summary::before{transform:rotate(90deg)}
.reveal>summary:focus-visible{outline:2px solid var(--level);outline-offset:-2px}
.reveal__body{padding:0 var(--space-lg) var(--space-md)}
.reveal__body>:first-child{margin-top:0}
.reveal__body>:last-child{margin-bottom:0}

/* — Keystone: «главная модель урока» — цепочка-формула крупной типографикой,
     без подложки (перенос макета из prototypes/.../10-model.html, вариант D).
     Метка — эйброу, текст — display; стрелки → в тексте наследуют цвет. — */
.keystone{margin:1.6em 0}
.keystone__label{font-family:var(--font-mono);font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--level-ink);margin-bottom:.6rem}
.keystone__text{font-family:var(--font-display);font-weight:600;line-height:1.35;letter-spacing:-.01em;
  color:hsl(var(--foreground));font-size:clamp(1.2rem,1.05rem + .7vw,1.45rem)}

/* — Карточка-предположение: рискованная гипотеза + бейдж критичности +
     «что проверяем». Для блока «предположения/риски → что исследовать».
     .risk-badge — самостоятельный бейдж критичности, переиспользуется отдельно. — */
.assumption-grid{display:flex;flex-direction:column;gap:var(--space-sm);margin:1.7em 0}
.assumption-card{border:1px solid hsl(var(--border));border-left:3px solid var(--level);
  background:hsl(var(--card));padding:var(--space-md) var(--space-lg)}
.assumption-card__head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--space-sm);margin-bottom:.45rem}
.assumption-card__text{font-weight:600;color:hsl(var(--foreground));margin:0}
.assumption-card__check{font-size:.9rem;color:hsl(var(--muted-fg));margin:0}
.assumption-card__check b{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.05em;color:color-mix(in srgb,var(--level) 72%,hsl(var(--foreground)));font-weight:700;
  display:block;margin-bottom:.12rem}
.risk-badge{flex:0 0 auto;font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;padding:.16rem .5rem;border:1px solid hsl(var(--border));white-space:nowrap}
.risk-badge.is-critical{color:color-mix(in srgb,var(--danger) 75%,hsl(var(--foreground)));
  background:color-mix(in srgb,var(--danger) 12%,hsl(var(--card)));
  border-color:color-mix(in srgb,var(--danger) 30%,hsl(var(--border)))}
.risk-badge.is-medium{color:color-mix(in srgb,var(--warn) 80%,hsl(var(--foreground)));
  background:color-mix(in srgb,var(--warn) 14%,hsl(var(--card)));
  border-color:color-mix(in srgb,var(--warn) 32%,hsl(var(--border)))}
.risk-badge.is-low{color:hsl(var(--muted-fg));background:hsl(var(--muted-bg) / .6);border-color:hsl(var(--border))}

/* — Реплика → инсайт: сырая цитата респондента сверху + извлечённый вывод
     снизу. Для интервью/исследования: «данные → инсайт». — */
.insight{margin:1.6em 0;border:1px solid hsl(var(--border));border-left:3px solid var(--level);
  background:hsl(var(--card))}
.insight__quote{padding:var(--space-md) var(--space-lg);font-style:italic;color:hsl(var(--foreground))}
.insight__quote p{margin:0}
.insight__src{display:block;font-style:normal;margin-top:.45rem;font-family:var(--font-mono);font-size:.62rem;
  text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-fg))}
.insight__out{padding:var(--space-md) var(--space-lg);
  border-top:1px dashed color-mix(in srgb,var(--level) 30%,hsl(var(--border)));
  background:color-mix(in srgb,var(--level) 5%,hsl(var(--card)))}
.insight__out b{display:block;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--level-ink);font-weight:700;margin-bottom:.15rem}
.insight__out p{margin:0}

/* — Секторная сетка: 6 секторов карты эмпатии (Видит/Слышит/Говорит/
     Делает/Думает/Чувствует). Статичная иллюстрация секторов в уроке;
     интерактив — компонент .empathy-map в /tools/empathy-map. — */
.sector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);margin:1.7em 0}
.sector-cell{border:1px solid hsl(var(--border));border-top:3px solid var(--level);
  background:hsl(var(--card));padding:var(--space-md)}
.sector-cell__name{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--level-ink);font-weight:700;margin-bottom:.3rem}
.sector-cell p{margin:0;font-size:.9rem;color:hsl(var(--muted-fg))}
@media (max-width:640px){.sector-grid{grid-template-columns:1fr 1fr}}

/* — Триада: три колонки-группы (напр. Задачи/Боли/Выгоды профиля клиента).
     Цвет колонки — модификаторы .is-pain (danger) / .is-gain (success);
     по умолчанию — акцент уровня. На мобайле — в стопку. — */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);margin:1.7em 0}
.triad-col{border:1px solid hsl(var(--border));border-top:3px solid var(--level);
  background:hsl(var(--card));padding:var(--space-md)}
.triad-col__name{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--level-ink);font-weight:700;margin-bottom:.4rem}
.triad-col ul{margin:0;padding-left:1.1em}
.triad-col li{margin:.25rem 0;font-size:.9rem;color:hsl(var(--foreground))}
.triad-col.is-pain{border-top-color:var(--danger)}
.triad-col.is-pain .triad-col__name{color:color-mix(in srgb,var(--danger) 78%,hsl(var(--foreground)))}
.triad-col.is-gain{border-top-color:var(--success)}
.triad-col.is-gain .triad-col__name{color:color-mix(in srgb,var(--success) 70%,hsl(var(--foreground)))}
@media (max-width:640px){.triad{grid-template-columns:1fr}}

/* — Job Story: карточка формулы «Когда… я хочу… чтобы…» с подсвеченными
     ключами-частями. Для JTBD и формулировок работы клиента. — */
.jobstory{margin:1.6em 0;border:1px solid color-mix(in srgb,var(--level) 28%,hsl(var(--border)));
  border-left:3px solid var(--level);background:color-mix(in srgb,var(--level) 5%,hsl(var(--card)));
  padding:var(--space-lg) var(--space-xl)}
.jobstory__line{margin:.4rem 0;font-size:1.05rem;line-height:1.55;color:hsl(var(--foreground))}
.jobstory__line:last-child{margin-bottom:0}
.jobstory__key{display:inline-block;font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;color:var(--level-ink);
  background:color-mix(in srgb,var(--level) 14%,hsl(var(--card)));padding:.1rem .45rem;margin-right:.45rem}

/* — Цветок Лотоса: сетка 3x3 (центр + 8 лепестков). Центр — .is-center
     (драм-тон уровня). Узнаваемый визуал метода Lotus Blossom. — */
.lotus{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:1.7em 0;max-width:540px}
.lotus-cell{border:1px solid hsl(var(--border));background:hsl(var(--card));padding:var(--space-sm);
  font-size:.84rem;line-height:1.3;text-align:center;display:grid;place-items:center;min-height:62px;
  color:hsl(var(--foreground))}
.lotus-cell.is-center{background:var(--level-deep);color:var(--level-contrast);font-weight:600;
  border-color:transparent}

/* ─────────────────────────────────────────────
   QUIZ — проверка знаний урока (FD-240; FD-287 — редизайн)
   Пошаговый поток: вопросы по одному + мгновенный разбор. БЕЗ шапки/прогресс-бара
   и без рамки-карты. Каждый вопрос — реплика персонажа урока (наставника):
   .quiz-q__ask (реюз .dialogue-line/.bubble) с аватаром .avatar--peep.
   Слоты: __list/__item · .quiz-q (fieldset без рамки; __legend — sr-only) ·
   .quiz-q__ask (__text — текст вопроса в облаке) · __options/__submit/__feedback ·
   .quiz-opt (карта-вариант, поверх .radio-opt/.check; is-correct/is-wrong/is-picked) ·
   __done (итоговый callout).
   Используется в платформе (components/QuizRunner.tsx). Витрина: backend/design-system/_sections/quiz.tsx.
   ───────────────────────────────────────────── */
.quiz{margin:var(--space-xl) 0}
/* FD-288: заголовок всего блока проверки. (Прогресс-бара/надзаголовка нет —
   вопрос оформлен как реплика персонажа, см. .quiz-q__ask ниже.) */
.quiz__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;
  letter-spacing:-.01em;margin:0 0 var(--space-lg)}
.quiz__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-xl)}
.quiz__item{margin:0}

/* FD-287: вопрос — БЕЗ рамки-карты; контейнер-группа (fieldset). */
.quiz-q{min-width:0;margin:0;padding:0;border:0;animation:quizReveal var(--dur) var(--ease)}
.quiz-q:focus{outline:none}
@keyframes quizReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Легенда fieldset — визуально скрыта (вопрос виден как реплика-облако ниже),
   но остаётся именем группы для скринридера (доступность). */
.quiz-q__legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* FD-287/288: вопрос как реплика персонажа — реюз .dialogue-line/.bubble (правило №1).
   Голова-аватар крупная (как в диалогах урока), облако — нейтрально-серое,
   текст вопроса — стандартным шрифтом. --q-av — размер аватара (он же задаёт
   отступ вариантов/разбора, чтобы они были вровень с облаком). */
.quiz-q{--q-av:72px}
/* FD-290: номер вопроса — НАД баблом, вровень с облаком (отступ на ширину аватара). */
.quiz-q__num{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--level);margin:0 0 .4rem calc(var(--q-av) + .7rem)}
.quiz-q__ask{margin:0 0 var(--space-md);max-width:100%}
.quiz-q__ask .avatar{width:var(--q-av);height:var(--q-av);font-size:1.6rem}
.quiz-q__ask .bubble{flex:1;min-width:0;background:hsl(var(--muted-bg));border-color:hsl(var(--border))}
.quiz-q__ask .bubble__name{color:hsl(var(--muted-fg))}
.quiz-q__ask .quiz-q__text{font-family:var(--font-sans);font-size:1rem;font-weight:600;
  line-height:1.5;color:hsl(var(--foreground))}
/* варианты/кнопка/разбор — вровень с облаком (отступ слева на ширину аватара) */
.quiz-q__options,.quiz-q__submit,.quiz-q__feedback{margin-left:calc(var(--q-av) + .7rem)}

.quiz-q__options{display:flex;flex-direction:column;gap:.5rem}

/* Вариант-карта: расширяет инлайновый .radio-opt/.check до кликабельной строки.
   Привязка к .quiz-q__options поднимает специфичность над .radio-opt из forms.css
   (тот грузится позже) — layout-свойства карты выигрывают без !important. */
.quiz-q__options .quiz-opt{display:flex;align-items:flex-start;gap:.7rem;width:100%;padding:.7rem .85rem;
  border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
/* FD-289: нейтральные состояния — ховер серым фоном, выбранный вариант
   «чёрным» (ink) бордером + серым фоном (без акцента). Фокус-кольцо остаётся
   акцентным — индикатор доступности (WCAG). is-correct/is-wrong ниже —
   семантика разбора (зелёный/красный), не трогаем. */
.quiz-opt:not(.is-correct):not(.is-wrong):hover{background:var(--hover-bg)}
.quiz-opt:has(input:focus-visible){border-color:var(--level);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--level) 18%,transparent)}
.quiz-opt:has(input:checked):not(.is-correct):not(.is-wrong){border-color:var(--selected-border);background:var(--hover-bg)}
.quiz-opt__text{flex:1;min-width:0;line-height:1.45}
.quiz-opt__mark{flex:none;font-weight:700;line-height:1.4}
.quiz-opt.is-correct{border-color:var(--success);background:color-mix(in srgb,var(--success) 9%,hsl(var(--card)))}
.quiz-opt.is-correct .quiz-opt__mark{color:var(--success)}
.quiz-opt.is-wrong{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,hsl(var(--card)))}
.quiz-opt.is-wrong .quiz-opt__mark{color:var(--danger)}
/* отвеченный вопрос заблокирован — курсор обычный, без hover-намёка на клик */
.quiz-opt:has(input:disabled){cursor:default}

.quiz-q__submit{margin-top:var(--space-md)}
.quiz-q__feedback{display:flex;flex-direction:column;gap:.6rem;margin-top:var(--space-md)}
.quiz-q__reveal{margin-top:0}
.quiz__done{margin-top:var(--space-lg)}

@media (max-width:600px){
  .quiz-q{--q-av:52px}
  .quiz-q__ask .avatar{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .quiz-q{animation:none}
}

/* ============================================================
   ПЕРСОНАЖИ КУРСА · Open Peeps (CC0)
   Иллюстрации-персонажи ролей курса. Собираются движком из деталей
   (platform/lib/characters/composer.ts) — в БД хранится только выбор частей.
   Монохром АДАПТИВНЫЙ: контур = currentColor (текст темы), белая заливка =
   var(--peep-paper) (= цвет поверхности). Поэтому один SVG сам подстраивается
   под светлую/тёмную тему, без хардкода hex. Два вида: бюст «по пояс» и
   голова-в-круге. Применяется: витрина ДС → «Персонажи» и конструктор
   (platform/components/CharacterStudio.tsx).
   ============================================================ */
.peep{
  display:block;
  color:hsl(var(--foreground));      /* контур (currentColor) */
  --peep-paper:hsl(var(--card));     /* «бумага» = поверхность карточки/фона */
}
.peep svg{display:block;width:100%;height:100%}

/* «По пояс» — пропорции исходного бюста 240×324. */
.peep--bust{aspect-ratio:240/324}

/* «Только голова» — круглый портрет-аватар. */
.peep--head{
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  background:color-mix(in srgb, hsl(var(--foreground)) 5%, transparent);
}

/* ============================================================
   КОНТЕНТНЫЕ МЕДИА-БЛОКИ УРОКА (FD-254) — video, materials.
   Контентные блоки раннера (CourseBlocks): общие для /course и /play.
   Только токены ДС. Витрина: Разработка → Дизайн-система → «Блоки контента».
   ============================================================ */

/* — Видео: адаптивный embed 16:9 (iframe). Структурный блок, т.к. санитайзер
     вырезает iframe из richtext. — */
.video-embed{margin:1.7em 0}
.video-embed__frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);
  overflow:hidden;background:hsl(var(--card));border:1px solid hsl(var(--border))}
.video-embed__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-embed figcaption{margin-top:.6em;font-size:var(--text-sm);color:hsl(var(--muted-fg));text-align:center}

/* — Материалы: подборка ресурсов урока (ссылки с иконкой типа). — */
.materials{margin:1.7em 0;border:1px solid hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--card));padding:var(--space-md) var(--space-lg)}
.materials__label{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.06em;color:hsl(var(--muted-fg));margin-bottom:.6rem}
.materials__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.materials__item{margin:0}
.materials__item a{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;
  border-radius:var(--radius-sm);color:hsl(var(--foreground));text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease)}
.materials__item a:hover{background:var(--level-fog)}
.materials__item a:focus-visible{outline:2px solid var(--level);outline-offset:2px}
.materials__icon{flex:0 0 auto;font-size:1.05rem;line-height:1}
.materials__name{flex:1 1 auto;min-width:0}
.materials__item a::after{content:"↗";color:hsl(var(--muted-fg));font-size:var(--text-sm)}

/* — Числовой ответ (FD-255): поле ввода + единица в одну строку. — */
.numeric-field{display:flex;align-items:center;gap:.6rem;max-width:280px}
.numeric-field .input{flex:1 1 auto;min-width:0}
.numeric-field__unit{flex:0 0 auto;font-family:var(--font-mono);font-size:var(--text-sm);color:hsl(var(--muted-fg))}

/* — Контентный блок «Таблица» (FD-827, фаза 1): самодостаточные стили + варианты.
   Один рендер tableBlockHtml для плеера (.fd-prose) и канвы разметчика — паритет вида.
   Варианты задаются классами .fd-table--*; выравнивание столбцов — инлайн text-align. — */
.fd-table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.95rem;table-layout:auto}
.fd-table caption{caption-side:top;text-align:left;font-size:var(--text-sm);color:hsl(var(--muted-fg));margin-bottom:.5rem}
.fd-table th,.fd-table td{padding:.55rem .8rem;border:1px solid hsl(var(--border));text-align:left;vertical-align:top}
.fd-table thead th,.fd-table tbody th{background:hsl(var(--muted-bg) / .55);font-weight:600}
.fd-table--zebra tbody tr:nth-child(even){background:hsl(var(--muted-bg) / .4)}
.fd-table--b-rows th,.fd-table--b-rows td{border-left:0;border-right:0}
.fd-table--b-none th,.fd-table--b-none td{border:0}
.fd-table--compact th,.fd-table--compact td{padding:.3rem .55rem;font-size:.9rem}
/* акцент уровня (FD-827 фаза 4): тон шапки и границ от --level, без хардкода */
.fd-table--accent thead th,.fd-table--accent tbody th{background:color-mix(in srgb,var(--level) 16%,hsl(var(--card)))}
.fd-table--accent th,.fd-table--accent td{border-color:color-mix(in srgb,var(--level) 30%,hsl(var(--border)))}

/* — FD-1054 · Заливка и «текст как в шапке» ПО СТОЛБЦУ — два независимых модификатора на
   ячейку (не на всю таблицу), можно комбинировать в любом сочетании и на любом столбце, не
   только на шапке/первом. data.colFill/data.colHead (CSV по столбцам) → tableBlockHtml
   (lib/table-block.ts) и канва (TableEditor.tsx) кладут классы на КАЖДУЮ ячейку столбца.
   Палитра заливки — те же 8 цветов, что у универсального блока (см. fd-universal и fd-swatch
   модификаторы выше), через --tcol передаём цвет заливки в текст headtext, если оба модификатора
   на одной ячейке. */
.fd-table td.fd-table-col--blue,.fd-table th.fd-table-col--blue{--tcol:var(--blue);background:color-mix(in srgb,var(--blue) 12%,hsl(var(--card)))}
.fd-table td.fd-table-col--coral,.fd-table th.fd-table-col--coral{--tcol:var(--coral);background:color-mix(in srgb,var(--coral) 12%,hsl(var(--card)))}
.fd-table td.fd-table-col--yellow,.fd-table th.fd-table-col--yellow{--tcol:var(--yellow);background:color-mix(in srgb,var(--yellow) 12%,hsl(var(--card)))}
.fd-table td.fd-table-col--green,.fd-table th.fd-table-col--green{--tcol:var(--green);background:color-mix(in srgb,var(--green) 12%,hsl(var(--card)))}
.fd-table td.fd-table-col--orange,.fd-table th.fd-table-col--orange{--tcol:var(--orange);background:color-mix(in srgb,var(--orange) 12%,hsl(var(--card)))}
.fd-table td.fd-table-col--purple,.fd-table th.fd-table-col--purple{--tcol:var(--purple);background:color-mix(in srgb,var(--purple) 12%,hsl(var(--card)))}
.fd-table td.fd-table-col--gray,.fd-table th.fd-table-col--gray{--tcol:hsl(var(--muted-fg));background:hsl(var(--muted-bg) / .55)}
.fd-table td.fd-table-col--white,.fd-table th.fd-table-col--white{background:hsl(var(--card))}
.fd-table td.fd-table-col--headtext,.fd-table th.fd-table-col--headtext{
  font-family:var(--font-mono);font-weight:600;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tcol,hsl(var(--foreground)))}

/* — FD-986 · Пресеты таблиц. Два вида: basic (обычная — полная сетка + моно-капс тихая шапка,
   как база курса) и termdesc (термин → пояснение — 2 кол, без вертикалей, тихо; замена deflist).
   Пресет = класс .fd-table--p-<key>; базовые look-поля ставит applyTablePreset (lib/table-block.ts).
   Новая таблица создаётся с preset=basic; ручная правка свойств сбрасывает в «Пользовательская»
   (InspectorPanel). Витрина — _sections/content-table; описание — DESIGN-SYSTEM.md §таблицы. — */
/* basic · обычная таблица: сетка от базового .fd-table + тихая моно-капс шапка */
.fd-table--p-basic thead th,.fd-table--p-basic tbody th{
  font-family:var(--font-mono);font-weight:600;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
  color:hsl(var(--muted-fg));background:color-mix(in srgb,hsl(var(--muted-fg)) 6%,hsl(var(--card)))}
/* termdesc · термин → пояснение: первый столбец — шапка-столбец (th) моно-капсом. Стиль th
   самодостаточен (не завися от reading.css .reading-main th), поэтому одинаков в плеере и витрине.
   Вертикали убирает borders:rows (класс .fd-table--b-rows из пресета). Так же выглядят ~28
   существующих таблиц headerCol:on — им достаточно добавить preset=termdesc. */
.fd-table--p-termdesc tbody th{font-family:var(--font-mono);font-weight:600;font-size:.68rem;
  letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--muted-fg));
  width:14rem;white-space:normal;vertical-align:top;line-height:1.4}
.fd-table--p-termdesc td{vertical-align:top}

/* — Слой правки таблицы в канве (FD-827 фаза 2): поверх .fd-table, вид совпадает с плеером. — */
/* padding-top — чтобы тулбар-рамка блока (BlockFrame, на -top-4 при ховере) не налезал на
   собственный мини-тулбар таблицы (__bar). FD-827 фикс перекрытия. */
.fd-table-edit{margin:1.5em 0;padding-top:1.5rem}
.fd-table-edit .fd-table{margin:0}
/* в редакторе не обрезаем плавающие контролы строк (они уходят в левое поле) */
.fd-table-edit .fd-table-wrap{overflow:visible}
.fd-table-edit__bar{display:flex;align-items:center;gap:.25rem;margin-bottom:.5rem;flex-wrap:wrap}
.fd-table-edit__bar button{display:inline-flex;align-items:center;gap:.3rem;height:1.75rem;padding:0 .5rem;border:1px solid hsl(var(--border));background:hsl(var(--card));font-size:var(--text-sm);color:hsl(var(--foreground));cursor:pointer}
.fd-table-edit__bar button:hover{background:hsl(var(--muted-bg))}
.fd-table-edit__sep{width:1px;height:1.25rem;background:hsl(var(--border));margin:0 .25rem}

/* FD-1054 · Панель «Ещё форматирование» ячейки — редкие методы из тулбара универсального
   блока (rich-text-editor.tsx), вынесенные за одну кнопку-эллипсис, чтобы основной ряд не
   разрастался. Тот же паттерн выпадашки, что у списков/выравнивания в rich-text-editor. */
.fd-table-edit__more{position:relative}
.fd-table-edit__more-panel{position:absolute;left:0;top:2.1rem;z-index:50;display:flex;flex-direction:column;
  width:15rem;border:1px solid hsl(var(--border));background:hsl(var(--card));box-shadow:0 4px 16px hsl(var(--foreground) / .12);padding:.25rem}
.fd-table-edit__more-panel button{justify-content:flex-start;height:1.9rem;width:100%;border:0;padding:0 .5rem;font-size:var(--text-sm);white-space:nowrap}
.fd-table-edit__more-chevron{margin-left:auto;opacity:.6}
.fd-table-edit__submenu{position:absolute;left:100%;top:0;z-index:51;display:flex;flex-direction:column;
  width:9rem;border:1px solid hsl(var(--border));background:hsl(var(--card));box-shadow:0 4px 16px hsl(var(--foreground) / .12);padding:.25rem}
.fd-table-edit__submenu button{height:1.9rem;width:100%;border:0;padding:0 .5rem;font-size:var(--text-sm);text-align:left}
.fd-table-wrap{overflow-x:auto}
.fd-cell{cursor:text;outline:none;min-width:3rem}
.fd-cell:hover{box-shadow:inset 0 0 0 1px hsl(var(--border))}
.fd-cell:focus{box-shadow:inset 0 0 0 2px hsl(var(--ring))}
.fd-table--b-none .fd-cell{box-shadow:inset 0 0 0 1px hsl(var(--border) / .45)} /* слабая сетка при borders=none */
.fd-table tr.fd-table-edit__colctl th,.fd-table td.fd-rowctl-cell{border:0;background:none;padding:0}
.fd-table tr.fd-table-edit__colctl th{padding-bottom:.25rem;text-align:center;font-weight:400}
/* жёлоб-колонка контролов строки схлопнута в 0 → видимые столбцы выровнены по левому
   краю блока (как в плеере); сами контролы плавают в левом поле (вне потока, не сдвигают
   таблицу и не закрывают текст). FD-827 фикс выравнивания. */
.fd-table td.fd-rowctl-cell{width:0;padding:0;position:relative;vertical-align:middle}
.fd-table tr.fd-table-edit__colctl th:first-child{width:0}
.fd-colctl{display:inline-flex;gap:1px;opacity:0;transition:opacity .12s}
.fd-rowctl{display:inline-flex;gap:1px;opacity:0;transition:opacity .12s;position:absolute;right:.4rem;top:50%;transform:translateY(-50%);z-index:2}
tr:hover .fd-rowctl,.fd-table-edit__colctl th:hover .fd-colctl{opacity:1}
.fd-rowctl button,.fd-colctl button{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--muted-fg));cursor:pointer}
.fd-rowctl button:hover,.fd-colctl button:hover{background:hsl(var(--muted-bg));color:hsl(var(--foreground))}
.fd-rowctl button:disabled,.fd-colctl button:disabled{opacity:.3;cursor:default}
.fd-rowctl .fd-grip,.fd-colctl .fd-grip{cursor:grab}.fd-rowctl .fd-grip:active,.fd-colctl .fd-grip:active{cursor:grabbing}

/* — Лайтбокс изображений урока (FD-835): полноэкранный просмотр по клику в плеере.
   Оверлей-скрим намеренно тёмный в обеих темах (конвенция лайтбокса), не токенный.
   FD-993 fix · контролы (стрелки/крестик/счётчик) — тот же «стеклянный чип» (рамка +
   полупрозрачный фон + blur), что и в инлайн-галерее (.fd-gallery__arrow/__counter ниже),
   просто перекрашенный под тёмный скрим — единый язык контролов в обоих контекстах.
   ВАЖНО: компонент рендерится React-порталом прямо в document.body (вне .fd-prose), а в
   studio геометрия/анимация/шрифт (--radius-full/--dur-fast/--ease/--font-mono) заскоуплены
   ИМЕННО под .fd-prose (content.css, мост токенов) — портал их не наследует. Поэтому у каждого
   такого var() — явный фолбэк тем же канонoм-значением из tokens.css: внутри .fd-prose работает
   токен (переопределяемо), вне скоупа — тот же результат за счёт фолбэка. Без этого стрелки и
   крестик рендерились квадратными (border-radius невалиден → 0), без hover-анимации. — */
.fd-zoomable figure img{cursor:zoom-in}
.fd-lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:4vmin;background:hsl(0 0% 0% / .82);backdrop-filter:blur(2px);
  --lb-border:hsl(0 0% 100% / .22);--lb-bg:hsl(0 0% 100% / .12);--lb-bg-hover:hsl(0 0% 100% / .22);--lb-fg:hsl(0 0% 100% / .92)}
.fd-lightbox__fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.fd-lightbox__img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:var(--radius-sm,0);box-shadow:0 12px 48px hsl(0 0% 0% / .5)}
.fd-lightbox__cap{margin:0;color:hsl(0 0% 100% / .85);font-size:.9rem;line-height:1.4;text-align:center;max-width:60ch}
.fd-lightbox__close,.fd-lightbox__nav{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--lb-border);border-radius:var(--radius-full,9999px);background:var(--lb-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--lb-fg);cursor:pointer;transition:background-color var(--dur-fast,.15s) var(--ease,cubic-bezier(.4,0,.2,1)),border-color var(--dur-fast,.15s) var(--ease,cubic-bezier(.4,0,.2,1))}
.fd-lightbox__close:hover,.fd-lightbox__nav:hover{background:var(--lb-bg-hover);border-color:hsl(0 0% 100% / .4)}
.fd-lightbox__close:focus-visible,.fd-lightbox__nav:focus-visible{outline:2px solid hsl(0 0% 100%);outline-offset:2px}
.fd-lightbox__close{position:fixed;top:max(1rem,2vmin);right:max(1rem,2vmin)}
.fd-lightbox__nav{position:fixed;top:50%;transform:translateY(-50%);z-index:2}
.fd-lightbox__nav svg,.fd-lightbox__close svg{width:22px;height:22px}
.fd-lightbox__nav--prev{left:max(1rem,2vmin)}
.fd-lightbox__nav--next{right:max(1rem,2vmin)}
.fd-lightbox__counter{margin:0;color:var(--lb-fg);font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);font-size:.72rem;letter-spacing:.04em;background:var(--lb-bg);border:1px solid var(--lb-border);border-radius:var(--radius-full,9999px);padding:.2rem .6rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media(max-width:560px){.fd-lightbox__close,.fd-lightbox__nav{width:40px;height:40px}.fd-lightbox__nav svg,.fd-lightbox__close svg{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.fd-lightbox__close,.fd-lightbox__nav{transition:none}}

/* — Галерея изображений урока (FD-993): блок figure с несколькими картинками. Слайдер (embla)
   + лента превью + счётчик; клик по кадру → .fd-lightbox с листанием. Один визуальный язык с
   .carousel (кейсы «Об авторе»), на токенах; курсор zoom-in. Рендер — components/fd/gallery.tsx. — */
.fd-gallery{margin:1.6em 0}
.fd-gallery__stage{position:relative;background:hsl(var(--muted-bg) / .4);border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden}
.fd-gallery__img{display:block;margin:0 auto;max-width:100%;max-height:72vh;max-height:72dvh;width:auto;height:auto;border:0;border-radius:0;background:transparent;cursor:zoom-in}
/* цвет/фон — на assets-токенах --muted-fg/--muted-bg (HSL-тройки в обеих темах; --foreground/
   --background в studio заданы в oklch и в hsl() дают невалид — не используем). --level (акцент)
   и --border — валидны как есть. */
.fd-gallery__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid hsl(var(--border));background:hsl(var(--muted-bg) / .92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:hsl(var(--muted-fg));display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.fd-gallery__arrow:hover{border-color:var(--level);color:var(--level)}
.fd-gallery__arrow:focus-visible{outline:2px solid var(--level);outline-offset:2px}
.fd-gallery__arrow svg{width:22px;height:22px}
.fd-gallery__arrow--prev{left:12px}
.fd-gallery__arrow--next{right:12px}
.fd-gallery__counter{position:absolute;right:12px;bottom:12px;z-index:2;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:hsl(var(--muted-fg));background:hsl(var(--muted-bg) / .92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid hsl(var(--border));border-radius:var(--radius-full);padding:.2rem .6rem}
.fd-gallery__thumbs{display:flex;gap:.5rem;margin-top:.7rem;overflow-x:auto;padding-bottom:.35rem;scrollbar-width:thin;scrollbar-color:hsl(var(--border)) transparent}
.fd-gallery__thumb{flex:none;width:88px;height:58px;border-radius:var(--radius-sm);overflow:hidden;border:2px solid transparent;background:hsl(var(--muted-bg));cursor:pointer;padding:0;opacity:.65;transition:opacity var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.fd-gallery__thumb:hover{opacity:1}
.fd-gallery__thumb img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;background:transparent}
.fd-gallery__thumb.is-active{border-color:var(--level);opacity:1}
.fd-gallery__thumb:focus-visible{outline:2px solid var(--level);outline-offset:2px;opacity:1}
.fd-gallery__cap{margin-top:.6rem;font-size:.82rem;line-height:1.5;color:hsl(var(--muted-fg));font-family:var(--font-mono)}
@media(prefers-reduced-motion:reduce){.fd-gallery__arrow,.fd-gallery__thumb{transition:none}}

/* — Блок «Подкаст по ролям» (FD-837): порт voice-equalizer/dual.html. Активный спикер —
   эквалайзер анимируется, неактивный приглушён. Цвета — контентными токенами. — */
.fd-podcast{background:hsl(var(--card));border:1px solid hsl(var(--border));padding:var(--space-xl);margin:1.5em 0;color:hsl(var(--foreground))}
.fd-pod-head{margin-bottom:var(--space-lg)}
.fd-pod-head b{display:block;font-family:var(--font-display);font-size:var(--text-xl)}
.fd-pod-head span{color:hsl(var(--muted-fg));font-size:var(--text-sm)}
.fd-pod-modes{display:flex;gap:var(--space-md);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-xl)}
.fd-pod-seg,.fd-pod-speed{display:inline-flex;border:1px solid hsl(var(--border))}
.fd-pod-seg button,.fd-pod-speed button{appearance:none;border:0;background:transparent;cursor:pointer;font-weight:600;color:hsl(var(--muted-fg))}
.fd-pod-seg button{font-size:var(--text-sm);padding:.5rem .95rem}
.fd-pod-speed button{font-size:var(--text-xs);padding:.45rem .7rem}
.fd-pod-seg button.on,.fd-pod-speed button.on{background:hsl(var(--foreground));color:hsl(var(--background))}
.fd-pod-tune{display:flex;align-items:center;gap:.6rem;color:hsl(var(--muted-fg));font-size:var(--text-sm)}
.fd-pod-tune input{accent-color:hsl(var(--foreground));width:120px}
.fd-pod-rows{display:flex;flex-direction:column;gap:var(--space-lg);margin-bottom:var(--space-xl)}
.fd-pod-row{display:flex;align-items:center;gap:var(--space-md)}
.fd-pod-row.right{flex-direction:row-reverse}
.fd-pod-ava{flex:0 0 auto;width:48px;height:48px;border-radius:50%;overflow:hidden;transition:opacity .25s}
.fd-pod-ava svg{width:100%;height:100%;display:block}
.fd-pod-bubble{flex:0 1 76%;min-width:0;background:hsl(var(--muted-bg));padding:.7rem .9rem;display:flex;flex-direction:column;gap:.35rem;transition:opacity .25s}
.fd-pod-bubble canvas{width:100%;height:44px;display:block}
.fd-pod-meta{display:flex;justify-content:space-between;font-size:var(--text-xs);color:hsl(var(--muted-fg))}
.fd-pod-row.right .fd-pod-meta{flex-direction:row-reverse}
.fd-pod-row:not(.active) .fd-pod-ava,.fd-pod-row:not(.active) .fd-pod-bubble{opacity:.5}
.fd-pod-player{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.fd-pod-play{appearance:none;border:0;cursor:pointer;width:54px;height:54px;border-radius:50%;background:hsl(var(--foreground));color:hsl(var(--background));font-size:20px;display:grid;place-items:center;flex:0 0 auto}
.fd-pod-seek{flex:1;min-width:180px;display:flex;align-items:center;gap:.7rem}
.fd-pod-seek input[type=range]{flex:1;accent-color:hsl(var(--foreground));cursor:pointer}
.fd-pod-time{font-variant-numeric:tabular-nums;color:hsl(var(--muted-fg));font-size:var(--text-sm);min-width:96px;text-align:right}
/* ============================================================
   БЛОКИ УРОКА ТРЕНАЖЁРА (перенос из prototypes/content-blocks/).
   Канон оформления контента уроков: без лишних подложек, на токенах.
   Грузится и в плеере (studio/app/content.css импортирует этот файл).
   Метка-эйброу для всех: .lesson-eyebrow. Иконки ✓/✗/звезда/стрелка —
   из спрайта assets/img/icons.svg (<i data-icon="…">), цвет currentColor.
   Переиспользуют существующее (НЕ дублируем): задание — .callout.task,
   таблицы урока — каноничная table, цитата-портрет — .dialogue-line,
   таймлайн истории — .timeline + нативный <details>.
   ============================================================ */
.lesson-eyebrow{display:block;font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--level-ink);margin-bottom:.7rem}

/* — Свод правил: нумерованный список без подложки (правила игры, две части урока) — */
.rulebook{margin:1.4em 0}
.rulebook__item{display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;
  padding:.95rem 0;border-top:1px solid hsl(var(--border))}
.rulebook__item:first-child{border-top:none;padding-top:.1rem}
.rulebook__n{grid-row:1 / span 2;font-family:var(--font-mono);font-size:1.05rem;font-weight:600;
  color:var(--level);line-height:1.5}
.rulebook__t{font-weight:600;font-size:1.02rem;align-self:center}
.rulebook__d{color:hsl(var(--foreground) / .8);font-size:.94rem;line-height:1.55;margin-top:.15rem}

/* — Чек-лист с иконками-галочками (что вы получите, самопроверка).
     Маркер — <i data-icon="check"> внутри <li>, НЕ ::before (≠ .checklist). — */
.icon-list{list-style:none;margin:1.2em 0;padding:0;display:grid;gap:.7rem}
.icon-list li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;line-height:1.5}
.icon-list li .ic{width:1.5rem;height:1.5rem;color:var(--level);margin-top:.05rem}

/* — Список определений «термин → описание» (две колонки, без подложки) — */
.def-list{display:grid;grid-template-columns:180px 1fr;gap:0 1.2rem;margin:1.4em 0}
.def-list dt{font-family:var(--font-display);font-weight:600;color:var(--level);
  padding:.6rem 0;border-top:1px dashed hsl(var(--border))}
.def-list dd{margin:0;padding:.6rem 0;border-top:1px dashed hsl(var(--border));
  color:hsl(var(--foreground) / .85);line-height:1.55}
.def-list dt:first-of-type,.def-list dd:first-of-type{border-top:none}
@media(max-width:560px){.def-list{grid-template-columns:1fr}
  .def-list dd{border-top:none;padding-top:0;padding-bottom:.85rem}}

/* — Ключевая мысль урока: типографская врезка-вывод без подложки (hairline) — */
.key-idea{border-top:2px solid hsl(var(--foreground));padding-top:1.1rem;margin:1.6em 0}
.key-idea p{font-family:var(--font-display);font-weight:400;font-size:1.2rem;line-height:1.45;margin:.4rem 0 0}
.key-idea .lesson-eyebrow{color:hsl(var(--muted-fg));margin:0}

/* Главная модель урока — переиспользуем существующий .keystone (перестилен
   под цепочку-типографику выше). Отдельный .model-chain НЕ заводим (≠ дублей). */

/* — Контраст ✗/✓ построчно (пример «слабо→точнее», типовые ошибки). Без подложки.
     Маркеры — <i data-icon="x"> / <i data-icon="check">, со словами (доступность). — */
.contrast-list{display:grid;gap:1.1rem;margin:1.3em 0}
.contrast-list__pair{display:grid;gap:.35rem}
.contrast-list__bad,.contrast-list__good{display:grid;grid-template-columns:auto 1fr;gap:.6rem;
  line-height:1.5;align-items:start}
.contrast-list__bad{font-weight:600}
.contrast-list__good{color:hsl(var(--foreground) / .8)}
.contrast-list .ic{width:1.35rem;height:1.35rem;margin-top:.1rem}
.contrast-list__bad .ic{color:hsl(var(--muted-fg))}
.contrast-list__good .ic{color:var(--level)}
.contrast-list--lg .ic{width:1.9rem;height:1.9rem}   /* крупные иконки (разбор-пример) */

/* — Журнальная цитата (pull-quote) с кавычкой-якорем; для авторов без аватара — */
.pullquote{padding-top:.5rem;margin:1.6em 0}
.pullquote__mark{font-family:var(--font-display);font-weight:700;font-size:4.5rem;line-height:.6;
  color:color-mix(in srgb,var(--level) 30%,transparent);display:block}
.pullquote__text{font-family:var(--font-display);font-weight:400;font-size:1.55rem;line-height:1.35;
  letter-spacing:-.01em;margin:.2rem 0 0}
.pullquote__by{display:flex;align-items:center;gap:.7rem;margin-top:1.1rem;font-size:.9rem;color:hsl(var(--muted-fg))}
.pullquote__by::before{content:'';width:2rem;height:2px;background:var(--level);flex:none}
.pullquote__by b{color:hsl(var(--foreground));font-weight:600}

/* — Шаблон формулы: формула в рамке + выделенные переменные + блок «Примеры» — */
.formula__frame{border:1px solid hsl(var(--border));padding:var(--space-lg) var(--space-xl)}
.formula__text{font-size:1.15rem;line-height:1.65;font-weight:600;margin:0}
.fvar{background:color-mix(in srgb,var(--level) 18%,transparent);padding:.05em .35em;
  border-radius:var(--radius-sm);white-space:nowrap}
.formula__examples{margin-top:var(--space-lg)}
.formula__examples-h{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:hsl(var(--muted-fg));margin-bottom:.6rem}
.formula__examples ul{margin:0;padding-left:1.25rem}
.formula__examples li{margin:.55rem 0;line-height:1.6;color:hsl(var(--foreground) / .88)}

/* Сравнение двух сторон — переиспользуем существующий .versus
   (.versus__side.is-weak=красный / .is-strong=зелёный + .versus__arrow).
   Отдельный .compare-panels НЕ заводим (≠ дублей, правило №3). Правило цвета:
   красно-зелёное — только для оценочных пар; неоценочные — обе .is-strong. */

/* — Нейтральная карточка урока: мини-задание (с футером-артефактом) и
     самопроверка («выполнено, если…»). Без оранжевой заливки. — */
.lesson-card{margin:1.4em 0;border:1px solid hsl(var(--border));padding:var(--space-lg) var(--space-xl)}
.lesson-card__foot{margin-top:.9rem;padding-top:.8rem;border-top:1px dashed hsl(var(--border))}
.lesson-card__art{font-family:var(--font-mono);font-size:.88rem;letter-spacing:.02em;margin:0}
.lesson-card__art b{color:var(--level-ink)}

/* — Галерея персонажей: листаемая по горизонтали, образы по пояс (.peep--bust).
     Образы подставляет enrich по data-peep, либо вставляются в .peep--bust. — */
.peep-gallery{display:flex;gap:var(--space-md);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.25rem .25rem 1rem;scroll-behavior:smooth;margin:1.2em 0}
.peep-gallery::-webkit-scrollbar{height:8px}
.peep-gallery::-webkit-scrollbar-thumb{background:hsl(var(--border));border-radius:var(--radius-full)}
.peep-card{flex:0 0 auto;scroll-snap-align:start;width:260px;
  background:hsl(var(--card));border:1px solid hsl(var(--border));padding:var(--space-md)}
.peep-card .peep--bust{width:172px;margin:0 auto .7rem}
.peep-card__name{font-family:var(--font-display);font-weight:600;font-size:1.1rem}
.peep-card__role{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.07em;
  text-transform:uppercase;color:hsl(var(--muted-fg));margin-top:.2rem}
.peep-card__trait{font-size:.9rem;color:hsl(var(--foreground) / .8);line-height:1.55;margin:.6rem 0 0}

/* ============================================================
   FD-718 · Контентные блоки урока (плеер + превью редактора).
   Компоненты: studio/components/blocks/*.tsx — чистые презентационные.
   Цвета: HSL-токены через hsl(var(--…)); var(--cat-1..5)/var(--danger) — готовые цвета.
   Тёмная тема — переключением токенов в tokens.css (отдельных .dark правил не нужно).
   ============================================================ */

/* — Группа «Структуры»: пирамида / матрица / таймлайн / спектр — */
.fd-pyramid,.fd-matrix,.fd-timeline,.fd-spectrum{margin:1.6rem 0}
.fd-pyramid__title,.fd-matrix__title,.fd-timeline__title,.fd-spectrum__title{
  font-family:var(--font-display);font-size:.95rem;font-weight:600;
  color:hsl(var(--foreground));margin-bottom:1rem}
.fd-pyramid__stack{display:flex;flex-direction:column;align-items:center;gap:.35rem;max-width:28rem;margin:0 auto}
.fd-pyramid__level{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.5rem .75rem;color:hsl(var(--background));min-width:6rem}
.fd-pyramid__level-title{font-family:var(--font-display);font-size:.82rem;font-weight:600;line-height:1.2}
.fd-pyramid__level-sub{font-size:.66rem;line-height:1.2;opacity:.85;margin-top:.1rem}
/* — Оглавление урока (блок toc, auto-TOC): пункты рисует ReadingToc (левый бордер, level-акцент) — */
.fd-toc{margin:1.6rem 0;padding:1rem 1.25rem;border:1px solid hsl(var(--border));background:hsl(var(--muted)/.4)}
.fd-toc__title{font-family:var(--font-display);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:hsl(var(--muted-foreground));margin-bottom:.5rem}
.fd-toc--placeholder{opacity:.7}
.fd-matrix__layout{display:flex;gap:.75rem}
.fd-matrix__yaxis{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:.25rem 0}
.fd-matrix__yaxis .fd-matrix__axis-label{writing-mode:vertical-rl;transform:rotate(180deg)}
.fd-matrix__body{flex:1;min-width:0}
.fd-matrix__grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.fd-matrix__quad{border:1px solid hsl(var(--border));background:hsl(var(--card));padding:.9rem 1rem}
.fd-matrix__quad-title{font-family:var(--font-display);font-size:.85rem;font-weight:600;margin-bottom:.25rem}
.fd-matrix__quad-desc{font-size:.78rem;color:hsl(var(--muted-fg));line-height:1.5}
.fd-matrix__xaxis{display:flex;justify-content:space-between;margin-top:.5rem;padding:0 .25rem}
.fd-matrix__axis-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted-fg))}
/* FD-895 · единый вид ленты (редизайн): маленький кружок на линии → бейдж-метка (дата/«Шаг N»/
   переход) → заголовок вехи → описание (+ автор). Размеры/шрифты как у контентных блоков.
   Веха с описанием — сворачиваемая (нативный <details open>), развёрнута по умолчанию. */
.fd-timeline__list{position:relative;list-style:none;margin:0;padding:0 0 0 1.6rem}
.fd-timeline__list::before{content:'';position:absolute;left:5px;top:.5rem;bottom:.5rem;width:2px;background:hsl(var(--border))}
.fd-timeline__item{position:relative;margin-bottom:1.1rem}
.fd-timeline__item:last-child{margin-bottom:0}
.fd-timeline__dot{position:absolute;left:calc(-1.6rem + 1px);top:.4rem;width:11px;height:11px;border-radius:50%;z-index:1;
  border:2px solid var(--level);background:hsl(var(--background))}
.fd-timeline__d{margin:0}
.fd-timeline__sum{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem .55rem}
summary.fd-timeline__sum{cursor:pointer;list-style:none}
summary.fd-timeline__sum::-webkit-details-marker{display:none}
summary.fd-timeline__sum::marker{content:''}
.fd-timeline__mark{font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  color:var(--level);background:color-mix(in srgb,var(--level) 12%,transparent);padding:.12rem .55rem;border-radius:999px}
.fd-timeline__ttl{font-size:1rem;font-weight:600;color:hsl(var(--foreground));line-height:1.35}
.fd-timeline__chev{margin-left:auto;flex:0 0 auto;width:1rem;height:1rem;color:hsl(var(--muted-fg));
  transition:transform var(--dur-fast,.15s) var(--ease,ease)}
.fd-timeline__d[open]>summary .fd-timeline__chev{transform:rotate(180deg)}
.fd-timeline__body{padding:.35rem 0 .1rem}
.fd-timeline__desc{font-size:.95rem;color:hsl(var(--foreground));line-height:1.6;margin:0}
.fd-timeline__meta{font-size:.8rem;color:hsl(var(--muted-fg));margin:.3rem 0 0}
.fd-spectrum__poles{display:flex;justify-content:space-between;margin-bottom:.6rem}
.fd-spectrum__pole{font-family:var(--font-display);font-size:.85rem;font-weight:600}
.fd-spectrum__bar{display:flex;height:.6rem;width:100%;overflow:hidden;border-radius:999px}
.fd-spectrum__seg{flex:1}
.fd-spectrum__marks{display:grid;gap:.25rem;margin-top:.5rem}
.fd-spectrum__mark{text-align:center;font-size:.66rem;line-height:1.25;color:hsl(var(--muted-fg))}
@media (max-width:640px){
  .fd-matrix__grid{grid-template-columns:1fr}
  .fd-matrix__yaxis{display:none}
  .fd-spectrum__marks{grid-template-columns:1fr 1fr !important}
}

/* — Группа «Сравнения»: плюсы/минусы · было→стало · рефрейм · анти-паттерн — */
.fd-proscons,.fd-beforeafter,.fd-reframe,.fd-antipattern{margin:1.5rem 0}
.fd-proscons__title,.fd-beforeafter__title,.fd-reframe__title,.fd-antipattern__title{font-weight:600;font-size:.95rem;margin-bottom:.75rem;color:hsl(var(--foreground))}
.fd-proscons__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fd-proscons__col{border:1px solid hsl(var(--border));background:hsl(var(--card));padding:1.25rem}
.fd-proscons__col--pros{border-color:var(--cat-3)}
.fd-proscons__col--cons{border-color:var(--danger)}
.fd-proscons__head{font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem}
.fd-proscons__col--pros .fd-proscons__head{color:var(--cat-3)}
.fd-proscons__col--cons .fd-proscons__head{color:var(--danger)}
.fd-proscons__list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fd-proscons__item{display:flex;gap:.5rem;align-items:flex-start;font-size:.9rem;color:hsl(var(--foreground))}
.fd-proscons__mark{flex:0 0 auto;width:1.1rem;text-align:center;font-weight:700;line-height:1.4}
.fd-proscons__col--pros .fd-proscons__mark{color:var(--cat-3)}
.fd-proscons__col--cons .fd-proscons__mark{color:var(--danger)}
.fd-beforeafter__grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:.75rem}
.fd-beforeafter__col{border:1px solid hsl(var(--border));background:hsl(var(--card));padding:1.25rem}
.fd-beforeafter__col--before{border-color:var(--danger)}
.fd-beforeafter__col--after{border-color:var(--cat-3)}
.fd-beforeafter__label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem}
.fd-beforeafter__col--before .fd-beforeafter__label{color:var(--danger)}
.fd-beforeafter__col--after .fd-beforeafter__label{color:var(--cat-3)}
.fd-beforeafter__text,.fd-beforeafter__list{font-size:.9rem;color:hsl(var(--foreground));margin:0}
.fd-beforeafter__list{padding-left:1.1rem;display:grid;gap:.35rem}
.fd-beforeafter__arrow{display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:hsl(var(--muted-fg))}
.fd-reframe{display:grid;gap:.75rem}
.fd-reframe__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:.75rem}
.fd-reframe__cell{border:1px solid hsl(var(--border));background:hsl(var(--card));padding:1rem}
.fd-reframe__cell--from{border-color:var(--danger);opacity:.75}
.fd-reframe__cell--to{border-color:var(--cat-3)}
.fd-reframe__label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}
.fd-reframe__cell--from .fd-reframe__label{color:var(--danger)}
.fd-reframe__cell--to .fd-reframe__label{color:var(--cat-3)}
.fd-reframe__text{font-size:.9rem;color:hsl(var(--foreground));margin:0}
.fd-reframe__text--from{text-decoration:line-through}
.fd-reframe__text--to{font-weight:500}
.fd-reframe__arrow{display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:hsl(var(--muted-fg))}
.fd-antipattern__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fd-antipattern__card{border:1px solid hsl(var(--border));background:hsl(var(--card))}
.fd-antipattern__row{display:flex;gap:.6rem;align-items:flex-start;padding:.75rem 1rem}
.fd-antipattern__row--bad{background:color-mix(in srgb,var(--danger) 8%,transparent)}
.fd-antipattern__row--good{background:color-mix(in srgb,var(--cat-3) 8%,transparent);border-top:1px solid hsl(var(--border))}
.fd-antipattern__mark{flex:0 0 auto;line-height:1.4}
.fd-antipattern__text{font-size:.9rem;color:hsl(var(--foreground));margin:0}
.fd-antipattern__row--good .fd-antipattern__text{font-weight:500}
@media (max-width:640px){
  .fd-proscons__grid,.fd-antipattern__grid{grid-template-columns:1fr}
  .fd-beforeafter__grid,.fd-reframe__row{grid-template-columns:1fr}
  .fd-beforeafter__arrow,.fd-reframe__arrow{transform:rotate(90deg)}
}

/* — Группа «Метрики и практика»: метрики · саморефлексия · гайд интервью — */
.fd-metrics{margin:1.5rem 0}
.fd-metrics__title{font-weight:600;color:hsl(var(--foreground));margin-bottom:.85rem}
.fd-metrics__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem}
.fd-metrics__card{border:1px solid hsl(var(--border));padding:1.25rem}
.fd-metrics__value{font-size:1.9rem;font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--cat-1)}
.fd-metrics__label{margin-top:.5rem;font-size:.9rem;font-weight:500;color:hsl(var(--foreground))}
.fd-metrics__note{margin-top:.25rem;font-size:.8rem;color:hsl(var(--muted-fg))}
.fd-reflection{margin:1.5rem 0;border:1px solid hsl(var(--border));border-left:3px solid var(--cat-2);padding:1.5rem}
.fd-reflection__eyebrow{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--cat-2)}
.fd-reflection__title{margin-top:.4rem;font-size:1.1rem;font-weight:600;letter-spacing:-.01em;color:hsl(var(--foreground))}
.fd-reflection__intro{margin-top:.35rem;font-size:.9rem;color:hsl(var(--muted-fg))}
.fd-reflection__steps{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.fd-reflection__step{display:flex;gap:.75rem;align-items:flex-start}
.fd-reflection__num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;font-size:.75rem;font-weight:600;background:var(--cat-2);color:hsl(var(--background))}
.fd-reflection__text{padding-top:.1rem;font-size:.9rem;color:hsl(var(--foreground))}
.fd-interview-guide{margin:1.5rem 0}
.fd-interview-guide__title{font-weight:600;color:hsl(var(--foreground));margin-bottom:1rem}
.fd-interview-guide__phases{display:flex;flex-direction:column;gap:1.5rem}
.fd-interview-guide__phase-name{font-size:.9rem;font-weight:600;color:hsl(var(--foreground));margin-bottom:.6rem;padding-left:.6rem;border-left:3px solid var(--cat-4)}
.fd-interview-guide__questions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.fd-interview-guide__question{display:flex;gap:.6rem;align-items:flex-start;border:1px solid hsl(var(--border));padding:.65rem .85rem;font-size:.9rem;font-style:italic;color:hsl(var(--foreground))}
.fd-interview-guide__mark{flex:0 0 auto;font-size:1.1rem;line-height:1;font-style:normal;color:var(--cat-4)}
@media (max-width:640px){.fd-metrics__grid{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.fd-metrics__grid{grid-template-columns:1fr}}

/* — Группа «Диаграммы»: кривая · цикл · радар (адаптивный inline-SVG) — */
.fd-curve,.fd-loop,.fd-radar{margin:1.5rem 0}
.fd-curve__title,.fd-loop__title,.fd-radar__title{font-weight:600;margin-bottom:.5rem;color:hsl(var(--foreground))}
.fd-curve__caption{margin-top:.5rem;font-size:.85rem;color:hsl(var(--muted-fg))}
.fd-loop__svg,.fd-radar__svg{display:block;max-width:360px;margin-inline:auto}

/* ============================================================
   FD-719 · Смысловые контентные блоки урока (плеер + превью редактора).
   Компоненты: studio/components/blocks/{KeyIdea,Definition,DefList,
   Outcomes,Model,Formula,Rules}.tsx — чистые презентационные.
   Цвета: HSL-токены через hsl(var(--…)); var(--cat-1..5)/var(--danger) — готовые.
   ============================================================ */

/* — Ключевая мысль: жирная hairline сверху, дисплейный текст, без подложки — */
.fd-key-idea{margin:2rem 0;border-top:3px solid hsl(var(--foreground));padding-top:1.1rem;max-width:42rem}
.fd-key-idea__eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted-fg));margin-bottom:.6rem}
.fd-key-idea__text{font-family:var(--font-display);font-size:1.5rem;line-height:1.35;font-weight:500;color:hsl(var(--foreground));margin:0}

/* — Определение: акцентная вертикальная черта слева, без заливки — */
.fd-definition{margin:1.6rem 0;border-left:3px solid var(--cat-1);padding-left:1.1rem}
.fd-definition__kind{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted-fg));margin-bottom:.4rem}
.fd-definition__term{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:hsl(var(--foreground));margin:0 0 .4rem}
.fd-definition__body{font-size:.95rem;line-height:1.6;color:hsl(var(--foreground));margin:0}

/* — Список определений: семантический dl — */
.fd-deflist{margin:1.6rem 0}
.fd-deflist__title{font-size:1.02rem;line-height:1.6;color:hsl(var(--foreground));margin:0 0 1rem}
.fd-deflist__dl{margin:0;display:grid;gap:.7rem}
.fd-deflist__row{display:grid;grid-template-columns:11rem 1fr;gap:1rem;align-items:baseline}
.fd-deflist__dt{font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--cat-1)}
.fd-deflist__dd{margin:0;font-size:.92rem;line-height:1.55;color:hsl(var(--foreground))}
@media (max-width:640px){.fd-deflist__row{grid-template-columns:1fr;gap:.15rem}}

/* — Результаты урока: чек-лист с крупными галочками, без подложки — */
.fd-outcomes{margin:1.6rem 0}
.fd-outcomes__eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--muted-fg));margin-bottom:.9rem}
.fd-outcomes__list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.fd-outcomes__item{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;line-height:1.5;color:hsl(var(--foreground))}
.fd-outcomes__check{flex:0 0 auto;width:1.35rem;height:1.35rem;margin-top:.05rem}

/* — Главная модель: цепочка A → B → C, крупно, без подложки — */
.fd-model{margin:1.8rem 0}
.fd-model__eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--muted-fg));margin-bottom:.7rem}
.fd-model__chain{font-family:var(--font-display);font-size:1.2rem;line-height:1.5;font-weight:500;color:hsl(var(--foreground));margin:0;display:flex;flex-wrap:wrap;align-items:center}
.fd-model__seg{display:inline-flex;align-items:center}
.fd-model__arrow{color:var(--cat-1);margin:0 .55rem;font-weight:400}

/* — Формула: нейтральная рамка, переменные подсветкой; примеры вне рамки — */
.fd-formula{margin:1.6rem 0}
.fd-formula__eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--muted-fg));margin-bottom:.7rem}
.fd-formula__frame{border:1px solid hsl(var(--border));padding:1.1rem 1.25rem;background:hsl(var(--card))}
.fd-formula__text{font-size:1rem;line-height:1.7;color:hsl(var(--foreground));margin:0}
.fd-formula__var{background:color-mix(in srgb, var(--cat-1) 16%, transparent);color:hsl(var(--foreground));padding:.05rem .35rem;border-radius:.25rem;font-weight:500}
.fd-formula__examples{margin-top:1rem}
.fd-formula__examples-head{font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:hsl(var(--muted-fg));margin-bottom:.5rem}
.fd-formula__examples-list{margin:0;padding-left:1.1rem;display:grid;gap:.5rem;font-size:.9rem;line-height:1.55;color:hsl(var(--foreground))}

/* — Свод правил: номер в кружке, тонкие разделители, без заливки — */
.fd-rules{margin:1.6rem 0}
.fd-rules__label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--muted-fg));margin-bottom:.9rem}
.fd-rules__list{list-style:none;margin:0;padding:0}
.fd-rules__item{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 0;border-top:1px solid hsl(var(--border))}
.fd-rules__item:first-child{border-top:none;padding-top:0}
.fd-rules__num{flex:0 0 auto;width:1.9rem;height:1.9rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--cat-2);color:hsl(var(--background));font-family:var(--font-mono);font-size:.78rem;font-weight:600}
.fd-rules__body{display:flex;flex-direction:column;gap:.2rem}
.fd-rules__term{font-family:var(--font-display);font-weight:600;font-size:.98rem;color:hsl(var(--foreground))}
.fd-rules__desc{font-size:.88rem;line-height:1.55;color:hsl(var(--muted-fg))}

/* ============================================================
   FD-733 · Универсальный блок (callout/определение) с выбором из 8 цветовых
   стилей. Компоненты: studio/components/blocks/Universal.tsx, UniversalDef.tsx.
   Стиль = ключ цвета → модификатор .fd-universal--<key> задаёт --u (акцент):
   рамка/левая полоса/тинт-подложка/цвет метки считаются из --u. Цвета — токенами.
   ============================================================ */
.fd-universal{--u:var(--blue);margin:1.5rem 0;padding:1.1rem 1.25rem;
  border:1px solid color-mix(in srgb,var(--u) 30%,transparent);
  border-left:3px solid var(--u);
  background:color-mix(in srgb,var(--u) 7%,transparent)}
.fd-universal__label{display:flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.7rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--u);margin-bottom:.5rem}
.fd-universal__icon{width:1rem;height:1rem;flex:0 0 auto}
.fd-universal__term{font-family:var(--font-display);font-size:1.15rem;font-weight:600;
  color:hsl(var(--foreground));margin:0 0 .4rem}
.fd-universal__body{font-size:1rem;line-height:1.6;color:hsl(var(--foreground))}
.fd-universal__body > :first-child{margin-top:0}
.fd-universal__body > :last-child{margin-bottom:0}
/* Списки в теле — как в блоках со списками: явные маркеры и отступ */
.fd-universal__body ul{list-style:disc;padding-left:1.4rem;margin:.6rem 0}
.fd-universal__body ol{list-style:decimal;padding-left:1.4rem;margin:.6rem 0}
.fd-universal__body li{margin:.3rem 0}
.fd-universal__body li::marker{color:var(--u)}
/* Размер текста блока (sm/md/lg) */
.fd-universal--size-sm .fd-universal__body{font-size:.875rem}
.fd-universal--size-md .fd-universal__body{font-size:1rem}
.fd-universal--size-lg .fd-universal__body{font-size:1.1rem}
/* 8 стилей */
.fd-universal--blue{--u:var(--blue)}
.fd-universal--coral{--u:var(--coral)}
.fd-universal--yellow{--u:var(--yellow)}
.fd-universal--green{--u:var(--green)}
.fd-universal--orange{--u:var(--orange)}
.fd-universal--purple{--u:var(--purple)}
.fd-universal--gray{--u:hsl(var(--muted-fg))}
.fd-universal--white{--u:hsl(var(--border));background:hsl(var(--card))}
.fd-universal--white .fd-universal__label{color:hsl(var(--muted-fg))}
/* без акцентной полосы слева — левый бордер как у остальных сторон */
.fd-universal--nobar{border-left-width:1px}
/* тип линии бордера */
.fd-universal--line-dotted{border-style:dotted}
.fd-universal--line-dashed{border-style:dashed}
/* «Оформить врезкой» выкл → чистый текст без рамки/подложки/полосы/отступов */
.fd-universal--plain{border:0;background:transparent;padding:0}
.fd-universal--plain .fd-universal__label{color:var(--u)}
/* «Только полоса» (цитата): акцентная полоса слева без рамки/подложки. framed off + bar on. */
.fd-universal--baronly{border:0;border-left:3px solid var(--u);background:transparent;border-radius:0;padding:.15rem 0 .15rem 1.15rem}
.fd-universal--baronly .fd-universal__label{color:var(--u)}
/* Инлайн-редактируемая шапка урока в разметчике: плейсхолдер для пустого contentEditable. */
.fd-edit-ph:empty::before{content:attr(data-placeholder);opacity:.4;pointer-events:none}

/* Блок «Персонаж / реплика»: аватар-инициал (в акценте уровня) + имя + роль + реплика.
   Компонент — studio/components/blocks/Persona.tsx. Один акцент — var(--level). */
.fd-persona{margin:1.5rem 0;border-left:3px solid var(--level);padding:.1rem 0 .1rem 1.1rem}
/* Аватар — канон .avatar / .avatar--peep (буква-в-круге или голова-персонаж). */
.fd-persona__head{display:flex;align-items:center;gap:.7rem;margin-bottom:.55rem}
.fd-persona__id{display:flex;flex-direction:column;gap:.1rem;line-height:1.2}
.fd-persona__name{font-family:var(--font-display);font-weight:600;font-size:1rem;color:hsl(var(--foreground))}
.fd-persona__role{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--level)}
.fd-persona__quote{margin:0;font-size:1rem;line-height:1.6;color:hsl(var(--foreground))}
.fd-persona__quote > :first-child{margin-top:0}
.fd-persona__quote > :last-child{margin-bottom:0}

/* FD-787 · сворачиваемый блок (нативный <details>). Шеврон перед иконкой, поворот по
   [open]; маркер-треугольник <summary> скрыт. Тогл работает в серверном плеере без JS. */
.fd-universal--collapsible > .fd-universal__summary{cursor:pointer;list-style:none;user-select:none;position:relative}
.fd-universal--collapsible > .fd-universal__summary::-webkit-details-marker{display:none}
.fd-universal--collapsible:not([open]) > .fd-universal__summary{margin-bottom:0}
/* Кнопка «копировать» в шапке сворачиваемого блока (пресет «Промпт»). margin-left:auto
   прижимает её вправо — .fd-universal__summary наследует flex от .fd-universal__label. */
.fd-universal__copy{margin-left:auto;padding-left:8px;display:inline-flex;align-items:center}
.fd-universal__chevron{width:.9rem;height:.9rem;flex:0 0 auto;transition:transform .2s ease}
.fd-universal--collapsible:not([open]) .fd-universal__chevron{transform:rotate(-90deg)}
/* курсив тела (цитата) */
.fd-universal--italic .fd-universal__body{font-style:italic}
/* подпись (автор цитаты) */
.fd-universal__cite{display:block;margin-top:.6rem;font-style:normal;font-size:.85rem;color:hsl(var(--muted-fg))}
.fd-universal__cite::before{content:"— "}

/* ── FD-736 · Инлайн-форматирование WYSIWYG (маркер / акцент / переменная / стрелка).
   Цвет — акцент блока var(--u), иначе var(--level). Работает в редакторе, блоке, плеере. ── */
.fd-hl{background:color-mix(in srgb,var(--u,var(--level)) 24%,transparent);padding:0 .12em;border-radius:.15em;color:inherit}
.fd-accent{font-family:var(--font-display);font-weight:600}
.fd-var{background:color-mix(in srgb,var(--u,var(--level)) 16%,transparent);padding:.05rem .35rem;border-radius:.25rem;font-weight:500;white-space:nowrap}
.fd-arrow{color:var(--u,var(--level));font-weight:600;padding:0 .3em}

/* Свотчи пикера стиля в Разметчике */
.fd-swatch--blue{background:var(--blue);border-color:var(--blue)}
.fd-swatch--coral{background:var(--coral);border-color:var(--coral)}
.fd-swatch--yellow{background:var(--yellow);border-color:var(--yellow)}
.fd-swatch--green{background:var(--green);border-color:var(--green)}
.fd-swatch--orange{background:var(--orange);border-color:var(--orange)}
.fd-swatch--purple{background:var(--purple);border-color:var(--purple)}
.fd-swatch--gray{background:hsl(var(--muted-fg));border-color:hsl(var(--muted-fg))}
.fd-swatch--white{background:hsl(var(--card));border-color:hsl(var(--border))}

/* ── FD-733b · Выбираемые стили списков (универсальный блок + WYSIWYG + плеер).
   Ключ — data-атрибут на ul/ol; --u (акцент блока) красит маркеры, в редакторе
   падает на currentColor. Отступ между пунктами увеличен. ── */
ul[data-bullet],ol[data-num]{padding-left:1.5rem;margin:.7rem 0}
ul[data-bullet] > li,ol[data-num] > li{margin:.55rem 0}
/* ненумерованные маркеры */
ul[data-bullet="dot"]{list-style:disc}
ul[data-bullet="circle"]{list-style:circle}
ul[data-bullet="dash"],ul[data-bullet="check"],ul[data-bullet="plus"],ul[data-bullet="arrow"]{list-style:none;padding-left:.25rem}
ul[data-bullet="dash"] > li,ul[data-bullet="check"] > li,ul[data-bullet="plus"] > li,ul[data-bullet="arrow"] > li{position:relative;padding-left:1.6rem}
ul[data-bullet="dash"] > li::before{content:"—";position:absolute;left:0;color:var(--u,currentColor)}
ul[data-bullet="check"] > li::before{content:"✓";position:absolute;left:0;font-weight:700;color:var(--u,currentColor)}
ul[data-bullet="plus"] > li::before{content:"+";position:absolute;left:0;font-weight:700;color:var(--u,currentColor)}
ul[data-bullet="arrow"] > li::before{content:"→";position:absolute;left:0;color:var(--u,currentColor)}
/* стили нумерации */
ol[data-num="plain"]{list-style:decimal}
ol[data-num="outline"],ol[data-num="filled"]{list-style:none;counter-reset:fdli;padding-left:.25rem}
ol[data-num="outline"] > li,ol[data-num="filled"] > li{counter-increment:fdli;position:relative;padding-left:2.3rem}
ol[data-num="outline"] > li::before,ol[data-num="filled"] > li::before{content:counter(fdli);position:absolute;left:0;top:.02em;
  display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;font-size:.78rem;font-weight:600;line-height:1}
ol[data-num="outline"] > li::before{border:1.5px solid var(--u,currentColor);color:var(--u,currentColor)}
ol[data-num="filled"] > li::before{background:var(--u,currentColor);color:hsl(var(--background))}

/* — Презентация: PDF-листалка слайдов (FD-838, pdf.js). — */
.fd-pdf{margin:1.5em 0;border:1px solid hsl(var(--border));background:hsl(var(--card));outline:none}
.fd-pdf:focus-visible{box-shadow:0 0 0 2px hsl(var(--ring))}
.fd-pdf-head{padding:.7rem 1rem;border-bottom:1px solid hsl(var(--border));font-family:var(--font-display);font-weight:700}
.fd-pdf-stage{display:flex;justify-content:center;align-items:center;background:hsl(var(--muted-bg));padding:1rem;min-height:120px}
.fd-pdf-stage canvas{max-width:100%;box-shadow:0 2px 12px hsl(0 0% 0% / .12)}
.fd-pdf-bar{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;border-top:1px solid hsl(var(--border))}
.fd-pdf-nav,.fd-pdf-full{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));cursor:pointer;border-radius:var(--radius-sm)}
.fd-pdf-nav:hover,.fd-pdf-full:hover{background:hsl(var(--muted-bg))}
.fd-pdf-nav:disabled{opacity:.4;cursor:default}
.fd-pdf-count{font-variant-numeric:tabular-nums;font-size:var(--text-sm);color:hsl(var(--muted-fg));min-width:72px;text-align:center}
.fd-pdf-bar .fd-pdf-count{margin:0 auto}
.fd-pdf-full{margin-left:.25rem}
.fd-pdf-err{padding:1rem;color:hsl(var(--muted-fg));text-align:center;font-size:var(--text-sm)}
.fd-pdf:fullscreen{display:flex;flex-direction:column}
.fd-pdf:fullscreen .fd-pdf-stage{flex:1}
.fd-pdf:fullscreen .fd-pdf-stage canvas{max-height:86vh;width:auto}

.video-embed__frame video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}

/* FD-845 · аудио-блок без ролей: одна дорожка-волна без аватаров. */
.fd-pod-strip{background:hsl(var(--muted-bg));padding:.7rem .9rem;transition:opacity .25s}
.fd-pod-strip canvas{width:100%;height:44px;display:block}
.fd-pod-strip:not(.active){opacity:.55}

/* FD-844 · блок «Диалог / цитаты персонажей» — мессенджер-баблы лево/право, акцент от --level. */
.fd-dialogue{display:flex;flex-direction:column;gap:.9rem;margin:1.5em 0}
.fd-dlg-row{display:flex;align-items:flex-end;gap:.6rem;max-width:88%}
.fd-dlg-row.right{flex-direction:row-reverse;margin-left:auto}
/* Аватар-портрет пипа: БЕЗ круга и подложки — голова как есть. Контур = цвет темы
   (белый силуэт в тёмной, тёмный в светлой), лицо прозрачное. overflow visible —
   голову не обрезает (раньше круг overflow:hidden её резал). */
.fd-dlg-ava{flex:0 0 auto;width:96px;height:96px;background:transparent;
  color:hsl(var(--foreground));--peep-paper:transparent;border-radius:0;overflow:visible}
.fd-dlg-ava svg{width:100%;height:100%;display:block}
.fd-dlg-bubble{min-width:0;background:hsl(var(--muted-bg));padding:.55rem .85rem;border-radius:14px;border-bottom-left-radius:4px}
.fd-dlg-row.right .fd-dlg-bubble{background:color-mix(in srgb,var(--level) 14%,hsl(var(--card)));border-bottom-left-radius:14px;border-bottom-right-radius:4px}
.fd-dlg-name{font-size:var(--text-xs);font-weight:600;color:var(--level-ink,hsl(var(--foreground)));margin-bottom:.15rem}
.fd-dlg-text{font-size:.95rem;line-height:1.5;white-space:pre-wrap;color:hsl(var(--foreground))}

/* FD-843 · блок «Квиз» (формирующая самопроверка): вопросы, варианты, объяснение. */
.fd-quiz{margin:1.5em 0;border:1px solid hsl(var(--border));background:hsl(var(--card));padding:var(--space-lg)}
.fd-quiz__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);margin-bottom:.8rem}
.fd-quiz__q{border:0;margin:0 0 1.2rem;padding:0}
.fd-quiz__q:last-child{margin-bottom:0}
.fd-quiz__qtext{font-weight:600;margin-bottom:.6rem;padding:0}
.fd-quiz__opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.fd-quiz__opt{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.55rem .8rem;border:1px solid hsl(var(--border));background:hsl(var(--card));cursor:pointer;font-size:.95rem;color:hsl(var(--foreground))}
.fd-quiz__opt:hover:not(:disabled){background:hsl(var(--muted-bg))}
.fd-quiz__opt:disabled{cursor:default}
.fd-quiz__opt.is-sel{border-color:hsl(var(--foreground))}
.fd-quiz__opt.is-correct{border-color:var(--success);background:color-mix(in srgb,var(--success) 12%,hsl(var(--card)))}
.fd-quiz__opt.is-wrong{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,hsl(var(--card)))}
.fd-quiz__mark{flex:0 0 auto;width:1.2em;font-variant-numeric:tabular-nums}
.fd-quiz__hint{font-size:var(--text-xs);color:hsl(var(--muted-fg));margin:.4rem 0 0}
.fd-quiz__check{margin-top:.7rem;border:1px solid hsl(var(--foreground));background:hsl(var(--foreground));color:hsl(var(--background));padding:.45rem 1rem;font-weight:600;cursor:pointer}
.fd-quiz__check:disabled{opacity:.5;cursor:default}
.fd-quiz__fb{margin-top:.7rem;padding:.6rem .8rem;background:hsl(var(--muted-bg));font-size:.92rem;line-height:1.5}
.fd-quiz__fb.ok{background:color-mix(in srgb,var(--success) 14%,hsl(var(--card)))}
.fd-quiz__fb.no{background:color-mix(in srgb,var(--danger) 10%,hsl(var(--card)))}

/* ─── FD-856 · «Сравнение» (.fd-cmp) и «Список вопросов» (.fd-qlist) ─── */
/* Цвет колонки/акцента — из палитры универсального блока, в переменную --c. */
.fd-cmp--blue{--c:var(--blue)}.fd-cmp--coral{--c:var(--coral)}.fd-cmp--yellow{--c:var(--yellow)}
.fd-cmp--green{--c:var(--green)}.fd-cmp--orange{--c:var(--orange)}.fd-cmp--purple{--c:var(--purple)}
.fd-cmp--red{--c:var(--red)}.fd-cmp--gray{--c:hsl(var(--muted-fg))}.fd-cmp--white{--c:hsl(var(--border))}
/* Сравнение: две колонки + опц. иконка-разделитель */
.fd-cmp{margin:1.5em 0}
.fd-cmp__title{font-family:var(--font-display);font-weight:600;font-size:1.05rem;margin-bottom:.9rem;color:hsl(var(--foreground))}
.fd-cmp__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:stretch}
.fd-cmp__grid--div{grid-template-columns:1fr auto 1fr;gap:.75rem}
.fd-cmp__panel{--u:var(--c);border:1px solid var(--c);background:hsl(var(--card));padding:1.25rem 1.4rem}
.fd-cmp__head{font-family:var(--font-mono);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c);margin-bottom:.8rem}
.fd-cmp__body{font-size:.95rem;line-height:1.6;color:hsl(var(--foreground) / .85)}
.fd-cmp__body :first-child{margin-top:0}.fd-cmp__body :last-child{margin-bottom:0}
.fd-cmp__body p{margin:0 0 .5em}
/* disc/decimal ТОЛЬКО для списков без кастомного маркера RTE (data-bullet/data-num) —
   иначе у списков-галочек/кружков дублируется маркер (FD-857). */
.fd-cmp__body ul:not([data-bullet]){list-style:disc;padding-left:1.2em}
.fd-cmp__body ol:not([data-num]){list-style:decimal;padding-left:1.2em}
.fd-cmp__body ul,.fd-cmp__body ol{margin:0 0 .5em}
.fd-cmp__body li{margin:.35em 0}.fd-cmp__body li::marker{color:var(--c)}
.fd-cmp__divider{display:flex;align-items:center;justify-content:center;color:hsl(var(--muted-fg))}
.fd-cmp__divider svg{width:1.5rem;height:1.5rem}
@media(max-width:720px){.fd-cmp__grid,.fd-cmp__grid--div{grid-template-columns:1fr}.fd-cmp__divider{transform:rotate(90deg)}}
/* Список вопросов: акцентный заголовок-метка (как у универсального блока/«Сравнения»,
   fd-universal__label / fd-cmp__head) + карточки-вопросы */
.fd-qlist{margin:1.5em 0}
.fd-qlist__title{font-family:var(--font-mono);font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c);margin-bottom:1rem}
.fd-qlist__items{display:flex;flex-direction:column;gap:.7rem}
.fd-qlist__item{display:flex;gap:.6rem;align-items:flex-start;border:1px solid hsl(var(--border));background:hsl(var(--card));padding:.9rem 1.1rem}
.fd-qlist__mark{font-family:var(--font-display);font-size:1.4rem;line-height:1;color:var(--c);flex-shrink:0}
.fd-qlist__q{font-size:1rem;line-height:1.6;color:hsl(var(--foreground) / .9);padding-top:.15rem}

/* FD-824 · разметчик: маркер ручной границы шага и индикатор авто-деления по заголовкам. */
.fd-step-marker{margin:1.25rem 0;border-top:1px dashed hsl(var(--border));padding-top:.4rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--muted-fg))}
.fd-step-hint{display:flex;align-items:center;gap:.6rem;margin:1.6rem 0 .4rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--muted-fg) / .8)}
.fd-step-hint::before,.fd-step-hint::after{content:"";flex:1;height:0;border-top:1px dashed hsl(var(--border))}