/* onboarding.css — мягкие подсказки по существующим фичам. Отключаемые:
   крестик скрывает подсказку навсегда (localStorage ql_onb_seen). На токенах. */
/* Скрыты по умолчанию — JS (onboarding.js) добавляет .is-on только тем, что
   ещё не увидены и не выключены. Так подсказки не мелькают при каждой загрузке. */
.onb-hint {
    display: none;
    align-items: flex-start; gap: 10px;
    background: var(--accent-soft); border: 1px solid var(--accent-line);
    border-radius: var(--r-md); padding: 10px 12px; margin-bottom: var(--s-3);
    font-size: var(--text-sm); color: var(--ink-2); line-height: 1.45;
}
.onb-hint.is-on { display: flex; }
.onb-hint[hidden] { display: none; }
.onb-hint > i.onb-ic { color: var(--accent-strong); font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
.onb-hint .onb-body { flex: 1; min-width: 0; }
.onb-hint .onb-body b { color: var(--ink); font-weight: 600; }
.onb-hint .onb-x {
    flex-shrink: 0; width: 26px; height: 26px; border: none; background: none; cursor: pointer;
    color: var(--ink-3); border-radius: var(--r-sm); display: grid; place-items: center;
    font-size: .95rem; transition: background var(--m-fast), color var(--m-fast);
}
.onb-hint .onb-x:hover { background: var(--accent-line); color: var(--accent-strong); }

/* Тумблер в настройках профиля */
.onb-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink-2); }
.onb-toggle input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ── Уровень B · «первый запуск» (ТЗ §26.1) ────────────────────────────────
   Крупная карточка пустого раздела с ролевыми CTA. Цвета — на токенах, поэтому
   тёмная тема подхватывается автоматически. Иллюстрация закреплена: контурный
   глиф раздела (--ink-3) + teal-галочка качества (знак «Контроль-Q»). */
.first-run {
  display: flex; gap: 22px; align-items: center;
  max-width: 680px; margin: 24px auto; padding: 30px 28px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
}
.first-run .illo {
  position: relative; width: 132px; height: 132px; flex: none;
  display: grid; place-items: center;
}
.first-run .illo > i { font-size: 62px; color: var(--ink-3); opacity: .5; }
.first-run .illo .illo-check {
  position: absolute; right: 24px; bottom: 24px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 17px;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
  border: 2px solid var(--surface);
}
.first-run .fr-body { min-width: 0; }
.first-run .fr-role {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 600; color: var(--accent-strong);
  background: var(--accent-soft); border-radius: var(--r-full);
  padding: 3px 10px; margin-bottom: 10px;
}
.first-run h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.first-run p { margin: 0 0 16px; color: var(--ink-2); font-size: .92rem; line-height: 1.5; max-width: 48ch; }
.first-run .fr-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.first-run .fr-help { font-size: .85rem; color: var(--accent-strong); text-decoration: none; }
.first-run .fr-help:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .first-run { flex-direction: column; text-align: center; padding: 26px 20px; gap: 16px; }
  .first-run .illo { width: 104px; height: 104px; }
  .first-run .illo > i { font-size: 50px; }
  .first-run .illo .illo-check { right: 14px; bottom: 14px; width: 30px; height: 30px; font-size: 15px; }
  .first-run p { max-width: none; }
  .first-run .fr-cta { justify-content: center; }
}

/* ── Ф4 · виджет-чеклист «Запуск лаборатории» (dashboard v2) ────────────── */
.lc-list { display: flex; flex-direction: column; gap: 6px; }
.lc-it { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line); }
.lc-it .lc-bx { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; color: transparent; font-size: 12px; }
.lc-it.done .lc-bx { background: var(--accent); border-color: var(--accent); color: #fff; }
.lc-it .lc-lb { flex: 1; min-width: 0; font-size: .84rem; color: var(--ink); }
.lc-it.done .lc-lb { color: var(--ink-3); text-decoration: line-through; }
.lc-it .lc-go { font-size: .78rem; font-weight: 600; color: var(--accent-strong); text-decoration: none; flex: none; }
.lc-it .lc-go:hover { text-decoration: underline; }
.lc-ft { margin-top: 9px; font-size: .72rem; color: var(--ink-3); }

/* ── §08 · Панель «Как это работает» (help-panel.js) ───────────────────────── */
.hp-root { position: fixed; inset: 0; z-index: 1090; visibility: hidden; }
.hp-root.on { visibility: visible; }
.hp-bg { position: absolute; inset: 0; background: rgba(15,23,42,.38); opacity: 0;
  transition: opacity var(--m-base, .2s); }
.hp-root.on .hp-bg { opacity: 1; }
.hp { position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 92vw);
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-pop, -8px 0 30px rgba(15,23,42,.18));
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--m-base, .22s); }
.hp-root.on .hp { transform: none; }
.hp-hd { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.hp-hd .ic { width: 38px; height: 38px; flex: none; border-radius: var(--r-md); background: var(--accent-soft);
  color: var(--accent-strong); display: grid; place-items: center; font-size: 1.1rem; }
.hp-hd .t { font-weight: 700; color: var(--ink); }
.hp-hd .s { font-size: .74rem; color: var(--ink-3); }
.hp-hd .sp { flex: 1; }
.hp-hd .x { border: none; background: none; color: var(--ink-3); cursor: pointer; font-size: 1rem; padding: 4px; border-radius: 6px; }
.hp-hd .x:hover { background: var(--surface-2); color: var(--ink); }
.hp-bd { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.hp-h { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.hp-p { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.55; }
.hp-src { display: flex; flex-direction: column; gap: 8px; }
.hp-src > div { display: flex; align-items: flex-start; gap: 9px; font-size: .86rem; color: var(--ink-2); }
.hp-src > div > i { color: var(--accent-strong); margin-top: 2px; }
.hp-steps { display: flex; flex-direction: column; gap: 12px; }
.hp-step { display: flex; gap: 11px; }
.hp-step .n { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: .74rem; font-weight: 700; display: grid; place-items: center; }
.hp-step b { display: block; font-size: .88rem; color: var(--ink); margin-bottom: 2px; }
.hp-step > span { font-size: .84rem; color: var(--ink-3); line-height: 1.5; }
.hp-ft { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }