/* =========================================================
   Cogestione Onboarding — Stepped wizard
   Uses only CSS custom properties from styles.css / app.css
   ========================================================= */

/* Layout wrapper */
.ob-layout {
  display: grid;
  gap: var(--space-lg);
}

/* ---------------------------------------------------------
   Stepper nav
   --------------------------------------------------------- */
.ob-stepper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ob-stepper::-webkit-scrollbar { display: none; }

.ob-stepper-track {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: max-content;
}

.ob-stepper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 var(--space-sm);
  color: var(--color-text-subtle);
  transition: color var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.ob-stepper-item:hover { color: var(--color-text-muted); }

.ob-stepper-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  background: var(--color-bg-elevated);
  color: var(--color-text-subtle);
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.ob-stepper-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Active step */
.ob-stepper-item--active { color: var(--color-text); }
.ob-stepper-item--active .ob-stepper-dot {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* Completed step */
.ob-stepper-item--done { color: var(--color-text-muted); }
.ob-stepper-item--done .ob-stepper-dot {
  background: rgba(255, 92, 0, 0.15);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Connector line */
.ob-stepper-connector {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  min-width: 24px;
  align-self: flex-start;
  margin-top: 16px;
  transition: background var(--duration-normal) var(--ease-out);
}
.ob-stepper-connector--done { background: var(--color-accent); }

/* ---------------------------------------------------------
   Viewport + step transitions
   --------------------------------------------------------- */
.ob-viewport {
  position: relative;
  min-height: 320px;
}

.ob-step {
  display: none;
  animation: ob-step-in var(--duration-normal) var(--ease-out) both;
}
.ob-step--active { display: block; }

@keyframes ob-step-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------
   Step header (shared)
   --------------------------------------------------------- */
.ob-step-header {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.ob-step-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.ob-step-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--color-text);
}

.ob-step-desc {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0;
}
.ob-step-desc strong { color: var(--color-text); }

/* ---------------------------------------------------------
   Step 1 — Feature cards grid
   --------------------------------------------------------- */
.ob-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

.ob-feature-card {
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding: var(--space-md);
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.ob-feature-card:hover { border-color: var(--color-border-light); }

.ob-feature-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  display: grid;
  place-items: center;
  color: var(--color-accent);
}

.ob-feature-title {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--color-text);
}
.ob-feature-card p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------------------------------------------------------
   Step 2 — Slots timeline + rules
   --------------------------------------------------------- */
.ob-slots-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.ob-slots-timeline {
  display: grid;
  gap: 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.ob-slot-item {
  padding: var(--space-md);
  display: grid;
  gap: 6px;
  border-bottom: 1px solid var(--color-border);
}
.ob-slot-item:last-child { border-bottom: none; }

.ob-slot-time {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.ob-slot-label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.ob-slot-hours { font-size: 0.8125rem; }

.ob-slot-bar {
  height: 3px;
  background: var(--color-accent);
  opacity: 0.6;
  width: 48px;
}

.ob-slot-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}

.ob-slots-rules {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
}

.ob-rule-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.ob-rule-item > i {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-text-subtle);
}

/* ---------------------------------------------------------
   Step 3 — How-to numbered list
   --------------------------------------------------------- */
.ob-how-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.ob-how-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding: var(--space-md);
}

.ob-how-number {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
}

.ob-how-content { display: grid; gap: 4px; }

.ob-how-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text);
}
.ob-how-item p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------------------------------------------------------
   Step 4 — Final / CTA
   --------------------------------------------------------- */
.ob-final-layout {
  display: grid;
  gap: var(--space-lg);
}

.ob-recap-list {
  display: grid;
  gap: var(--space-sm);
}

.ob-recap-item {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}
.ob-recap-item > i { flex-shrink: 0; color: var(--color-text-subtle); }

.ob-recap-item--done { color: var(--color-text); }
.ob-recap-item--done > i { color: var(--color-accent); }

.ob-final-cta {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.ob-final-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.ob-final-help {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}
.ob-final-help a {
  color: var(--color-accent);
  text-decoration: none;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.ob-final-help a:hover { text-decoration: underline; }

/* ---------------------------------------------------------
   Bottom navigation bar
   --------------------------------------------------------- */
.ob-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

.ob-counter {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   Responsive  (mobile-first additions)
   --------------------------------------------------------- */

/* Tablet: stack slots timeline on narrower viewports */
@media (max-width: 900px) {
  .ob-slots-layout {
    grid-template-columns: 1fr;
  }
}

/* ── 768px: general mobile layout ── */
@media (max-width: 768px) {
  /* Reduce outer layout gap */
  .ob-layout {
    gap: var(--space-md);
  }

  /* Shrink viewport placeholder height */
  .ob-viewport {
    min-height: 200px;
  }

  .ob-step-title {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }

  /* Reduce kicker letter-spacing so it doesn't overflow on narrow screens */
  .ob-step-kicker {
    letter-spacing: 0.12em;
  }

  /* Step header more compact */
  .ob-step-header {
    margin-bottom: var(--space-md);
    gap: var(--space-xs);
  }

  /* Feature cards single column */
  .ob-feature-grid {
    grid-template-columns: 1fr;
  }

  /* Navigation buttons meet 44 px touch target (common.css covers ≤480px,
     but we need it here too for the 480–768 range) */
  .ob-navigation .btn {
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
  }

  /* CTA buttons stack */
  .ob-final-cta { flex-direction: column; }
  .ob-final-cta .btn { width: 100%; justify-content: center; }
}

/* ── 640px: stepper becomes icon-only to prevent horizontal overflow ── */
@media (max-width: 640px) {
  /* Hide text labels; dots + connectors fit within 288 px */
  .ob-stepper-label {
    display: none;
  }

  /* Ensure the stepper button itself has a large-enough touch target */
  .ob-stepper-item {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: var(--space-xs);
  }

  /* Connector can be shorter */
  .ob-stepper-connector {
    min-width: 16px;
  }
}

/* ── 480px: very small phones ── */
@media (max-width: 480px) {
  /* Even smaller layout gap */
  .ob-layout {
    gap: var(--space-sm);
  }

  .ob-step-title {
    font-size: clamp(1.2rem, 5.5vw, 1.4rem);
  }

  /* How-to list: stack number above content */
  .ob-how-item {
    flex-direction: column;
    gap: var(--space-sm);
  }
  .ob-how-number { width: auto; }

  /* Navigation: hide counter, tighten gap */
  .ob-navigation { gap: var(--space-sm); }
  .ob-counter { display: none; }

  /* Feature card: tighter inner padding */
  .ob-feature-card {
    padding: var(--space-sm);
  }

  /* How item: tighter inner padding */
  .ob-how-item {
    padding: var(--space-sm);
  }

  /* Recap item compact */
  .ob-recap-item {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ob-step { animation: none; }
  .ob-stepper-dot,
  .ob-stepper-connector,
  .ob-feature-card { transition: none; }
}