/* ============================================================
   KidmaTech — интерактив «Что можно автоматизировать?» и квиз.
   Заведён 22.09.2026 (design/2026-09-22-интерактив-и-квиз-сценарии.md).
   Отдельный файл, а не дописка в styles.css: две большие секции
   главной, которые правятся вместе и независимо от остального сайта.
   Цвета, отступы и скругления — только токенами: тёмная тема
   переопределяет их сама, своих цветов здесь нет.
   Раскладка на логических свойствах (inline-start/end) — иврит и
   арабский зеркалятся браузером, своего зеркала в коде нет.
   ============================================================ */

/* ---------- Общее для обеих секций ---------- */
.automate .lead,
.quiz .lead {
  max-width: var(--content-measure);
}

/* ---------- Интерактив: сетка процессов ---------- */
.au-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-block: var(--space-6) var(--space-5);
}

.au-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: start;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.au-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.au-card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Выбранный процесс: подсвечиваем рамкой и подложкой бренда, а не
   заливкой CTA — лазурным на сайте красятся только кнопки действия. */
/* Выбранная карточка: яркая рамка и подложка бренда. Остальные приглушаются, но
   не настолько, чтобы их нельзя было прочесть — иначе человек, открывший сценарий
   внизу, не понимает, какую тему он нажал (правка Дианы 22.09.2026). */
.au-card.is-on {
  border-color: var(--color-brand);
  border-width: 2px;
  background: var(--color-brand-soft);
  box-shadow: var(--shadow-md);
}

.au-card.is-on .au-card-title { color: var(--color-brand-strong); }

.au-grid.has-choice .au-card:not(.is-on) { opacity: 0.6; }
.au-grid.has-choice .au-card:not(.is-on):hover,
.au-grid.has-choice .au-card:not(.is-on):focus-visible { opacity: 1; }

/* Заголовок открытого сценария: на телефоне панель уезжает ниже всех карточек,
   и по одной подсветке не видно, что именно открыто. */
.au-panel-h {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

/* Подпись над кнопками выбора: без неё «таблетки» не читались как кнопки. */
.au-sub-h {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.au-card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

.au-card-pain {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}

/* ---------- Пояснение обозначений ----------
   Подписано заголовком и разложено списком: без подписи три значка читались как
   обрывок фразы, а на телефоне переносились вразнобой (правка Дианы 22.09.2026). */
.au-legend {
  margin-block-end: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.au-legend-h {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.au-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.au-leg { display: flex; align-items: center; gap: var(--space-2); }

.au-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.au-mark-s { background: var(--color-brand); color: var(--color-on-brand); }
.au-mark-r { background: var(--color-cta); color: var(--color-on-cta); }

/* Значок в кружке рисуем стилями, а не буквой в разметке: буквы «В», «С», «Р»
   словарём не переводятся и на иврите оставались единственным русским текстом
   на странице (поймано приёмкой 22.09.2026). Знаки выбраны не зеркальные —
   стрелка в RTL смотрела бы не туда. */
.au-mark-v::before { content: "\25C9"; }   /* ◉ — действие человека */
.au-mark-s::before { content: "\2699"; }   /* ⚙ — работа системы */
.au-mark-r::before { content: "\2713"; }   /* ✓ — результат */

/* ---------- Панель сценария ---------- */
.au-panel[hidden] { display: none; }

/* Шапка сайта липкая: без этого отступа подведённая к глазам панель сценария
   упирается верхом под шапку и первая строка цепочки прячется. */
.au-panel { scroll-margin-block-start: 5rem; }

.au-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

.au-panel:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Второй уровень выбора: каналы и подопции звонков */
.au-sub[hidden] { display: none; }

.au-sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
}

.au-chip {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.au-chip:hover { border-color: var(--color-brand); }
.au-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.au-chip.is-on {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-on-brand);
}

/* Цепочка шагов.
   ⚠️ [hidden] обязателен явно: у .au-chain задан display, и он сильнее
   браузерного правила для [hidden] — скрытые ветки («написал», «оставил
   заявку», «была встреча») показывались все разом одной простынёй. Нашла
   Диана на снимке 22.09.2026; те же грабли уже были с кнопкой «Показать ещё»
   на главной. */
.au-chain[hidden] { display: none; }

.au-chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.au-chain li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-inline-start: var(--space-1);
  position: relative;
}

/* Линия, связывающая шаги в цепочку. Рисуем псевдоэлементом от кружка
   вниз, у последнего шага её нет. */
.au-chain li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--space-1) + 0.875rem);
  inset-block-start: 1.75rem;
  inline-size: 1px;
  block-size: calc(100% + var(--space-3) - 1.75rem);
  background: var(--color-border-strong);
}

.au-chain li:last-child::before { display: none; }

.au-step {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  max-width: var(--content-measure);
}

.au-chain li[data-kind="r"] .au-step { font-weight: var(--weight-semibold); }

