/* ==========================================================================
   Page - Add Thing Wizard
   Multi-step wizard for creating new things.

   Layout architecture:
   - .page-add-thing has no base styles — layouts handle their own spacing.
   - During wizard steps: .wizard-add-thing is the active layout (self-sufficient).
   - On completion: JS adds .page-grid, switching to the grid layout.
     The wizard is hidden and .grid-cards.wizard-complete takes over.
   ========================================================================== */

/* ==========================================================================
   Wizard Container — self-sufficient layout
   Owns its own height, padding, and centering. Does not rely on .page-add-thing.
   ========================================================================== */

.wizard-add-thing {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-4);
}

.wizard-add-thing__header {
  margin-block-end: var(--space-4);
}

/* ==========================================================================
   Step Container
   ========================================================================== */

.wizard-add-thing__step-container {
  flex: 1; /* Push nav to bottom */
}

/* Individual step */
.wizard-step__title {
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-primary);
  font-size: var(--type-title-lg-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-title-lg-line-height);
  color: var(--np-color-on-surface);
  text-align: center;
}

.wizard-step__subtitle {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4) 0;
  font-family: var(--font-primary);
  font-size: var(--text-small-size);
  color: var(--np-color-on-surface-variant);
}

/* Wizard inputs - spacing and error state */
.wizard-step__body > .styled-input {
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   Chips Step Layout
   ========================================================================== */

/* Selected types list */
.wizard-step__selected {
  display: flex;
  flex-wrap: wrap;
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: var(--border-normal) var(--np-color-outline-variant);
}

.wizard-step__selected[hidden] {
  display: none;
}

/* Search input above the pool */
.wizard-step__search {
  margin-block-end: var(--space-3);
}

/* Pool chips container */
.wizard-step__chips {
  display: flex;
  flex-wrap: wrap;
  max-height: none;
}

/* "No results" / "Add new type" prompt */
.wizard-step__new-type {
  margin-block-start: var(--space-2);
}

.wizard-step__new-type[hidden] {
  display: none;
}

.wizard-step__no-results {
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-primary);
  font-size: var(--text-small-size);
  color: var(--np-color-on-surface-variant);
}

/* ==========================================================================
   Relationship Step
   ========================================================================== */

/* Selected thing card */
.wizard-step__selected-thing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  margin-block-end: var(--space-3);
  background: var(--np-color-surface-container);
  border: var(--border-normal) var(--np-color-outline-variant);
  border-radius: var(--space-2);
}

.wizard-step__selected-thing[hidden] {
  display: none;
}

.wizard-step__selected-thing-name {
  font-family: var(--font-primary);
  font-size: var(--type-body-lg-size);
  font-weight: var(--font-weight-medium);
  color: var(--np-color-on-surface);
}

.wizard-step__selected-thing-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: var(--type-title-lg-size);
  color: var(--np-color-on-surface-variant);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--transition-fast);
}

.wizard-step__selected-thing-remove:hover {
  background: var(--np-color-surface-container-highest);
}

/* Relationship search results */
.wizard-step__rel-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.wizard-step__rel-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: var(--border-normal) var(--np-color-outline-variant);
  border-radius: var(--space-2);
  background: transparent;
  cursor: pointer;
  text-align: start;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.wizard-step__rel-result:hover {
  background: var(--np-color-surface-container);
  border-color: var(--np-color-outline);
}

.wizard-step__rel-result-name {
  font-family: var(--font-primary);
  font-size: var(--type-body-lg-size);
  font-weight: var(--font-weight-medium);
  color: var(--np-color-on-surface);
}

.wizard-step__rel-result-types {
  font-family: var(--font-primary);
  font-size: var(--text-small-size);
  color: var(--np-color-on-surface-variant);
}

/* "Create new" option at bottom of results */
.wizard-step__create-new {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: var(--border-normal) dashed var(--np-color-outline-variant);
  border-radius: var(--space-2);
  background: transparent;
  font-family: var(--font-primary);
  font-size: var(--type-body-lg-size);
  color: var(--np-color-primary);
  cursor: pointer;
  text-align: start;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.wizard-step__create-new:hover {
  background: var(--np-color-surface-container);
  border-color: var(--np-color-primary);
}

/* URL step - error state — uses .styled-input--error from styled-input.css */

/* URL step - no-URL checkbox */
.wizard-step__checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-primary);
  font-size: var(--text-small-size);
  color: var(--np-color-on-surface-variant);
  cursor: pointer;
}

.wizard-step__checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* ==========================================================================
   Breadcrumb — nesting trail for sub-flows
   ========================================================================== */

.wizard-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-block-end: var(--space-3);
  font-family: var(--font-primary);
  font-size: var(--text-small-size);
  color: var(--np-color-on-surface-variant);
}

.wizard-breadcrumb__item {
  white-space: nowrap;
}

.wizard-breadcrumb__separator {
  color: var(--np-color-outline);
}

.wizard-breadcrumb__new {
  color: var(--np-color-outline);
  font-style: italic;
}

/* ==========================================================================
   Constrained Type Tier — two-tier type selection in sub-flows
   ========================================================================== */

.wizard-step__tier-label {
  margin: var(--space-3) 0 var(--space-2) 0;
  font-family: var(--font-primary);
  font-size: var(--text-small-size);
  color: var(--np-color-on-surface-variant);
  border-block-start: var(--border-normal) var(--np-color-outline-variant);
  padding-block-start: var(--space-3);
}

/* ==========================================================================
   Navigation - Sits at bottom via flexbox
   ========================================================================== */

.wizard-add-thing__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-block-start: auto; /* Push to bottom if space available */
  background: var(--np-color-surface);
  border-block-start: var(--border-normal) var(--np-color-outline-variant);
  /* iOS safe area */
  padding-block-end: env(safe-area-inset-bottom, 0px);
}

/* Divider between buttons */
.wizard-add-thing__back {
  border-inline-end: var(--border-normal) var(--np-color-outline-variant);
}

/* When back is hidden, next spans full width */
.wizard-add-thing__back[hidden] {
  display: none;
}

.wizard-add-thing__back[hidden] + .wizard-add-thing__next {
  grid-column: 1 / -1;
}

/* ==========================================================================
   Completion Screen
   Uses .grid-cards.grid-cards--centered layout with .page-grid spacing.
   JS adds .page-grid to .page-add-thing on completion — no wizard-specific
   grid styles needed here.
   ========================================================================== */

/* ==========================================================================
   Desktop adjustments
   ========================================================================== */

@media (min-width: 481px) {
  .page-add-thing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .wizard-add-thing {
    min-height: unset;
    width: 60%;
    max-width: 700px;
    max-height: 700px;
    padding: var(--space-8);
  }

  .wizard-add-thing__nav {
    margin-block-start: var(--space-8);
    padding-block-end: 0;
  }
}

/* No mobile overrides — base styles handle mobile, desktop media query handles desktop */