/* Coaster editor panel (ui/ride-editor.js), ride window and ride choice screen (ui/ride-window.js). Same look as the build
   bar and tool row (game.css): white rounded panels, ice-blue buttons, salmon/green primaries.
   Phone (375x812): the editor panel sits in the bottom column above the bar; with the bar and the HUD
   it stays under 35% of the screen. Desktop (>= 900 px): wider cards with names, the ride window as a
   side panel on the right. */

/* ---------------------------------------------------------------- editor panel */
.cp-ride-ed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border-radius: 18px;
  background: var(--cp-panel);
  box-shadow: var(--cp-shadow);
}
.cp-ride-ed[hidden] { display: none; }
/* The build sheet replaces the editor panel while it is open (ride-editor.js update()). */
.cp-ride-ed.is-under-sheet { display: none; }
.cp-ride-ed { position: relative; }
.cp-ride-ed__budget {
  position: absolute;
  top: -15px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 7px;
  border-radius: 10px;
  background: var(--cp-panel);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--cp-ink) 18%, transparent);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--cp-ink);
}
.cp-ride-ed__budget[hidden] { display: none; }
/* Estimated train speed at the track end: the same kind of tab on the left of the top edge. */
.cp-ride-ed__speed {
  position: absolute;
  top: -15px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 7px;
  border-radius: 10px;
  background: var(--cp-panel);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--cp-ink) 18%, transparent);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--cp-ink);
}
.cp-ride-ed__speed.is-bad { background: var(--cp-bad); color: var(--cp-white); }
.cp-ride-ed__speed[hidden] { display: none; }
.cp-ride-ed__tabword { margin-right: 2px; }
.cp-ride-ed__tabword[hidden] { display: none; }
.cp-ride-ed__head { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.cp-ride-ed__exit, .cp-ride-ed__btn, .cp-ride-ed__step {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--cp-ice);
  color: var(--cp-ink);
  display: grid;
  place-items: center;
}
.cp-ride-ed__exit { background: var(--cp-slate); color: var(--cp-white); }
.cp-ride-ed__btn:disabled { opacity: 0.38; cursor: default; }
.cp-ride-ed__btn[hidden], .cp-ride-ed__auto[hidden], .cp-ride-ed__confirm[hidden] { display: none; }
.cp-ride-ed__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Name and price on one line: the name gives way (ellipsis), the price never does (it changes with
   every - / + of the station length, also on a 320 px phone). */
