/* Step header + shared shell for the type 'd' flow (intake → route →
   indeling → activiteiten). Sticky, so the traveller always sees how far in
   they are. Brand tokens from styles.css only. */

/* styles.css has no global border-box, and every card on these screens sizes
   itself against a grid track. Without this a card's padding is added on top of
   its track width and the columns overlap. Scoped to the flow. */
.plan-steps, .plan-steps *,
.plan-shell, .plan-shell * { box-sizing: border-box; }

.plan-steps {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(246, 248, 250, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 1.5rem;
}

.plan-steps-inner {
  max-width: 74rem;
  margin: 0 auto;
  padding: .75rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.plan-steps-brand {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: -.02em;
  color: var(--text-primary);
}

.plan-steps-track {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow-x: auto;
}

.plan-steps-chip {
  flex: 0 0 auto;
  font-size: .75rem;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
}

.plan-step {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 0 0 auto;
  padding: .3rem .6rem;
  border-radius: 999px;
}
.plan-step.is-now { background: #f0f9f9; }

.plan-step-line {
  width: 1.6rem;
  height: 1px;
  background: #dbe3e8;
  margin-right: .6rem;
  flex: 0 0 auto;
}
.plan-step.is-done .plan-step-line,
.plan-step.is-now .plan-step-line { background: var(--brand-primary); }

.plan-step-num {
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  font-size: .66rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  background: #e2e8f0;
  color: #94a3b8;
}
.plan-step.is-done .plan-step-num,
.plan-step.is-now  .plan-step-num { background: var(--brand-primary); color: #fff; }

.plan-step-label {
  font-size: .78rem;
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
}
.plan-step.is-done .plan-step-label { color: #2f8083; }
.plan-step.is-now  .plan-step-label { color: var(--text-primary); font-weight: 700; }

/* ── Shared two-column shell ─────────────────────────────────── */
/* Main column plus a sticky rail: the rail carries the summary and the one
   button that moves the flow forward, so the decision is always in view. */
.plan-shell {
  max-width: 74rem;
  margin: 0 auto;
  padding: .5rem 1.75rem 5.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 1.6rem;
  align-items: start;
}
.plan-shell.is-single { grid-template-columns: minmax(0, 1fr); }

.plan-shell-main { min-width: 0; }

.plan-rail {
  position: sticky;
  top: 4.6rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-width: 0;
}

.plan-rail-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1rem 1.15rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.plan-rail-title {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 .7rem;
}

.plan-rail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 0;
  border-top: 1px solid #f1f5f9;
}
.plan-rail-row:first-of-type { border-top: none; }
.plan-rail-row dt, .plan-rail-key { font-size: .78rem; color: #64748b; }
.plan-rail-row dd, .plan-rail-val {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
}
.plan-rail-val.is-off { color: var(--brand-3); }

@media (max-width: 900px) {
  .plan-shell { grid-template-columns: minmax(0, 1fr); }
  .plan-rail { position: static; }
  .plan-steps-track { justify-content: flex-start; }
  .plan-steps-chip { display: none; }
}

@media (max-width: 560px) {
  .plan-steps-inner { padding: .6rem .9rem; gap: .8rem; }
  .plan-step-label { display: none; }
  .plan-step-line { width: .9rem; margin-right: .35rem; }
  .plan-shell { padding: .5rem 1rem 5rem; }
}