/* Sprievodca nastavením: horná lišta s krokmi, pruh nad obrazovkou, karta kroku, modálne okno. */

/* ---- horná lišta ---- */
nav.steps { align-items: center; gap: 6px; }
nav.steps a.step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
nav.steps a.step:hover { border-color: var(--red); }
nav.steps a.step[aria-current="page"] { border-color: var(--red); color: var(--red); font-weight: 650; }
nav.steps a.step .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
nav.steps a.step.done .n { background: #1b7a32; border-color: #1b7a32; color: #fff; }
nav.steps a.step[aria-current="page"] .n { background: var(--red); border-color: var(--red); color: #fff; }
nav.steps a.step.locked { color: var(--muted); }
nav.steps a.step.wizard { padding-left: 10px; border-color: var(--line); font-weight: 650; }
nav.steps a.step.wizard .badge {
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
}
nav.steps a.step.wizard.done .badge { background: #1b7a32; }
nav.steps a.step.final { padding-left: 10px; margin-left: 8px; border-left: 1px solid var(--line); border-radius: 0 999px 999px 0; }
nav.steps a.step.side { padding-left: 8px; color: var(--muted); }

/* ---- pruh nad obrazovkou ---- */
.setup-banner {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
}
.setup-banner.done { border-left-color: #1b7a32; }
.setup-banner-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.setup-banner-head .grow { flex: 1; }
.setup-banner-head .state { color: var(--muted); }
.setup-banner .disabled { color: var(--muted); cursor: not-allowed; border-style: dashed; }
.setup-banner details { border: 0; padding: 4px 0 0; }
.setup-banner ol { margin: 6px 0 4px; padding-left: 20px; }

/* ---- sprievodca ---- */
.progress { height: 8px; background: var(--line); margin: 0 0 16px; }
.progress span { display: block; height: 100%; background: #1b7a32; }
.wizard-card { padding: 16px; margin: 0 0 16px; background: var(--panel); border: 1px solid var(--line); }
.wizard-card.done { border-left: 4px solid #1b7a32; }
.wizard-card h2 { font-size: 18px; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.wizard-card h3 { font-size: 14px; margin: 14px 0 4px; }
.wizard-card .kicker { margin: 0; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.wizard-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wizard-nav form { margin: 0; }
ol.numbered, ol.guide.numbered { padding-left: 22px; }
ol.numbered li { margin: 0 0 6px; }
.wizard-steps { list-style: none; margin: 0; padding: 0; }
.wizard-steps li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.wizard-steps li a { color: inherit; text-decoration: none; }
.wizard-steps li.current a { color: var(--red); font-weight: 650; }
.wizard-steps li.locked { color: var(--muted); }
.wizard-steps li.done .state { color: #1b7a32; }

/* ---- modálne okno ---- */
dialog.setup { width: min(560px, calc(100vw - 48px)); }
dialog.setup h2 { margin-top: 0; font-size: 18px; }
ol.setup-missing { padding-left: 22px; margin: 8px 0; }
ol.setup-missing li { margin: 0 0 6px; }
ol.setup-missing li.locked { color: var(--muted); }