/* The customers' test-ride page. Same world as the app (styles.css): the chosen paint is the
   whole stage, the scooter stands in it, everything else is ink on paper. */
.rd-body { background: var(--ground); --bijli-guard-bottom: 0px; }
.rd { min-height: 100dvh; }

.rd-stage {
  --paint: #e4826f; --paint-ink: #0b0b0c;
  position: relative; isolation: isolate; overflow: hidden; contain: paint;
  background: var(--paint); color: var(--paint-ink);
  padding: calc(1.25rem + env(safe-area-inset-top)) 1.25rem 1.25rem;
  border-radius: 0 0 1.75rem 1.75rem;
  display: flex; flex-direction: column;
  transition: color .16s linear;
}
.rd-stage > :not(.pour) { position: relative; z-index: 1; }
.rd-stage .pour { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; will-change: transform; }
.rd-company { margin: 0 0 1.5rem; font-size: var(--s-15); font-weight: 650; letter-spacing: -.01em; min-height: 1.45em; }
.rd-stage h1 { font-size: clamp(2.25rem, 10.5vw, 3rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 750; text-wrap: balance; max-width: 11ch; }
.rd-say { margin: .75rem 0 0; max-width: 34ch; font-size: var(--s-15); font-weight: 500; min-height: 2.9em; text-wrap: pretty; }
.rd-art { margin: .25rem auto 0; width: min(100%, 22rem); }
.rd-art .vehicle { width: 100%; }
.rd-paints { border: 0; margin: .5rem 0 0; padding: 0; min-width: 0; }
.rd-paints legend { padding: 0; margin-bottom: .5rem; font-size: var(--s-13); font-weight: 650; }
.rd-discs { display: flex; gap: .625rem; flex-wrap: wrap; }
.rd-disc { position: relative; display: block; width: 2.75rem; height: 2.75rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rd-disc input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.rd-disc i {
  position: absolute; inset: .3125rem; border-radius: 50%; background: var(--swatch);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--paint-ink) 40%, transparent);
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.rd-disc input:checked + i { transform: scale(1.14); box-shadow: 0 0 0 2px var(--paint), 0 0 0 4px var(--paint-ink); }
.rd-disc input:focus-visible + i { outline: 2.5px solid var(--paint-ink); outline-offset: 5px; }

.rd-side { padding: 1.75rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom)); }
.rd-form, .rd-done { max-width: 30rem; margin: 0 auto; }
.rd-q { border: 0; padding: 0; margin: 0 0 1.75rem; min-width: 0; scroll-margin-top: 4.5rem; }
.rd-h { display: block; padding: 0; margin-bottom: .625rem; font-size: var(--s-17); font-weight: 700; letter-spacing: -.012em; }
.rd-pick { display: flex; }
.rd-pick .picker { min-height: 3.25rem; font-size: var(--s-17); border-radius: var(--radius); padding-left: 1rem; }

.rd-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.rd-opt, .rd-day { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rd-opt input, .rd-day input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.rd-opt span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3.25rem; padding: .375rem .625rem; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: var(--s-15); font-weight: 650; line-height: 1.2;
  transition: background-color .14s linear, color .14s linear, transform .11s cubic-bezier(.2,.7,.3,1);
}
.rd-opt input:checked + span, .rd-day input:checked + span { background: var(--act); color: var(--act-ink); box-shadow: none; }
.rd-opt input:active + span, .rd-day input:active + span { transform: scale(.97); }
.rd-opt input:disabled + span { color: var(--ink-3); background: var(--panel); box-shadow: none; text-decoration: line-through; }
.rd-opt input:disabled { cursor: not-allowed; }
.rd-opt input:focus-visible + span, .rd-day input:focus-visible + span { outline: 2.5px solid var(--ink); outline-offset: 2px; }

