/* "Інформація" view — full-page onboarding accordion guide (replaces the old
   "Скіли" nav tab). Reuses base tokens/classes from style.css (--panel,
   --border-soft, .shead, .badge, .btn*, .modal-field) plus the .onb-* form/
   action-row/help-panel classes the onboarding wizard already defined there
   (onb-form, onb-input, onb-actions-row, onb-gen-status, onb-progress,
   onb-hint, onb-spin, onb-help-*) — this file only adds what's genuinely new:
   the progress header and the accordion shell itself. Do NOT edit style.css
   from here — see CLAUDE.md file-ownership split for this feature. */

.info-intro{
  font: 500 var(--fs-12)/1.55 var(--sans); color: var(--text-mute); margin: -6px 0 16px;
  max-width: 640px;
}

/* ── overall progress header ─────────────────────────────────────────────── */
.info-progress-card{
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 22px;
}
.info-progress-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-10); margin-bottom: 8px;
}
.info-progress-label{ font: 700 var(--fs-13)/1.3 var(--sans); color: var(--text); }
.info-progress-pct{ font: 700 var(--fs-12)/1 var(--mono); color: var(--text-dim); }
.info-progress-bar{ height: 7px; border-radius: var(--radius-xs); background: var(--bg-soft); overflow: hidden; }
.info-progress-fill{
  height: 100%; border-radius: var(--radius-xs); background: var(--accent);
  transition: width var(--t-med) var(--ease);
}
.info-progress-fill.done{ background: var(--ok); }

/* ── group shell ──────────────────────────────────────────────────────────── */
.info-group{ margin-bottom: 26px; }
.info-group-head{
  display: flex; align-items: baseline; gap: var(--sp-8); margin-bottom: 12px;
  font: 700 var(--fs-14)/1.3 var(--sans); color: var(--text);
}
.info-group-ic{ font-size: 16px; flex: none; }
.info-group-title{ flex: none; }
.info-group-head .n{ font: 500 var(--fs-12)/1.4 var(--sans); color: var(--text-mute); }

.info-steps{ display: grid; gap: var(--sp-10); }

/* ── accordion step ───────────────────────────────────────────────────────── */
.info-step{
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  overflow: hidden;
}
.info-step.done{ border-color: rgba(var(--ok-rgb),.25); }
.info-step.skipped{ opacity: .72; }

.info-step-head{
  display: flex; align-items: center; gap: var(--sp-8); flex-wrap: nowrap; width: 100%;
  padding: 12px 14px; background: transparent; border: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.info-step-head:hover{ background: var(--panel-2); }
.info-step-status{ font-size:  var(--fs-14); flex: none; }
.info-step-status.ok{ color: var(--ok); }
.info-step-status.bad{ color: var(--danger); }
.info-step-status.opt{ color: var(--text-mute); }
.info-step-status.skip{ color: var(--text-mute); }
.info-step-status > svg{ width: 18px; height: 18px; display: block; }
.info-step-icon{
  font-size:  var(--fs-14); flex: none; color: var(--text-dim);
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: var(--grad-brand-soft);
  display: flex; align-items: center; justify-content: center;
}
.info-step-icon > svg{ width: 20px; height: 20px; display: block; }
.info-step-title{ font: 700 var(--fs-13)/1.3 var(--sans); flex: 1; min-width: 0; }
.info-req-badge{ color: var(--warn); border-color: rgba(245,185,66,.3); background: rgba(245,185,66,.08); }
.info-step-chevron{ font-size:  var(--fs-11); color: var(--text-mute); flex: none; }
.info-step-chevron > svg{ width: 18px; height: 18px; display: block; }

.info-step-body{ padding: 0 14px 14px; }
.info-step-why{
  font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-dim); margin-bottom: 8px;
  background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.info-step-foot{ display: flex; justify-content: flex-end; margin-top: 8px; }

/* ── "Як користуватись" — з чого почати banner ───────────────────────────── */
.info-guide-start{
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 14px;
}
.info-guide-start-title{ font: 700 var(--fs-13)/1.3 var(--sans); color: var(--text); margin-bottom: 4px; }
.info-guide-start-body{ font: 500 var(--fs-12)/1.6 var(--sans); color: var(--text-dim); }
.info-guide-start-body b{ color: var(--text); font-weight: 700; }

/* ── "Як користуватись" — per-section accordion body ─────────────────────── */
.info-guide-what{ font: 500 var(--fs-12)/1.55 var(--sans); color: var(--text-dim); margin-bottom: 10px; }
.info-guide-how-title{ font: 700 var(--fs-12)/1.3 var(--sans); color: var(--text); margin-bottom: 4px; }
.info-guide-how ol{ margin: 0; padding-left: 18px; font: 500 var(--fs-12)/1.6 var(--sans); color: var(--text-dim); }
.info-guide-how li{ margin-bottom: 2px; }

/* ── "Що нового" — release items list (frontend/js/whats_new.js), same
   look as the guide's ol/li above but a plain ul: a changelog reads more
   naturally as unnumbered bullets than as ranked steps. ─────────────────── */
.wn-items{ margin: 6px 0 0; padding-left: 18px; font: 500 var(--fs-12)/1.6 var(--sans); color: var(--text-dim); }
.wn-items li{ margin-bottom: 4px; }

@media (max-width: 640px){
  .info-progress-head{ flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .info-step-head{ padding: 10px 12px; }
  .info-step-body{ padding: 0 12px 12px; }
}