/* Wizard Component
   ========================================================================== */

.wizard {
  background-color: var(--color-bg);
  border: var(--border);
  color: var(--color-ink);
  border-radius: var(--panel-border-radius, 1em);
  /* box-shadow: var(--shadow-small); */
  padding: var(--space-s);
}

@media (min-width: 30rem) {
  .wizard {
    padding: var(--space-l);
  }
}

.wizard__navigation {
  margin-top: var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wizard__navigation--right {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Read-only wizard mode: disable all interactions, keep accordions usable */
.wizard--readonly {
  pointer-events: none;

  & .accordion {
    pointer-events: auto;
  }

  & :is(input, select, textarea) {
    opacity: 0.7;
  }

  & :is(a, button):not(.accordion *) {
    opacity: 0.5;
  }
}

/* Sidebar Navigation */
.sidebar-nav {
  padding: var(--space-s) var(--space-m);
  block-size: 100%;
  overflow-y: auto;
}

.sidebar-nav__item {
  display: block;
  padding: var(--space-xxs) var(--space-s);
  border-radius: var(--border-radius);
  background-color: transparent;
  color: var(--color-ink-dark);
  text-decoration: none;
  transition: background-color 0.2s ease;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.sidebar-nav__item--compact {
  padding-block: 0.15rem;
  padding-inline: var(--space-xs);
  line-height: 1.35;
}

.sidebar-nav__item:hover {
  background-color: color-mix(
    in oklch,
    var(--color-ink-dark),
    transparent 90%
  );
  color: var(--color-ink-dark);
}

.sidebar-nav__item--active {
  background-color: var(--color-ink-dark);
  color: var(--color-white);
}

.sidebar-nav__item--active .txt-green {
  color: var(--color-white);
}

.sidebar-nav__item--completed {
  color: var(--color-ink-dark);
}

.sidebar-nav__item--disabled {
  color: var(--color-ink-light);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Wizard TOC — project show sidebar */
.wizard-toc {
  border-radius: var(--border-radius);
}

.wizard-toc__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5em;

  &::-webkit-details-marker {
    display: none;
  }
}

.wizard-toc__icon {
  font-size: 0.65em;
  color: var(--color-blue);
}

.wizard-toc__icon-minus {
  display: none;
}

.wizard-toc[open] .wizard-toc__icon-plus {
  display: none;
}

.wizard-toc[open] .wizard-toc__icon-minus {
  display: inline;
}

.wizard-toc__steps {
  display: flex;
  flex-direction: column;
  padding-block-end: var(--block-space-half);
}

.wizard-toc__step {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.1rem 0;
  font-size: var(--font-x-small-responsive);
  color: var(--color-ink-dark);
  text-decoration: none;
  transition: color 0.15s ease;

  &:hover {
    color: var(--color-blue);
  }
}

.wizard-toc__step--disabled {
  color: var(--color-ink-muted);
  cursor: not-allowed;
  opacity: 0.5;

  &:hover {
    color: var(--color-ink-muted);
  }
}

.wizard-toc__check {
  color: var(--color-gray-dark);
  font-size: 0.7em;
  flex-shrink: 0;
}

.wizard-toc__dot {
  inline-size: 0.45em;
  block-size: 0.45em;
  border-radius: 50%;
  background: var(--color-yellow);
  flex-shrink: 0;
}