.cp-ride-ed__line1 { display: flex; align-items: baseline; min-width: 0; font-size: 16px; white-space: nowrap; }
.cp-ride-ed__name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 900; }
.cp-ride-ed__value { flex: none; white-space: pre; font-weight: 800; font-variant-numeric: tabular-nums; }
.cp-ride-ed__line2 {
  font-size: 16px;
  line-height: 1.2;
  color: var(--cp-slate);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.cp-ride-ed__info.is-ok .cp-ride-ed__value { color: color-mix(in srgb, var(--cp-ok) 55%, var(--cp-text)); }
.cp-ride-ed[data-mode="track"] .cp-ride-ed__info.is-ok .cp-ride-ed__line2 { color: color-mix(in srgb, var(--cp-ok) 50%, var(--cp-text)); font-weight: 800; }
.cp-ride-ed__info.is-bad .cp-ride-ed__line2 { color: var(--cp-bad); font-weight: 800; }
.cp-ride-ed__info.is-warn .cp-ride-ed__line2 { color: color-mix(in srgb, var(--cp-amber) 38%, var(--cp-text)); font-weight: 800; }
.cp-ride-ed__auto {
  flex: none;
  height: 44px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: 12px;
  background: var(--cp-amber);
  color: var(--cp-text);
  font-weight: 900;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--cp-text) 16%, transparent);
}
.cp-ride-ed__auto:disabled { background: var(--cp-peri); cursor: default; }
.cp-ride-ed__confirm, .cp-ride-ed__primary {
  flex: none;
  min-width: 92px;
  height: 44px;
  padding: 0 12px 0 8px;
  border: 0;
  border-radius: 12px;
  background: var(--cp-ok);
  color: var(--cp-text);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--cp-text) 18%, transparent);
}
.cp-ride-ed__confirm:disabled, .cp-ride-ed__primary:disabled { background: var(--cp-peri); cursor: default; }
.cp-ride-ed__secondary {
  flex: none;
  height: 44px;
  padding: 0 12px 0 8px;
  border: 0;
  border-radius: 12px;
  background: var(--cp-ice);
  color: var(--cp-ink);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cp-ride-ed__body[hidden], .cp-ride-ed__row[hidden], .cp-ride-ed__carousel[hidden] { display: none; }

/* carousel of the next pieces */
.cp-ride-ed__carousel {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
  padding: 5px 5px 3px 1px;
}
.cp-ride-ed__carousel::-webkit-scrollbar { display: none; }
.cp-ride-card {
  position: relative;
  flex: 0 0 64px;
  height: 74px;
  padding: 4px 2px 3px;
  border: 0;
  border-radius: 12px;
  background: var(--cp-cream);
  color: var(--cp-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--cp-accent) 30%, transparent);
}
.cp-ride-card.is-selected { background: color-mix(in srgb, var(--cp-ok) 30%, var(--cp-white)); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--cp-ok) 70%, var(--cp-ink)); }
.cp-ride-card.is-bad { background: color-mix(in srgb, var(--cp-peri) 22%, var(--cp-white)); color: var(--cp-slate); box-shadow: none; }
.cp-ride-card.is-bad.is-selected { box-shadow: inset 0 0 0 3px var(--cp-bad); }
/* Buildable, but the train would not make it (speed estimate): amber. */
.cp-ride-card.is-slow {
  background: color-mix(in srgb, var(--cp-amber) 42%, var(--cp-white));
  box-shadow: none;
  outline: 2px dashed color-mix(in srgb, var(--cp-amber) 55%, var(--cp-text));
  outline-offset: -4px;
}
.cp-ride-card.is-slow.is-selected { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--cp-amber) 60%, var(--cp-text)); }
.cp-ride-card.is-slow .cp-ride-card__label { color: color-mix(in srgb, var(--cp-amber) 38%, var(--cp-text)); }
.cp-ride-card.is-slow .cp-ride-card__go { background: var(--cp-amber); }
.cp-ride-card__name { display: none; }
/* The selected valid card says "Bouwen": tapping it again builds the piece. */
.cp-ride-card__go {
  display: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--cp-ok);
  color: var(--cp-text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}
