@layer components {
  .wizard {
    --wizard-bar-height: calc(var(--space-triple) + var(--space-and-half));
    --wizard-rail-width: 15.75rem;
    --wizard-step-width: 41.25rem;
    --wizard-aside-width: 20rem;
    --wizard-footer-height: calc(var(--space-triple) + var(--space-and-half));
    --wizard-progress-height: calc(var(--space-eighth) + var(--border-width));

    min-block-size: 100dvh;
    /* Canvas rather than the page's sage, and the same decision the calendar,
       the inbox and the two list screens made: a setup flow is the whole product
       surface for as long as somebody is in it, and a surface is white here. The
       rail beside it and the bar above it were canvas already, so the field in
       the middle was the one panel of it that read as a page underneath. */
    background: var(--color-canvas);
  }

  .wizard__bar {
    min-block-size: var(--wizard-bar-height);
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky-header);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space);
    padding: var(--space-half) var(--space);
    border-block-end: var(--border);
    background: var(--color-canvas);
  }

  .wizard__bar > .btn--icon {
    justify-self: start;
    font-size: var(--text-large);
    line-height: var(--leading-none);
  }

  .wizard__bar-copy {
    display: grid;
    justify-items: center;
    gap: var(--space-eighth);
    text-align: center;
  }

  .wizard__title,
  .wizard__progress {
    margin: 0;
  }

  .wizard__title {
    max-inline-size: 40ch;
    overflow: hidden;
    color: var(--color-ink);
    font-size: var(--text-normal);
    font-weight: var(--weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wizard__progress {
    color: var(--color-ink-soft);
    font-size: var(--text-x-small);
  }

  .wizard__exit {
    justify-self: end;
  }

  .wizard__progress-track {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-end: calc(var(--wizard-progress-height) * -1);
    block-size: var(--wizard-progress-height);
    overflow: hidden;
    background: var(--color-border);
  }

  .wizard__progress-bar {
    display: block;
    inline-size: var(--wizard-progress);
    block-size: 100%;
    background: var(--color-accent);
    transition: inline-size var(--transition-fast);
  }

  .wizard__body {
    min-block-size: calc(100dvh - var(--wizard-bar-height));
    display: grid;
    grid-template-columns: var(--wizard-rail-width) minmax(0, 1fr);
    padding-block-end: var(--wizard-footer-height);
  }

  .wizard__rail {
    block-size: calc(100dvh - var(--wizard-bar-height) - var(--wizard-footer-height));
    position: sticky;
    inset-block-start: var(--wizard-bar-height);
    align-self: start;
    overflow-y: auto;
    padding: var(--space-and-half) var(--space);
    border-inline-end: var(--border);
    background: var(--color-canvas);
  }

  .wizard__content {
    min-inline-size: 0;
    padding: var(--space-double) var(--space-double) var(--space-triple);
  }

  .wizard__step {
    max-inline-size: var(--wizard-step-width);
    margin-inline: auto;
  }

  /* A third column, for a step that has something to show beside itself — what
     the answers so far add up to, rather than more form. It is the argument for
     the fields on the left: nobody enjoys typing an invoicing region code, and
     watching the card fill in is the only thing that says why. */
  .wizard--with-aside .wizard__body {
    grid-template-columns: var(--wizard-rail-width) minmax(0, 1fr) var(--wizard-aside-width);
  }

  .wizard__aside {
    display: grid;
    align-content: start;
    gap: var(--space);
    position: sticky;
    inset-block-start: calc(var(--wizard-bar-height) + var(--space-and-half));
    padding: var(--space-double) var(--space-and-half) var(--space-double) 0;
  }

  .wizard__header {
    margin-block-end: var(--space-double);
  }

  .wizard__header h1 {
    margin-block-end: var(--space-half);
    letter-spacing: var(--tracking-tighter);
  }

  .wizard__header p {
    max-inline-size: 50ch;
    margin: 0;
    color: var(--color-ink-soft);
  }

  /* The generic action row is also used by a few compact settings forms. The
     fixed footer is scoped to the immersive wizard below. */
  .wizard__actions {
    display: flex;
    align-items: center;
    gap: var(--space-three-quarters);
    margin-block-start: var(--space-two-and-half);
    padding-block-start: var(--space-and-half);
    border-block-start: var(--border);
  }

  .wizard .wizard__actions {
    min-block-size: var(--wizard-footer-height);
    position: fixed;
    z-index: var(--z-sticky-header);
    inset-inline: 0;
    inset-block-end: 0;
    margin: 0;
    padding: var(--space-three-quarters) var(--space-and-half);
    border-block-start: var(--border);
    background: var(--color-canvas-translucent);
    backdrop-filter: blur(var(--space-half));
  }

  .wizard__action-note {
    flex: 1;
    margin: 0;
    color: var(--color-ink-soft);
    font-size: var(--text-small);
    text-align: end;
  }

  /* Progress rail */
  .stepper {
    --stepper-marker-size: calc(var(--space-and-quarter) + var(--space-eighth));

    display: grid;
    gap: var(--space-quarter);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .stepper__step {
    min-inline-size: 0;
  }

  .stepper__link {
    display: grid;
    grid-template-columns: var(--stepper-marker-size) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-three-quarters);
    padding: var(--space-three-quarters);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
  }

  a.stepper__link:hover {
    background: var(--surface-quiet);
  }

  .stepper__marker {
    inline-size: var(--stepper-marker-size);
    block-size: var(--stepper-marker-size);
    display: grid;
    place-items: center;
    border: var(--border-thick);
    border-radius: var(--radius-circle);
    background: var(--color-canvas);
    color: var(--color-ink-soft);
    font-size: var(--text-x-small);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-none);
  }

  .stepper__copy {
    min-inline-size: 0;
    display: grid;
    gap: var(--space-eighth);
  }

  .stepper__label {
    color: var(--color-ink-soft);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
  }

  .stepper__description {
    color: var(--color-ink-soft);
    font-size: var(--text-x-small);
    line-height: var(--leading-normal);
  }

  .stepper__step--complete .stepper__marker {
    border-color: var(--color-positive);
    background: var(--surface-positive);
    color: var(--color-positive-ink);
  }

  .stepper__step--complete .stepper__label {
    color: var(--color-ink);
  }

  .stepper__step--current .stepper__link {
    background: var(--color-highlight);
  }

  .stepper__step--current .stepper__marker {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-accent-ink);
  }

  .stepper__step--current .stepper__label {
    color: var(--color-ink);
  }

  /* Start */
  .wizard-start__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-three-quarters);
    margin: 0;
    padding: 0;
    border: 0;
  }

  .wizard-start__choice {
    min-block-size: calc(var(--space-triple) * 2);
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;
    gap: var(--space-three-quarters);
    padding: var(--space-and-quarter);
    border: var(--border-thick);
    border-radius: var(--radius-large);
    background: var(--color-canvas);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
  }

  .wizard-start__choice:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-highlight);
  }

  .wizard-start__choice:has(input:disabled) {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
  }

  .wizard-start__choice input {
    inline-size: var(--space-and-quarter);
    block-size: var(--space-and-quarter);
    margin: var(--space-eighth) 0 0;
    accent-color: var(--color-accent);
  }

  .wizard-start__choice-copy {
    display: grid;
    align-content: start;
    gap: var(--space-quarter);
  }

  .wizard-start__choice-copy strong {
    font-size: var(--text-body);
  }

  .wizard-start__choice-copy span {
    color: var(--color-ink-soft);
    font-size: var(--text-small);
    line-height: var(--leading-normal);
  }

  .wizard-start__copy {
    display: none;
    gap: var(--space-half);
  }

  .wizard-start:has(#start_mode_copy:checked) .wizard-start__copy {
    display: grid;
  }

  .wizard-counters {
    display: grid;
    gap: 0;
    padding-block: var(--space-half);
  }

  /* Listing */
  .wizard-listing__photos {
    margin-block-start: var(--space-double);
  }

  .wizard-listing__photos-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space);
    margin-block-end: var(--space-three-quarters);
  }

  .wizard-listing__photos-heading .form__hint {
    margin-block-start: var(--space-quarter);
  }

  /* Final review */
  .wizard-readiness,
  .wizard-review,
  .wizard-publish {
    margin-block-start: var(--space-and-half);
  }

  /* Publishing is its own panel, below the form and outside it, because a submit
     button only carries the fields of the form it sits in — one placed among the
     licence inputs would look like it was saving them and would not. The heading
     and the line under it are what make that separation legible rather than
     surprising. */
  .wizard-publish p {
    margin-block: var(--space-half) 0;
    color: var(--color-ink-soft);
    font-size: var(--text-small);
  }

  .wizard-readiness__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .wizard-readiness__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-three-quarters);
    padding-block: var(--space-three-quarters);
  }

  .wizard-readiness__row + .wizard-readiness__row {
    border-block-start: var(--border-faint);
  }

  .wizard-readiness__channel {
    min-inline-size: 0;
    display: grid;
    gap: var(--space-eighth);
  }

  .wizard-readiness__channel span {
    color: var(--color-ink-soft);
    font-size: var(--text-small);
  }

  /* Custom properties cannot be used in a media condition. */
  @media (width < 60rem) {
    .wizard__bar {
      grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .wizard__bar-copy {
      justify-items: start;
      text-align: start;
    }

    .wizard__exit {
      display: none;
    }

    .wizard__progress-track {
      display: block;
    }

    .wizard__body {
      display: block;
    }

    .wizard__rail {
      display: none;
    }

    .wizard--with-aside .wizard__body {
      grid-template-columns: minmax(0, 1fr);
    }

    /* On a phone the preview would sit under a form nobody has scrolled to the
       bottom of, which is not a preview. The card's job is done by the fields
       themselves at that width. */
    .wizard__aside {
      display: none;
    }

    .wizard__content {
      padding: var(--space-and-quarter) var(--space) var(--space-two-and-half);
    }

    .wizard__header {
      margin-block-end: var(--space-and-half);
    }

    .wizard__header h1 {
      font-size: var(--text-large);
    }

    .wizard .wizard__actions {
      padding-inline: var(--space);
    }

    .wizard__action-note {
      display: none;
    }

    .wizard .wizard__actions > :last-child {
      margin-inline-start: auto;
    }

    .wizard-start__choices {
      grid-template-columns: 1fr;
    }
  }

  @media (width < 32rem) {
    .wizard-readiness__row {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .wizard-readiness__row > .badge {
      grid-column: 2;
      justify-self: start;
    }
  }
}