/* Компоненты: кнопки, карточки, плашки-вопросы, шаги, заглушки, анимации. */

/* ═══ ШРИФТЫ (DESIGN.md §5) ═══
   Три слота, больше не будет: текстовый, заголовочный, второй ярус.
   Имена слотов — в tokens.css (--font-main, --font-display, --font-script),
   здесь только сами файлы.

   Всё своё, в assets/fonts/, только WOFF2 и только с кириллицей: Google Fonts
   на боевых страницах не остаётся. Все три лицензированы по SIL OFL.

   Сабсет один на все: латиница, кириллица, тире и кавычки, № и стрелки —
   ровно то, что встречается на страницах. Полные исходники в проект не кладём:
   Fira весит 517 КБ в TTF против 40 КБ здесь.

   font-display: swap — текст виден системным шрифтом сразу и перерисовывается,
   когда файл доедет. Без него первые полсекунды страница пустая. */

/* Текстовый слот. Два начертания, как велит закон: обычное и жирное.
   На страницах есть font-weight 500 и 600 — браузер сведёт их к этим двум,
   своего файла у них нет и не будет. */
@font-face {
  font-family: 'Golos Text';
  src: url('../fonts/golos-text-400.woff2?v=5aff4efd') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Golos Text';
  src: url('../fonts/golos-text-700.woff2?v=2487f5fb') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Заголовочный слот. Fira Sans Extra Condensed Black — начертание одно,
   вес 900. Сжимается по горизонтали до 70% там, где стоит крупно:
   настолько узкого бесплатного шрифта у нас нет. Никогда в кнопках и абзацах. */
@font-face {
  font-family: 'FiraXC';
  src: url('../fonts/fira-extracond-black.woff2?v=208cb897') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Второй ярус — слово поверх заголовка, точечно. Никогда в кнопках,
   полях ввода, правилах и длинных абзацах. */
@font-face {
  font-family: 'Mavka';
  src: url('../fonts/sweet-mavka.woff2?v=99c95066') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Кнопки — высота от 48 px, без градиентов (закон дизайн-системы).

   ГЛАВНАЯ РОЛЬ, таблица состояний из docs/задание_объём_и_состояния.md.
   Объём собирается ЧЕТЫРЬМЯ слоями, и каждый за своё:
   1) inset сверху — верхняя кромка ловит свет (свет один на весь сайт,
      слева сверху, поэтому тени уходят вправо-вниз);
   2) inset снизу — нижний срез в собственной тени, отсюда толщина;
   3) короткая плотная тень — контакт с бумагой;
   4) широкая мягкая — воздух под предметом.
   Одной тенью объёма не бывает: ровно поэтому он раньше изобретался инлайном
   на каждой странице и выходил всюду разный.

   Числа берутся из --shade-terra и --lit, своих не заводим (закон №35).
   До 14.08.2026 кнопка была плоской заливкой без единой тени. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
  border: none;
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: var(--surface);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 var(--lit),
    inset 0 -2px 0 rgba(var(--shade-terra), .34),
    1px 2px 3px rgba(var(--shade-terra), .24),
    2px 8px 16px -4px rgba(var(--shade-terra), .34);
  transition: background 0.18s ease, transform 0.18s ease,
    box-shadow 0.18s ease;
}

/* Наведение НЕ осветляет заливку: кремовый на terra-400 даёт 4,17:1 при норме
   4,5:1 (проверка контраста 03.08.2026). На цветной заливке наведение — это
   подъём, а смена цвета остаётся нажатию: оно идёт ВНИЗ по ряду, и контраст
   там только растёт. */
.btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 var(--lit),
    inset 0 -2px 0 rgba(var(--shade-terra), .34),
    1px 3px 4px rgba(var(--shade-terra), .24),
    3px 12px 24px -5px rgba(var(--shade-terra), .38);
}

.btn:active {
  background: var(--terra-600);
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(var(--shade-terra), .40),
    0 1px 2px rgba(var(--shade-terra), .20);
}

/* Ободок фокуса кладём ПОВЕРХ покоя, а не вместо него: системный outline
   терракотовым по терракоте даёт 1,4:1 и с клавиатуры теряется. */
.btn:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 var(--lit),
    inset 0 -2px 0 rgba(var(--shade-terra), .34),
    1px 2px 3px rgba(var(--shade-terra), .24),
    2px 8px 16px -4px rgba(var(--shade-terra), .34),
    var(--ring);
}

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent-light);
}

