/* ==========================================================================
   components.css — ticketstubs, tijdlijnpad, formulier-onderdelen, ornamenten
   ========================================================================== */

/* ============ Waterverf-wash achter een tekstblok ============
   Wordt altijd achter de inhoud gelegd met een onregelmatige rand. */
.wash {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.wash svg { width: 100%; height: 100%; }
.wash--olive  use { fill: rgba(139, 128, 76, 0.13); }
.wash--sand   use { fill: rgba(206, 190, 116, 0.20); }
.wash--peach  use { fill: rgba(231, 181, 143, 0.22); }
.wash--paper  use { fill: rgba(242, 235, 218, 0.85); }

/* ============ Hoekornamenten (veer met kraaltjes) ============ */
.corner-orn {
  position: absolute;
  width: clamp(80px, 9vw, 128px);
  color: var(--olive);
  opacity: 0.75;
  pointer-events: none;
}
.corner-orn svg { width: 100%; height: auto; }
.corner-orn--tl { top: clamp(0.9rem, 2vw, 1.6rem); left: clamp(0.9rem, 2vw, 1.6rem); transform: rotate(-8deg); }
.corner-orn--tr { top: clamp(0.9rem, 2vw, 1.6rem); right: clamp(0.9rem, 2vw, 1.6rem); transform: scaleX(-1) rotate(-8deg); }
.corner-orn--bl { bottom: clamp(0.9rem, 2vw, 1.6rem); left: clamp(0.9rem, 2vw, 1.6rem); transform: rotate(8deg); }
.corner-orn--br { bottom: clamp(0.9rem, 2vw, 1.6rem); right: clamp(0.9rem, 2vw, 1.6rem); transform: scaleX(-1) rotate(8deg); }

/* ============ Geluidsknoppen (handgetekend, geen UI-icoon) ============ */
.ornament-btn {
  position: fixed;
  bottom: clamp(1rem, 2.4vw, 1.9rem);
  right: clamp(1rem, 2.4vw, 1.9rem);
  z-index: 400;
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  color: var(--olive);
  opacity: 0.55;
  transition: opacity 0.4s ease, color 0.4s ease;
}
.ornament-btn:hover { opacity: 1; color: var(--coral); }
.ornament-btn svg { width: 26px; height: 26px; }
.ornament-btn-wave { width: 14px !important; opacity: 0; transition: opacity 0.4s ease; }
.ornament-btn[aria-pressed="true"] { opacity: 0.95; }
.ornament-btn[aria-pressed="true"] .ornament-btn-wave { opacity: 1; }

.ornament-btn--video {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2.2rem);
  left: clamp(1rem, 3vw, 2.2rem);
  right: auto;
  color: var(--paper);
  opacity: 0.72;
  flex-direction: column;
  gap: 0.2rem;
}
.ornament-btn--video:hover { color: var(--paper); opacity: 1; }
.ornament-btn-label {
  font-family: var(--font-script);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

/* ============ Aftelklok ============ */
.countdown {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.4rem, 1.6vw, 1.4rem);
  margin-top: clamp(2rem, 4vw, 3.4rem);
  color: var(--paper);
}
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(58px, 8vw, 96px);
}
.countdown-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.countdown-lbl {
  font-family: var(--font-body);
  font-size: clamp(0.66rem, 0.9vw, 0.82rem);
  letter-spacing: 0.2em;
  text-transform: lowercase;
  opacity: 0.8;
  margin-top: 0.5rem;
}
.countdown-sep {
  width: clamp(26px, 4vw, 54px);
  color: var(--sand);
  opacity: 0.7;
  margin-top: clamp(0.9rem, 2.2vw, 1.8rem);
}
.countdown-sep svg { width: 100%; height: auto; }

/* ============ Naampoort ============ */
.name-gate { margin-top: 1.8rem; text-align: left; }
.name-label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  color: var(--ink);
}
.name-helper {
  font-size: 0.92rem;
  color: var(--ink-faint);
  font-style: italic;
  margin-top: 0.25rem;
}