.cp-ride-card.is-selected .cp-ride-card__go { display: block; }
.cp-ride-card.is-selected:not(.is-bad) .cp-ride-card__label { display: none; }
.cp-ride-card__label { font-size: 14px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-ride-card.is-bad .cp-ride-card__label { color: var(--cp-bad); }
.cp-picto { width: 56px; height: 40px; flex: none; }
.cp-picto path, .cp-picto circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cp-picto__track { stroke: var(--cp-ink); stroke-width: 4; }
.cp-picto__head { stroke: var(--cp-ink); stroke-width: 3.2; }
.cp-picto__track-thin, .cp-picto__head-thin { stroke: var(--cp-accent2); stroke-width: 2.2; }
.cp-picto__ground { stroke: color-mix(in srgb, var(--cp-ok) 70%, var(--cp-white)); stroke-width: 3; }
.cp-picto__faint { stroke: var(--cp-peri); stroke-width: 3; }
.cp-picto .cp-picto__faint-dot { fill: var(--cp-peri); stroke: none; }
.cp-picto .cp-picto__track-dot { fill: var(--cp-ink); stroke: none; }
.cp-picto__badge { stroke-width: 3; }
.cp-picto__badge--up { stroke: color-mix(in srgb, var(--cp-ok) 65%, var(--cp-text)); }
.cp-picto__badge--down { stroke: var(--cp-accent); }
.cp-ride-card.is-bad .cp-picto__track, .cp-ride-card.is-bad .cp-picto__head { stroke: var(--cp-slate); }

/* auto-complete row and closed-circuit row */
.cp-ride-ed__row { display: flex; align-items: center; gap: 6px; min-height: 52px; }
.cp-ride-ed__placerow { min-height: 44px; }
.cp-ride-ed__placerow .cp-ride-ed__secondary { flex: 1 1 0; justify-content: center; font-size: 15px; }
.cp-ride-ed__secondary[hidden] { display: none; }
.cp-ride-ed__progress { flex: 0 0 72px; height: 12px; border-radius: 999px; background: var(--cp-ice); overflow: hidden; }
.cp-ride-ed__progressfill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--cp-amber); transition: width 0.15s; }
.cp-ride-ed__progresstext, .cp-ride-ed__rowtext { flex: 1 1 auto; min-width: 0; font-size: 16px; color: var(--cp-slate); }
.cp-ride-ed__rowtext.is-bad { color: var(--cp-bad); font-weight: 800; }
.cp-ride-ed__found { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 16px; }
.cp-ride-ed__found span { color: color-mix(in srgb, var(--cp-ok) 55%, var(--cp-text)); font-weight: 800; }
.cp-ride-ed__found.is-bad span { color: var(--cp-bad); }
.cp-ride-ed__spinner {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 4px solid var(--cp-ice);
  border-top-color: var(--cp-accent2);
  animation: cp-ride-spin 0.9s linear infinite;
}
@keyframes cp-ride-spin { to { transform: rotate(360deg); } }
.cp-ride-ed__price { flex: 1 1 auto; display: flex; align-items: center; gap: 4px; min-width: 0; }
.cp-ride-ed__pricevalue {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--cp-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.cp-ride-ed__pricevalue strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.cp-ride-ed__pricevalue small { font-size: 13px; color: var(--cp-slate); white-space: nowrap; }

/* station length control ('Zelf bouwen'): - [Station 5 tegels / 3 karretjes, 6 plaatsen] + */
.cp-ride-ed__lenrow { min-height: 44px; }
.cp-ride-ed__step:disabled { opacity: 0.38; cursor: default; }
.cp-ride-ed__len {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 2px 6px;
  border-radius: 12px;
  background: var(--cp-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1.1;
  text-align: center;
}
.cp-ride-ed__lenline { white-space: nowrap; }
.cp-ride-ed__lenlabel { margin-right: 5px; color: var(--cp-slate); font-weight: 700; }
.cp-ride-ed__lenvalue { font-weight: 900; font-variant-numeric: tabular-nums; }
.cp-ride-ed__lentrain { font-weight: 800; color: color-mix(in srgb, var(--cp-ok) 50%, var(--cp-text)); white-space: nowrap; }
.cp-ride-ed__lencars { display: none; }
/* Short phones (360x740, 320x640): the length control and icon-only rotate / flip share one row (the
   button labels stay as accessible names), the control shows the cars without the places, so HUD +
   editor + bar stay <= 35% of the screen. */
@media (max-width: 899px) and (max-height: 760px) {
  .cp-ride-ed[data-mode="station"] .cp-ride-ed__body { display: flex; align-items: center; gap: 6px; }
  .cp-ride-ed[data-mode="station"] .cp-ride-ed__body[hidden] { display: none; }
  .cp-ride-ed[data-mode="station"] .cp-ride-ed__lenrow { flex: 1 1 auto; min-width: 0; }
  .cp-ride-ed[data-mode="station"] .cp-ride-ed__placerow { flex: none; }
  .cp-ride-ed[data-mode="station"] .cp-ride-ed__placerow .cp-ride-ed__secondary { flex: none; width: 44px; padding: 0; justify-content: center; }
  .cp-ride-ed[data-mode="station"] .cp-ride-ed__placerow .cp-ride-ed__secondary span { display: none; }
  .cp-ride-ed__lenlabel { display: none; }
  .cp-ride-ed[data-mode="station"] .cp-ride-ed__lentrain { display: none; }
  .cp-ride-ed[data-mode="station"] .cp-ride-ed__lencars { display: block; }
}

@media (max-width: 420px) {
  .cp-ride-ed__confirm { min-width: 56px; padding: 0; }
  .cp-ride-ed__confirmlabel { display: none; }
  /* "Rond af" as text only: the info line keeps room for the piece name and price */
  .cp-ride-ed__auto { padding: 0 12px; }
  .cp-ride-ed__auto .cp-icon { display: none; }
  /* the speed and budget tabs keep icon + value side by side (the word is in their title) */
  .cp-ride-ed__tabword { display: none; }
}
@media (max-width: 359px) {
  /* icon only: the label is the button's aria-label / title */
  .cp-ride-ed__autolabel { display: none; }
  .cp-ride-ed__auto { width: 44px; padding: 0; justify-content: center; }
  .cp-ride-ed__auto .cp-icon { display: inline-block; }
}
/* Short phones (e.g. 320x640, 360x740): lower cards and a tighter panel, so HUD + editor + bar stay
   <= 35% of the screen. Buttons keep their 44 px. */
@media (max-width: 899px) and (max-height: 760px) {
  .cp-ride-ed { gap: 4px; padding: 4px 6px; }
  .cp-ride-ed__carousel { padding: 3px 5px 2px 1px; }
  .cp-ride-card { height: 58px; padding: 2px 2px 3px; }
  .cp-picto { height: 28px; }
}
/* Very short phones (e.g. 320x640): while the editor panel shows, it takes the bar's place (it has its
   own exit, undo and confirm; the camera still turns with two fingers). The bar returns when the
   editor closes or the build sheet opens. */
@media (max-width: 899px) and (max-height: 700px) {
  .cp-bottom:has(> .cp-ride-ed:not([hidden]):not(.is-under-sheet)) > .cp-bar { display: none; }
}

/* ---------------------------------------------------------------- ride window */
.cp-ridewin {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  max-height: min(64vh, 560px);
  padding: 10px 12px calc(var(--cp-safe-b) + 10px);
  border-radius: 20px 20px 0 0;
  background: var(--cp-panel);
  box-shadow: 0 -4px 18px color-mix(in srgb, var(--cp-ink) 22%, transparent);
  pointer-events: auto;
}
.cp-ridewin[hidden] { display: none; }
.cp-ridewin__head { display: flex; align-items: flex-start; gap: 8px; }
.cp-ridewin__titles { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.cp-ridewin__title { margin: 0; font-size: 21px; font-weight: 900; line-height: 1.15; }
.cp-ridewin__state { padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; background: var(--cp-ice); color: var(--cp-ink); }
.cp-ridewin__state.is-open { background: var(--cp-ok); color: var(--cp-text); }
.cp-ridewin__state.is-testing { background: var(--cp-amber); color: var(--cp-text); }
.cp-ridewin__state.is-broken, .cp-ridewin__state.is-repairing { background: var(--cp-bad); color: var(--cp-white); }
.cp-ridewin__state.is-building { background: var(--cp-cream); color: var(--cp-text); }
.cp-ridewin__close { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--cp-ice); display: grid; place-items: center; }
.cp-ridewin__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 4px; }
.cp-ridewin__warnings { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cp-ridewin__warnings[hidden] { display: none; }
.cp-ridewin__warn { margin: 0; display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 12px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.cp-ridewin__warn.is-bad { background: color-mix(in srgb, var(--cp-bad) 14%, var(--cp-white)); color: color-mix(in srgb, var(--cp-bad) 70%, var(--cp-text)); }
.cp-ridewin__warn.is-note { background: color-mix(in srgb, var(--cp-amber) 22%, var(--cp-white)); color: var(--cp-text); }
.cp-ridewin__warn .cp-icon { flex: none; margin-top: 1px; }
.cp-ridewin__ratings { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cp-ridewin__rating { display: grid; grid-template-columns: 120px 1fr 40px; align-items: center; gap: 8px; font-size: 16px; }
.cp-ridewin__rlabel { font-weight: 700; }
.cp-ridewin__bar { height: 12px; border-radius: 999px; background: var(--cp-ice); overflow: hidden; }
.cp-ridewin__barfill { display: block; height: 100%; border-radius: 999px; background: var(--cp-accent2); }
.cp-ridewin__rating.is-intensity .cp-ridewin__barfill { background: var(--cp-accent); }
.cp-ridewin__rating.is-nausea .cp-ridewin__barfill { background: var(--cp-ok); }
.cp-ridewin__rvalue { text-align: right; font-variant-numeric: tabular-nums; }
.cp-ridewin__none { margin: 0; font-size: 16px; color: var(--cp-slate); }
.cp-ridewin__price { margin-bottom: 6px; }
.cp-ridewin__pricehead { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.cp-ridewin__pricevalue { font-size: 18px; font-variant-numeric: tabular-nums; }
.cp-ridewin__suggest { margin-left: auto; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--cp-cream); font-size: 15px; font-weight: 800; }
.cp-ridewin__suggest[hidden] { display: none; }
.cp-ridewin__sliderwrap { position: relative; height: 44px; display: flex; align-items: center; }
.cp-ridewin__slider { width: 100%; height: 44px; margin: 0; accent-color: var(--cp-accent2); }
.cp-ridewin__marker {
  position: absolute;
  top: 6px;
  width: 4px;
  height: 32px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--cp-accent);
  pointer-events: none;
}
.cp-ridewin__marker[hidden] { display: none; }
.cp-ridewin__h { margin: 6px 0 4px; font-size: 16px; font-weight: 900; }
.cp-ridewin__facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 4px; font-size: 16px; }
.cp-ridewin__facts[hidden] { display: none; }
.cp-ridewin__facts dt { color: var(--cp-slate); }
.cp-ridewin__facts dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cp-ridewin__facts dd.is-bad { color: var(--cp-bad); }
.cp-ridewin__actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.cp-ridewin__actions .cp-btn { flex: 1 1 auto; }

/* ---------------------------------------------------------------- choice screen (ride-window.js) */
/* A ride family's choice: picture + description, 'Standaardontwerp bouwen' (blueprint rows) and
   'Zelf bouwen'. Phone: a bottom sheet like the ride window; desktop: the same right-hand panel. */
.cp-ridechoice {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  max-height: min(74vh, 640px);
  padding: 10px 12px calc(var(--cp-safe-b) + 10px);
  border-radius: 20px 20px 0 0;
  background: var(--cp-panel);
  box-shadow: 0 -4px 18px color-mix(in srgb, var(--cp-ink) 22%, transparent);
  pointer-events: auto;
}
.cp-ridechoice[hidden] { display: none; }
.cp-ridechoice__head { display: flex; align-items: flex-start; gap: 10px; }
.cp-ridechoice__pic {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--cp-cream);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.cp-ridechoice__picimg { width: 64px; height: 64px; object-fit: contain; }
.cp-ridechoice__titles { flex: 1 1 auto; min-width: 0; }
/* The close button floats top right: the title sits beside it and the description runs on under it. */
.cp-ridechoice__titles > .cp-ridewin__close { float: right; margin: 0 0 4px 8px; }
.cp-ridechoice__title { margin: 0; padding-top: 2px; font-size: 21px; font-weight: 900; line-height: 1.15; }
.cp-ridechoice__desc { margin: 2px 0 0; font-size: 16px; line-height: 1.25; color: var(--cp-slate); }
.cp-ridechoice__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 0 2px; }
.cp-ridechoice__section { margin-top: 10px; }
.cp-ridechoice__h { margin: 0 0 2px; font-size: 18px; font-weight: 900; }
.cp-ridechoice__hint { margin: 0 0 6px; font-size: 16px; line-height: 1.25; color: var(--cp-slate); }
.cp-ridechoice__list { display: flex; flex-direction: column; gap: 6px; }
.cp-ridechoice__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  background: var(--cp-cream);
  color: var(--cp-text);
  font: inherit;
  text-align: left;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--cp-accent) 30%, transparent);
}
.cp-ridechoice__option.is-custom {
  background: color-mix(in srgb, var(--cp-ok) 26%, var(--cp-white));
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--cp-ok) 60%, var(--cp-text));
}
.cp-ridechoice__option.is-locked { background: color-mix(in srgb, var(--cp-peri) 22%, var(--cp-white)); color: var(--cp-slate); box-shadow: none; }
.cp-ridechoice__option.is-locked .cp-ridechoice__img { filter: grayscale(1); opacity: 0.55; }
.cp-ridechoice__option.is-locked .cp-ridechoice__price { color: var(--cp-slate); }
.cp-ridechoice__thumb {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--cp-white);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.cp-ridechoice__thumb.is-icon { background: var(--cp-ok); color: var(--cp-text); }
.cp-ridechoice__img { width: 56px; height: 56px; object-fit: contain; }
.cp-ridechoice__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cp-ridechoice__line1 { display: flex; align-items: baseline; gap: 8px; }
.cp-ridechoice__name { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 900; line-height: 1.2; }
.cp-ridechoice__price { flex: none; font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-ridechoice__meta { font-size: 16px; line-height: 1.25; color: var(--cp-slate); }
.cp-ridechoice__meta.is-train { font-weight: 700; color: color-mix(in srgb, var(--cp-ok) 40%, var(--cp-text)); }
.cp-ridechoice__pills { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.cp-ridechoice__pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--cp-white);
  font-size: 16px;
  line-height: 1.4;
}
.cp-ridechoice__pill strong { font-variant-numeric: tabular-nums; }
.cp-ridechoice__pill.is-excitement strong { color: color-mix(in srgb, var(--cp-accent2) 75%, var(--cp-text)); }
.cp-ridechoice__pill.is-intensity strong { color: color-mix(in srgb, var(--cp-accent) 75%, var(--cp-text)); }
.cp-ridechoice__pill.is-nausea strong { color: color-mix(in srgb, var(--cp-ok) 50%, var(--cp-text)); }
.cp-ridechoice__pshort { display: none; }
/* Phones: a compact sheet (all options of a family fit a 320 x 640 screen without scrolling). Each
   design is a grid: picture beside name/price and one meta line, the three rating pills (short labels)
   in one row under both; 'Zelf bouwen' keeps its line beside the picture. */