.btn-secondary:hover {
  background: var(--surface-warm);
  color: var(--accent-deep);
}

/* Карточка */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--s-5);
  box-shadow: var(--shadow-soft);
}

/* Плашка-вопрос: человек видит свой вопрос, жмёт — попадает в блок */
.q-grid {
  display: grid;
  gap: var(--s-3);
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
}

.q-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease,
    transform 0.18s ease;
}

.q-btn::after {
  content: '›';
  color: var(--accent-light);
  font-size: 24px;
  line-height: 1;
}

.q-btn:hover {
  background: var(--surface-warm);
  border-color: var(--accent-light);
}

.q-btn:active {
  transform: scale(0.99);
}

/* Нумерованные шаги с терракотовыми кружками */
.step-list {
  list-style: none;
  counter-reset: step;
  margin: 0 0 var(--s-5);
  padding: 0;
}

.step-list li {
  counter-increment: step;
  position: relative;
  padding-left: var(--s-7);
  margin-bottom: var(--s-4);
  color: var(--text-soft);
}

.step-list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--surface);
  border-radius: 50%;
  font-weight: 700;
  font-size: 15px;
}

/* Заглушка под будущий скрин из бота */
.placeholder-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: var(--surface-warm);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-card);
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  padding: var(--s-4);
  margin-bottom: var(--s-5);
}

/* Тихая кнопка — роль «Тихая» из DESIGN.md §4: без фона и теней, текст
   terra-600, на наведение подложка terra-50. Ставится рядом с главной, когда
   второе действие не должно с ней спорить. Жила в инструкции, стала общей
   19.10.2026, когда рядом с кнопкой бота понадобилась на главной и в честности. */
.tihaya {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border-radius: 999px;
  background: transparent;
  color: var(--terra-600);
  font: 600 15px/1.2 var(--font-main);
  text-decoration: none;
  transition: background .18s ease;
}

.tihaya:hover { background: var(--terra-50); color: var(--terra-700); }
.tihaya:active { background: var(--terra-100); }
.tihaya:focus-visible { outline: none; box-shadow: var(--ring); }
.tihaya[hidden] { display: none; }

/* Раскрывающиеся блоки (FAQ, слой 2 честности) */
details.faq {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  margin-bottom: var(--s-3);
  padding: 0;
}

details.faq summary {
  cursor: pointer;
  padding: var(--s-4) var(--s-5);
  font-weight: 600;
  min-height: 48px;
  list-style-position: inside;
}

details.faq[open] {
  background: var(--surface-warm);
}

details.faq .faq-body {
  padding: 0 var(--s-5) var(--s-4);
}

/* Появление при прокрутке. Прячем блоки ТОЛЬКО при работающем JS:
   класс js на <html> ставит animate.js. Без JS и при «уменьшить движение»
   блоки просто видны — страница читается целиком. */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

html.js .reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .q-btn,
  .tihaya {
    transition: none;
  }
}

/* Подвал — один на всех боевых страницах (00_ЗАДАНИЕ юриста, (б) 7).
   Тёмный подвал главной по макету; переехал сюда из index.html 19.10.2026,
   когда стал общим. Колонки на телефоне идут подряд, шире — в три ряда.
   Светлый .site-footer в base.css остался только у песочницы lab/. */
.podval {
  background: var(--ink-900);
  color: var(--surface);
  padding-top: var(--s-7);
  padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
}

.podval__ryad {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: start;
  text-align: left;
}

.podval p {
  margin: 0 0 var(--s-2);
  color: var(--bg);
  font-size: 16px;
}

.podval .podval__imya {
  color: var(--surface);
  font-weight: 700;
  font-size: 20px;
}

.podval__zagolovok {
  margin: 0 0 var(--s-2);
  color: var(--surface);
  font: 700 16px/1.5 var(--font-main);
}

.podval__dok {
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.podval__dok a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bg);
  font-size: 16px;
  line-height: 1.4;
  text-underline-offset: 5px;
}

/* Строка владельца: имя, статус, ИНН, город, почта, документы, 18+. */
.podval .podval__hvost {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--text-muted);
  font-size: 14px;
  text-align: left;
}

.podval__hvost a {
  color: inherit;
  text-underline-offset: 3px;
}

@media (min-width: 690px) {
  .podval__ryad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}