/* Герой сайта (правка 494): фигура в рост или лицо и облачко реплики — один компонент для всех мест.
   Значения — только из tokens.css. Место под картинку задано заранее: высота здесь, пропорция — у <img> (width/height),
   поэтому вёрстка не прыгает. Рост фигуры не больше 35 % высоты экрана (правило 494.5). Облачко стоит в потоке рядом
   с героем — не накрывает поля ввода и кнопки и не выходит за экран (перенос слов внутри). */
.hero { display: flex; align-items: flex-end; gap: var(--sp-2); max-width: 100%; margin: var(--sp-3) 0; animation: hero-in 0.4s ease-out both; }
/* 523: сторона облачка — от головы; не поместилось по эту сторону — hero.js ставит is-flipped, и облачко по другую. */
.hero[data-side="right"]:not(.is-flipped), .hero[data-side="left"].is-flipped { flex-direction: row-reverse; }
.hero.is-face, .hero.is-full { align-items: flex-start; }
.hero-figure { display: block; flex: none; }
.hero-figure picture, .hero-figure img { display: block; height: 100%; width: auto; }
.hero-full-lg { height: min(var(--hero-lg), 35svh); aspect-ratio: 4 / 5; }
.hero-full-md { height: min(var(--hero-md), 35svh); aspect-ratio: 4 / 5; }
.hero-full-sm { height: min(var(--hero-sm), 30svh); aspect-ratio: 4 / 5; }
.hero-full-tall { height: var(--hero-tall); aspect-ratio: 4 / 5; }  /* 656: в рост — от 320 px, только там, где есть место */
/* 662: окно с обрезом по низу (crop: bottom). Фигура в рост прижата к верху окна и выше его в --hero-zoom раз: окно режет
   низ фигуры, лицо и руки видны (663: --hero-shift — картинка поднята над верхом окна на эту долю своей высоты). Высоту окна задаёт блок-хозяин (--hero-window-h); не задал — она от ширины блока-контейнера.
   Ширина — --hero-window-w или по пропорции картинки, но не шире блока: в узком блоке окно уже, фигура остаётся по центру. */
.hero-figure.is-window { position: relative; overflow: hidden; height: var(--hero-window-h, clamp(var(--hero-sm), 45cqw, var(--hero-tall)));
  width: var(--hero-window-w, auto); max-width: 100%; aspect-ratio: var(--hero-window-ratio); }
.hero-figure.is-window picture { display: contents; }
.hero-figure.is-window img { position: absolute; left: 50%; top: calc(-100% * var(--hero-zoom) * var(--hero-shift, 0)); height: calc(100% * var(--hero-zoom)); width: auto; max-width: none; transform: translateX(-50%); }
.hero-face-48 { height: var(--hero-face-sm); aspect-ratio: 1; }
.hero-face-64 { height: var(--hero-face-md); aspect-ratio: 1; }
.hero-face-96 { height: var(--hero-face-lg); aspect-ratio: 1; }
.hero-talk { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 0; max-width: min(34ch, 100%); }
.hero[data-side="right"]:not(.is-flipped) .hero-talk, .hero[data-side="left"].is-flipped .hero-talk { align-items: flex-end; }
.hero-bubble { position: relative; margin: 0; padding: var(--sp-2) var(--sp-4); border: 2px solid var(--bubble-line); border-radius: var(--r-panel);
  background: var(--bubble); color: var(--bubble-ink); font-family: var(--font-hand); font-size: var(--fs-22); line-height: 1.15; overflow-wrap: anywhere; }
/* Хвостик (527) — клин от облачка к голове: SVG .hero-tail рисует hero_place.js в координатах своего героя (или колонки Пифы на
   главной). Заливка — цвет облачка (закрывает рамку у основания), обводка — цвет рамки; облачко с зазором от контура героя. */
