/* ═══════════════════════════════════════════════════════════════════
   Подари Песню — дизайн-система «Плакат» (швейцарский брутализм)
   Извлечено из макетов site/_a3.html (экран апки) и site/_a5.html (лендинг).
   Правила: прямые углы, жёсткая сетка, плоские цвета, один акцент (красный),
   тонкие линии, без эффектов. Имена классов — контракт для JS апки.
   ═══════════════════════════════════════════════════════════════════ */

/* ── токены + база ─────────────────────────────────────────────────── */
:root{
  --bg:#FFFFFF;
  --ink:#0A0A0A;
  --accent:#FF3B21;
  --line:#E5E5E5;
  --muted:#6B6B6B;
  --font:'Inter Tight',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,textarea,a.btn{border-radius:0}
img,svg{max-width:100%;height:auto}

/* доп. токены, используемые перенесёнными компонентами */
:root{
  --dim:#9E9E9E;   /* приглушённый текст на тёмном (инверт-строки, тёмная плашка) */
  --rp:16px;       /* внутренний горизонтальный ритм; ужимается на телефоне */
}

/* доп. база (сброс из макетов, вне предписанного блока) */
html{-webkit-text-size-adjust:100%}
body{-moz-osx-font-smoothing:grayscale}
button{font:inherit;color:inherit;background:none;border:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none}
input,textarea{font:inherit;color:inherit;margin:0;-webkit-appearance:none;appearance:none}
a{color:inherit;text-decoration:none}
svg{display:block}
h1,h2,h3,p,ol,ul,figure,figcaption{margin:0;padding:0}
li{list-style:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── контейнер ─────────────────────────────────────────────────────── */
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}

/* Колонка апки заметно уже лендинга. На широком экране строки растягивались на
   1120px, и подпись справа улетала от названия через пустоту — список читался
   как таблица, а не как выбор. Здесь нужна ширина текста, а не плаката. */
.wrap-app{max-width:760px}

/* Заголовок в апке масштабируется от ОКНА, а колонка узкая — на широком экране
   выходило 116px в колонке 680px: шесть букв в строку и полное несоответствие
   размеру остального. Здесь потолок под колонку, а не под экран. */
.wrap-app .h-poster{font-size:clamp(2.4rem,6vw,4rem)}
.wrap-app .lead{max-width:none}

/* ── шапка ─────────────────────────────────────────────────────────── */
.hdr{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0 16px;border-bottom:1px solid var(--ink);
}
.logo{
  display:flex;align-items:center;gap:10px;flex:none;
  font-size:15px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
}
.logo i{display:block;width:10px;height:10px;background:var(--ink);flex:none}
.meta{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}

/* ── индикатор шага «шаг N из 5» ───────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:12px}
.steps li{list-style:none}
.steps i{display:block;height:6px;background:var(--line)}
.steps span{
  display:block;margin-top:8px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.steps .on i{background:var(--accent)}
.steps .on span{color:var(--ink)}

/* ── плакатный заголовок ───────────────────────────────────────────── */
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
}
.h-poster{
  /* Нижняя граница была 3.4rem и на узких экранах побеждала vw-часть: кегль
     оставался 54px, а длинные слова («РАССКАЖИТЕ», «НАСТРОЕНИЕ») не влезали
     в колонку и выносили страницу за экран. Пол опущен так, чтобы самое
     длинное слово помещалось уже на 360px. */
  font-size:clamp(2.7rem,11.5vw,7.25rem);
  line-height:.97;               /* НЕ ниже 0.97: хвост кириллической «Д» в Inter Tight Black */
  letter-spacing:-.032em;
  font-weight:900;
  text-transform:uppercase;
  overflow-wrap:break-word;      /* страховка: слово любой длины не вылезет из колонки */
}
.h-poster .q{color:var(--accent)}
.h-poster.is-hero{font-size:clamp(2.5rem,13vw,10.5rem)}   /* крупный вариант для лендинга */

.lead{font-size:19px;line-height:1.4;max-width:40ch}