/* Invoerveld = een lijn uit een schetsboek, geen kader */
.name-input {
  display: block;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.4rem 0.2rem 0.62rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  letter-spacing: 0.02em;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 8' preserveAspectRatio='none'%3E%3Cpath d='M2,5 C40,2 70,7 108,4 C150,1 190,7 232,4 C268,2 286,6 298,4' fill='none' stroke='%238B804C' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 8px;
  border: 0;
  border-radius: 0;
}
.name-input:focus { outline: none; }
.name-input:focus, .name-input:not(:placeholder-shown) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 8' preserveAspectRatio='none'%3E%3Cpath d='M2,5 C40,2 70,7 108,4 C150,1 190,7 232,4 C268,2 286,6 298,4' fill='none' stroke='%23F58768' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Suggesties als handgeschreven regels, geen dropdown met rand.
   Begrensde hoogte + eigen scroll: bij veel treffers (tot 8) mag de lijst
   niet almaar verder groeien, anders schuift het paneel er toch weer door. */
.name-suggestions {
  margin-top: 0.9rem;
  min-height: 5rem;
  max-height: 15rem;
  overflow-y: auto;
}
.name-suggestions:empty { display: none; min-height: 0; }
.name-suggestions li { margin: 0; }
.name-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.3rem 0;
  font-family: var(--font-script);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--olive);
  line-height: 1.45;
  transition: color 0.3s ease, transform 0.3s ease;
}
.name-suggestion:hover,
.name-suggestion[aria-selected="true"] {
  color: var(--coral);
  transform: translateX(4px);
}
.name-suggestion-partner {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-style: italic;
  color: var(--ink-faint);
  margin-left: 0.5rem;
}

.name-confirm { margin-top: 1.4rem; }
.name-confirm-q {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.name-nomatch {
  margin-top: 1.2rem;
  font-size: 0.98rem;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ============ TICKETSTUBS ============
   Drie stubs, losjes gefanned op een tafel gelegd. Geen kolommenraster. */
.ticket-fan {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin: clamp(2.4rem, 5vw, 4rem) 0 clamp(1.6rem, 3vw, 2.4rem);
  padding: 1rem 0;
}

.ticket {
  position: relative;
  flex: 0 0 auto;
  width: clamp(210px, 25vw, 280px);
  min-height: clamp(340px, 40vw, 430px);
  padding: 1.7rem 1.4rem 1.9rem 2.3rem;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease;
}

/* De onregelmatige ticketvorm, met de hand getrokken */
.ticket-frame {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
}
.ticket-shape {
  fill: var(--paper-deep);
  stroke: var(--ink);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

/* Perforatie: rondjes in papierkleur langs de linkerrand */
.ticket-perf {
  position: absolute;
  top: 1.1rem; bottom: 1.1rem;
  left: 1.45rem;
  width: 7px;
  background-image: radial-gradient(circle at 50% 50%, var(--paper) 0 2.6px, transparent 2.9px);
  background-size: 7px 13px;
  background-repeat: repeat-y;
  pointer-events: none;
}

.ticket-inner { position: relative; }

.ticket-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ticket-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-top: 0.5rem;
}
.ticket-when {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink-faint);
  margin-top: 0.4rem;
}
.ticket-orn {
  width: 62px;
  color: var(--sand);
  margin: 0.7rem 0 0.9rem;
}
.ticket-orn svg { width: 100%; height: auto; }

/* Wat er inzit — als handgeschreven notities, niet als opsomming met icoontjes */
.ticket-list { font-size: 0.88rem; line-height: 1.45; }
.ticket-list li {
  position: relative;
  padding-left: 0.95rem;
  margin-top: 0.5rem;
  color: var(--ink-soft);
}
.ticket-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  background: var(--sand);
  border-radius: 50% 40% 55% 45%;
}

/* De drie posities in de fan */
.ticket--pos1 { transform: rotate(-7deg) translateY(16px); z-index: 1; margin-right: -3.2rem; }
.ticket--pos2 { transform: rotate(1.5deg); z-index: 2; }
.ticket--pos3 { transform: rotate(6.5deg) translateY(20px); z-index: 1; margin-left: -3.2rem; }

/* Het eigen ticket: vol in kleur, groter, bovenop, minder gedraaid */
.ticket.is-active {
  z-index: 5;
  transform: rotate(-1deg) scale(1.075);
}
.ticket.is-active .ticket-shape { fill: var(--paper); stroke-width: 1.5; }
.ticket.is-active .ticket-name { color: var(--olive); }
.ticket.is-active .ticket-list li { color: var(--ink); }
.ticket.is-active .ticket-orn { color: var(--coral); }
.ticket.is-active .ticket-kicker { color: var(--coral); }