@media (max-width: 899px) {
  .cp-ridechoice { padding-top: 8px; }
  .cp-ridechoice__pic, .cp-ridechoice__picimg { width: 52px; height: 52px; }
  .cp-ridechoice__section { margin-top: 8px; }
  .cp-ridechoice__option {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    min-height: 56px;
    padding: 6px 10px 8px;
  }
  .cp-ridechoice__text { display: contents; }
  .cp-ridechoice__thumb { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 10px; }
  .cp-ridechoice__img { width: 48px; height: 48px; }
  .cp-ridechoice__line1, .cp-ridechoice__meta { grid-column: 2; min-width: 0; }
  .cp-ridechoice__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cp-ridechoice__meta.is-train { white-space: normal; }
  .cp-ridechoice__pills { grid-column: 1 / -1; flex-wrap: nowrap; gap: 6px; }
  .cp-ridechoice__pill { padding: 0 7px; white-space: nowrap; }
  .cp-ridechoice__plabel { display: none; }
  .cp-ridechoice__pshort { display: inline; }
}
/* The narrowest phones: the meta line keeps the tiles and the places, without the size word. */
@media (max-width: 374px) {
  .cp-ridechoice__sizeword { display: none; }
}
/* Short phones: the section hint goes (the heading says it). */
@media (max-width: 899px) and (max-height: 760px) {
  .cp-ridechoice__hint:not(.is-empty) { display: none; }
}

