/*
 * FlowPilot wizard layout — extracted subset for the UnterhaltsPlan preview route.
 *
 * Source of truth: flowpilot-design-system-lab
 *   branch: claude/flowpilot-unterhaltsplan-wizard-pattern-003
 *   commit: f6c5b318b08321ecb8081016cd02b706c0c58b7b
 *
 * These rules are copied verbatim from the FlowPilot lab's global stylesheets,
 * limited to the classes the UnterhaltsPlan wizard actually uses. They are kept
 * in a separate file (instead of the lab's full base.css / patterns.css) so the
 * public site shell is not affected by unrelated lab-chrome styling.
 *
 *   .fp-content, .fp-header-block ........ styles/base.css      (lines ~406-435)
 *   .fp-wizard-shell, .fp-wizard-main,
 *   .fp-step-panel, .fp-step-header,
 *   .fp-step-overline .................... styles/patterns.css  (lines ~4-63, 556-559)
 *
 * To re-sync: diff these blocks against the two source files above. The
 * UnterhaltsPlan skin (styles-order: loaded AFTER this file) overrides the
 * grid columns, colors and backgrounds via .up-blueprint / .up-wizard-shell.
 */

/* ── from base.css: content region ────────────────────────────────────── */
.fp-content {
  padding: var(--fp-space-xl);
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  flex-grow: 1;
  overflow-x: clip;
}

@media (min-width: 1600px) {
  .fp-content {
    max-width: 1520px;
  }
}

.fp-header-block {
  margin-bottom: var(--fp-space-xl);
}

.fp-header-block h1 {
  font-size: var(--fp-font-size-2xl);
  font-weight: 800;
  color: var(--fp-color-text);
  margin-bottom: var(--fp-space-xs);
}

.fp-header-block p {
  color: var(--fp-color-text-muted);
  font-size: var(--fp-font-size-base);
}

/* ── from patterns.css: wizard shell layout ───────────────────────────── */
.fp-wizard-shell {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
  box-sizing: border-box;
}

@media (min-width: 1600px) {
  .fp-wizard-shell {
    max-width: 1520px;
  }
}

.fp-wizard-main {
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-lg);
  min-width: 0; /* Prevents flex children from overflowing */
}

/* Step Container */
.fp-step-panel {
  display: none;
}

.fp-step-panel.active {
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-lg);
}

.fp-step-header {
  margin-bottom: var(--fp-space-sm);
}

.fp-step-overline {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fp-color-primary);
  margin-bottom: var(--fp-space-xs);
  display: block;
}

.fp-step-header h2 {
  font-size: var(--fp-font-size-xl);
  font-weight: 800;
  color: var(--fp-color-text);
  margin-bottom: var(--fp-space-xs);
}

.fp-step-header p {
  color: var(--fp-color-text-muted);
  font-size: var(--fp-font-size-sm);
}

/* Responsive: collapse the 3-column wizard to a single column.
   The UnterhaltsPlan skin refines this further at 1360px / 1024px. */
@media (max-width: 1024px) {
  .fp-wizard-shell {
    grid-template-columns: 1fr;
  }
}