/* De andere twee: verbleekt, zodat gasten wél zien dat ze bestaan */
.ticket.is-dim { opacity: 0.42; }
.ticket.is-dim .ticket-shape { fill: rgba(242, 235, 218, 0.55); stroke: var(--ink-faint); }
.ticket.is-dim .ticket-name,
.ticket.is-dim .ticket-list li { color: var(--ink-faint); }
.ticket.is-dim .ticket-perf { opacity: 0.5; }

.ticket-yours {
  position: absolute;
  top: -0.4rem; right: 0.9rem;
  font-family: var(--font-script);
  font-size: 1.15rem;
  color: var(--coral);
  transform: rotate(-6deg);
}

@media (max-width: 900px) {
  .ticket-fan { flex-direction: column; align-items: center; gap: 1.6rem; }
  .ticket { width: min(320px, 88vw); min-height: 0; margin: 0 !important; }
  .ticket--pos1, .ticket--pos2, .ticket--pos3 { transform: rotate(-1.5deg); }
  .ticket--pos3 { transform: rotate(1.5deg); }
  .ticket.is-active { transform: rotate(0deg) scale(1); }
  /* In deze kolom bepaalt de volgorde in de HTML normaal welk ticket
     bovenaan staat — altijd Weekend, ongeacht wiens ticket het is. De eigen
     ticket moet hier juist eerst staan, dus die halen we met "order" naar
     voren (heeft geen effect op desktop, waar dit al via z-index gebeurt). */
  .ticket.is-active { order: -1; }
}

/* ============ Inktstempel (hoofdactie: Join wedding) ============ */
.stamp {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.1rem, 2.4vw, 1.7rem) clamp(2rem, 4.5vw, 3.4rem);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--coral);
  text-transform: uppercase;
  transform: rotate(-2.2deg);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
}
/* De stempelrand: onregelmatige dubbele inktlijn */
.stamp::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M6,12 C70,5 150,10 226,6 C270,4 296,9 294,20 C297,44 291,70 294,84 C296,94 240,90 180,93 C120,96 60,90 12,94 C3,95 4,70 6,50 C7,32 3,18 6,12 Z' fill='none' stroke='%23F58768' stroke-width='2.4'/%3E%3Cpath d='M12,18 C74,12 148,16 220,12 C262,10 290,15 288,24 C290,44 285,66 288,78 C290,87 238,84 180,87 C122,90 64,84 18,88 C10,89 11,68 12,52 C13,36 9,24 12,18 Z' fill='none' stroke='%23F58768' stroke-width='1' opacity='0.55'/%3E%3C/svg%3E");
}
.stamp:hover { transform: rotate(-0.6deg) scale(1.015); }

.stamp--done {
  color: var(--olive);
  transform: rotate(-3.4deg);
  opacity: 0.85;
}
.stamp--done::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M6,12 C70,5 150,10 226,6 C270,4 296,9 294,20 C297,44 291,70 294,84 C296,94 240,90 180,93 C120,96 60,90 12,94 C3,95 4,70 6,50 C7,32 3,18 6,12 Z' fill='none' stroke='%238B804C' stroke-width='2.4'/%3E%3Cpath d='M20,74 C90,58 190,40 280,26' fill='none' stroke='%238B804C' stroke-width='1.6' opacity='0.7'/%3E%3C/svg%3E");
}

.stamp-sub {
  margin-top: 1rem;
  font-size: 0.96rem;
  color: var(--ink-soft);
}

/* ============ Kronkelend pad voor de planning ============ */
.timeline { position: relative; margin-top: clamp(2rem, 5vw, 4rem); }

