/* Hallmark · component: journey-coach-sheet (journeys.js) · genre: playful
 * states: default · hover · focus · active · skip · dots · input · actions
 * Bottom-sheet coachmark: goud/champagne card-DNA, duimzone, 8pt-schaal.
 * Motion: alleen transform/opacity; prefers-reduced-motion → geen slide/fade. */

.js-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--z-toast) + 5);
  display: grid; align-items: end; justify-items: center;
  background: rgba(30, 20, 8, 0.45);
  padding: 0;
}
.js-backdrop[hidden] { display: none; }

.js-sheet {
  position: relative;
  width: min(480px, 100%);
  background: var(--color-paper-2);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lift);
  padding: var(--space-xs) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  text-align: center;
  will-change: transform;
}

.js-grab {
  width: 44px; height: 4px; border-radius: var(--radius-pill);
  background: var(--color-gold-pale);
  margin: 0 auto var(--space-sm);
}

.js-skip {
  position: absolute; top: var(--space-xs); right: var(--space-xs);
  min-height: 44px; min-width: 44px; padding: 8px 12px;
  background: none; border: 0; border-radius: var(--radius-pill);
  color: var(--color-muted); font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 700; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.js-skip:hover { color: var(--color-ink); background: color-mix(in srgb, var(--color-gold-pale) 55%, transparent); }
.js-skip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.js-skip:active { transform: translateY(1px); }

.js-icon {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin: var(--space-2xs) auto var(--space-xs);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-accent-ink);
  border: 3px solid var(--color-paper-2);
  box-shadow: var(--shadow-soft);
}
.js-icon svg { width: 30px; height: 30px; }

.js-title {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  margin: 0 0 var(--space-2xs); color: var(--color-ink);
}
.js-text {
  margin: 0 auto var(--space-sm); max-width: 38ch;
  color: var(--color-ink-soft); font-size: 0.98rem; line-height: 1.55;
}

.js-extra { margin-block-end: var(--space-xs); }
.js-extra .field-label { text-align: left; }

.js-dots { display: flex; gap: 6px; justify-content: center; margin-block-end: var(--space-xs); }
.js-dots:empty { display: none; }
.js-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-paper-3); transition: background-color var(--dur-short) var(--ease-out), width var(--dur-short) var(--ease-out); }
.js-dot.on { width: 22px; background: var(--color-gold); }

.js-actions { display: flex; flex-direction: column; gap: var(--space-2xs); }
.js-actions .btn { width: 100%; }

@media (min-width: 40rem) {
  .js-backdrop { align-items: center; padding: var(--space-md); }
  .js-sheet { border-radius: var(--radius-lg); padding-block-end: var(--space-md); }
}

/* scroll/achtergrond rustig houden tijdens de sheet */
html.js-open, html.js-open body { overflow: hidden; }

/* reduced motion: geen slide/fade; sheet staat er direct (parity-path) */
@media (prefers-reduced-motion: reduce) {
  .js-sheet, .js-backdrop { animation: none !important; transition: none !important; }
}