/* ---------------------------------------------------------------- slope of the straights, chain lift */
/* Slope stepper ('Recht 4' / 'Recht 1'): right after the selected straight card in the carousel, the
   slope as text (16 px) over two 44 px arrows. It is as high as a card, so the panel does not grow. */
.cp-ride-slope {
  flex: none;
  width: 104px;
  height: 74px;
  padding: 3px 3px 4px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cp-ok) 14%, var(--cp-white));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cp-ok) 45%, var(--cp-white));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.cp-ride-slope__value { font-size: 16px; font-weight: 900; line-height: 1.15; white-space: nowrap; color: var(--cp-text); }
.cp-ride-slope.is-bad { background: color-mix(in srgb, var(--cp-peri) 18%, var(--cp-white)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cp-bad) 45%, var(--cp-white)); }
.cp-ride-slope.is-bad .cp-ride-slope__value { color: var(--cp-bad); }
.cp-ride-slope__btns { display: flex; gap: 6px; }
.cp-ride-slope__btn {
  flex: none;
  width: 46px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--cp-ice);
  color: var(--cp-ink);
  display: grid;
  place-items: center;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--cp-ink) 14%, transparent);
}
.cp-ride-slope__btn:disabled { opacity: 0.35; box-shadow: none; cursor: default; }
/* 'Takel' badge on a card whose piece has a chain lift (top left: the pictogram's up arrow is top right). */
.cp-ride-card__lift {
  position: absolute;
  top: 3px;
  left: 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 3px;
  border-radius: 999px;
  background: var(--cp-ink);
  color: var(--cp-white);
  line-height: 1;
}
.cp-ride-card__liftword { display: none; font-size: 12.5px; font-weight: 800; }
.cp-ride-card.is-bad .cp-ride-card__lift { background: var(--cp-peri); }
/* Info line: price, then the 'Takel' chip (and, where there is room, the explanation). The wrapper only
   switches chip + text on and off; both are items of the row, so the chip keeps its own width and the row
   (overflow hidden) never paints under the undo / auto buttons beside the info box. */