.timeline-path {
  position: absolute;
  top: 0; left: clamp(14px, 5vw, 60px);
  width: clamp(120px, 22vw, 240px);
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.timeline-path path {
  fill: none;
  stroke: var(--sand);
  stroke-width: 2.2;
  stroke-linecap: round;
  /* GEEN vector-effect: non-scaling-stroke hier — die botst met de
     niet-uniforme uitrekking van deze SVG (preserveAspectRatio="none" op
     een 200×1000 viewBox naar een veel hogere dan brede rendering) en
     veroorzaakte dat de lijn onderaan een lange planning niet meer
     zichtbaar/geschilderd werd, ook al klopte stroke-dashoffset wel. */
}

.timeline-day {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.6rem, 5vw, 4.2rem);
  padding-left: clamp(4.5rem, 13vw, 11rem);
}
.timeline-day:first-child { margin-top: 0; }
.timeline-day-title {
  font-family: var(--font-script);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  color: var(--coral);
  margin-bottom: 0.4rem;
}

.timeline-stop {
  position: relative;
  display: grid;
  grid-template-columns: clamp(3.4rem, 6vw, 4.6rem) 1fr;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  align-items: start;
  padding: clamp(0.9rem, 1.8vw, 1.4rem) 0;
}
/* Het schetsicoontje van de halte, links van het pad */
.timeline-stop-icon {
  position: absolute;
  left: clamp(-4.2rem, -9vw, -7.4rem);
  top: clamp(0.8rem, 1.6vw, 1.2rem);
  width: clamp(30px, 4.4vw, 46px);
  color: var(--olive);
  opacity: 0.8;
}
.timeline-stop-icon svg { width: 100%; height: auto; }

.timeline-time {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--olive);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding-top: 0.06em;
}
.timeline-body { display: block; }