.rd-days {
  display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  margin: 0 -1.25rem; padding: .25rem 1.25rem; scrollbar-width: none;
}
.rd-days::-webkit-scrollbar { display: none; }
.rd-day { flex: none; scroll-snap-align: center; }
.rd-day span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 4rem; height: 4.5rem; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color .14s linear, color .14s linear, transform .11s cubic-bezier(.2,.7,.3,1);
}
.rd-day small { font-size: var(--s-12); font-weight: 600; opacity: .78; }
.rd-day b { font-size: 1.375rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.rd-in {
  display: block; width: 100%; min-height: 3.25rem; padding: .625rem 1rem; font-size: var(--s-17);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--ground); color: var(--ink);
}
.rd-in:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 1px; border-radius: var(--radius); }
.rd-tel { display: flex; align-items: center; gap: .625rem; }
.rd-tel > span { font-size: var(--s-17); font-weight: 650; }
.rd-q.bad .rd-in, .rd-q.bad .picker { border-color: var(--soon); }
.rd-err { margin: .5rem 0 0; color: var(--soon); font-size: var(--s-13); font-weight: 600; }
.rd-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rd-go { min-height: 3.5rem; border-radius: var(--radius); font-size: var(--s-17); }
.rd-fine { margin: .875rem 0 0; color: var(--ink-3); font-size: var(--s-12); line-height: 1.45; }

.rd-done h2 { font-size: 2.25rem; line-height: 1.05; letter-spacing: -.03em; font-weight: 750; }
.rd-done h2:focus { outline: none; }
.rd-ref { margin: .5rem 0 1.25rem; color: var(--ink-2); }
.rd-ref b { color: var(--ink); font-size: var(--s-17); font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.rd-facts { display: grid; grid-template-columns: auto 1fr; gap: .625rem 1.25rem; margin: 0 0 1.25rem; padding: 1rem 0; border-block: 1px solid var(--line); }
.rd-facts dt { color: var(--ink-2); }
.rd-facts dd { margin: 0; font-weight: 650; text-align: right; }
.rd-next { margin: 0 0 1.5rem; }
.rd-where { margin-top: .625rem; color: var(--ink-2); }
.rd-where p { margin: 0; }
.rd-links { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .125rem !important; }
.rd-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); font-weight: 650; text-underline-offset: 3px; }
.rd-links a[hidden] { display: none; }
.rd-acts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .75rem; }
.rd-acts .btn { min-height: 3.25rem; border-radius: var(--radius); text-decoration: none; }
.rd-acts .btn:first-child, .rd-acts .btn.wide { grid-column: 1 / -1; }
.rd-acts .btn[hidden] { display: none; }
.rd-empty { max-width: 30rem; margin: 1rem auto; font-size: var(--s-17); }

/* booked: the ticket comes up into view on a phone, under a smaller scooter */
@media (max-width: 59.99rem) {
  .rd.is-done .rd-paints { display: none; }
  .rd.is-done .rd-art { width: min(55%, 12rem); }
  .rd.is-done .rd-say { min-height: 0; }
}

@media (min-width: 60rem) {
  .rd { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(26rem, 1fr); align-items: start; }
  .rd-stage { position: sticky; top: 0; height: 100dvh; border-radius: 0; padding: 2rem 3rem 2.25rem; }
  .rd-stage h1 { font-size: clamp(3.25rem, 5.5vw, 5rem); }
  .rd-say { font-size: var(--s-17); max-width: 36ch; }
  /* whatever the window leaves, at the art's true 5:4 */
  .rd-art { flex: 1; min-height: 0; width: 100%; max-width: 44rem; margin: 0 auto; container-type: size; display: flex; align-items: center; justify-content: center; }
  .rd-art .vehicle { width: min(100cqw, 125cqh); }
  .rd-side { padding: 3rem 2.5rem 4rem; }
  .rd-days { margin: 0; padding-inline: .125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-stage, .rd-disc i, .rd-opt span, .rd-day span { transition: none; }
}

/* ── the vehicle: a photo on the ground, in whatever paint is behind it ───────────────────── */
.vehicle { position: relative; display: block; aspect-ratio: 5 / 4; isolation: isolate; transform-origin: 30% 95%; will-change: transform; }
.vehicle img { position: relative; display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
/* it stands on something: a soft contact shadow under the wheels (the art's line is y = 95.3%) */
.vehicle::after {
  content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: 90%; height: 9%;
  background: radial-gradient(closest-side, rgba(0,0,0,.34), rgba(0,0,0,.16) 55%, transparent);
}
/* black tyres and seat on a dark paint: a little light behind, so they keep their outline */
.vehicle.on-dark::before {
  content: ""; position: absolute; z-index: -1; inset: 2% 4%;
  background: radial-gradient(closest-side, rgba(255,255,255,.2), rgba(255,255,255,.08) 62%, transparent);
}