/* Shared wizard chrome — the pieces every wizard family agrees on.
   The rules and the reasoning live in docs/topics/WIZARDS.md; this file is
   where the agreed-upon ones are defined exactly once. Anything a single
   family needs belongs in that family's stylesheet, not here. */

@layer page {

/* Booking's terminal pages (success, inactive) — a centred card, no steps. */
.wizard-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  background: var(--color-bg);
}

.wizard {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  min-height: 100vh;
  padding: 1rem;

  @media (min-width: 640px) {
    min-height: auto;
    padding: 2rem;
  }
}

.wizard--animate-in {
  animation: wizardFadeIn 0.3s ease-out;
}

@keyframes wizardFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wizard_content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wizard_step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wizard_title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--wizard-body-gap);
  color: var(--color-text);

  /* A subtitle belongs to the title, so it sits close; the body gap moves down
     to the subtitle and the distance to what follows stays the same. */
  &:has(+ .wizard_subtitle) {
    margin-bottom: var(--wizard-title-gap);
  }
}

.wizard_subtitle {
  font-size: var(--text-base);
  color: var(--color-text-light);
  margin: 0 0 var(--wizard-body-gap);
}

/* Feedback */
.wizard_feedback {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: var(--text-sm);
  background: var(--color-bg-light);
  border-radius: 4px;
  text-align: center;

  &.error {
    background: var(--color-danger-light);
    color: var(--color-danger-text);
  }

  &.success {
    background: var(--color-success-wash);
    color: var(--color-success-text);
  }
}

/* The canonical wizard field — a line, not a box. A wizard step is one question
   on an otherwise empty screen; a box draws a second frame inside an empty one.
   See docs/topics/WIZARDS.md §1. Everything a wizard family types into uses this,
   including the settings field-edit pages. `.form-input` keeps its boxed
   treatment for dense forms outside wizards. */
.wizard_input {
  width: 100%;
  padding: 12px 0;
  font-size: var(--text-base);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-text);
  text-align: left;

  &:focus {
    outline: none;
    border-bottom-color: var(--color-primary);
  }

  &::placeholder {
    color: var(--color-muted);
  }

  &:disabled,
  &[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
  }

  &.error {
    border-bottom-color: var(--color-danger);
  }
}

.wizard_label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-align: left;
}

/* A hint is a footnote to the field above it, not a second line of it — it needs
   enough air to stop reading as part of the input. */
.wizard_input + .form-hint {
  display: block;
  margin-top: var(--wizard-hint-gap);
}

/* The canonical in-flow CTA. Keyboard steps must never pin their button: on iOS
   the keyboard covers anything fixed or sticky to the viewport bottom. --cta-gap
   marks the change of zone — this is not another field, it is the thing that
   ends the step. See §5. Non-keyboard steps pin instead, via _sticky_actions.css. */
.wizard_cta,
.onboarding_actions,
.field-edit-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin-top: var(--cta-gap);
}

/* Onboarding clears the home indicator on its `.onboarding` wrapper, and
   field-edit does it on `.field-edit-actions` (page.css) — only `.wizard_cta`
   has to clear it here. */
.wizard_cta {
  padding-bottom: calc(12px + var(--safe-bottom));
}

/* Inside a gapped form the flex gap already supplies part of the separation,
   so the margin is trimmed by it and the visual distance stays --cta-gap. */
.wizard-form > .wizard_cta {
  margin-top: calc(var(--cta-gap) - 1rem);
}

.wizard_actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.wizard-btn {
  width: 100%;
  border: none;
  border-radius: 4px;
  font-weight: var(--font-weight-semibold);

  &.secondary {
    background: var(--color-bg-secondary);
    color: var(--color-text);
  }

  &.secondary:hover {
    background: var(--color-bg-tertiary);
  }
}

.wizard_link {
  font-size: var(--text-sm);
  color: var(--color-link);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;

  &:hover:not(:disabled) {
    color: var(--color-primary-hover);
  }

  &:disabled {
    color: var(--color-muted);
    cursor: not-allowed;
    opacity: 0.6;
  }
}

/* .wizard_back, .wizard_continue, .wizard_skip and .wizard_step_<name> are
   system-test hooks (test/support/wizard_test_helpers.rb). They carry no styles
   by design — see docs/topics/WIZARDS.md, "Test-hook contract". */

} /* @layer page */