.au-chan b { font-weight: var(--weight-semibold); color: var(--color-brand-strong); }

.au-final[hidden],
.au-for[hidden] { display: none; }

.au-final,
.au-for {
  margin-block-start: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  max-width: var(--content-measure);
}

.au-final { font-weight: var(--weight-semibold); color: var(--color-brand-strong); }

/* Макет карточки CRM — значения демонстрационные */
.au-mock[hidden] { display: none; }

.au-mock {
  margin-block-start: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.au-mock-h {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.au-mock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.au-mock-grid > div { min-width: 0; }
.au-mock-wide { grid-column: 1 / -1; }

.au-mock-grid dt {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.au-mock-grid dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-base);
  color: var(--color-ink);
}

.au-mock-note {
  margin-block-start: var(--space-4);
  margin-block-end: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.au-actions[hidden] { display: none; }

.au-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

/* ---------- Квиз ---------- */
.qz-box {
  margin-block-start: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.qz-top { margin-block-end: var(--space-5); }

.qz-count {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.qz-count span + span { margin-inline-start: 0.35em; }

.qz-bar {
  block-size: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
}

.qz-bar-fill {
  display: block;
  block-size: 100%;
  inline-size: 20%;
  background: var(--color-brand);
  transition: inline-size var(--duration-base) var(--ease-out);
}

.qz-step h3 {
  margin-block: 0 var(--space-2);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.qz-step h4 {
  margin-block: 0 var(--space-2);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.qz-hint {
  margin-block: 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.qz-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.qz-opt {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out);
}

.qz-opt:hover { border-color: var(--color-brand); }
.qz-opt:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Выбранный вариант: рамка и подложка бренда + галочка. Одной подложки
   мало — при плохом зрении разница фона между вариантами не видна. */
.qz-opt.is-on {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
  font-weight: var(--weight-semibold);
}

.qz-opt.is-on::before {
  content: "✓";
  margin-inline-end: var(--space-2);
  font-weight: var(--weight-bold);
}

.qz-extra {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.qz-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

/* Подсказка про максимум: пока лимит не упёрся — обычная серая строка,
   упёрся — она же краснеет. Отдельной строки-предупреждения нет намеренно:
   её текст пришлось бы писать скриптом, а скриптовый текст не переводится. */
.qz-hint.is-warn {
  color: var(--color-error);
  font-weight: var(--weight-semibold);
}

.qz-analyzing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.qz-analyzing-list li {
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  opacity: 0;
  animation: qz-tick var(--duration-base) var(--ease-out) forwards;
}

.qz-analyzing-list li:nth-child(1) { animation-delay: 0ms; }
.qz-analyzing-list li:nth-child(2) { animation-delay: 400ms; }
.qz-analyzing-list li:nth-child(3) { animation-delay: 800ms; }

.qz-analyzing-list li::before {
  content: "✓";
  margin-inline-end: var(--space-2);
  color: var(--color-success);
  font-weight: var(--weight-bold);
}

@keyframes qz-tick {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Человеку с prefers-reduced-motion показываем все три строки сразу:
   анимация тут декоративная, смысл несёт текст. */
@media (prefers-reduced-motion: reduce) {
  .qz-analyzing-list li { opacity: 1; animation: none; }
}

.qz-result:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.qz-result h3 {
  margin-block: 0 var(--space-4);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

.qz-summary p {
  margin-block: 0 var(--space-2);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  max-width: var(--content-measure);
}

.qz-recs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-5);
}

.qz-rec {
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.qz-rec h4 {
  margin-block: 0 var(--space-3);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  color: var(--color-brand-strong);
}

.qz-rec-label {
  margin-block: var(--space-3) var(--space-1);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.qz-rec-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink);
}

.qz-rec-link {
  display: inline-block;
  margin-block-start: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-brand-strong);
}

.qz-growth,
.qz-empty {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  max-width: var(--content-measure);
}

.qz-form {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.qz-form-h {
  margin-block: 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.qz-form-sub {
  margin-block: 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  max-width: var(--content-measure);
}

.qz-form select {
  inline-size: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.qz-form select:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--color-brand); }

.qz-restart {
  margin-block-start: var(--space-5);
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--text-sm);
  color: var(--color-brand-strong);
  text-decoration: underline;
  cursor: pointer;
}

.qz-restart:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* ---------- Узкие экраны ---------- */
@media (max-width: 900px) {
  .au-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .au-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  /* Каждое обозначение с новой строки: в две колонки они на телефоне
     переносились вразнобой (правка Дианы 22.09.2026). */
  .au-legend-list { flex-direction: column; gap: var(--space-3); }
  .au-card { padding: var(--space-4); }
  .au-panel,
  .qz-box { padding: var(--space-4); }
  .au-mock-grid { grid-template-columns: 1fr; }
  .qz-opts { flex-direction: column; }
  .qz-opt { inline-size: 100%; }
  .au-actions .btn,
  .qz-nav .btn { inline-size: 100%; }
}