@layer components {
  /* 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);
    }
  }

  /* Step intro — the lead paragraph(s) between the step title and the form.
     Body-size with toned ink, so the hierarchy reads title → lead → hints
     (hints stay small + muted). A div wrapper on purpose: translations may
     contain <p>/<ul> without breaking out of a styled <p>. */
  .wizard-lead {
    color: var(--color-ink-body);
    margin-block: var(--block-space);

    & > :first-child { margin-block-start: 0; }
    & > :last-child { margin-block-end: 0; }
  }

  .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;
  }

  /* The wizard's only exit: the breadcrumb also links back, but reads as a
     title rather than navigation. Muted and set apart from the step list so it
     stays wayfinding, not a step. */
  .sidebar-nav__item--back {
    color: var(--color-ink-muted);
    font-size: var(--font-small-responsive);
    margin-block-end: var(--space-xs);
    padding-block-end: var(--space-xs);
    border-block-end: var(--border);

    /* Same arrow as the blog post back link (blog/posts/show), kept as CSS
       because back_link_to renders its own label span. */
    &::before {
      content: "←";
      margin-inline-end: var(--inline-space-half);
    }

    /* Hover is inherited from .sidebar-nav__item: the background fill is the
       sidebar's own affordance, so no underline on top of it. */
  }

  .sidebar-nav__item--compact {
    padding-block: 0.15rem;
    line-height: 1.35;
    /* width:auto so the left indent (margin-inline-start) doesn't push the right
       edge — and the completion tick — past the non-indented items. Keep the base
       inline padding (don't shrink it) so the tick stays vertically aligned. */
    width: auto;
  }

  .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;
    justify-content: space-between;
    gap: 0.5em;
    padding-block: 0.25rem;

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

  .wizard-toc__chevron {
    font-size: 0.65em;
    color: var(--color-gray-dark);
    transition: transform 0.2s ease;
  }

  .wizard-toc[open] .wizard-toc__chevron {
    transform: rotate(180deg);
  }

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

  .wizard-toc__step {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.25rem;
    border-radius: var(--border-radius);
    font-size: var(--font-x-small-responsive);
    color: var(--color-ink-dark);
    text-decoration: none;
    transition:
      color 0.15s ease,
      background-color 0.15s ease;

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

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

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

  /* Leading status gutter: marks align in one fixed-width column */
  .wizard-toc__check,
  .wizard-toc__dot {
    flex: none;
    inline-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
  }

  .wizard-toc__check {
    color: var(--color-green);
    font-size: 0.75em;
    line-height: 1;
  }

  .wizard-toc__dot::before {
    content: "";
    inline-size: 0.45em;
    block-size: 0.45em;
    border-radius: 50%;
    background: var(--color-yellow);
  }
}