.hero { position: relative; }
.hero-bubble { z-index: 1; }
.hero-tail { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 2; }
.hero-tail .tail-fill { fill: var(--bubble); stroke: none; }
.hero-tail .tail-line { fill: none; stroke: var(--bubble-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hero-talk .btn { min-height: var(--control-h); }
@keyframes hero-in { from { opacity: 0; transform: translateY(var(--sp-1)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero { animation: none; } }
@media (max-width: 700px) {
  .hero { gap: var(--sp-1); }
  .hero-bubble { font-size: var(--fs-20); padding: var(--sp-2) var(--sp-3); }
}

/* ---------- Места на страницах (правка 495) ----------
   Герой всегда в потоке рядом со своим местом: у заголовка карточки, у заголовка блока, после итога — поэтому не
   накрывает поля, кнопки и чертёж. На телефоне фигура в карточке меньше (--hero-xs), лицо остаётся своего размера. */
.lh-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.lh-head > h3 { flex: 1 1 auto; min-width: 0; }
.lh-head > .hero { margin: 0; flex: none; }
.lh-reaction .hero { margin: var(--sp-3) 0 0; }
.guide-block-heading > .hero { margin: 0 0 0 auto; }
.guide-block-heading:has(> .hero) h2 { min-width: 0; overflow-wrap: anywhere; }
.guide-block-heading > .hero[data-side="left"] { order: -1; margin: 0; }  /* показывающая поза — слева, рукой к заголовку */
.guide-block-heading:has(> .hero.is-full) { align-items: flex-end; }
.hero-stage > .hero { margin: 0 0 var(--sp-3); }
.hero-bubble p { margin: 0; }
.msg.lh-empty { background: transparent; border: 0; color: var(--ink); padding: 0; }
/* 501: после неверного ответа Пифа не рисует своей кнопки — подсвечивается кнопка подсказки карточки */
.btn.is-suggested { border-color: var(--accent); color: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 560px) {
  .lh-head .hero-full-sm, .lh-reaction .hero-full-sm, .guide-block-heading .hero-full-sm, .guide-block-heading .hero-full-md { height: min(var(--hero-xs), 22svh); }
  .lh-head .hero-face-64 { height: var(--hero-face-sm); }  /* 501: на телефоне у условия задачи — лицо 48 */
}

/* Решалка (правка 495): ожидание — Пифа в карточке, где нажали; сбой — фигура слева от сообщения и «Повторить»;
   лицо у кнопки подсказки — в ряду кнопок, по центру строки. */
.solver-hero .hero { margin: var(--sp-2) 0; }
.solver-failure { display: flex; align-items: flex-end; gap: var(--sp-3); }
.solver-failure > .solver-hero .hero { margin: var(--sp-2) 0 0; }
.solver-failure-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.solver-failure-text .msg { align-self: stretch; }
.solver-hint-hero { display: inline-flex; align-self: center; }
body.status-in-hero #status { display: none; }
.hero-status { margin: 0; color: var(--ink2); font-size: var(--fs-14); }
.solver-hint-hero .hero { margin: 0; }

/* Тренажёры и пробник (правка 495): лицо справа от заголовка карточки; итог пробника — фигура с репликой. */
.trainer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.trainer-head > .card-title { min-width: 0; }
.trainer-hero .hero, .node-hero .hero { margin: 0; }
.trainer-result .hero { margin: var(--sp-2) 0 var(--sp-4); }
/* Карточка справочника: лицо справа от заголовка; «урок скоро будет» — задумчивое лицо с облачком по центру. */
.lesson-heading:has(> .node-hero) { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.lesson-heading > div:first-child { min-width: 0; }
.node-soon-hero { display: flex; justify-content: center; margin-top: var(--sp-5); }
.node-soon-hero .hero { margin: 0; }
/* Черновик: уже 1024 px — лицо в строке задач (лист важнее), шире — фигура с инструментом в колонке настроек.
   Форма меняется, персонаж остаётся на экране при любой ширине. */
.sk-hero .hero { margin: 0; }
.sk-hero-full { display: none; }
.sk-hero-full .hero { margin-top: var(--sp-4); justify-content: center; }
@media (min-width: 1024px) {
  .sk-hero-face { display: none; }
  .sk-hero-full:not([hidden]) { display: block; }
}
/* Страница 404: лицо Пифы над заголовком, карточка по центру. */

.not-found-card { text-align: left; }
.not-found-hero .hero { margin: 0 0 var(--sp-3); }
.not-found-hero .hero { justify-content: center; }
/* Самые узкие телефоны: у «Зачем» фигура поменьше — облачку остаётся место на строку, а не на слово. */
@media (max-width: 400px) {
  .hero-stage > .hero .hero-full-md { height: min(var(--hero-sm), 30svh); }
}
/* Мини-итог тренажёра (правка 501): строка счёта под облачком. */
.trainer-batch-note { margin: 0; color: var(--ink2); font-size: var(--fs-14); }

/* ---------- Расстановка по правилу (правки 656, 657; docs/design/hero_layout.md) ----------
   Фигурка всегда прикреплена к блоку: сидит в «сиденье» (.hero-seat) внутри плашки или карточки (.has-hero), пузырь — над
   головой и касается фигурки хвостиком, оба в одном контейнере с блоком. На телефоне и в узком блоке вместо позы —
   значок-голова в строке реплики, в углу той же плашки: решает ширина самого блока (@container), а не только экрана, —
   текст рядом с бюстом не сжимается в столбик. Пустого места под фигурку нет: сиденье не шире фигурки и её пузыря. */
.hero.hero-phone { display: none; }
@media (max-width: 700px) {
  .hero.hero-wide { display: none; }
  .hero.hero-phone { display: flex; align-items: center; }
}
.has-hero { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-4); container: seat / inline-size; }
.hero-headrow.has-hero { container-name: headseat; }
.has-hero > :not(.hero-seat):not(.trap-icon):not(.sticker-icon) { flex: 1 1 0; min-width: 0; }  /* значок плашки и её текст — в одной строке */
.hero-seat { flex: none; align-self: flex-end; display: flex; justify-content: center; }
.hero.is-seat.hero-wide, .hero.is-seat.is-face:not(.hero-phone) { flex-direction: column-reverse; align-items: center; gap: var(--sp-3); margin: 0; }
.hero.is-seat .hero-talk { align-items: center; max-width: 15ch; }
.hero.is-seat .hero-bubble { text-align: center; }
.hero.is-seat .hero-bubble::after { content: ""; position: absolute; left: 50%; bottom: calc(-1 * var(--sp-2) - 1px); width: var(--sp-3); height: var(--sp-3);
  background: var(--bubble); border-right: 2px solid var(--bubble-line); border-bottom: 2px solid var(--bubble-line); transform: translateX(-50%) rotate(45deg); }
.trap.has-hero { padding-bottom: 0; }
.trap.has-hero > div:not(.hero-seat) { padding-bottom: var(--sp-4); }
.guide-finish-wrap.has-hero { align-items: flex-end; margin-top: var(--sp-6); }
.guide-finish-wrap.has-hero > .guide-finish { margin-top: 0; align-self: stretch; }
.hero-headrow.has-hero { align-items: flex-end; margin: 0 0 var(--sp-5); }
.hero-headrow.has-hero > .guide-purpose { margin-bottom: 0; }
/* Узкий вид — три раза одно и то же: телефон (и браузеры без @container), узкая плашка или карточка итога (до 480 px —
   рядом с бюстом и пузырём тексту осталось бы меньше 230 px), узкая шапка раздела (до 420 px). */
@media (max-width: 700px) {
  .has-hero > .hero-seat { order: -1; flex: 1 1 100%; align-self: auto; justify-content: flex-start; }
  .hero.is-seat.hero-wide { display: none; }
  .hero.is-seat.hero-phone { display: flex; flex-direction: row; align-items: center; gap: var(--sp-3); margin: 0; }
  .hero.is-seat .hero-talk { align-items: flex-start; max-width: none; }
  .hero.is-seat .hero-bubble { text-align: left; }
  .hero.is-seat.hero-phone .hero-bubble::after { left: calc(-1 * var(--sp-2) - 1px); top: 50%; bottom: auto; border: 0; border-left: 2px solid var(--bubble-line); border-bottom: 2px solid var(--bubble-line); transform: translateY(-50%) rotate(45deg); }
  .guide-finish-wrap.has-hero > .guide-finish { flex: 1 1 100%; }
  .hero-headrow.has-hero > .hero-seat:not(:has(.hero-bubble)) { flex: none; align-self: flex-start; }  /* без реплики — голова слева от текста «зачем» */
  .hero-headrow.has-hero .hero-phone .hero-face-64 { height: var(--hero-face-sm); }
}
@container seat (max-width: 480px) {
  .has-hero > .hero-seat { order: -1; flex: 1 1 100%; align-self: auto; justify-content: flex-start; }
  .hero.is-seat.hero-wide { display: none; }
  .hero.is-seat.hero-phone { display: flex; flex-direction: row; align-items: center; gap: var(--sp-3); margin: 0; }
  .hero.is-seat .hero-talk { align-items: flex-start; max-width: none; }
  .hero.is-seat .hero-bubble { text-align: left; }
  .hero.is-seat.hero-phone .hero-bubble::after { left: calc(-1 * var(--sp-2) - 1px); top: 50%; bottom: auto; border: 0; border-left: 2px solid var(--bubble-line); border-bottom: 2px solid var(--bubble-line); transform: translateY(-50%) rotate(45deg); }
  .guide-finish-wrap.has-hero > .guide-finish { flex: 1 1 100%; }
  .hero-headrow.has-hero > .hero-seat:not(:has(.hero-bubble)) { flex: none; align-self: flex-start; }  /* без реплики — голова слева от текста «зачем» */
  .hero-headrow.has-hero .hero-phone .hero-face-64 { height: var(--hero-face-sm); }
}
@container headseat (max-width: 420px) {
  .has-hero > .hero-seat { order: -1; flex: 1 1 100%; align-self: auto; justify-content: flex-start; }
  .hero.is-seat.hero-wide { display: none; }
  .hero.is-seat.hero-phone { display: flex; flex-direction: row; align-items: center; gap: var(--sp-3); margin: 0; }
  .hero.is-seat .hero-talk { align-items: flex-start; max-width: none; }
  .hero.is-seat .hero-bubble { text-align: left; }
  .hero.is-seat.hero-phone .hero-bubble::after { left: calc(-1 * var(--sp-2) - 1px); top: 50%; bottom: auto; border: 0; border-left: 2px solid var(--bubble-line); border-bottom: 2px solid var(--bubble-line); transform: translateY(-50%) rotate(45deg); }
  .guide-finish-wrap.has-hero > .guide-finish { flex: 1 1 100%; }
  .hero-headrow.has-hero > .hero-seat:not(:has(.hero-bubble)) { flex: none; align-self: flex-start; }  /* без реплики — голова слева от текста «зачем» */
  .hero-headrow.has-hero .hero-phone .hero-face-64 { height: var(--hero-face-sm); }
}
/* 656: пузырь сбоку от бюста (строка задания «Как чертить») — высота блока равна фигурке, пустоты под текстом нет */
.hero.is-seat.is-beside.hero-wide { flex-direction: row-reverse; align-items: center; gap: var(--sp-4); }
.hero.is-seat.is-beside .hero-talk { max-width: 30ch; }
.hero.is-seat.is-beside .hero-bubble { text-align: left; }
.hero.is-seat.is-beside.hero-wide .hero-bubble::after { left: auto; right: calc(-1 * var(--sp-2) - 1px); top: 50%; bottom: auto; border: 0; border-right: 2px solid var(--bubble-line);
  border-top: 2px solid var(--bubble-line); transform: translateY(-50%) rotate(45deg); }