/* ── заголовок секции / колонки ────────────────────────────────────── */
.sechead{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:0 var(--rp) 18px;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.sechead span{color:var(--muted)}

/* ── список нумерованных строк выбора ──────────────────────────────── */
.rows{border-top:1px solid var(--ink)}
.row{
  display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto;
  align-items:baseline;gap:0 16px;
  width:100%;text-align:left;
  padding:20px var(--rp);
  border-bottom:1px solid var(--line);
  background:var(--bg);color:var(--ink);
}
.row:last-child{border-bottom-color:var(--ink)}
.n{
  font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.t{font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.15}
.d{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-align:right;white-space:nowrap;
}
.row:hover{background:#F5F5F5}
.row:hover .n{color:var(--accent)}
/* выбранная строка инвертируется (чёрный фон, светлый текст, красный номер) */
.row.is-on,.row[aria-checked="true"]{background:var(--ink);color:var(--bg);border-bottom-color:var(--ink)}
.row.is-on .n,.row[aria-checked="true"] .n{color:var(--accent)}
.row.is-on .d,.row[aria-checked="true"] .d{color:var(--dim)}

/* Множественный выбор инвертировать НЕЛЬЗЯ. Строки идут вплотную, и несколько
   выбранных подряд сливаются в сплошную чёрную плиту — это читается как сбой
   отрисовки, а не как «отмечено шесть». Здесь отметка другая: строка остаётся
   светлой, слева появляется красная полоса, номер краснеет. Так видно и одну
   отметку, и все шесть. */
.rows[data-multi] .row.is-on{
  background:var(--bg);color:var(--ink);
  border-bottom-color:var(--line);
  box-shadow:inset 4px 0 0 var(--accent);
}
.rows[data-multi] .row.is-on .n{color:var(--accent)}
.rows[data-multi] .row.is-on .t{font-weight:700}
.rows[data-multi] .row.is-on .d{color:var(--muted)}

/* Блоки одного шага (настроение / голос) не должны слипаться. */
.rows + .sechead{padding-top:34px}

/* ── кнопки ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:20px;
  width:100%;min-height:60px;padding:0 var(--rp);
  background:var(--bg);color:var(--ink);border:2px solid var(--ink);
  font-size:17px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
}
.btn:hover{background:var(--ink);color:var(--bg)}
/* Стрелке нужен явный размер: flex:none фиксирует базис, но SVG без width/height
   по умолчанию занимает 100% ширины контейнера и выносит страницу за экран. */
.btn svg{flex:none;width:30px;height:12px}
.btn-xl svg{width:44px;height:16px}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#FFFFFF;min-height:64px}
.btn-accent:hover{background:var(--ink);border-color:var(--ink);color:#FFFFFF}

/* ── навигация «Назад / Дальше» ────────────────────────────────────── */
/* Перенос обязателен: пара длинных подписей («Оплатить 100 ₽» + «Назад к тексту»)
   в одну строку на телефоне не влезает и выносит страницу за экран. Если не
   помещаются — вторая кнопка уезжает на свою строку и растягивается на всю ширину. */
.nav{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.nav>.btn{width:auto;flex:1 1 auto}

/* ── поля ввода ────────────────────────────────────────────────────── */
.field{
  display:block;width:100%;
  font-size:16px;                 /* 16px обязательно: иначе iOS зумит при фокусе */
  font-weight:500;line-height:1.4;
  padding:14px var(--rp);
  background:var(--bg);color:var(--ink);border:2px solid var(--ink);
}
.field::placeholder{color:#A6A6A6;font-weight:400}
.field:focus{border-color:var(--accent)}
textarea.field{min-height:132px;line-height:1.5;resize:vertical}

.hint{margin-top:8px;font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.04em;color:var(--muted)}
.hint.is-error{color:var(--accent)}

/* ── плеер ─────────────────────────────────────────────────────────── */
.player{border:2px solid var(--ink);background:var(--bg);min-width:0}
.p-head{padding:18px var(--rp);border-bottom:1px solid var(--ink)}
.p-title{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.p-sub{
  margin-top:9px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.p-body{display:flex;align-items:center;gap:16px;padding:16px var(--rp);border-bottom:1px solid var(--ink)}
.play{
  width:56px;height:56px;flex:none;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.play svg{width:15px;height:18px;fill:#FFFFFF}
.play:hover{background:var(--accent)}
.wave{flex:1 1 auto;min-width:0;height:56px}
.wave svg{width:100%;height:100%}
.wave .p{fill:var(--accent)}   /* сыгранная часть волны */
.wave .u{fill:var(--ink)}      /* несыгранная часть волны */
.p-foot{padding:16px var(--rp) 18px}
.times{
  margin-top:12px;
  font-size:12px;font-weight:600;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;color:var(--muted);
}
.times b{color:var(--ink);font-weight:700}

/* полоса прогресса (ширину заполнения задаёт JS: .progress i {width:%}) */
.progress{position:relative;height:3px;background:var(--line)}
.progress i{position:absolute;left:0;top:0;display:block;height:3px;width:0;background:var(--accent)}

/* Сводка выбранного перед генерацией. Строки кликабельны — возвращают на шаг,
   чтобы поправить ошибку до траты генерации, а не после. */
.summary{display:flex;flex-wrap:wrap;gap:8px;margin:0 var(--rp) 20px}
.chip{
  min-height:44px;padding:0 14px;
  display:inline-flex;align-items:center;
  border:1px solid var(--line);background:var(--bg);color:var(--muted);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}

/* Поле «своими словами» — не одинокая коробка под списком, а понятная
   альтернатива выбору. Подпись над ним объясняет, что это, а не заставляет
   догадываться по placeholder. */
.own-label{
  margin:22px var(--rp) 8px;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.field.own{margin-top:0}

/* ── ожидание: живой эквалайзер ────────────────────────────────────── */
/* Экран ожидания стоял мёртвым текстом по минуте и дольше, и человек решал,
   что всё зависло. Полосы намеренно НЕ изображают проценты: врать о степени
   готовности нельзя, а движение и идущее время честно показывают работу. */
.eq{display:flex;align-items:flex-end;gap:6px;height:88px;margin:4px 0 26px}
.eq i{
  display:block;flex:none;width:10px;height:100%;
  background:var(--ink);transform-origin:bottom;
  animation:eq 1.05s ease-in-out infinite alternate;
}
.eq i:nth-child(3n){background:var(--accent)}
.eq i:nth-child(1){animation-delay:-.90s}
.eq i:nth-child(2){animation-delay:-.15s}
.eq i:nth-child(3){animation-delay:-.60s}
.eq i:nth-child(4){animation-delay:-.30s}
.eq i:nth-child(5){animation-delay:-.75s}
.eq i:nth-child(6){animation-delay:-.05s}
.eq i:nth-child(7){animation-delay:-.45s}
.eq i:nth-child(8){animation-delay:-.85s}
.eq i:nth-child(9){animation-delay:-.20s}
@keyframes eq{from{transform:scaleY(.16)}to{transform:scaleY(1)}}

/* Уважаем системную настройку «меньше движения» — иначе людей с этим
   требованием буквально укачивает. */
@media (prefers-reduced-motion:reduce){
  .eq i{animation:none;transform:scaleY(.55)}
}

.wait-time{
  margin-top:14px;
  font-size:34px;font-weight:900;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;   /* цифры не прыгают при смене секунд */
}

/* Кнопка-ссылка: переключатель режима не должен спорить с главной кнопкой шага. */
.linkish{
  /* Пальцем в строчку 17px не попасть — растягиваем область касания до 44px,
     не раздувая при этом сам текст. */
  display:inline-flex;align-items:center;min-height:44px;
  background:none;border:0;padding:0;
  font:inherit;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.linkish:hover{color:var(--accent)}

/* ── текст песни ───────────────────────────────────────────────────── */
.lyrics{
  white-space:pre-wrap;
  font-size:16px;line-height:1.6;
  padding:20px var(--rp);
  border:2px solid var(--ink);background:var(--bg);
}

/* ── цена ──────────────────────────────────────────────────────────── */
.price{font-size:18px;font-weight:500;line-height:1.35;letter-spacing:-.01em}
.price b{font-weight:800}

/* ── промокод ──────────────────────────────────────────────────────── */
.promo{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
/* min-width:0 — иначе поле не сжимается ниже собственной ширины и вылезает за экран. */
.promo .field{flex:1 1 200px;width:auto;min-width:0}
.promo .btn{flex:0 0 auto;width:auto;padding:0 24px}

/* ── подвал ────────────────────────────────────────────────────────── */
.footer{margin-top:64px;border-top:1px solid var(--ink)}
.footer .links{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 32px;padding:0 var(--rp)}
.footer .links a{
  display:inline-block;padding:14px 0;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.footer .links a:hover{color:var(--accent)}
.footer .legal{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;
  margin-top:14px;padding:16px var(--rp) 0;border-top:1px solid var(--line);
  font-size:12px;line-height:1.5;color:var(--muted);
}
.footer .legal .site{font-weight:700;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}

/* ── адаптив ───────────────────────────────────────────────────────── */
@media (max-width:1020px){
  .wrap{padding:0 28px}
}

@media (max-width:600px){
  :root{--rp:12px}
  .wrap{padding:0 20px}
  .meta{font-size:10px;letter-spacing:.16em}
  .steps span{display:none}
  .lead{font-size:17px}
  .sechead{font-size:10px;letter-spacing:.16em;padding-bottom:16px}
  .row{grid-template-columns:2.6rem minmax(0,1fr);gap:0 12px;padding:16px var(--rp)}
  .t{font-size:18px}
  .d{grid-column:2;margin-top:6px;text-align:left;white-space:normal;font-size:12px;letter-spacing:.12em}
  .btn{min-height:56px;font-size:16px;letter-spacing:.12em}
  .btn-accent{min-height:60px}
  .p-title{font-size:20px}
  .price{font-size:17px}
  .footer{margin-top:48px}
  .footer .links{gap:0 24px}
  .footer .legal{font-size:11px;letter-spacing:0}
}

/* Заметная альтернатива («у меня есть готовый текст», «промокод»). Мелкая
   подчёркнутая ссылка терялась: человек не видел, что у него есть выбор. */
.option{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:60px;margin-top:14px;padding:0 var(--rp);
  background:var(--bg);color:var(--ink);border:1px dashed var(--ink);
  font:inherit;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;text-align:left;
}
.option:hover{border-style:solid;background:#F5F5F5}
.option i{font-style:normal;color:var(--accent);font-size:20px;line-height:1}