.cp-ride-ed__line2row { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.cp-ride-ed__line2row > .cp-ride-ed__line2 { flex: 0 1 auto; min-width: 0; }
.cp-ride-ed__lift { display: contents; }
.cp-ride-ed__lift[hidden] { display: none; }
/* Phones: a longer line (too slow / stalled) keeps the whole room; the card still shows its Takel badge. */
@media (max-width: 899px) {
  .cp-ride-ed__line2row.is-long > .cp-ride-ed__lift { display: none; }
}
.cp-ride-ed__liftchip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px 1px 5px;
  border-radius: 999px;
  background: var(--cp-ink);
  color: var(--cp-white);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}
.cp-ride-ed__lifttext { display: none; flex: 0 1 auto; min-width: 0; font-size: 16px; color: var(--cp-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Short phones: lower cards (58 px), so the stepper lays its arrows beside the slope text. */
@media (max-width: 899px) and (max-height: 760px) {
  .cp-ride-slope { width: auto; height: 58px; flex-direction: row; gap: 4px; padding: 3px 4px; }
  .cp-ride-slope__btns { display: contents; }
  .cp-ride-slope__btn[data-dir="-1"] { order: -1; }
  .cp-ride-slope__btn { width: 44px; }
}

/* ---------------------------------------------------------------- desktop */
@media (min-width: 900px) {
  .cp-ride-slope { width: 112px; height: 100px; padding: 8px 4px 6px; }
  .cp-ride-slope__btn { width: 48px; height: 48px; }
  .cp-ride-card__liftword { display: inline; }
  .cp-ride-ed__lifttext { display: inline; }
  .cp-ridechoice {
    left: auto;
    right: 12px;
    top: calc(var(--cp-safe-t) + 64px);
    bottom: auto;
    width: 400px;
    max-height: calc(100vh - 160px);
    border-radius: 20px;
    padding-bottom: 12px;
    box-shadow: var(--cp-shadow);
  }
  .cp-ride-card { flex-basis: 98px; height: 100px; }
  .cp-ride-card__name {
    display: block;
    max-width: 100%;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .cp-ridewin {
    left: auto;
    right: 12px;
    top: calc(var(--cp-safe-t) + 64px);
    bottom: auto;
    width: 380px;
    max-height: calc(100vh - 160px);
    border-radius: 20px;
    padding-bottom: 12px;
    box-shadow: var(--cp-shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-ride-ed__spinner { animation: none; }
  .cp-ride-ed__progressfill { transition: none; }
}