/* Zaezzd — визард «Что делать при ДТП» (T6, режим стресса).
   Источник: прототип, экран T6 (строки 1202–1255) и NOTES.dtp.
   Правила экрана: одна мысль на экран, кегль от 20px, кнопки от 56px,
   цвет несёт смысл (красный — пострадавшие и запреты, зелёный — европротокол,
   жёлтый — ГИБДД), рядом с цветом всегда текст.
   Стили только для этой страницы: main.css и tokens.css не трогаем. */

/* ── Переключение веток. Класс навешивает JS, в HTML ничего не спрятано ──
   Без JS страница отдаёт все шесть секций подряд — это рабочий режим, а не запасной. */
.p-dtp .is-off { display: none !important; }

/* Шапка на мобильном: логотип-иконка + «назад» + название экрана.
   Слово «Zaezzd» до 768 убираем — иначе крошке не остаётся места. */
@media (max-width: 767px) {
  .p-dtp .logo__word { display: none; }
}

.p-dtp .dtp-stack { gap: 20px; }
@media (min-width: 768px) { .p-dtp .dtp-stack { gap: 32px; } }

/* ── Заголовок страницы ─────────────────────────────────────────── */
.dtp-intro { max-width: 720px; }
.dtp-intro__label {
  display: inline-block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--err);
}
.dtp-intro__t { font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.dtp-intro__d { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.dtp-intro__src { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--ink-4); }
@media (min-width: 768px) {
  .dtp-intro__t { font-size: 34px; }
  .dtp-intro__d { font-size: 17px; }
}

.dtp-nojs {
  border: 1px solid var(--line); border-left: 3px solid var(--yellow);
  border-radius: var(--r-card); padding: 12px 14px;
  font-size: 14px; line-height: 1.5; color: var(--ink-2); background: var(--surface);
}

/* ── Вопрос: одна мысль на экран ────────────────────────────────── */
.dtp-wizard { display: flex; flex-direction: column; gap: 20px; }

.dtp-branch {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-res); overflow: hidden;
}
.dtp-q { padding: 22px 16px 18px; }
.dtp-q__num {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.dtp-q__t {
  margin-top: 8px;
  font-size: 27px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
}
.dtp-q__t:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.dtp-q__d { margin-top: 10px; font-size: 20px; line-height: 1.4; color: var(--ink-2); }

.dtp-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.dtp-opt {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 64px; padding: 12px 18px; border-radius: 12px;
  font-size: 20px; font-weight: 700; line-height: 1.25; color: #fff; text-decoration: none;
  transition: background-color .12s ease;
}
.dtp-opt:hover { color: #fff; text-decoration: none; }
.dtp-opt--dark { background: var(--ink); }
.dtp-opt--dark:hover { background: #000; }
.dtp-opt--red { background: var(--err); }
.dtp-opt--red:hover { background: #A11F17; }

.dtp-q__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  margin-top: 16px;
}
.dtp-q__foot a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  font-size: 15px; font-weight: 600; color: var(--ink-3);
}
.dtp-q__foot a:hover { color: var(--ink); }
.dtp-inline-tel { color: var(--err) !important; }
.dtp-inline-tel:hover { color: #A11F17 !important; }
.dtp-restart { margin-left: auto; }

@media (min-width: 768px) {
  .dtp-q { padding: 34px 28px 26px; }
  .dtp-q__t { font-size: 36px; }
  .dtp-q__d { font-size: 21px; }
  .dtp-opts { flex-direction: row; gap: 12px; }
  .dtp-opt { flex: 1 1 0; min-height: 72px; font-size: 21px; }
}

/* ── Исход: цветная шапка + пронумерованные шаги ────────────────── */
.dtp-out__head { padding: 18px 16px; border-bottom: 1px solid var(--line); }
.dtp-out--red .dtp-out__head { background: var(--err-soft); border-bottom-color: #EFB4AE; }
.dtp-out--green .dtp-out__head { background: var(--ok-soft); border-bottom-color: #A9D9BF; }
.dtp-out--amber .dtp-out__head { background: var(--warn-soft); border-bottom-color: #F0C86A; }

.dtp-out__when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dtp-out__when-t { font-size: 13px; font-weight: 600; color: var(--ink-25); }
.dtp-out__t {
  margin-top: 10px;
  font-size: 25px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
}
.dtp-out__t:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dtp-out--red .dtp-out__t { color: var(--err); }
.dtp-out--green .dtp-out__t { color: var(--ok); }
.dtp-out--amber .dtp-out__t { color: var(--warn-ink); }
.dtp-out__d { margin-top: 9px; font-size: 16px; line-height: 1.45; color: var(--ink-25); }

.dtp-out__body { padding: 16px; display: flex; flex-direction: column; gap: 18px; }

/* Телефон 112 — самая крупная цель на экране */
.dtp-call {
  display: flex; align-items: center; gap: 16px;
  min-height: 80px; padding: 14px 18px; border-radius: 14px;
  color: #fff; text-decoration: none;
}
.dtp-call:hover { color: #fff; text-decoration: none; }
.dtp-call--red { background: var(--err); }
.dtp-call--red:hover { background: #A11F17; }
.dtp-call--dark { background: var(--ink); }
.dtp-call--dark:hover { background: #000; }
.dtp-call__num { flex: 0 0 auto; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.dtp-call__l { font-size: 15px; font-weight: 600; line-height: 1.35; }

.dtp-lead-note {
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
  border-left: 3px solid var(--ok); padding-left: 12px;
}
.dtp-lead-note a { font-weight: 600; }

/* Шаги: номер, «что сделать», «почему» и норма */
.dtp-steps {
  list-style: none; padding: 0; margin: 0; counter-reset: dtpstep;
  display: flex; flex-direction: column; gap: 18px;
}
.dtp-step { counter-increment: dtpstep; position: relative; padding-left: 44px; }
.dtp-step::before {
  content: counter(dtpstep);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dtp-out--red .dtp-step::before { background: var(--err); }
.dtp-out--green .dtp-step::before { background: var(--ok); }
.dtp-out--amber .dtp-step::before { background: var(--ink); }
.dtp-step__t { font-size: 20px; font-weight: 700; line-height: 1.25; padding-top: 3px; }
.dtp-step__d { margin-top: 5px; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.dtp-step__w { margin-top: 7px; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.dtp-step__w span { font-weight: 700; color: var(--ink-2); }
.dtp-step__w a { text-decoration: underline; }
.dtp-step__w--law {
  background: var(--warn-soft); border-radius: 10px; padding: 10px 12px; color: #6B4700;
}
.dtp-step__w--law span { color: #6B4700; }
.dtp-step__w--law a { color: inherit; }

.dtp-note {
  font-size: 13.5px; line-height: 1.45; color: var(--ink-3);
  background: var(--bg); border-radius: 11px; padding: 12px 13px;
}

.dtp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dtp-actions > * { flex: 1 1 160px; }

@media (min-width: 768px) {
  .dtp-out__head { padding: 24px 28px; }
  .dtp-out__t { font-size: 32px; }
  .dtp-out__d { font-size: 17px; }
  .dtp-out__body { padding: 24px 28px 28px; gap: 22px; }
  .dtp-step__t { font-size: 21px; }
  .dtp-actions > * { flex: 0 0 auto; }
}

/* 1200: шаги слева, телефон и действия — колонкой справа */
@media (min-width: 1200px) {
  .dtp-out__body {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px 32px; align-items: start;
  }
  .dtp-out__body > .dtp-steps { grid-column: 1; grid-row: 1 / span 3; }
  .dtp-out__body > .dtp-call { grid-column: 2; grid-row: 1; }
  .dtp-out__body > .dtp-lead-note { grid-column: 2; grid-row: 1; }
  .dtp-out__body > .dtp-note { grid-column: 2; grid-row: 2; }
  .dtp-out__body > .dtp-actions { grid-column: 2; grid-row: 3; flex-direction: column; }
  .dtp-out__body > .dtp-actions > * { flex: 1 1 auto; width: 100%; }
}

/* ── Чего делать нельзя ─────────────────────────────────────────── */
.dtp-donts {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.dtp-donts li {
  position: relative; padding: 12px 13px 12px 40px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--err); border-radius: var(--r-card);
  font-size: 15px; line-height: 1.45; color: var(--ink-2);
}
.dtp-donts li::before {
  content: '×';
  position: absolute; left: 13px; top: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--err-soft); color: var(--err);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; line-height: 1;
}
.dtp-donts b { color: var(--ink); font-weight: 700; }

.dtp-links { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.dtp-links .row-link span { min-width: 0; }
.dtp-src { font-size: 12px; line-height: 1.45; color: var(--ink-4); margin-top: 4px; }
@media (min-width: 768px) {
  .dtp-donts li { font-size: 16px; }
  .dtp-links { flex-direction: row; }
  .dtp-links .row-link { flex: 1 1 0; }
}

/* ── Печать: одна страница A4, телефон крупно ───────────────────── */
@media print {
  .p-dtp .dtp-intro,
  .p-dtp .dtp-nojs,
  .p-dtp .dtp-wizard,
  .p-dtp #nelzya { display: none !important; }

  .dtp-memo { display: block !important; font-size: 8.6pt; line-height: 1.32; color: #000; }
  .dtp-memo__t { font-size: 16pt; font-weight: 700; line-height: 1.1; }
  .dtp-memo__src { font-size: 8pt; color: #444; margin-top: 2mm; }
  .dtp-memo__tel {
    margin-top: 3mm; padding: 2.5mm 3mm; border: 1.2pt solid #000; border-radius: 2mm;
    display: flex; align-items: center; gap: 4mm;
  }
  .dtp-memo__tel b { font-size: 34pt; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
  .dtp-memo__tel span { font-size: 9pt; line-height: 1.3; }
  .dtp-memo__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm;
    margin-top: 4mm;
  }
  .dtp-memo__col { break-inside: avoid; }
  .dtp-memo__col h3 {
    font-size: 9.5pt; font-weight: 700; line-height: 1.2;
    padding-bottom: 1mm; border-bottom: 1pt solid #000; margin-bottom: 1.5mm;
  }
  .dtp-memo__col ul { list-style: none; padding: 0; margin: 0; }
  .dtp-memo__col li { padding-left: 3.2mm; position: relative; margin-top: 1.4mm; }
  .dtp-memo__col li::before { content: '□'; position: absolute; left: 0; top: 0; }
  .dtp-memo__no {
    margin-top: 4mm; padding-top: 2mm; border-top: 1pt solid #000; font-size: 8.2pt; line-height: 1.35;
  }
  .dtp-memo a[href]::after { content: ''; }
}