/* F440 — онбординг и настройки.
   Источники: «Экран онбординга - F440.dc.html», «Экран настроек - F440.dc.html». */

/* ── Онбординг ─────────────────────────────────────────────────
   Полоса шагов одна и та же на всех пяти: человек всё время видит,
   сколько осталось, и что это конечный процесс, а не тур. */
.ob-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-bottom: 14px; margin-bottom: var(--sp-6); border-bottom: 1px solid var(--line);
}
.ob-dots { display: flex; align-items: center; gap: 6px }
.ob-dots i { width: 26px; height: 4px; border-radius: var(--r-pill); background: var(--panel-3) }
.ob-dots i.done { background: var(--accent) }
.ob-dots i.on { background: var(--accent-ink) }
.ob-dots .t-num { font-size: 11px; color: var(--muted-3); margin-left: var(--sp-2) }

.ob-body { max-width: 620px; margin: 0 auto; display: grid; gap: var(--sp-4) }
.ob-head h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1);
  font-weight: 600; margin: 6px 0 8px }
.ob-head p { font-size: var(--fs-body); color: var(--muted); margin: 0 }
@media (max-width: 640px) { .ob-head h2 { font-size: var(--fs-h2) } }

.ob-choice { display: grid; gap: var(--sp-2) }
.ob-choice .opt { width: 100% }
.ob-choice .opt.on { border-color: var(--accent-edge); background: var(--accent-wash); color: var(--accent-ink) }

.ob-vol { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4) }
.ob-vol-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px }
.ob-vol-head .t-num.ok { color: var(--accent-ink) }
.ob-vol-head .t-num.brass { color: var(--brass) }
.ob-vol-head .t-num.bad { color: var(--bad-ink) }
.ob-warn { font-size: var(--fs-small); color: var(--bad-ink); margin: var(--sp-3) 0 0 }

/* Шаг каналов: импульс играет сам, ответ — двумя крупными кнопками.
   Кружки сверху показывают, сколько импульсов пройдено и как. */
.ob-click { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4); display: grid; gap: var(--sp-4) }
.ob-click-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3) }
.ob-marks { display: flex; gap: 6px }
.ob-marks span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-2); color: var(--muted-3); font-size: 12px }
.ob-marks span.is-now { background: var(--brass-wash); color: var(--brass); border: 1px solid var(--brass-edge) }
.ob-marks span.is-ok { background: var(--accent-wash); color: var(--accent-ink) }
.ob-marks span.is-bad { background: var(--bad-wash); color: var(--bad-ink) }
.ob-sides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) }
.ob-side {
  padding: var(--sp-6) var(--sp-4); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font-family: inherit; cursor: pointer; text-align: center;
  transition: border-color var(--t-press) var(--ease), background var(--t-press) var(--ease);
}
.ob-side b { display: block; font-size: var(--fs-h2); font-weight: 600 }
.ob-side small { display: block; font-size: 12px; color: var(--muted-3); margin-top: 4px }
@media (hover: hover) { .ob-side:hover { border-color: var(--accent-hi); background: var(--accent-wash) } }
.ob-side:active { background: var(--accent-deep); border-color: var(--accent); color: var(--on-accent) }
.ob-click-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap }
.ob-click-foot .t-num { font-size: 11px; color: var(--muted-3) }
@media (hover: none) { .ob-click-foot .t-num { display: none } }
.ob-ok, .ob-bad { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4) }
.ob-ok { display: flex; gap: var(--sp-3); align-items: center; border-color: var(--accent-edge); color: var(--accent-ink) }
.ob-ok b { display: block; color: var(--text) }
.ob-ok span { font-size: var(--fs-small); color: var(--muted) }
.ob-bad { border-color: var(--bad-edge) }
.ob-bad b { color: var(--bad-ink) }
.ob-bad p { font-size: var(--fs-small); color: var(--muted); margin: 6px 0 0 }

.ob-first { background: var(--stage); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4) }
.ob-fb { font-size: var(--fs-small); margin: var(--sp-3) 0 0; padding: 11px 13px; border-radius: var(--r-card) }
.ob-fb.ok { background: var(--accent-wash); color: var(--accent-ink) }
.ob-fb.bad { background: var(--bad-wash); color: var(--bad-ink) }

.ob-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2) }
.ob-acts .btn { flex: 1 1 auto; min-width: 140px }
.ob-acts .btn--quiet { flex: 0 0 auto; min-width: 0 }

/* ── Настройки ─────────────────────────────────────────────────
   Оглавление слева, группы справа. Порядок групп — по частоте
   обращения, а не по алфавиту. */
.set-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr }
@media (min-width: 900px) { .set-grid { grid-template-columns: 220px minmax(0, 1fr) } }
.set-nav { display: flex; flex-direction: column; gap: 2px; align-self: start; position: sticky; top: 76px }
@media (max-width: 900px) { .set-nav { display: none } }
.set-nav button {
  text-align: left; padding: 9px 12px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--muted); font-family: inherit; font-size: var(--fs-small); cursor: pointer;
}
@media (hover: hover) { .set-nav button:hover { background: var(--panel); color: var(--text) } }
.set-ver { font-size: 11px; color: var(--muted-3); padding: var(--sp-3) 12px 0 }

/* Строка настройки шириной во весь экран нечитаема: заголовок слева,
   управление у правого края, между ними полметра пустоты. */
.set-body { display: grid; gap: var(--sp-6); max-width: 780px }
.set-group h3 { font-size: var(--fs-h3); font-weight: 600; margin: 0 0 4px }
.set-group > p { font-size: var(--fs-small); color: var(--muted); margin: 0 0 var(--sp-3) }
.set-group .set-row-title .t-num { font-size: 11px; margin-left: 6px }
.set-group .set-row-title .t-num.ok { color: var(--accent-ink) }
.set-group .set-row-title .t-num.brass { color: var(--brass) }
.set-row .btn { min-height: var(--tap-row); padding: 9px 14px; font-size: var(--fs-small); flex-shrink: 0 }
/* Строка, за которой пока ничего нет, выглядит как строка, а не как
   обещание: значение вместо кнопки и приглушённый заголовок. */
.set-row.is-off .set-row-title { color: var(--muted-3) }
.set-row--danger .btn { border-color: var(--bad-edge); color: var(--bad-ink) }