/* Naam en locatie op één regel, met flink wat lucht ertussen */
.timeline-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
}
.timeline-what {
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  color: var(--ink);
  line-height: 1.25;
}
.timeline-where {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.timeline-desc {
  display: block;
  margin-top: 0.42rem;
  max-width: 48ch;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ============ Kaart in een geschept-papieren lijst ============ */
.map-frame {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(0.7rem, 1.6vw, 1.2rem);
}
.map-frame-wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
}
.map-frame-wash use { fill: rgba(206, 190, 116, 0.28); }
.map-frame iframe,
.map-frame .map-placeholder {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(280px, 42vw, 440px);
  border: 0;
  display: block;
  /* Zachte, ontzadigde kaart die niet uit de stijl valt */
  filter: sepia(0.28) saturate(0.72) hue-rotate(-8deg) contrast(0.94) brightness(1.03);
}
.map-placeholder {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: var(--olive);
  font-family: var(--font-script);
  font-size: 1.3rem;
  background: rgba(242, 235, 218, 0.6);
  filter: none !important;
}

/* ============ RSVP-carrousel ============ */
.carousel {
  position: relative;
  min-height: clamp(420px, 62vh, 620px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.step { display: none; }
.step.is-current { display: block; animation: stepIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes stepIn {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}

.step-question {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
  max-width: 24ch;
}
/* Verschijnt pas nadat iemand "Volgende" probeerde zonder alles in te vullen */
.step-error {
  margin-top: 1rem;
  font-style: italic;
  color: var(--coral);
}
.step-error[hidden] { display: none; }

/* Onbeantwoorde rij aanduiden — dezelfde handgetekende gestippelde stijl als
   de focus-outline elders op de site, geen harde kaderlijn. */
.moment-row.is-unanswered {
  outline: 1.5px dashed var(--coral);
  outline-offset: 6px;
  border-radius: 2px;
}
.moment-row.is-unanswered .moment-label { color: var(--coral); }
.choice-row.is-unanswered {
  outline: 1.5px dashed var(--coral);
  outline-offset: 10px;
  border-radius: 2px;
}

.step-hint {
  margin-top: 0.9rem;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 44ch;
}
.step-body { margin-top: clamp(1.8rem, 4vw, 3rem); }

/* Per persoon een eigen kolom met antwoorden */
.person-block { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.person-name {
  font-family: var(--font-script);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  color: var(--coral);
  margin-bottom: 0.7rem;
}

.moment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  max-width: 34rem;
  padding: 0.62rem 0;
}
.moment-label {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  color: var(--ink);
}

/* Handgezet vinkje / kruisje als keuze */
.yesno { display: inline-flex; gap: 0.5rem; flex: 0 0 auto; }
.yesno-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  color: var(--ink-faint);
  opacity: 0.5;
  transition: opacity 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.yesno-btn svg { width: 24px; height: 24px; }
.yesno-btn:hover { opacity: 0.85; transform: scale(1.08); }
.yesno-btn[aria-pressed="true"] { opacity: 1; transform: scale(1.12); }
.yesno-btn--yes[aria-pressed="true"] { color: var(--olive); }
.yesno-btn--no[aria-pressed="true"]  { color: var(--coral); }

/* Geïllustreerde keuze (omnivoor / herbivoor) */
.choice-row { display: flex; gap: clamp(1.2rem, 3vw, 2.6rem); flex-wrap: wrap; }
.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.3rem;
  color: var(--ink-faint);
  opacity: 0.55;
  transition: opacity 0.4s ease, color 0.4s ease, transform 0.4s ease;
}
.choice svg { width: clamp(46px, 6vw, 64px); height: auto; }
.choice-label {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  letter-spacing: 0.03em;
}
.choice:hover { opacity: 0.85; }
.choice[aria-pressed="true"] {
  opacity: 1;
  color: var(--olive);
  transform: translateY(-3px);
}
/* Een losse cirkel-krabbel rond de gekozen optie */
.choice[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  inset: -0.3rem -0.1rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 160' preserveAspectRatio='none'%3E%3Cpath d='M70,6 C104,6 134,36 133,80 C132,124 102,153 68,153 C34,153 6,124 7,80 C8,38 36,7 70,6' fill='none' stroke='%238B804C' stroke-width='1.6' opacity='0.75'/%3E%3C/svg%3E");
}

/* Vrij tekstveld op schetsboeklijnen, geen kader */
.ruled-field {
  display: block;
  width: 100%;
  max-width: 40rem;
  min-height: 8.4rem;
  padding: 0 0.2rem;
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 2.1rem;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(2.1rem - 1px),
    rgba(139, 128, 76, 0.32) calc(2.1rem - 1px) 2.1rem
  );
  border: 0;
  border-radius: 0;
  resize: vertical;
}
.ruled-field:focus { outline: none; }
.ruled-field::placeholder { color: var(--ink-faint); font-style: italic; }

/* Voortgang: kleine inktstippen */
.progress {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
}
.progress-dot {
  width: 9px; height: 9px;
  border-radius: 52% 46% 50% 54%;
  background: var(--ink-faint);
  opacity: 0.4;
  transition: opacity 0.4s ease, background 0.4s ease, transform 0.4s ease;
}
.progress-dot.is-done { opacity: 0.7; background: var(--sand); }
.progress-dot.is-current { opacity: 1; background: var(--coral); transform: scale(1.5); }

.step-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: clamp(2rem, 4vw, 3.2rem);
}

/* Op mobiel is "Bevestig mijn/onze aanwezigheid" te lang om naast "Pas aan"
   te staan zonder te verspringen. Onder elkaar, met de bevestigknop
   bovenaan als hoofdactie. */
@media (max-width: 700px) {
  .step-nav--confirm {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 1.2rem;
  }
  .step-nav--confirm .ink-link--quiet { align-self: center; }
}

/* Samenvatting als lopende tekst, niet als tabel */
.summary-lines { max-width: 44rem; }
.summary-line {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.42rem);
  line-height: 1.55;
  color: var(--ink);
  margin-top: 0.9rem;
}
.summary-line em { color: var(--olive); font-style: italic; }

/* Bevestigingsstempel na verzenden */
.confirm-stamp {
  position: relative;
  display: inline-block;
  padding: 1.4rem 2.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  animation: stampDown 0.85s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.confirm-stamp::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110' preserveAspectRatio='none'%3E%3Cpath d='M8,14 C72,6 152,12 228,7 C272,4 296,10 293,22 C296,48 290,76 293,92 C295,103 240,98 178,101 C118,104 58,98 12,102 C3,103 5,76 7,54 C8,34 4,20 8,14 Z' fill='none' stroke='%23F58768' stroke-width='2.6'/%3E%3C/svg%3E");
}
@keyframes stampDown {
  0%   { opacity: 0; transform: rotate(-14deg) scale(2.1); }
  60%  { opacity: 1; transform: rotate(-3deg) scale(0.97); }
  100% { opacity: 1; transform: rotate(-3deg) scale(1); }
}

/* ============ Reveal-basis (GSAP zet deze op zichtbaar) ============ */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .step.is-current { animation: none; }
  .confirm-stamp { animation: none; }
}