/* Kids Supercar - shared design tokens
   Two registers, one identity:
   - .kiosk-*   customer flow (phone, scanned via QR at the car)
   - .console-* staff dashboard (desktop/tablet at the venue) */

:root {
  --ground: #14122a;
  --surface: #1f1b3d;
  --surface-2: #262148;
  --line: #332c5c;

  --accent: #ff5a36;
  --accent-ink: #2a0e05;
  --accent-2: #ffc857;

  --ink: #f5f3ff;
  --muted: #9089b5;

  --success: #2fcb8c;
  --success-ink: #04241a;
  --warning: #f0a202;
  --warning-ink: #2c1900;
  --danger: #f0446e;
  --danger-ink: #2c0512;

  /* Kids Supercar brand: black / white / racing red - matches the logo. */
  --kiosk-page-bg: #0a0a0a;
  --kiosk-card-bg: #ffffff;
  --kiosk-ink: #141110;
  --kiosk-muted: #767676;
  --kiosk-line: #e9e9e9;
  --kiosk-red: #e31e24;
  --kiosk-red-ink: #ffffff;
  --kiosk-red-tint: #fdecec;
  --kiosk-success: #1f9d55;
  --kiosk-warning: #b9750a;
  --kiosk-failed: #3a3a3a;

  --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --radius-kiosk: 20px;
  --radius-console: 8px;
}

/* Dashboard colour themes (console_i18n.CONSOLE_THEMES), set on <html> by
   base_console.html per account. Only the console tokens change: customer
   pages run on the kiosk-* tokens and keep the brand look. "night" is the
   :root set above. */

/* The themes are all dark, and tell the browser so: file pickers, unstyled inputs and
   scrollbars were bright white boxes on the dark dashboard. */
:root[data-theme="night"],
:root[data-theme="carbon"],
:root[data-theme="lemans"] {
  color-scheme: dark;
}

/* Carbon: bare carbon fibre and pit-lane signal yellow, with a cold
   telemetry blue as the second colour. */
:root[data-theme="carbon"] {
  --ground: #0b0c0e;
  --surface: #15171b;
  --surface-2: #1c1f24;
  --line: #2a2e35;
  --accent: #ffd21f;
  --accent-ink: #1b1600;
  --accent-2: #5cc8ff;
  --ink: #f3f5f8;
  --muted: #8d95a3;
  --success: #3ddc97;
  --success-ink: #03261a;
  --warning: #ff9f1c;
  --warning-ink: #2b1700;
  --danger: #ff4d6d;
  --danger-ink: #2d0510;
}

/* Le Mans: the Gulf racing colours - deep petrol blue, Gulf light blue as
   the accent and Gulf orange as the second colour. */
:root[data-theme="lemans"] {
  --ground: #071a22;
  --surface: #0d2833;
  --surface-2: #12323e;
  --line: #1e4655;
  --accent: #62c6ee;
  --accent-ink: #031a24;
  --accent-2: #ff8a2b;
  --ink: #eef8fb;
  --muted: #8fb0bc;
  --success: #3ddc97;
  --success-ink: #03261a;
  --warning: #ffb547;
  --warning-ink: #2b1a00;
  --danger: #ff5c7a;
  --danger-ink: #2d0510;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html {
  /* iPhones enlarge text in wide blocks on their own ("text autosizing").
     In a table that scrolls sideways that made long cells - the status on
     Uitbetalingen, details in the audit log - bigger than the rest of the
     row, in Safari and in the installed app alike. Sizes are set here. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- kiosk (customer) - black / white / racing red ---------- */

.kiosk-page {
  min-height: 100dvh;
  background: var(--kiosk-page-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.kiosk-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--kiosk-card-bg);
  color: var(--kiosk-ink);
  border-radius: var(--radius-kiosk);
  padding: 1.5rem 1.5rem 1.75rem;
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.6);
}

/* "Hulp" top right on every customer page (base_kiosk.html): red, on its
   own line above the languages - five language pills fill the whole row. */
.kiosk-help {
  display: table;
  margin: -0.55rem 0 0.55rem auto;
  padding: 0.2rem 0.65rem;
  border: 1.5px solid var(--kiosk-red);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--kiosk-red);
  text-decoration: none;
}

.kiosk-help:hover,
.kiosk-help:focus-visible {
  background: var(--kiosk-red);
  color: #fff;
}

.lang-switch {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.lang-switch a {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--kiosk-line);
  color: var(--kiosk-muted);
  text-decoration: none;
}

.lang-switch a.active {
  border-color: var(--kiosk-red);
  color: var(--kiosk-red);
}

.powered-by {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 1.5rem -1.5rem -1.75rem;
  padding: 1.1rem 1.5rem;
  background: #0a0a0a;
  border-radius: 0 0 var(--radius-kiosk) var(--radius-kiosk);
}

.powered-by span {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.85;
}

.powered-by img {
  height: 18px;
  width: auto;
}

.privacy-link {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  color: #ffffff;
  opacity: 0.5;
  text-decoration: underline;
  margin-top: 0.15rem;
}

.partner-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.partner-lockup img {
  max-height: 42px;
  width: auto;
}

.partner-lockup .tagline {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kiosk-muted);
}

.kiosk-wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.kiosk-wordmark .red {
  color: var(--kiosk-red);
}

.car-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.car-photo img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.car-photo-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #ffffff;
  opacity: 0.55;
}

.car-photo-placeholder svg {
  width: 56px;
  height: 56px;
}

.car-photo-placeholder span {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kiosk-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kiosk-muted);
  margin: 0.3rem 0 1.25rem;
}

.kiosk-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kiosk-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kiosk-success) 20%, transparent);
  flex: none;
}

.kiosk-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 0.2rem;
}

.kiosk-subtitle {
  color: var(--kiosk-muted);
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

.kiosk-section-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kiosk-muted);
  margin: 0 0 0.6rem;
}

.package-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.tier-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1.5px solid var(--kiosk-line);
  background: var(--kiosk-card-bg);
  cursor: pointer;
  position: relative;
  /* Reset for when this is used on a <button> (e.g. the extend-ride list)
     instead of a <label> (the main package list) - buttons don't inherit
     font/color/text-align by default and get native OS chrome without
     this. Missing `color` here specifically made the unstyled "+5"
     duration number invisible on mobile: it fell back to the browser's
     default button text color instead of the card's dark ink. */
  font: inherit;
  color: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

.tier-row input[type="radio"] {
  accent-color: var(--kiosk-red);
  width: 18px;
  height: 18px;
  flex: none;
}

.tier-row:hover {
  border-color: color-mix(in srgb, var(--kiosk-red) 45%, var(--kiosk-line));
}

.tier-row:has(input:checked) {
  border-color: var(--kiosk-red);
  background: var(--kiosk-red-tint);
}

.tier-row.is-featured {
  padding-top: 1.05rem;
}

.tier-badge {
  position: absolute;
  top: -0.5rem;
  left: 2.6rem;
  background: var(--kiosk-red);
  color: var(--kiosk-red-ink);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
}

.tier-duration {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  flex: 1;
}

.tier-duration span {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.76rem;
  color: var(--kiosk-muted);
  margin-top: 0.1rem;
}

.tier-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--kiosk-ink);
}

.loyalty-link {
  color: var(--kiosk-red);
  font-weight: 700;
  text-decoration: none;
}

.loyalty-link:hover {
  text-decoration: underline;
}

.loyalty-steps {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.loyalty-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.loyalty-steps p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--kiosk-ink);
}

.loyalty-step-num {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--kiosk-red-tint);
  color: var(--kiosk-red);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kiosk-footnote {
  margin: 0.9rem 0 0;
  font-size: 0.76rem;
  color: var(--kiosk-muted);
  text-align: center;
}

.email-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kiosk-muted);
  margin-bottom: 0.25rem;
}

.email-field input {
  background: var(--kiosk-card-bg);
  border: 1.5px solid var(--kiosk-line);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--kiosk-ink);
}

.email-field input:focus {
  outline: none;
  border-color: var(--kiosk-red);
}

/* The car's page: photo small next to the name, so the form is on screen
   without scrolling (rental_start.html). */
.car-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 1rem;
}

.car-head-photo {
  width: 64px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0a0a;
  color: rgba(255, 255, 255, 0.55);
  display: grid;
  place-items: center;
}

.car-head-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.car-head-photo svg {
  width: 34px;
}

.car-head .kiosk-title {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.1;
}

.car-head .kiosk-eyebrow {
  margin: 0.15rem 0 0;
}

/* Minus and plus around the minutes (rental_start.html, status.html). */
.stepper {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  border: 1.5px solid var(--kiosk-line);
  border-radius: 16px;
  overflow: hidden;
}

.stepper-btn {
  border: 0;
  background: var(--kiosk-red-tint);
  color: var(--kiosk-red);
  font-family: var(--font-body);
  font-size: 1.7rem;
  font-weight: 700;
  cursor: pointer;
  /* Two quick taps on + are two taps, not "zoom in" (iOS double-tap zoom). */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* The same for everything tappable on the customer pages. */
.kiosk-card button,
.kiosk-card a,
.kiosk-card summary,
.kiosk-card label {
  touch-action: manipulation;
}

.stepper-btn:disabled {
  color: var(--kiosk-line);
  cursor: default;
}

.stepper-value {
  display: grid;
  justify-items: center;
  padding: 0.45rem 0 0.4rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--kiosk-muted);
}

.stepper-value input {
  width: 5rem;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--kiosk-ink);
  -moz-appearance: textfield;
}

.stepper-value input::-webkit-outer-spin-button,
.stepper-value input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stepper-value input:focus {
  outline: none;
}

.priceline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.priceline-rate {
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: var(--kiosk-muted);
}

.priceline-total {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--kiosk-ink);
  white-space: nowrap;
}

/* One line to open: the discount code, the rates, the booking code. */
details.fold {
  border-top: 1px solid var(--kiosk-line);
  padding-top: 0.65rem;
  margin-top: 0.65rem;
}

details.fold > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--kiosk-ink);
}

details.fold > summary::-webkit-details-marker {
  display: none;
}

details.fold > summary::after {
  content: "+";
  color: var(--kiosk-red);
  font-size: 1.1rem;
}

details.fold[open] > summary::after {
  content: "\2212";
}

.code-input {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-family: var(--font-mono) !important;
  font-size: 1.15rem !important;
  text-align: center;
}

/* The live answer to a booking code (rental_start.html, /code-check). */
.code-check {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.code-check.is-ok {
  background: #f2f2f2;
  color: var(--kiosk-ink);
}

.code-check.is-bad {
  background: var(--kiosk-red-tint);
  color: var(--kiosk-red);
}

.code-check.is-wait {
  background: #f2f2f2;
  color: var(--kiosk-muted);
}

.kiosk-cta.is-off {
  background: #d4d4d4;
  color: #6b6b6b;
  animation: none;
}

/* The ride as a road under the ring (status.html): a child in a car, from
   the start to the flag as the time passes. */
.road {
  position: relative;
  height: 58px;
  margin: 0 0 0.5rem;
  border-radius: 12px;
  background: #2a2b30;
  overflow: hidden;
}

.road::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 12px, transparent 12px 24px);
  animation: road-move 0.6s linear infinite;
}

@keyframes road-move {
  to { background-position: -24px 0; }
}

.road.is-over::before {
  animation: none;
}

.road-done {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(227, 30, 36, 0.22);
  transition: width 1s linear;
}

.road-flag {
  position: absolute;
  right: 8px;
  top: 9px;
  width: 14px;
  height: 40px;
  border-radius: 2px;
  background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 7px 7px;
}

/* The stand at the end of the road: the P, like on the map. */
.road.is-back .road-flag {
  width: 26px;
  height: 26px;
  top: 16px;
  right: 8px;
  border-radius: 50%;
  background: #fff;
  color: var(--kiosk-ink, #141110);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
  letter-spacing: 0;
}

.road.is-late {
  background: #3a1416;
}

.road.is-late .road-done {
  background: rgba(227, 30, 36, 0.4);
}

.road.is-almost .road-flag {
  animation: flag-wave 0.6s ease-in-out infinite alternate;
}

.road.is-over {
  opacity: 0.6;
}

.road.is-over .kid-car {
  left: calc(100% - 72px);
}

.road.is-over .kid-dust {
  display: none;
}

.road.is-over .road-done {
  width: 100%;
}

.kid-car {
  position: absolute;
  top: 6px;
  left: 0;
  width: 72px;
  height: 44px;
  transition: left 1s linear;
}

.kid-car .kid-dust {
  animation: dust-puff 0.9s ease-out infinite;
  transform-box: fill-box;
  transform-origin: right center;
}

@keyframes dust-puff {
  0% { opacity: 0.7; transform: scale(0.6) translateX(0); }
  100% { opacity: 0; transform: scale(1.4) translateX(-6px); }
}

.kid-car svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: car-bounce 0.5s ease-in-out infinite alternate;
}

.kid-car .kid-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: wheel-spin 0.7s linear infinite;
}

.kid-car .kid-arm {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: arm-wave 1.2s ease-in-out infinite alternate;
}

.road.is-over .kid-car svg,
.road.is-over .kid-wheel,
.road.is-over .kid-arm {
  animation: none;
}

@keyframes car-bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-1.5px); }
}

@keyframes wheel-spin {
  to { transform: rotate(360deg); }
}

@keyframes arm-wave {
  from { transform: rotate(-12deg); }
  to { transform: rotate(14deg); }
}

@keyframes flag-wave {
  from { transform: skewY(-6deg); }
  to { transform: skewY(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .kid-car svg,
  .kid-car .kid-wheel,
  .kid-car .kid-arm,
  .kid-car .kid-dust,
  .road::before,
  .road.is-almost .road-flag {
    animation: none;
  }

  .kid-car,
  .road-done {
    transition: none;
  }
}

/* Two fields side by side (book.html: date and time). */
.twin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

/* Date and time: a careful touch of red, so they stand out from the rest. */
.twin .email-field input {
  border-color: color-mix(in srgb, var(--kiosk-red) 32%, #ffffff);
}

/* The bar at the bottom of the booking form: what, when, price, button. */
.book-bar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 1rem;
  padding: 0.75rem 0 0.25rem;
  background: linear-gradient(to top, var(--kiosk-card-bg) 65%, rgba(255, 255, 255, 0));
}

.book-bar-text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.book-bar-text b {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
}

.book-bar-price {
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.75);
}

.book-bar-price #priceValue {
  color: #fff;
  font-weight: 800;
}

.book-bar-error {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  color: #ffb3b6;
}

.book-bar .kiosk-cta {
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.6);
}

/* Je reservering: the ticket (book_confirm.html). */
/* Je reservering as a boarding pass (book_confirm.html): the car and its
   status, the code on light red, a tear line, the facts as the stub. */
.ticket {
  position: relative;
  border: 1.5px solid var(--kiosk-line);
  border-radius: 16px;
  padding-bottom: 0.85rem;
}

.ticket-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 0.9rem 0;
}

.ticket-car {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--kiosk-ink);
}

/* The tear line, with a notch at each side. */
.ticket-tear {
  position: relative;
  height: 0;
  margin: 0.9rem 14px 0.75rem;
  border-top: 2px dashed var(--kiosk-line);
}

.ticket-tear::before,
.ticket-tear::after {
  content: "";
  position: absolute;
  top: -14px;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--kiosk-card-bg);
  border: 1.5px solid var(--kiosk-line);
}

.ticket-tear::before {
  left: -28px;
  clip-path: inset(-3px -3px -3px 50%);
}

.ticket-tear::after {
  right: -28px;
  clip-path: inset(-3px 50% -3px -3px);
}

.ticket-nr {
  margin: 0.7rem 0.9rem 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--kiosk-muted);
}

.ticket-chip {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--kiosk-red);
  color: #fff;
  border: 1.5px solid var(--kiosk-red);
  white-space: nowrap;
  flex: none;
  margin-top: 0.2rem;
}

.ticket-chip.is-wait {
  background: #fff;
  color: var(--kiosk-ink);
  border-color: var(--kiosk-line);
}

.small-print {
  text-align: center;
  font-size: 0.68rem;
  margin-top: 0.7rem;
}

/* "Ik heb het begrepen", centred under the text. */
.status-info .guide-btn {
  display: block;
  margin: 0.2rem auto 0;
}

.ticket-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0 0.9rem;
}

.ticket-grid > div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.ticket-grid b {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--kiosk-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ticket-label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kiosk-muted);
}

/* The code on light red with a dashed edge; it pulses a few times when
   the page opens, like the guided pointer's ring. */
.codebox {
  margin: 0.9rem 0.9rem 0;
  padding: 0.7rem 0.8rem 0.8rem;
  border-radius: 12px;
  border: 1.5px dashed var(--kiosk-red);
  background: var(--kiosk-red-tint);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 0.6rem;
  text-align: left;
  animation: code-pulse 1.8s ease-in-out 4;
}

.codebox .ticket-label {
  grid-column: 1 / -1;
  color: var(--kiosk-red);
}

.codebox b {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--kiosk-ink);
}

.codebox-copy {
  border: 1.5px solid var(--kiosk-red);
  border-radius: 999px;
  background: #fff;
  color: var(--kiosk-red);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

@keyframes code-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 30, 36, 0.6); }
  50% { box-shadow: 0 0 0 10px rgba(227, 30, 36, 0); }
}

/* The one button that matters right now (status.html, book_confirm.html). */
.kiosk-cta.is-pulse {
  animation: cta-pulse 1.6s ease-in-out infinite;
}

@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 30, 36, 0.55); }
  50% { box-shadow: 0 0 0 9px rgba(227, 30, 36, 0); }
}

/* The guided pointer on the customer pages (static/customer_guide.js). */
.guide-pointer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9001;
  width: 28px;
  height: 28px;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

.guide-pointer.is-moving {
  transition: transform 0.9s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.guide-pointer svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #ffffff;
  stroke: #111111;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.guide-pointer::before {
  content: "";
  position: absolute;
  left: -9px;
  top: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--kiosk-red);
  opacity: 0;
}

.guide-pointer.is-click::before {
  animation: setup-click 0.7s ease-out;
}

.guide-target {
  outline: 2px solid var(--kiosk-red);
  outline-offset: 5px;
  border-radius: 12px;
}

/* As wide as the card and centred: on a laptop it ran the full width of
   the screen. */
.guide-note {
  position: fixed;
  left: 50%;
  bottom: 16px;
  width: min(100vw - 32px, 26rem);
  transform: translateX(-50%);
  z-index: 9000;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: var(--kiosk-card-bg);
  border: 1.5px solid var(--kiosk-red);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.6);
  color: var(--kiosk-ink);
  font-family: var(--font-body);
}

/* Next to the card on a wide screen (customer_guide.js sets left/top). */
.guide-note.is-side {
  bottom: auto;
  width: 22rem;
  transform: none;
}

/* Above step 1: "We helpen je de eerste keer even met de stappen." */
.guide-note-intro {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.35;
}

.guide-note-step {
  margin: 0 0 0.3rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kiosk-red);
}

.guide-note-text {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  line-height: 1.45;
}

.guide-note-warn {
  margin: -0.3rem 0 0.7rem;
  font-size: 0.88rem;
  line-height: 1.45;
  font-weight: 800;
  color: var(--kiosk-red);
}

.guide-actions {
  display: flex;
  gap: 0.4rem;
}

.guide-btn {
  border: 0;
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  background: var(--kiosk-red);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.guide-btn.is-quiet {
  background: transparent;
  color: var(--kiosk-muted);
}

/* Prijs per minuut: the minutes and, next to them, what that costs
   (rental_start.html, status.html). */
.minutes-pick {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.minutes-pick input {
  width: 5.5rem;
  background: var(--kiosk-card-bg);
  border: 1.5px solid var(--kiosk-line);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--kiosk-ink);
  text-align: center;
}

.minutes-pick input:focus {
  outline: none;
  border-color: var(--kiosk-red);
}

.minutes-unit {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--kiosk-muted);
}

.minutes-price {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--kiosk-ink);
}

/* "In gebruik": the time left as a bar that runs out (rental_start.html). */
.in-use-bar {
  height: 10px;
  margin: 0.4rem auto 1rem;
  max-width: 18rem;
  border-radius: 999px;
  background: var(--kiosk-line);
  overflow: hidden;
}

.in-use-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--kiosk-red);
  transition: width 1s linear;
}

/* A quieter button for the second choice (status.html: "auto teruggezet"). */
.kiosk-cta.is-quiet {
  background: transparent;
  color: var(--kiosk-red);
  border: 2px solid var(--kiosk-red);
}

.email-field textarea {
  background: var(--kiosk-card-bg);
  border: 1.5px solid var(--kiosk-line);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--kiosk-ink);
  min-height: 6rem;
  resize: vertical;
}

.email-field textarea:focus {
  outline: none;
  border-color: var(--kiosk-red);
}

.kiosk-cta {
  box-sizing: border-box;
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  padding: 1rem;
  border-radius: 12px;
  border: none;
  background: var(--kiosk-red);
  color: var(--kiosk-red-ink);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}

.kiosk-cta:active {
  transform: scale(0.98);
}

.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
}

.suggestion-chip {
  background: var(--kiosk-card-bg);
  border: 1.5px solid var(--kiosk-line);
  border-radius: 14px;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-body);
  color: var(--kiosk-ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  line-height: 1.25;
}

/* Date-on-top, time-below layout for a future/later slot - the plain
   "now" chip below overrides back to a single centered line, since it has
   no date/time to stack. */
.suggestion-chip .chip-date {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--kiosk-muted);
}

.suggestion-chip .chip-time {
  font-size: 0.88rem;
  font-weight: 800;
}

.suggestion-chip.is-now {
  border-radius: 999px;
  border-color: var(--kiosk-red);
  color: var(--kiosk-red);
  font-size: 0.82rem;
  font-weight: 700;
}

.suggestion-chip.is-selected {
  background: var(--kiosk-red);
  border-color: var(--kiosk-red);
  color: var(--kiosk-red-ink);
}

.suggestion-chip.is-selected .chip-date {
  color: var(--kiosk-red-ink);
  opacity: 0.85;
}

.test-badge {
  display: inline-block;
  border: 1px dashed var(--kiosk-muted);
  color: var(--kiosk-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1.5px solid var(--kiosk-line);
  margin-bottom: 1.25rem;
}

.legal-back {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--kiosk-muted);
  text-decoration: none;
  margin-bottom: 0.75rem;
}

.legal-content {
  overflow-wrap: break-word;
  word-break: break-word;
}

.legal-content h2 {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--kiosk-ink);
  margin: 0;
  padding: 1.35rem 0 0.55rem;
  border-top: 1px solid var(--kiosk-line);
}

.legal-content h2:first-of-type {
  padding-top: 0;
  border-top: none;
}

.legal-content p,
.legal-content li {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--kiosk-ink);
  margin: 0 0 0.6rem;
}

.legal-content ul {
  margin: 0 0 0.6rem;
  padding-left: 1.1rem;
}

.legal-content .legal-placeholder {
  color: var(--kiosk-red);
  font-weight: 600;
}

.legal-content .legal-meta {
  display: inline-block;
  color: var(--kiosk-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}

.legal-content .legal-intro {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--kiosk-ink);
  margin: 0 0 0.3rem;
  padding-bottom: 1.1rem;
}

.free-ride-banner {
  background: var(--kiosk-red-tint);
  border: 1.5px solid var(--kiosk-red);
  color: var(--kiosk-red);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.4;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  margin-bottom: 1.1rem;
}

.kiosk-error {
  background: var(--kiosk-red-tint);
  border: 1.5px solid var(--kiosk-red);
  color: var(--kiosk-red);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  text-align: center;
  line-height: 1.4;
  padding: 0.65rem 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.toast-added {
  background: var(--kiosk-success);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.toast-added.fade-out {
  opacity: 0;
  transform: translateY(-6px);
}

.status-ring {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.25rem auto 1.25rem;
  border: 6px solid var(--kiosk-line);
}

.status-ring span {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.status-ring span#countdown {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0;
  text-transform: none;
}

.status-ring span#countdown.expired {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 0.4rem;
  text-align: center;
}

.status-ring.paid {
  border-color: var(--kiosk-success);
}
.status-ring.paid span {
  color: var(--kiosk-success);
}

.status-ring.pending {
  border-color: var(--kiosk-warning);
}
.status-ring.pending span {
  color: var(--kiosk-warning);
}

.status-ring.failed {
  border-color: var(--kiosk-failed);
}
.status-ring.failed span {
  color: var(--kiosk-red);
}

.status-ring.almost-done {
  border-color: var(--kiosk-red);
  animation: almost-done-pulse 1.6s ease-in-out infinite;
}
.status-ring.almost-done span#countdown {
  color: var(--kiosk-red);
}

.package-list.extend-highlight .tier-row,
.package-list.extend-highlight .stepper {
  outline: 2px solid var(--kiosk-red);
  outline-offset: 4px;
  border-color: var(--kiosk-red);
  animation: almost-done-pulse 1.6s ease-in-out infinite;
}

/* "Drive back now" pulses the same way. */
.return-card.is-return {
  outline: 2px solid var(--kiosk-red);
  outline-offset: 4px;
  animation: almost-done-pulse 1.6s ease-in-out infinite;
}

@keyframes almost-done-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 30, 36, 0.55); }
  50% { box-shadow: 0 0 0 10px rgba(227, 30, 36, 0); }
}

/* ---------- console (staff dashboard) ---------- */

.console-shell {
  display: flex;
  min-height: 100dvh;
  background: var(--ground);
}

.console-sidebar {
  width: 216px;
  flex: none;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.console-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.console-brand img {
  display: block;
  max-width: 100%;
  width: 84px;
  height: auto;
}

.console-brand .venue-name {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.76rem;
  color: var(--muted);
}

.console-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.console-nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}

.console-nav-item.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--ink);
}

.console-nav-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.console-nav-sub {
  margin-left: 0.85rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--line);
  font-size: 0.8rem;
  font-weight: 500;
}

.console-nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.console-nav-parent-row {
  display: flex;
  align-items: stretch;
  gap: 0.1rem;
}

.console-nav-parent-row .console-nav-item {
  flex: 1;
}

.console-nav-caret {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  font-size: 0.65rem;
  transition: transform 0.15s ease;
}

.console-nav-caret:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.console-nav-children {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.console-nav-group.collapsed .console-nav-caret {
  transform: rotate(-90deg);
}

.console-nav-group.collapsed .console-nav-children {
  display: none;
}

/* .console-topbar and .console-mobile-panel only exist to give the mobile
   hamburger menu something to show/hide - on desktop they unwrap via
   display:contents so .console-brand/.console-mobile-toggle and
   .console-nav/.console-venue-switch/.console-user stay direct flex
   children of .console-sidebar, exactly as before these wrappers existed. */
.console-topbar,
.console-mobile-panel {
  display: contents;
}

.console-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  padding: 0;
}

.console-mobile-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.console-sidebar.mobile-nav-open .console-mobile-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.console-sidebar.mobile-nav-open .console-mobile-toggle span:nth-child(2) {
  opacity: 0;
}

.console-sidebar.mobile-nav-open .console-mobile-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.console-nav-item .soon {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
}

.notice-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin-bottom: 1.25rem;
}

/* The bell line: a pill that opens a list below it, over the page. */
.notice-summary {
  position: relative;
  min-width: 0;
}

.notice-summary > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 100%;
  padding: 0.4rem 0.85rem 0.4rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kiosk-red, #e31e24) 12%, var(--surface, #fff));
  border: 1.5px solid color-mix(in srgb, var(--kiosk-red, #e31e24) 60%, transparent);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
}

.notice-summary > summary::-webkit-details-marker {
  display: none;
}

.notice-summary > summary:hover {
  background: color-mix(in srgb, var(--kiosk-red, #e31e24) 20%, var(--surface, #fff));
}

.notice-bell {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--kiosk-red, #e31e24);
  color: #fff;
  transform-origin: 50% 15%;
}

.notice-bell svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notice-count {
  position: absolute;
  top: -0.35rem;
  right: -0.5rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ground);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15rem;
  text-align: center;
}

.notice-bell.is-new {
  animation: notice-ring 0.9s ease 2;
}

@keyframes notice-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(16deg); }
  30% { transform: rotate(-13deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-5deg); }
  75% { transform: rotate(2deg); }
}

.notice-summary-text {
  min-width: 0;
}

.notice-chevron {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  margin: 0 0.1rem 0.2rem 0.1rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease, margin 0.2s ease;
}

.notice-summary[open] .notice-chevron {
  margin: 0.25rem 0.1rem 0 0.1rem;
  transform: rotate(-135deg);
}

.notice-list {
  position: absolute;
  z-index: 25;
  top: calc(100% + 0.45rem);
  left: 0;
  width: max-content;
  max-width: min(30rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.6);
}

.notice-list .notice-banner-item {
  justify-content: space-between;
}

/* Demo mode / closed: a state, not a to-do - quiet, but always in view. */
.notice-state {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.notice-state::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--warning);
}

@media (prefers-reduced-motion: reduce) {
  .notice-bell.is-new {
    animation: none;
  }
}

.notice-banner-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: color-mix(in srgb, var(--kiosk-red, #e31e24) 10%, var(--surface, #fff));
  border: 1.5px solid var(--kiosk-red, #e31e24);
  color: var(--kiosk-red, #e31e24);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  text-decoration: none;
}

.notice-banner-item:hover {
  background: color-mix(in srgb, var(--kiosk-red, #e31e24) 18%, var(--surface, #fff));
}

.nav-badge {
  margin-left: auto;
  background: var(--kiosk-red, #e31e24);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 999px;
  min-width: 1.1rem;
  text-align: center;
}

.console-venue-switch {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.console-venue-switch-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* Colour theme picker: one swatch per theme, its ground and its accent. */
.console-theme-name {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.console-theme-switch {
  display: flex;
  gap: 0.6rem;
  padding: 0.15rem 0 0 0.15rem;
}

.console-theme-swatch {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.console-theme-swatch:hover {
  transform: scale(1.08);
}

.console-theme-swatch[aria-pressed="true"] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.console-theme-swatch.is-night {
  background: linear-gradient(135deg, #14122a 0 52%, #ff5a36 52% 100%);
}

.console-theme-swatch.is-carbon {
  background: linear-gradient(135deg, #0b0c0e 0 52%, #ffd21f 52% 100%);
}

.console-theme-swatch.is-lemans {
  background: linear-gradient(135deg, #071a22 0 46%, #62c6ee 46% 78%, #ff8a2b 78% 100%);
}

.console-venue-switch select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.4rem 0.5rem;
}

.console-user {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.console-user-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}

.console-user-role {
  font-size: 0.7rem;
  color: var(--muted);
}

.console-account-link {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}

.console-account-link:hover {
  color: var(--ink);
}

.console-logout {
  margin-top: 0.5rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.console-logout:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.console-main {
  flex: 1;
  min-width: 0;
  padding: 1.75rem clamp(1rem, 4vw, 2.5rem) 3rem;
}

@media (max-width: 760px) {
  .console-shell {
    flex-direction: column;
  }

  .console-sidebar {
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0.75rem;
    border-right: none;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--surface);
  }

  /* On desktop .console-topbar is display:contents (see base rule) - here
     it becomes a real row so the brand and hamburger button sit side by
     side instead of each taking the full sidebar width. */
  .console-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .console-brand {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
  }

  .console-brand img {
    width: 32px;
  }

  .console-brand .venue-name {
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .console-mobile-toggle {
    display: flex;
  }

  /* The full nested nav (identical markup/behaviour to desktop - same
     collapsible Auto's/Vestigingen groups) renders inside this dropdown
     panel instead of a horizontal scroll strip, since a nested tree
     doesn't translate well to a single scrolling row. */
  .console-mobile-panel {
    display: none;
    flex-direction: column;
    gap: 0.9rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
    padding: 0.85rem 0.9rem;
    max-height: calc(100vh - 60px);
    /* The height a phone really shows, without the part under its address bar -
       with 100vh alone the bottom of the menu could sit behind it. */
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
  }

  .console-sidebar.mobile-nav-open .console-mobile-panel {
    display: flex;
  }

  .console-venue-switch {
    padding-top: 0;
    border-top: none;
  }

  .console-user {
    margin-top: 0;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--line);
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .console-logout-form {
    margin-left: auto;
  }

  .console-main {
    padding: 1.25rem 1rem 2.5rem;
  }
}

.booking-car-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.booking-car-row:last-child {
  border-bottom: none;
}

.booking-car-label {
  flex: 0 0 110px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  padding-top: 0.3rem;
}

.booking-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 1 1 auto;
}

.booking-chip {
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.booking-chip.checked-in {
  background: var(--accent);
  color: var(--accent-ink);
}

.console-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1.75rem;
}

.console-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
}

.console-title .venue {
  color: var(--muted);
  font-weight: 500;
  font-size: 1rem;
}

.console-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}

.console-live .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-console);
  padding: 1rem 1.1rem;
}

.stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

.stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
}

.stat-trend {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  font-weight: 600;
  vertical-align: middle;
}

.stat-trend.is-up {
  color: var(--success);
}

.stat-trend.is-down {
  color: var(--danger);
}

.stat-trend.is-flat {
  color: var(--muted);
}

.chart-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

@media (max-width: 760px) {
  .chart-row {
    grid-template-columns: 1fr;
  }
}

.chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-console);
  padding: 1.1rem 1.2rem;
}

.chart-card h2 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 1.1rem;
}

/* ---------- Live op de baan (cars.html) ----------
   Grass, run-off, kerbs, asphalt and centre line are the same path drawn
   five times (<use>), widest first. Asphalt and kerbs are fixed colours;
   the ground around them comes from the chosen theme - it used to be grass
   green, which clashed with every theme. */
.race-card {
  margin-bottom: 1.75rem;
}

.race-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.race-head h2 {
  margin: 0;
}

.race-live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.race-live::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--muted);
}

.race-live.is-on {
  color: var(--success);
}

.race-live.is-on::before {
  background: var(--success);
  animation: race-pulse 1.6s ease-out infinite;
}

@keyframes race-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}

.race-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem);
  gap: 1.25rem;
  align-items: start;
}

/* The drawing (400 x 250) is at most 28rem or 55% of the screen high, and
   centred in its column: filling the column made it the whole screen on a
   laptop, a fixed 34rem left it small in a corner on a wide one. */
.race-track {
  width: 100%;
  max-width: calc(min(28rem, 55vh) * 1.6);
  justify-self: center;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -24px rgba(0, 0, 0, 0.7);
}

.race-svg {
  display: block;
  width: 100%;
  height: auto;
}

.race-grass {
  fill: url(#race-grass);
}

.race-grass-light {
  stop-color: color-mix(in srgb, var(--ink) 7%, var(--surface-2));
}

.race-grass-dark {
  stop-color: var(--ground);
}

.race-logo {
  opacity: 0.22;
}

.race-runoff,
.race-kerb-base,
.race-kerb,
.race-asphalt,
.race-centre {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.race-runoff {
  stroke: color-mix(in srgb, var(--ink) 6%, transparent);
  stroke-width: 46;
}

.race-kerb-base {
  stroke: #f2f2f2;
  stroke-width: 31;
}

.race-kerb {
  stroke: #e31e24;
  stroke-width: 31;
  stroke-dasharray: 7 7;
  stroke-linecap: butt;
}

.race-asphalt {
  stroke: #34353b;
  stroke-width: 25;
}

.race-centre {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.2;
  stroke-dasharray: 7 9;
}

.race-car-body {
  stroke: #ffffff;
  stroke-width: 2.2;
}

.race-car-halo {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.race-car.is-live .race-car-halo {
  animation: race-halo 1.8s ease-out infinite;
}

@keyframes race-halo {
  0% { opacity: 0.6; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.7); }
}

.race-car.is-offline .race-car-body,
.race-car.is-searching .race-car-body {
  opacity: 0.55;
}

.race-car-label rect {
  fill: rgba(10, 10, 14, 0.82);
}

.race-car-label text {
  fill: #ffffff;
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 700;
}

.race-car.is-offline .race-car-label,
.race-car.is-searching .race-car-label {
  opacity: 0.7;
}

.race-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.race-legend li {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr);
  column-gap: 0.65rem;
  row-gap: 0.12rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.race-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 3px var(--line);
}

.race-legend li.is-offline .race-dot,
.race-legend li.is-searching .race-dot,
.race-legend li.is-nopos .race-dot,
.race-legend li.is-off_track .race-dot {
  opacity: 0.55;
}

.race-name {
  font-weight: 700;
  font-size: 0.88rem;
}

.race-state,
.race-seen {
  grid-column: 2;
  color: var(--muted);
}

.race-state {
  font-size: 0.78rem;
  font-weight: 600;
}

.race-legend li.is-live .race-state {
  color: var(--success);
}

.race-legend li.is-searching .race-state {
  color: var(--warning);
}

.race-seen {
  font-size: 0.72rem;
}

.race-note {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .race-body {
    grid-template-columns: 1fr;
  }

  /* The drawing scales down with the screen; its labels shouldn't with it. */
  .race-car-label text {
    font-size: 12px;
  }

  .race-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .race-live.is-on::before,
  .race-car.is-live .race-car-halo {
    animation: none;
  }
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  height: 130px;
}

.bar-chart-scroll {
  overflow-x: auto;
}

.bar-chart-scroll .bar-chart {
  width: max-content;
  min-width: 100%;
}

.bar-chart-scroll .bar {
  flex: none;
  width: 26px;
}

.bar-chart .bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  height: 100%;
}

.bar-chart .bar-fill {
  width: 100%;
  max-width: 20px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  min-height: 2px;
}

.bar-chart .bar-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
}

.rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rank-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.rank-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
}

.rank-list li:first-child .rank-badge {
  background: color-mix(in srgb, var(--accent-2) 30%, var(--surface-2));
  color: var(--accent-2);
  border-color: var(--accent-2);
}

.rank-info {
  flex: 1;
  min-width: 0;
}

.rank-info .name {
  font-weight: 700;
  font-size: 0.88rem;
}

.rank-info .meta {
  font-size: 0.74rem;
  color: var(--muted);
  font-family: var(--font-mono);
}

.rank-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.donut-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.donut {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  flex: none;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.82rem;
  min-width: 0;
}

.donut-legend .row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.donut-legend .swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}

.donut-legend .row span:last-child {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--muted);
}

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-console);
  overflow-x: auto;
}

/* A table wider than its box: a fade and an arrow on the side with more, and
   on touch screens a scrollbar that stays visible (see base_console.html). */
.table-scroll {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.table-scroll > .table-wrap,
.table-scroll-edge {
  grid-area: 1 / 1;
}

.table-scroll-edge {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 3.25rem;
  margin: 1px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.table-scroll-edge.is-right {
  justify-self: end;
  align-items: flex-end;
  border-radius: 0 calc(var(--radius-console) - 1px) calc(var(--radius-console) - 1px) 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 78%);
}

.table-scroll-edge.is-left {
  justify-self: start;
  align-items: flex-start;
  border-radius: calc(var(--radius-console) - 1px) 0 0 calc(var(--radius-console) - 1px);
  background: linear-gradient(to left, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 78%);
}

.table-scroll.can-right .table-scroll-edge.is-right,
.table-scroll.can-left .table-scroll-edge.is-left {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s;
}

.table-scroll-more {
  position: sticky;
  top: 0.75rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0.45rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  pointer-events: auto;
}

.table-scroll-more svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.table-scroll-bar {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  .table-scroll.is-scrollable .table-scroll-bar {
    display: block;
    position: relative;
    height: 18px;
    margin-top: 2px;
    touch-action: none;
  }

  .table-scroll-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 7px;
    height: 4px;
    border-radius: 2px;
    background: var(--line);
  }

  .table-scroll-bar span {
    position: absolute;
    left: 0;
    top: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--accent);
  }
}

@media (max-width: 760px) {
  /* Under the menu bar, which stays at the top of the screen on a phone. */
  .table-scroll-more {
    top: 4rem;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

tbody tr:target {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

thead th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
}

tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: none;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}

.status-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-chip.paid {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}
.status-chip.paid .dot {
  background: var(--success);
}

.status-chip.pending {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
}
.status-chip.pending .dot {
  background: var(--warning);
}

.status-chip.failed {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}
.status-chip.failed .dot {
  background: var(--danger);
}

.status-chip.refunded {
  background: color-mix(in srgb, var(--muted) 20%, transparent);
  color: var(--muted);
}
.status-chip.refunded .dot {
  background: var(--muted);
}

.status-chip.source-board {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.status-chip.source-board .dot {
  background: var(--accent);
}

.status-chip.source-server {
  background: color-mix(in srgb, var(--muted) 20%, transparent);
  color: var(--muted);
}
.status-chip.source-server .dot {
  background: var(--muted);
}

.console-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--muted);
}

.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.filter-row label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.filter-row input[type="date"],
.filter-row select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
}

.filter-clear {
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
}

.pager {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  font-size: 0.85rem;
}

.pager a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.console-btn {
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-console);
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.console-btn.secondary {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
}

.console-btn.danger {
  background: var(--danger);
  color: var(--danger-ink);
}

.message-thread {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0 0 1.5rem;
}

.message-bubble {
  max-width: 640px;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-console);
  background: var(--surface-2);
  border: 1px solid var(--line);
  align-self: flex-start;
}

.message-bubble.staff {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.message-bubble-body {
  white-space: pre-wrap;
  font-size: 0.9rem;
  margin: 0;
}

.message-bubble-meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0.4rem 0 0;
}

.pricing-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pricing-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem;
  background: var(--surface-2);
  border-radius: var(--radius-console);
  flex-wrap: wrap;
}

.pricing-row label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.pricing-row input[type="number"] {
  width: 90px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
}

.pricing-row input[type="number"].is-wide {
  width: 7.5rem;
}

/* Text fields and dropdowns in these rows were left to the browser: white
   boxes on a dark console (kortingscode, Soort verhuur, factuurgegevens). */
.pricing-row input[type="text"],
.pricing-row input[type="email"],
.pricing-row input[type="date"],
.pricing-row select {
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
}

.pricing-row input[type="radio"] {
  accent-color: var(--accent);
}

.pricing-row-title {
  font-size: 0.82rem;
}

.pricing-row-end {
  margin-left: auto;
}

.form-problem {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--danger);
  border-radius: var(--radius-console);
  color: var(--danger);
  font-size: 0.85rem;
}

.setup-chip-link {
  text-decoration: none;
}

/* "Nog in te stellen" with a pointer (static/setup_help.js). */
.setup-pointer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9001;
  width: 30px;
  height: 30px;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}

.setup-pointer.is-moving {
  transition: transform 0.9s cubic-bezier(0.22, 0.7, 0.2, 1), opacity 0.4s ease;
}

.setup-pointer.is-gone {
  opacity: 0;
}

.setup-pointer svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #ffffff;
  stroke: #111111;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.setup-pointer::before {
  content: "";
  position: absolute;
  left: -9px;
  top: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  opacity: 0;
}

.setup-pointer.is-click::before {
  animation: setup-click 0.7s ease-out;
}

@keyframes setup-click {
  from { opacity: 0.95; transform: scale(0.3); }
  to { opacity: 0; transform: scale(2.4); }
}

.setup-target {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
  border-radius: 8px;
  animation: setup-pulse 1.6s ease-out 3;
}

@keyframes setup-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  100% { box-shadow: 0 0 0 16px transparent; }
}

.setup-bubble,
.setup-card {
  z-index: 9000;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.7);
  color: var(--ink);
}

.setup-bubble {
  position: absolute;
  width: min(23rem, calc(100vw - 32px));
}

.setup-card {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(21rem, calc(100vw - 32px));
}

.setup-bubble-title {
  margin: 0 0 0.35rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.setup-bubble-text {
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
  line-height: 1.45;
}

.setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.setup-actions .console-btn {
  padding: 0.45rem 0.8rem;
  font-size: 0.8rem;
  text-decoration: none;
}

@media (max-width: 600px) {
  .setup-bubble {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
  }

  .setup-card {
    left: 16px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .setup-target {
    animation: none;
  }
}

.row-form {
  display: inline;
}

.auth-card {
  max-width: 380px;
  margin: 2.5rem auto;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form select {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  padding: 0.55rem 0.7rem;
}

.auth-form .console-btn {
  margin-top: 0.4rem;
}

.auth-error {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  border: 1px solid var(--danger);
  color: var(--ink);
  border-radius: var(--radius-console);
  padding: 0.65rem 0.85rem;
  font-size: 0.82rem;
  margin-bottom: 1rem;
}

.auth-meta {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.auth-meta a {
  color: var(--ink);
  font-weight: 600;
}

.auth-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.flyer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.flyer-card {
  display: flex;
  flex-direction: column;
}

/* Checkerboard behind the artwork: a flyer with a white background would
   otherwise dissolve into the card and look like it failed to load. */
.flyer-thumb {
  display: block;
  border-radius: var(--radius-console);
  overflow: hidden;
  border: 1px solid var(--line);
  background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 18px 18px;
}

.flyer-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
}

.flyer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
}

.flyer-actions .console-btn {
  text-decoration: none;
  display: inline-block;
}

.flyer-panel {
  margin-top: 0.75rem;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}

.flyer-panel > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent);
  list-style: none;
}

.flyer-panel > summary::-webkit-details-marker {
  display: none;
}

.flyer-panel > summary::before {
  content: "+ ";
}

.flyer-panel[open] > summary::before {
  content: "\2212 ";
}

.flyer-panel .pricing-form {
  margin-top: 0.85rem;
}

.flyer-field-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.flyer-field-row > label {
  flex: 1 1 8rem;
}

/* ---------------------------------------------------------------------
   Fleet overview (/start) - the page a flyer or poster QR lands on.

   One car per row, full width, in the 4:3 the photos are actually shot in.
   An earlier pass used a portrait frame two across; cropping a landscape
   car photo into portrait throws away nearly half its width and the car
   comes out looking zoomed in. The frame follows the photograph, not the
   other way round.

   The reference is a racing game's car-select screen: the car fills the
   frame, its name sits large across the bottom, and one unmistakable red
   button says go. Same white kiosk card as every other customer page - all
   the weight is in the tiles.
   --------------------------------------------------------------------- */
.kiosk-card.fleet {
  max-width: 720px;
  padding: 1.75rem 1.5rem 2rem;
}

.kiosk-card.fleet .powered-by {
  margin: 2rem -1.5rem -2rem;
}

.fleet-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.fleet-head-text {
  min-width: 0;
}

/* The one number someone walking up actually wants. A fraction needs no
   plural rules in six languages and no sentence to parse from a distance. */
.fleet-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  flex: none;
  padding-bottom: 0.2rem;
}

.fleet-count-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--kiosk-ink);
  font-variant-numeric: tabular-nums;
}

.fleet-count-value .total {
  color: var(--kiosk-muted);
  font-weight: 600;
}

.fleet-count-label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kiosk-success);
}


/* Always one per row. Two across only shrinks the photograph, which is the
   whole content of the tile - scrolling costs nothing on the phone almost
   everyone arrives on. */
.fleet-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin: 1.5rem 0 0;
}

.fleet-tile {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  /* The aspect the photos are actually shot in, so nothing is cropped. */
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  background: #100f0f;
  isolation: isolate;
  box-shadow: 0 10px 26px -18px rgb(10 9 9 / 0.65);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
}

.fleet-tile.is-open:hover,
.fleet-tile.is-open:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 28px 50px -24px rgb(227 30 36 / 0.75);
}

.fleet-tile.is-open:focus-within {
  outline: 3px solid var(--kiosk-red);
  outline-offset: 4px;
}

/* Over de hele tegel gespannen, zodat tikken waar dan ook de auto opent.
   De Reserveer-knop ligt hier met een eigen z-index bovenop. */
.fleet-open {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
}

.fleet-shot {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  background: #100f0f;
}

.fleet-shot img {
  /* Absolute with a z-index above the placeholder below it: the fallback
     is always in the markup so onerror can reveal it, and a positioned
     sibling would otherwise paint straight over the photograph. */
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.3s ease;
}

.fleet-tile.is-open:hover .fleet-shot img,
.fleet-tile.is-open:focus-within .fleet-shot img {
  transform: scale(1.04);
}

/* Stand-in when a venue has not uploaded a photo yet - dark and quiet
   rather than a bright empty box, so a half-filled list still looks
   deliberate. */
.fleet-shot-empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: #ffffff;
  opacity: 0.3;
}

.fleet-shot-empty svg {
  width: 64px;
  height: 64px;
}

.fleet-shot-empty span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Carries the name over an unknown photograph, and gives the tile the
   weight of a printed poster. */
.fleet-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(
    to top,
    rgb(8 7 7 / 0.94) 0%,
    rgb(8 7 7 / 0.72) 24%,
    rgb(8 7 7 / 0.12) 55%,
    rgb(8 7 7 / 0) 78%
  );
}

.fleet-caption {
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem 1.3rem;
}

.fleet-caption-text {
  min-width: 0;
}

/* Big enough to read from a few metres away, which is roughly where
   someone stands when they are deciding. */
.fleet-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 6.5vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0;
  color: #ffffff;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.45);
}

.fleet-meta {
  margin: 0.45rem 0 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: rgb(255 255 255 / 0.75);
}

.fleet-price {
  color: #ffffff;
}

/* The unmistakable "go". Only on a car that can actually be started, so
   its presence is itself the signal. */
.fleet-go {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--kiosk-red);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -8px rgb(227 30 36 / 0.85);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.fleet-go svg {
  width: 26px;
  height: 26px;
}

/* Boven de gespannen link, anders vangt die de tik op. */
.fleet-reserve {
  position: relative;
  z-index: 6;
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--kiosk-red);
  color: #ffffff;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px -10px rgb(227 30 36 / 0.85);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.fleet-reserve:hover,
.fleet-reserve:focus-visible {
  transform: scale(1.06);
}

.fleet-reserve:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.fleet-tile.is-open:hover .fleet-go,
.fleet-tile.is-open:focus-within .fleet-go {
  transform: scale(1.12);
}

/* Status pill, top left, mirroring the go button diagonally. */
.fleet-ribbon {
  position: absolute;
  z-index: 3;
  top: 0.9rem;
  left: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #100f0f;
  background: rgb(255 255 255 / 0.95);
  backdrop-filter: blur(8px);
}

.fleet-ribbon.busy {
  background: var(--kiosk-red);
  color: #ffffff;
}

.fleet-ribbon.reserved,
.fleet-ribbon.unavailable,
.fleet-ribbon.offline,
.fleet-ribbon.updating,
.fleet-ribbon.closed {
  background: rgb(16 15 15 / 0.75);
  color: rgb(255 255 255 / 0.92);
}

.fleet-ribbon .pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kiosk-success);
  flex: none;
}

.fleet-ribbon.busy .pulse { background: #ffffff; }
.fleet-ribbon.reserved .pulse,
.fleet-ribbon.unavailable .pulse { background: rgb(255 255 255 / 0.6); }

/* Only an available car breathes. The page exists to answer which one can
   be driven right now, so that is the only thing allowed to move by itself. */
.fleet-tile.is-free .fleet-ribbon .pulse {
  animation: fleet-breathe 2.4s ease-in-out infinite;
}

@keyframes fleet-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgb(31 157 85 / 0.6); }
  50% { box-shadow: 0 0 0 7px rgb(31 157 85 / 0); }
}

/* Busy and out of service drain the colour instead of adding another one. */
.fleet-tile.is-busy .fleet-shot img { filter: saturate(0.4) brightness(0.72); }
.fleet-tile.is-reserved .fleet-shot img,
.fleet-tile.is-updating .fleet-shot img { filter: saturate(0.55) brightness(0.8); }
.fleet-tile.is-unavailable .fleet-shot img,
.fleet-tile.is-offline .fleet-shot img,
.fleet-tile.is-closed .fleet-shot img { filter: grayscale(1) brightness(0.5); }
.fleet-tile.is-unavailable .fleet-caption,
.fleet-tile.is-offline .fleet-caption { opacity: 0.8; }

/* Specular sweep on hover - a highlight travelling across bodywork. On
   subject for a car, and why it is a narrow diagonal and not a fade. */
.fleet-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 36%,
    rgb(255 255 255 / 0.28) 48%,
    transparent 61%
  );
  transform: translateX(-125%);
  opacity: 0;
}

.fleet-tile.is-open:hover .fleet-shot::after,
.fleet-tile.is-open:focus-within .fleet-shot::after {
  animation: fleet-sheen 0.85s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

@keyframes fleet-sheen {
  0% { transform: translateX(-125%); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(125%); opacity: 0; }
}

/* Runs along the very bottom edge and empties as the ride does - readable
   from further away than a number. */
.fleet-progress {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: rgb(255 255 255 / 0.18);
  overflow: hidden;
}

.fleet-progress span {
  display: block;
  height: 100%;
  background: var(--kiosk-red);
  transition: width 1s linear;
}

/* Scroll reveal. The no-JS / reduced-motion state is the finished state,
   so the page is never blank if the observer never runs. */
.js-reveal .fleet-tile {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
}

.js-reveal .fleet-tile.revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
  .fleet-tile,
  .fleet-shot img,
  .fleet-go,
  .fleet-progress span { transition: none; }
  .fleet-tile.is-open:hover,
  .fleet-tile.is-open:focus-within { transform: none; }
  .fleet-tile.is-open:hover .fleet-shot img,
  .fleet-tile.is-open:focus-within .fleet-shot img { transform: none; }
  .fleet-tile.is-open:hover .fleet-go,
  .fleet-tile.is-open:focus-within .fleet-go { transform: none; }
  .fleet-reserve, .fleet-reserve:hover, .fleet-reserve:focus-visible { transition: none; transform: none; }
  .fleet-tile.is-open:hover .fleet-shot::after,
  .fleet-tile.is-open:focus-within .fleet-shot::after { animation: none; }
  .fleet-tile.is-free .fleet-ribbon .pulse { animation: none; }
  .js-reveal .fleet-tile { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .kiosk-card.fleet { padding: 1.4rem 1.1rem 1.6rem; }
  .kiosk-card.fleet .powered-by { margin: 1.75rem -1.1rem -1.6rem; }
  .fleet-count-value { font-size: 1.7rem; }
  .fleet-caption { padding: 1rem 1.05rem 1.15rem; }
  .fleet-go { width: 50px; height: 50px; }
  .fleet-go svg { width: 22px; height: 22px; }
}

/* Locatie van de baan on Settings (see settings.html). */
.site-status {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-console);
  color: var(--muted);
  font-size: 0.88rem;
}

.site-status.is-set {
  border-style: solid;
  border-color: color-mix(in srgb, var(--success) 45%, var(--line));
  color: var(--ink);
}

.site-search {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.site-search input {
  flex: 1;
  min-width: 0;
}

.site-results {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}

.site-result {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-console);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.site-result:hover,
.site-result:focus-visible {
  border-color: var(--accent);
}

.site-message,
.site-hint {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.site-map {
  height: 340px;
  margin-bottom: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-console);
  overflow: hidden;
  z-index: 0;
}

.site-cars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.4rem 0 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.site-car {
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
}

.site-clear {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 760px) {
  .site-map {
    height: 280px;
  }
}

/* Under a row of stat tiles: what the amounts leave out. */
.stat-note {
  margin: -0.4rem 0 1.25rem;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Auto's: one card per car (cars.html). */
.car-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 31rem), 1fr));
  gap: 1rem;
}

/* Cards in a row are equally tall: the extra room goes under the chips, so
   the stats, the buttons and Beheer line up across the row. */
.car-card .car-head {
  flex: 1 0 auto;
}

.car-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  padding: 1rem 1.1rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.car-card:target {
  border-color: var(--accent);
}

.car-card.is-inactive {
  border-style: dashed;
}

.car-card.is-inactive .car-photo img {
  filter: grayscale(1);
  opacity: 0.6;
}

.car-head {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

/* Scoped to the card: the customer's car page has a .car-photo of its own
   (full width, near the top of this file), and a bare .car-photo here made
   that one 96 px wide too. */
.car-card .car-photo {
  flex: none;
  display: grid;
  place-items: center;
  width: 96px;
  height: 72px;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface-2);
}

.car-card .car-photo img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.car-card .car-photo svg {
  width: 46px;
  fill: color-mix(in srgb, var(--muted) 60%, transparent);
}

.car-title {
  flex: 1;
  min-width: 0;
}

.car-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.2;
}

.car-id {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.66rem;
  overflow-wrap: anywhere;
  user-select: all;
}

.car-chips,
.car-chips-live {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.car-chips {
  margin-top: 0.5rem;
}

.car-chips-live:empty {
  display: none;
}

.car-chips .status-chip {
  padding: 0.22rem 0.5rem;
  font-size: 0.66rem;
}

.car-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 0.8rem 0;
  border-block: 1px solid var(--line);
}

.car-stats > div {
  min-width: 0;
}

.car-stats dt {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.car-stats dd {
  margin: 0;
}

.car-stat {
  margin-top: 0.2rem !important;
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.car-place {
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.car-place.is-empty {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.car-stat-sub {
  margin-top: 0.3rem !important;
  color: var(--muted);
  font-size: 0.72rem;
}

.car-stat-sub .status-chip {
  padding: 0.18rem 0.45rem;
  font-size: 0.62rem;
}

.car-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.car-actions form {
  margin: 0;
}

.car-free {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
}

.car-actions-break {
  flex-basis: 100%;
  height: 0;
}

.car-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}

.car-toggle {
  margin-left: auto !important;
}

.car-manage {
  border-top: 1px dashed var(--line);
  padding-top: 0.7rem;
}

.car-manage summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  cursor: pointer;
  list-style: none;
}

.car-manage summary::-webkit-details-marker {
  display: none;
}

.car-manage summary::before {
  content: "";
  align-self: center;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.car-manage[open] summary::before {
  transform: rotate(45deg);
}

.car-manage-title {
  font-weight: 700;
  font-size: 0.85rem;
}

.car-manage-parts {
  color: var(--muted);
  font-size: 0.75rem;
}

.car-manage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.75rem;
  margin-top: 0.8rem;
}

.car-manage section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.8rem;
  background: var(--surface-2);
  border-radius: 10px;
}

.car-manage h3 {
  margin: 0;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.car-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  max-width: 100%;
}

.car-inline input[type="text"],
.car-free input,
.car-free select,
.car-stack input {
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.55rem;
}

.car-inline input[type="text"] {
  width: 10rem;
}

.car-free-minutes {
  width: 4.5rem;
}

.car-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.car-stack label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.car-stack input {
  width: 8rem;
}

.car-file {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.car-file input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.car-firmware {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.car-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.car-note.is-bad {
  color: var(--danger);
}

.car-note[hidden] {
  display: none;
}

/* Verlengen met korting (status.html): the normal price or the offer. */
[data-ext-normal][hidden],
[data-ext-offer][hidden] {
  display: none;
}

.extend-offer-note {
  margin: 0 0 0.6rem;
  color: var(--kiosk-red);
  font-weight: 800;
}

/* An update running (cars.html, Firmware): clearly busy, not a footnote. */
.car-note.is-busy {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
}

.car-note.is-wait {
  color: var(--ink);
  font-size: 0.8rem;
}

/* Above "Alle auto's bijwerken": the versions the boards run, and updates. */
.fw-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.car-note.is-good {
  color: var(--success);
  font-size: 0.8rem;
  font-weight: 600;
}

.ota-spinner {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ota-spin 0.8s linear infinite;
}

@keyframes ota-spin {
  to { transform: rotate(360deg); }
}

/* A button that is off (an update running, a flash on its way) looks off. */
.console-btn:disabled,
[data-fw-form] select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .ota-spinner { animation-duration: 2.4s; }
}

.car-manage .console-btn,
.car-actions .console-btn {
  padding: 0.45rem 0.8rem;
  font-size: 0.8rem;
}

.race-site.is-unset {
  color: var(--warning, var(--accent));
}

@media (max-width: 520px) {
  .car-card .car-photo {
    width: 72px;
    height: 56px;
  }

  .car-toggle {
    margin-left: 0 !important;
  }

  .car-actions > * {
    flex: 1 1 auto;
  }

  .car-actions .car-actions-break {
    flex: 0 0 100%;
  }

  .car-actions .console-btn,
  .car-free input,
  .car-free select {
    width: 100%;
    justify-content: center;
  }
}

/* Baan inmeten on Auto's (cars.html, routes/track_recording.py). */
.track-rec {
  margin-bottom: 1.75rem;
}

.track-rec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.track-rec-desc,
.track-rec-hint {
  margin: 0.4rem 0 0.9rem;
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 62ch;
}

.track-rec-hint {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
}

.track-rec-done {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
}

.track-rec-msg {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-console);
  font-size: 0.85rem;
}

.track-rec-msg.is-good {
  border-color: color-mix(in srgb, var(--success) 50%, var(--line));
  color: var(--success);
}

.track-rec-msg.is-bad {
  padding-left: 1.8rem;
  border-color: color-mix(in srgb, var(--danger) 50%, var(--line));
  color: var(--danger);
}

.track-rec-laps {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.track-rec-lap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.track-rec-dot {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--line);
  border-radius: 50%;
}

.track-rec-lap.is-done .track-rec-dot {
  border-color: var(--success);
  background: var(--success);
}

.track-rec-lap.is-running .track-rec-dot {
  border-color: var(--accent);
  background: var(--accent);
  animation: track-rec-pulse 1.2s ease-in-out infinite;
}

.track-rec-lap.is-running {
  font-weight: 700;
}

.track-rec-todo {
  color: var(--muted);
}

@keyframes track-rec-pulse {
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent);
  }
}

.track-rec-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 0.9rem;
}

.track-rec-actions form {
  margin: 0;
}

.track-rec-start {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}

.track-rec-start label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.track-rec-link {
  border: 0;
  background: none;
  padding: 0.45rem 0;
  font: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .track-rec-lap.is-running .track-rec-dot {
    animation: none;
  }
}

/* Uitbetalingen: status as three short lines (settlements.html). */
.settlement-status {
  line-height: 1.45;
}

.settlement-status div + div {
  color: var(--muted);
  font-size: 0.8rem;
}

/* Losse verhuur on the customer pages: drive back / wait for the car
   (status.html, book_confirm.html) and the code field on a free car. */
.return-card {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 2px solid var(--kiosk-line);
  background: var(--kiosk-card-bg);
  color: var(--kiosk-ink);
  text-align: left;
}

.return-card[hidden] {
  display: none;
}

.return-card.is-riding {
  border-color: var(--kiosk-line);
}

.return-card.is-return {
  border-color: var(--kiosk-red);
  background: var(--kiosk-red-tint);
}

.return-card.is-late {
  border-color: var(--kiosk-red);
  background: var(--kiosk-red);
  color: #fff;
}

.return-card.is-late .return-body {
  color: #fff;
}

.return-card.is-returned {
  border-color: var(--kiosk-ink);
  background: #f2f2f2;
}

.return-title {
  margin: 0 0 0.25rem;
  font-weight: 800;
  font-size: 1.02rem;
}

.return-title:empty {
  display: none;
}

.return-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.return-free {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--kiosk-line);
  font-weight: 700;
}

.return-free a {
  color: var(--kiosk-red);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kiosk-code {
  margin: 1.25rem 0 0.5rem;
}

.kiosk-code summary {
  cursor: pointer;
  color: var(--kiosk-red);
  font-weight: 700;
  text-align: center;
}

/* Losse verhuur on Auto's: the map of the grounds (cars.html). */
.terrain-map {
  height: 320px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  z-index: 0;
}

.terrain-stand {
  background: #3ddc97;
  border: 0;
  color: #04120b;
  font-weight: 800;
  box-shadow: none;
}

.terrain-name {
  font-weight: 700;
  text-align: center;
}

/* Under the car's name on the map: riding, back, late. */
.terrain-name small {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--muted);
}

@media (max-width: 760px) {
  .terrain-map {
    height: 260px;
  }
}

/* Losse verhuur on Settings: the stand as a second pin (settings.html). */
.site-target {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
}

.site-stand-pin {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #3ddc97;
  color: #04120b;
  font: 800 0.85rem/1 var(--font-body);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ---------- The digital licence (lap_times.py, _licence_card.html) ---------- */
.licence-section {
  margin-top: 1.1rem;
}

.licence {
  --tx: 0;
  --ty: 0;
  --shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.55);
  --pulse-on: rgba(227, 30, 36, 0.55);
  --pulse-off: rgba(227, 30, 36, 0);
  position: relative;
  width: 100%;
  aspect-ratio: 1.586;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, var(--kiosk-red-tint) 100%);
  border: 1px solid var(--kiosk-line);
  color: var(--kiosk-ink);
  box-shadow: var(--shadow);
  transform: perspective(900px) rotateX(calc(var(--ty) * -8deg)) rotateY(calc(var(--tx) * 10deg));
  transition: transform 0.12s ease-out;
  font-family: var(--font-body);
  /* A ring that pulses out in the card's colour, like the code box on the
     booking ticket. */
  animation: licence-pulse 1.8s ease-in-out infinite;
}

@keyframes licence-pulse {
  0%, 100% { box-shadow: var(--shadow), 0 0 0 0 var(--pulse-on); }
  50% { box-shadow: var(--shadow), 0 0 0 12px var(--pulse-off); }
}

/* Fine rings, like the guilloche on a real licence. */
.licence::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(circle at 15% 120%, rgba(227, 30, 36, 0.10) 0 1px, transparent 1px 9px),
    repeating-radial-gradient(circle at 110% -20%, rgba(227, 30, 36, 0.08) 0 1px, transparent 1px 11px);
}

/* The sheen: a band of light that moves with the tilt. */
.licence-holo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.9) 42%, rgba(227, 30, 36, 0.35) 50%, rgba(255, 255, 255, 0.9) 58%, transparent 75%);
  background-size: 250% 250%;
  background-repeat: no-repeat;
  background-position: calc(50% + var(--tx) * 120%) calc(50% + var(--ty) * 120%);
}

/* The band: "Kids Supercar / RIJBEWIJS" left, "Afgegeven door / VENUE"
   right - two small-over-big stacks, like the country and document name
   on a real licence. A long venue name gets an ellipsis, never a cut. */
.licence-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 13%;
  background: var(--kiosk-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4%;
  padding: 0 4%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.6rem, 3vw, 0.8rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}

.licence-band > span,
.licence-band > em {
  display: block;
  min-width: 0;
  font-style: normal;
}

.licence-band > span {
  flex: 0 0 auto;
}

.licence-band > em {
  flex: 0 1 auto;
  text-align: right;
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  font-size: clamp(0.5rem, 2.5vw, 0.68rem);
}

.licence-band small {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.36rem, 1.9vw, 0.5rem);
  letter-spacing: 0.14em;
  opacity: 0.85;
}

.licence-band b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.licence-photo {
  position: absolute;
  left: 4%;
  top: 19%;
  width: 25%;
  height: 40%;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--kiosk-line);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.licence-photo svg {
  width: 88%;
}

/* The car's own photo fills the box; the drawing stays underneath as the
   fallback. The car's name is field 2, so none in the box. */
.licence-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.licence-photo.has-photo svg {
  visibility: hidden;
}

.licence-photo .car-body {
  fill: var(--kiosk-red);
}

.licence-fields {
  position: absolute;
  left: 32%;
  right: 4%;
  top: 18%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 0.6rem;
}

.licence-field {
  font-size: clamp(0.42rem, 2.2vw, 0.56rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kiosk-muted);
  line-height: 1.2;
  min-width: 0;
}

.licence-field b {
  display: block;
  font-size: clamp(0.7rem, 3.6vw, 0.9rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--kiosk-ink);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.licence-field.wide {
  grid-column: 1 / -1;
}

.licence-field.big b {
  font-family: var(--font-display);
  font-size: clamp(1rem, 5.4vw, 1.35rem);
}

/* The medal title ("2e van deze week"): a stamp under the photo, so it
   never runs into the fields (measured: it did, at the bottom of the
   right column). */
.licence-medal-badge {
  position: absolute;
  left: 4%;
  bottom: 26%;
  width: 25%;
  box-sizing: border-box;
  background: var(--kiosk-red);
  color: #fff;
  font-size: clamp(0.4rem, 2vw, 0.5rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  text-align: center;
  padding: 0.3em 0.4em;
  border-radius: 8px;
}

/* The bottom row: number left, demo stamp in the middle, logo right. */
.licence-nr {
  position: absolute;
  left: 4%;
  bottom: 6%;
  font-family: var(--font-mono);
  font-size: clamp(0.42rem, 2.2vw, 0.6rem);
  color: var(--kiosk-muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.licence-nr b {
  color: var(--kiosk-ink);
}

.licence-demo {
  position: absolute;
  left: 46%;
  bottom: 7%;
  font-size: clamp(0.5rem, 2.6vw, 0.7rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(20, 17, 16, 0.55);
  border: 1.5px solid rgba(20, 17, 16, 0.35);
  padding: 0.1em 0.5em;
  border-radius: 6px;
  transform: rotate(-8deg);
}

/* The photo mission's stamp (missions.py), on the corner of the photo box. */
.licence-mission {
  position: absolute;
  left: 3%;
  top: 15%;
  transform: rotate(-8deg);
  font-size: clamp(0.42rem, 2.2vw, 0.6rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  background: #1fa36a;
  padding: 0.18em 0.55em;
  border-radius: 6px;
  z-index: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* The Kids Supercar logo, the alpha mask of the real one, in the card's colour. */
.licence-logo {
  position: absolute;
  right: 4%;
  bottom: 5%;
  width: 24%;
  aspect-ratio: 720 / 300;
  background: linear-gradient(135deg, #e31e24, #b3141a);
  -webkit-mask: url(/static/logo-mask.png) center / contain no-repeat;
  mask: url(/static/logo-mask.png) center / contain no-repeat;
}

/* Gold, silver, bronze: first, second or third of the day, the week or ever. */
.licence.is-gold {
  --pulse-on: rgba(212, 160, 23, 0.6);
  --pulse-off: rgba(212, 160, 23, 0);
  background: linear-gradient(135deg, #fff8dc 0%, #f2d67a 100%);
  border-color: #d4a017;
}

.licence.is-gold::before {
  background:
    repeating-radial-gradient(circle at 15% 120%, rgba(138, 101, 8, 0.14) 0 1px, transparent 1px 9px),
    repeating-radial-gradient(circle at 110% -20%, rgba(138, 101, 8, 0.10) 0 1px, transparent 1px 11px);
}

.licence.is-gold .licence-band,
.licence.is-gold .licence-medal-badge {
  background: linear-gradient(90deg, #8a6508, #d4a017);
}

.licence.is-gold .licence-photo .car-body {
  fill: url(#licGold);
}

.licence.is-gold .licence-logo {
  background: linear-gradient(135deg, #f2d67a, #d4a017 45%, #8a6508);
}

.licence.is-gold .licence-holo {
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.95) 42%, rgba(212, 160, 23, 0.45) 50%, rgba(255, 255, 255, 0.95) 58%, transparent 75%);
  background-size: 250% 250%;
}

.licence.is-silver {
  --pulse-on: rgba(107, 114, 128, 0.55);
  --pulse-off: rgba(107, 114, 128, 0);
  background: linear-gradient(135deg, #fbfbfc 0%, #cfd4db 100%);
  border-color: #9aa3ae;
}

.licence.is-silver::before {
  background:
    repeating-radial-gradient(circle at 15% 120%, rgba(75, 85, 99, 0.14) 0 1px, transparent 1px 9px),
    repeating-radial-gradient(circle at 110% -20%, rgba(75, 85, 99, 0.10) 0 1px, transparent 1px 11px);
}

.licence.is-silver .licence-band,
.licence.is-silver .licence-medal-badge {
  background: linear-gradient(90deg, #4b5563, #9aa3ae);
}

.licence.is-silver .licence-photo .car-body {
  fill: url(#licSilver);
}

.licence.is-silver .licence-logo {
  background: linear-gradient(135deg, #9aa3ae, #4b5563);
}

.licence.is-silver .licence-holo {
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.95) 42%, rgba(75, 85, 99, 0.35) 50%, rgba(255, 255, 255, 0.95) 58%, transparent 75%);
  background-size: 250% 250%;
}

.licence.is-bronze {
  --pulse-on: rgba(181, 118, 58, 0.6);
  --pulse-off: rgba(181, 118, 58, 0);
  background: linear-gradient(135deg, #fbf1e6 0%, #dfae7e 100%);
  border-color: #b5763a;
}

.licence.is-bronze::before {
  background:
    repeating-radial-gradient(circle at 15% 120%, rgba(122, 74, 30, 0.14) 0 1px, transparent 1px 9px),
    repeating-radial-gradient(circle at 110% -20%, rgba(122, 74, 30, 0.10) 0 1px, transparent 1px 11px);
}

.licence.is-bronze .licence-band,
.licence.is-bronze .licence-medal-badge {
  background: linear-gradient(90deg, #7a4a1e, #b5763a);
}

.licence.is-bronze .licence-photo .car-body {
  fill: url(#licBronze);
}

.licence.is-bronze .licence-logo {
  background: linear-gradient(135deg, #b5763a, #7a4a1e);
}

.licence.is-bronze .licence-holo {
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.95) 42%, rgba(122, 74, 30, 0.35) 50%, rgba(255, 255, 255, 0.95) 58%, transparent 75%);
  background-size: 250% 250%;
}

.licence-name {
  margin-top: 0.9rem;
}

.name-saved {
  color: var(--kiosk-red);
  font-weight: 800;
}

/* The download link under the share button, and "hidden" winning over
   the button's and the link's own display (it did not: both stayed
   visible). */
.licence-download {
  display: block;
  text-align: center;
  margin-top: 0.4rem;
  color: var(--kiosk-red);
}

.licence-name .kiosk-cta[hidden],
.licence-download[hidden] {
  display: none;
}

.lap-line {
  margin: 0.4rem 0 0.2rem;
}

/* The live line under the road: speed and distance (lap_times.py). */
.speed-line {
  color: var(--kiosk-muted);
  font-variant-numeric: tabular-nums;
}

/* Fotomissie on the status page (missions.py): the spots, the photo
   thumbnails from this phone, the card to share. */
.mission {
  margin-top: 1.1rem;
}

.mission-list {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  font-family: var(--font-body);
}

/* The next spot: distance and the way to keep, big enough to read while walking beside the car. */
.mission-next {
  margin: 0.2rem 0 0.4rem;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--kiosk-red);
  font-variant-numeric: tabular-nums;
}

.mission-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  border: 1.5px solid var(--kiosk-line);
  border-radius: 12px;
  padding: 0.5rem 0.6rem;
  margin: 0.35rem 0;
  font-size: 0.82rem;
}

.mission-row.is-here {
  border-color: var(--kiosk-red);
  background: var(--kiosk-red-tint);
  animation: code-pulse 1.8s ease-in-out infinite;
}

.mission-row b {
  display: block;
}

.mission-row small {
  display: block;
  color: var(--kiosk-muted);
  font-size: 0.68rem;
}

.mission-nr {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kiosk-line);
  color: var(--kiosk-ink);
  font-family: var(--font-display);
  font-weight: 800;
}

.mission-row.is-visited .mission-nr {
  background: #1fa36a;
  color: #fff;
}

.mission-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.mission-dist {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--kiosk-muted);
  white-space: nowrap;
}

.mission-dist.is-here {
  color: var(--kiosk-red);
  font-weight: 600;
}

.mission-photo-btn {
  margin-top: 0.35rem;
  background: var(--kiosk-red);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.38rem 0.85rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.74rem;
  touch-action: manipulation;
}

.mission-done-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.68rem;
  color: #1fa36a;
  font-weight: 700;
}

.mission-done-text a {
  color: var(--kiosk-muted);
}

.mission-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0.6rem 0;
}

.mission-collage div {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--kiosk-line);
}

.mission-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mission-collage span {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.6rem;
  font-weight: 800;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}

/* At the start of the ride: join the mission or not. */
.mission-optin {
  border: 2px solid var(--kiosk-red);
  border-radius: 14px;
  padding: 0.8rem 0.9rem 0.9rem;
  margin: 0.4rem 0 0.6rem;
  background: var(--kiosk-red-tint);
  font-family: var(--font-body);
  text-align: center;
}

.mission-optin b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--kiosk-red);
}

.mission-optin p {
  margin: 0.3rem 0 0.7rem;
  font-size: 0.8rem;
  color: var(--kiosk-ink);
}

.mission-optin .kiosk-cta + .kiosk-cta {
  margin-top: 0.5rem;
}

.mission-optin-prize {
  margin: 0 0 0.45rem;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--kiosk-red);
}

.mission-optin-note {
  display: block;
  margin: 0 0 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--kiosk-red);
}

/* The time left and the way to extend, at the top of the block. */
.mission-time {
  margin: 0.1rem 0 0.4rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--kiosk-ink);
}

.mission-time b {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

/* Too little time for the next spot: red, with the way to extend. */
.mission-outoftime {
  margin: 0.2rem 0 0.6rem;
  border: 2px solid var(--kiosk-red);
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  background: var(--kiosk-red-tint);
  color: var(--kiosk-red);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.8rem;
  text-align: center;
  animation: code-pulse 1.8s ease-in-out infinite;
}

.mission-outoftime a {
  color: var(--kiosk-red);
  text-decoration: underline;
}

.mission-demo-minutes a.is-late {
  border-color: var(--kiosk-red);
  color: var(--kiosk-red);
}

/* "Tik hier" at a spot: the task sheet with the venue's text, or the question and its answers. */
/* Above the map's chips (z-index 600) and Leaflet's own controls (1000): the "Volg de lijn"
   text shone through the task sheet (seen live). */
.mission-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(20, 17, 16, 0.6);
}

.mission-sheet[hidden] {
  display: none;
}

.mission-sheet-card {
  width: min(100%, 380px);
  background: #fff;
  border-radius: 18px;
  padding: 1.1rem 1rem 1rem;
  text-align: center;
  font-family: var(--font-body);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

.mission-sheet-card > b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--kiosk-red);
}

.mission-sheet-card > p {
  margin: 0.4rem 0 0.8rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--kiosk-ink);
}

.mission-option {
  display: block;
  width: 100%;
  margin: 0.35rem 0;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 2px solid var(--kiosk-line);
  background: #fff;
  font: 800 0.95rem var(--font-body);
  color: var(--kiosk-ink);
  touch-action: manipulation;
}

.mission-option:active {
  border-color: var(--kiosk-red);
  background: var(--kiosk-red-tint);
}

.mission-task-feedback {
  margin: 0.6rem 0 0.2rem;
  font-weight: 800;
  font-size: 0.95rem;
}

.mission-task-feedback.is-ok {
  color: #1fa36a;
}

.mission-task-feedback.is-wrong {
  color: var(--kiosk-red);
}

/* Vroem's voice (speech.py): the name of the child in the opt-in, the sound-on notice, the play
   buttons. Phones only play sound right after a tap, so every fragment sits behind a button. */
.mission-name-field {
  display: block;
  margin: 0 0 0.6rem;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--kiosk-ink);
}

.mission-name-field input {
  display: block;
  width: 100%;
  margin: 0.25rem 0 0.15rem;
  padding: 0.55rem 0.7rem;
  border: 2px solid var(--kiosk-line);
  border-radius: 12px;
  background: #fff;
  font: 800 1rem var(--font-body);
  color: var(--kiosk-ink);
}

.mission-name-field small {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--kiosk-muted);
}

.mission-optin-voice {
  font-weight: 800 !important;
}

.mission-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 0.2rem 0 0.6rem;
  font-family: var(--font-body);
  text-align: center;
}

.mission-voice[hidden] {
  display: none;
}

.mission-voice .kiosk-cta {
  width: auto;
  padding: 0.55rem 1.2rem;
}

.mission-voice small {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--kiosk-red);
}

.mission-task-voice {
  width: auto !important;
  margin: 0 auto 0.6rem;
  padding: 0.45rem 1rem !important;
  font-size: 0.85rem !important;
}

.mission-task-voice[hidden] {
  display: none !important;
}

/* A spot's name in the customer's language, with the Dutch one from the sign. */
.mtile-nl {
  font-style: normal;
  font-weight: 600;
  font-size: 0.82em;
  color: var(--kiosk-muted);
}

/* Instellingen: the answers of a question, in the add form and in a row. Hidden must win
   over the grid, or the fields show for a photo task (seen live). */
.task-quiz {
  display: grid;
  gap: 0.3rem;
}

.task-quiz[hidden] {
  display: none;
}

/* Spots for a next time, and spots this phone did on an earlier ride: greyed, at the bottom. */
.mission-row.is-later,
.mission-row.is-earlier {
  opacity: 0.55;
  border-style: dashed;
}

.mission-row.is-earlier {
  opacity: 0.7;
}

.mission-dist.is-later {
  font-family: var(--font-body);
  font-weight: 700;
}

/* The demo page in Instellingen: the length of the made-up ride. */
.mission-demo-minutes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin: 0.4rem 0 0.2rem;
  font-family: var(--font-body);
}

.mission-demo-minutes a {
  border: 1.5px solid var(--kiosk-line);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kiosk-ink);
  text-decoration: none;
}

.mission-demo-minutes a.is-active {
  border-color: var(--kiosk-red);
  background: var(--kiosk-red);
  color: #fff;
}

/* The car page: the "Wist je dat?" fold about the treasure hunt, with room before the e-mail field. */
details.fold.mission-fold {
  margin-bottom: 0.8rem;
}

/* Instellingen: the numbered pins of the spots on the map (draggable) and the tiny order buttons. */
.mission-pin {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1fa36a;
  border: 2px solid #fff;
  color: #fff;
  font: 800 12px/1 var(--font-display, sans-serif);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: grab;
}

.mission-pin.is-off {
  background: #9aa3b2;
}

.console-btn.is-mini {
  padding: 0.05rem 0.35rem;
  font-size: 0.6rem;
  line-height: 1.4;
  min-height: 0;
  vertical-align: middle;
}

.mission-table input {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.25rem 0.4rem;
}

/* The left slot of a row with a photo: the venue's photo of the spot with the number on it,
   or the parent's own photo. A tap opens it big. */
.mission-left {
  position: relative;
  width: 44px;
  height: 44px;
  display: block;
  cursor: pointer;
}

.mission-left img {
  width: 44px;
  height: 44px;
}

.mission-left i {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kiosk-ink);
  color: #fff;
  font: 800 10px/18px var(--font-display);
  font-style: normal;
  text-align: center;
  border: 1.5px solid #fff;
}

.mission-row.is-visited .mission-left i {
  background: #1fa36a;
}

.mission-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 1rem;
  background: rgba(20, 17, 16, 0.88);
  cursor: pointer;
}

.mission-lightbox[hidden] {
  display: none;
}

.mission-lightbox img {
  max-width: 100%;
  max-height: 72vh;
  border-radius: 14px;
  display: block;
}

.mission-lightbox p {
  margin: 0.7rem 0 0;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 800;
  text-align: center;
}

.mission-table-photo {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  vertical-align: middle;
  margin-right: 0.3rem;
}

/* Ontwerp A: the map on top with the walked route, the car and the spots. */
.mission-map-wrap {
  position: relative;
  margin-top: 0.3rem;
}

.mission-map {
  height: 230px;
  border-radius: 14px;
  border: 1.5px solid var(--kiosk-line);
  overflow: hidden;
  z-index: 0;
  background: #e9efdf;
}

.mission-chip {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  z-index: 600;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--kiosk-red);
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.mission-chip.is-here {
  background: var(--kiosk-red);
  color: #fff;
  animation: code-pulse 1.4s ease-in-out infinite;
}

.mission-chip-sub {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  z-index: 600;
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--kiosk-ink);
  text-shadow: 0 0 6px #fff, 0 0 3px #fff;
}

.mission-map .mission-map-pin {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--kiosk-ink);
  color: #fff;
  font: 800 12px/1 var(--font-display);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.mission-map .mission-map-pin.is-done {
  background: #1fa36a;
}

.mission-map .mission-map-pin.is-next {
  background: var(--kiosk-red);
  animation: pin-pulse 1.5s ease-in-out infinite;
}

.mission-map .mission-map-pin.is-later {
  background: #fff;
  color: #9a938a;
  border-color: #9a938a;
}

.mission-map .mission-map-pin.is-stand {
  background: #fff;
  color: var(--kiosk-ink);
  border-color: var(--kiosk-ink);
  font-size: 11px;
}

.mission-map .mission-map-car {
  border-radius: 50%;
  background: var(--kiosk-ink);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--kiosk-ink);
  position: relative;
}

.mission-map .mission-map-car i {
  position: absolute;
  inset: -1px;
  display: block;
}

.mission-map .mission-map-car i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--kiosk-ink);
}

@keyframes pin-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(227, 30, 36, 0.45); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(227, 30, 36, 0); }
}

/* A word of encouragement under the progress. */
.mission-cheer {
  margin: 0.15rem auto 0.5rem;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  background: #e4f5ec;
  color: #1fa36a;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.8rem;
  text-align: center;
  animation: code-pulse 2.2s ease-in-out infinite;
}

.mission-cheer.is-here {
  background: var(--kiosk-red);
  color: #fff;
}

.mission-cheer.is-done {
  background: #f2d67a;
  color: #8a6508;
}

/* The tiles: the venue's photo (or the parent's own), the number, a stamp, a ribbon. */
.mission-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin: 0.3rem 0 0;
  font-family: var(--font-body);
}

/* A column: photo, text, and the button glued to the bottom, so "Tik hier" sits at the same
   height on every tile of a row whatever the length of the name (seen live: tile 2 lower). */
.mtile {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--kiosk-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.mtile-img {
  position: relative;
  flex: 0 0 96px;
  height: 96px;
  background: #eeeae3;
  cursor: pointer;
}

.mtile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mtile-empty {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: #9a938a;
}

.mtile-num {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--kiosk-ink);
  color: #fff;
  font: 800 11px/22px var(--font-display);
  text-align: center;
  border: 1.5px solid #fff;
}

.mtile.is-done .mtile-num {
  background: #1fa36a;
}

.mtile-stamp {
  position: absolute;
  right: 6px;
  top: 26px;
  transform: rotate(-12deg);
  border: 2px solid #1fa36a;
  color: #1fa36a;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mtile-ribbon {
  position: absolute;
  right: -30px;
  top: 12px;
  transform: rotate(35deg);
  background: #9a938a;
  color: #fff;
  font-size: 0.56rem;
  font-weight: 800;
  padding: 0.12rem 2.2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mtile-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0.55rem 0.5rem;
  font-size: 0.76rem;
}

.mtile-meta b {
  display: block;
}

.mtile-meta small {
  display: block;
  color: var(--kiosk-muted);
  font-size: 0.66rem;
}

.mtile-meta small a {
  color: var(--kiosk-muted);
}

.mtile-meta .mission-photo-btn {
  margin-top: auto;
  padding-top: 0.38rem;
  width: 100%;
  animation: code-pulse 1.4s ease-in-out infinite;
}

.mtile-meta small {
  margin-bottom: 0.3rem;
}

.mtile.is-next {
  border-color: var(--kiosk-red);
  animation: tile-glow 1.8s ease-in-out infinite;
}

.mtile.is-next .mtile-meta small {
  color: var(--kiosk-red);
  font-weight: 800;
}

.mtile.is-here {
  border-color: var(--kiosk-red);
  background: var(--kiosk-red-tint);
}

.mtile.is-later,
.mtile.is-earlier {
  opacity: 0.55;
}

@keyframes tile-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 30, 36, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(227, 30, 36, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .mission-map .mission-map-pin.is-next,
  .mtile.is-next,
  .mtile-meta .mission-photo-btn,
  .mission-cheer,
  .mission-chip.is-here {
    animation: none;
  }
}

/* Instellingen: the stats while walking the route. */
.route-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.45rem;
  margin: 0.7rem 0;
}

.route-stats div {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem;
  text-align: center;
}

.route-stats b {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.05rem;
}

.route-stats small {
  font-size: 0.62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* A running promotion on the car page and the booking page (promotions.py). */
.promo-chip {
  display: table;
  margin: 0 0 0.7rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--kiosk-red);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
}

.tier-price s {
  color: var(--kiosk-muted);
  font-weight: 600;
  margin-right: 0.25rem;
}

/* ---------- The scoreboard (scoreboard.html) ---------- */
.sb-tabs {
  display: flex;
  gap: 0.2rem;
  margin: 0.9rem 0 0.8rem;
  padding: 0.2rem;
  background: var(--kiosk-line);
  border-radius: 999px;
}

.sb-tabs a {
  flex: 1;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.42rem 0.4rem;
  border-radius: 999px;
  color: var(--kiosk-muted);
  text-decoration: none;
  white-space: nowrap;
}

.sb-tabs a.is-on {
  background: #fff;
  color: var(--kiosk-red);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.sb-demo {
  display: table;
  margin: 0 auto 0.9rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--kiosk-red);
  background: var(--kiosk-red-tint);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  text-align: center;
}

/* The podium: 2-1-3 on a stage. Every place has a medal disc that pulses
   in its own metal, the time on a dark timing chip; the winner's block is
   gold under a chequered strip with a sheen running over it. */
.sb-podium {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  gap: 0.4rem;
  align-items: end;
  margin: 0.7rem 0 0;
  padding: 0 0.1rem;
  border-bottom: 4px solid var(--kiosk-ink);
}

.sb-podium > div {
  min-width: 0;
  text-align: center;
  font-family: var(--font-body);
}

.sb-medal {
  --pulse-on: rgba(107, 114, 128, 0.55);
  --pulse-off: rgba(107, 114, 128, 0);
  --ring: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.25);
  width: 2.1rem;
  height: 2.1rem;
  margin: 0 auto 0.3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  color: #374151;
  background: radial-gradient(circle at 35% 30%, #ffffff, #b3bac4 55%, #6b7280);
  box-shadow: var(--ring);
  animation: sb-pulse 1.8s ease-in-out infinite;
}

.sb-podium .p1 .sb-medal {
  --pulse-on: rgba(212, 160, 23, 0.6);
  --pulse-off: rgba(212, 160, 23, 0);
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.3rem;
  color: #5c4305;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #d4a017 55%, #8a6508);
}

.sb-podium .p2 .sb-medal {
  animation-delay: 0.3s;
}

.sb-podium .p3 .sb-medal {
  --pulse-on: rgba(181, 118, 58, 0.55);
  --pulse-off: rgba(181, 118, 58, 0);
  color: #4a2b0f;
  background: radial-gradient(circle at 35% 30%, #f6d9bd, #c4853f 55%, #7a4a1e);
  animation-delay: 0.6s;
}

@keyframes sb-pulse {
  0%, 100% { box-shadow: var(--ring), 0 0 0 0 var(--pulse-on); }
  50% { box-shadow: var(--ring), 0 0 0 9px var(--pulse-off); }
}

.sb-you {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--kiosk-red);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  margin-bottom: 0.2rem;
  vertical-align: middle;
  line-height: 1.3;
}

.sb-podium .wie {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0 0.1rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.sb-podium .p1 .wie {
  font-size: 0.88rem;
}

.sb-podium .tijd {
  display: inline-block;
  margin-top: 0.15rem;
  background: var(--kiosk-ink);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.18rem 0.55rem;
  border-radius: 7px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.12);
}

.sb-podium .p1 .tijd {
  font-size: 1.2rem;
  padding: 0.22rem 0.7rem;
}

.sb-podium .auto {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--kiosk-muted);
  margin: 0.25rem 0 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-podium .auto i {
  font-style: normal;
  color: var(--kiosk-red);
}

/* The blocks: a lighter top face on a darker front, like a real stage. */
.sb-podium .blok {
  --pulse-on: rgba(107, 114, 128, 0.5);
  --pulse-off: rgba(107, 114, 128, 0);
  --ring: 0 0 0 0 transparent;
  position: relative;
  height: 3rem;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background: linear-gradient(180deg, #d7dbe0 0, #d7dbe0 9px, #c3c9d1 9px, #a9b1bb 100%);
  animation: sb-glow 1.8s ease-in-out infinite;
}

@keyframes sb-glow {
  0%, 100% { box-shadow: var(--ring), 0 0 0 0 var(--pulse-on); }
  50% { box-shadow: var(--ring), 0 0 14px 5px var(--pulse-off); }
}

.sb-podium .p2 .blok {
  animation-delay: 0.3s;
}

.sb-podium .p1 .blok {
  --pulse-on: rgba(212, 160, 23, 0.6);
  --pulse-off: rgba(212, 160, 23, 0);
  height: 4.6rem;
  background: linear-gradient(180deg, #f5df8e 0, #f5df8e 12px, #e6c353 12px, #c9961a 100%);
}

.sb-podium .p1 .blok::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: repeating-conic-gradient(var(--kiosk-ink) 0 25%, #fff 0 50%) 0 0 / 10px 10px;
}

.sb-podium .p1 .blok::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: sb-sheen 3.6s ease-in-out infinite;
}

@keyframes sb-sheen {
  0%, 25% { background-position: 130% 0; }
  75%, 100% { background-position: -130% 0; }
}

.sb-podium .p3 .blok {
  --pulse-on: rgba(181, 118, 58, 0.55);
  --pulse-off: rgba(181, 118, 58, 0);
  height: 2.3rem;
  background: linear-gradient(180deg, #edd0b2 0, #edd0b2 8px, #d9a878 8px, #b97a3f 100%);
  animation-delay: 0.6s;
}

.sb-podium .is-you .blok {
  --ring: inset 0 0 0 2px var(--kiosk-red);
}

/* The rest of the list: a rank disc, the name, the time on a timing chip
   with the gap to the leader under it. */
.sb-list {
  list-style: none;
  margin: 0;
  padding: 0.2rem 0 0;
  font-family: var(--font-body);
}

.sb-list li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.35rem;
  border-top: 1px solid var(--kiosk-line);
  font-size: 0.85rem;
}

.sb-list li:first-child {
  border-top: 0;
}

.sb-list .nr {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kiosk-line);
  color: var(--kiosk-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.sb-list .wie b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-list .wie small {
  color: var(--kiosk-muted);
  font-size: 0.66rem;
  font-weight: 600;
}

.sb-list .tijd {
  text-align: right;
  line-height: 1.1;
}

.sb-list .tijd b {
  display: inline-block;
  background: var(--kiosk-ink);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

.sb-list .tijd small {
  display: block;
  font-size: 0.62rem;
  color: var(--kiosk-muted);
  font-weight: 600;
  margin-top: 0.15rem;
}

.sb-list li.is-you {
  --ring: inset 3px 0 0 var(--kiosk-red);
  --pulse-on: rgba(227, 30, 36, 0.5);
  --pulse-off: rgba(227, 30, 36, 0);
  background: var(--kiosk-red-tint);
  box-shadow: var(--ring);
  border-radius: 0 8px 8px 0;
  border-top-color: transparent;
  animation: sb-glow 1.8s ease-in-out infinite;
}

.sb-list li.is-you .nr {
  background: var(--kiosk-red);
  color: #fff;
}

.sb-empty {
  text-align: center;
  padding: 1.2rem 0 0.6rem;
}

.sb-empty .flag {
  width: 44px;
  height: 30px;
  margin: 0 auto 0.6rem;
  background: repeating-conic-gradient(var(--kiosk-ink) 0 25%, #fff 0 50%) 0 0 / 11px 11px;
  border: 1px solid var(--kiosk-line);
  border-radius: 4px;
}

/* Het pitbord (pitboard.py): over the scoreboard, once after a ride. */
.pit-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow-y: auto;
  background: rgba(10, 10, 10, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pit-overlay[hidden] { display: none; }
.pit-stage { width: min(100%, 360px); display: grid; gap: 0.9rem; justify-items: center; text-align: center; }
.pit-caption { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: #ffffff; text-wrap: balance; }
.pit-scene { position: relative; width: 100%; overflow: hidden; }
.pit-art { display: block; width: 100%; height: auto; }
.pit-p { font-family: var(--font-display); font-weight: 800; font-size: 52px; fill: #f2b705; }
.pit-time { font-family: var(--font-mono); font-weight: 600; font-size: 15px; fill: #ffffff; }
.pit-gap { font-family: var(--font-mono); font-weight: 600; font-size: 13px; fill: #ff6b6f; }
.pit-gap.is-best { font-family: var(--font-display); font-weight: 800; fill: #3ddc97; }
.pit-p.is-sign { font-size: 46px; fill: var(--kiosk-red); }
.pit-time.is-sign { fill: var(--kiosk-ink); }
.is-pit .pit-art { animation: pit-in 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.15s both; }
.is-vroem .pit-art { transform-origin: 50% 100%; animation: pit-up 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.15s both; }
@keyframes pit-in { from { transform: translateX(105%); } to { transform: none; } }
@keyframes pit-up { from { transform: translateY(100%) scale(0.85); } to { transform: none; } }
.pit-confetti i { position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px; background: #f2b705;
  animation: pit-fall 2.4s linear 0.5s 3 both; }
.pit-confetti i:nth-child(1) { left: 8%; }
.pit-confetti i:nth-child(2) { left: 22%; background: var(--kiosk-red); animation-delay: 0.9s; }
.pit-confetti i:nth-child(3) { left: 36%; background: #ffffff; animation-delay: 1.3s; }
.pit-confetti i:nth-child(4) { left: 50%; animation-delay: 0.7s; }
.pit-confetti i:nth-child(5) { left: 64%; background: var(--kiosk-red); animation-delay: 1.6s; }
.pit-confetti i:nth-child(6) { left: 78%; background: #ffffff; animation-delay: 1.1s; }
.pit-confetti i:nth-child(7) { left: 92%; animation-delay: 1.9s; }
@keyframes pit-fall { to { transform: translateY(420px) rotate(540deg); } }
.pit-sponsor { width: 100%; display: flex; gap: 0.75rem; align-items: center; text-align: left; padding: 0.65rem 0.8rem;
  border: 3px solid #111111; border-radius: 12px; background: #fdf3d7; color: var(--kiosk-ink); }
.pit-sponsor img { flex: none; width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: #ffffff; }
.pit-sponsor small { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #6b5a2a; }
.pit-sponsor b { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; }
.pit-sponsor span { display: block; margin-top: 0.1rem; font-size: 0.86rem; font-weight: 600; color: #4a3f22; }
.pit-overlay .kiosk-cta { width: 100%; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .pit-art { animation: none !important; }
  .pit-confetti { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .licence {
    transform: none;
    transition: none;
    animation: none;
  }

  .sb-medal,
  .sb-podium .blok,
  .sb-podium .p1 .blok::after,
  .sb-list li.is-you {
    animation: none;
  }
}

/* Regengarantie (rain_guarantee.py): the card on the booking page and the
   move page, and the dry times among the suggestions. */
.rain-card {
  margin: 1rem 0 0;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  background: linear-gradient(160deg, #eef5ff, #e3eefc);
  border: 2px solid #8fb6ea;
  color: var(--kiosk-ink);
  position: relative;
  overflow: hidden;
}
.rain-card::before {
  content: "";
  position: absolute;
  inset: -40px 0 0;
  background-image: linear-gradient(105deg, transparent 46%, rgba(78, 132, 205, 0.28) 48%, transparent 50%);
  background-size: 22px 26px;
  animation: rainFall 0.9s linear infinite;
  pointer-events: none;
}
@keyframes rainFall { to { transform: translate(-6px, 26px); } }
@media (prefers-reduced-motion: reduce) { .rain-card::before { animation: none; } }
.rain-card > * { position: relative; }
.rain-card-title { margin: 0; font-weight: 800; font-size: 1.02rem; }
.rain-card-body { margin: 0.35rem 0 0; font-size: 0.88rem; line-height: 1.45; }
.rain-card .kiosk-cta { margin-top: 0.8rem; }
.rain-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.4rem 0 0;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: #eef5ff;
  border: 1px solid #8fb6ea;
  color: #245aa0;
  font-size: 0.78rem;
  font-weight: 800;
}
.suggestion-chip.is-dry { border-color: #3ddc97; }
.suggestion-chip.is-dry .chip-date { color: #1f9d55; }
.suggestion-chip.is-dry.is-selected .chip-date { color: #ffffff; }

/* "Jouw rit" (routes/ride_view.py, jouw_rit.html): the confetti, the numbers,
   today's podium, the stars - and the venue's tip (_venue_tip.html). */
.ride-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 55; pointer-events: none; display: none; }
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2, 1, .3, 1); }
.ride-sub { text-align: center; margin: 0.2rem 0 0; font-weight: 700; color: var(--kiosk-red); }
/* The flip-in, then the licence's own pulse (in its medal colour) again -
   the flip used to replace it, so on this page the licence stopped pulsing.
   No fill mode: afterwards the tilt owns the transform again. */
.ride-licence.in #licence { animation: rideFlip 1s cubic-bezier(.2, 1.2, .3, 1), licence-pulse 1.8s ease-in-out 1s infinite; }
/* Today's podium pulses in its colours, like the scoreboard; your own
   place in red. */
/* Only the place you got pulses and shines (asked 28-09-2026); the other
   two bars stay still. Below the podium your own row, when you're 4th or
   lower, pulses too - that's your place. */
.ride-podium .pod-bar { --ring: 0 0 0 0 transparent; --pulse-on: rgba(107, 114, 128, 0.5); --pulse-off: rgba(107, 114, 128, 0); position: relative; }
.ride-podium .pod.is-me .pod-bar { animation: sb-glow 1.8s ease-in-out infinite; }
.ride-podium .pod.is-me .pod-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.65) 50%, transparent 65%); background-size: 250% 100%; animation: sb-sheen 3.6s ease-in-out infinite; }
.ride-podium .pod-1 .pod-bar { --pulse-on: rgba(212, 160, 23, 0.6); --pulse-off: rgba(212, 160, 23, 0); }
.ride-podium .pod-3 .pod-bar { --pulse-on: rgba(181, 118, 58, 0.55); --pulse-off: rgba(181, 118, 58, 0); }
.ride-me { --ring: 0 0 0 0 transparent; --pulse-on: rgba(227, 30, 36, 0.5); --pulse-off: rgba(227, 30, 36, 0); animation: sb-glow 1.8s ease-in-out infinite; }
@keyframes rideFlip { from { transform: perspective(900px) rotateY(-100deg); } }
.ride-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.5rem; margin: 1rem 0 0; }
.ride-stat { background: #f7f5f4; border-radius: 12px; padding: 0.65rem 0.3rem; text-align: center; }
.ride-stat b { display: block; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.2rem; white-space: nowrap; color: var(--kiosk-ink); }
.ride-stat small { color: var(--kiosk-muted); font-weight: 700; font-size: 0.7rem; }
.ride-stat.is-hot b { color: var(--kiosk-red); }
.ride-block { margin: 1.4rem 0 0; }
.ride-h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.2rem; margin: 0 0 0.6rem; color: var(--kiosk-ink); }
.ride-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 0.4rem; min-height: 150px; }
.pod { text-align: center; font-size: 0.75rem; font-weight: 800; color: var(--kiosk-ink); }
.pod .pod-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .pod-time { display: block; color: var(--kiosk-muted); font-weight: 700; font-size: 0.7rem; }
.pod-bar { margin-top: 0.3rem; height: 0; border-radius: 10px 10px 0 0; color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-size: 1.4rem;
  display: grid; place-items: start center; padding-top: 0.3rem; overflow: hidden; transition: height 0.9s cubic-bezier(.2, 1.3, .4, 1); }
.pod-1 .pod-bar { background: linear-gradient(#ffd54a, #f5b400); }
.pod-2 .pod-bar { background: linear-gradient(#d9dde3, #aeb4bd); }
.pod-3 .pod-bar { background: linear-gradient(#e7a36a, #c47a3c); }
.ride-me { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 12px;
  background: #fdecec; border: 2px solid var(--kiosk-red); font-weight: 800; font-size: 0.9rem; color: var(--kiosk-ink); }
.ride-me-pos { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.25rem; color: var(--kiosk-red); }
.ride-me-gap { margin-left: auto; font-size: 0.75rem; color: var(--kiosk-red); text-align: right; }
.ride-stars { display: flex; justify-content: center; gap: 0.3rem; }
.ride-star { border: 0; background: none; cursor: pointer; font-size: 2.6rem; line-height: 1; color: #e2dedc; padding: 0 0.1rem; transition: transform 0.15s; }
.ride-star:hover { transform: scale(1.12) rotate(-6deg); }
.ride-star.on { color: #f5b400; text-shadow: 0 2px 10px rgba(245, 180, 0, 0.45); animation: starPop 0.35s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes starPop { 0% { transform: scale(0.4); } }
.ride-after p { text-align: center; font-weight: 700; margin: 0.8rem 0 0.5rem; color: var(--kiosk-ink); }
.ride-after textarea { width: 100%; min-height: 84px; border: 1px solid #ececec; border-radius: 12px; padding: 0.75rem; font: inherit; font-size: 1rem; resize: vertical; }
.ride-google { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.9rem; border-radius: 14px; border: 2px solid var(--kiosk-ink);
  background: #fff; color: var(--kiosk-ink); font-weight: 800; text-decoration: none; position: relative; overflow: hidden; }
.ride-google .g { font: 800 1.25rem Arial, sans-serif; background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ride-google-small { display: block; text-align: center; margin-top: 0.6rem; text-decoration: underline; }
.ride-thanks { text-align: center; color: var(--kiosk-success); font-weight: 800; margin: 0.7rem 0 0; }
.tip-card { border-radius: 16px; overflow: hidden; border: 1px solid #ececec; background: #fffaf2; margin: 1rem 0 0; }
.tip-card img { display: block; width: 100%; height: auto; }
.tip-card-body { padding: 0.9rem 1rem 1rem; }
.tip-card-body > small { color: var(--kiosk-red); font-weight: 800; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.tip-card-body h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.15rem; margin: 0.25rem 0; color: var(--kiosk-ink); }
.tip-card-body p { margin: 0; color: #4a4543; font-size: 0.9rem; line-height: 1.45; }
.tip-code { display: block; width: 100%; margin-top: 0.75rem; border: 2px dashed var(--kiosk-red); border-radius: 10px; padding: 0.7rem; background: #fff; cursor: pointer; text-align: center; }
.tip-code span { display: block; font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 1.35rem; letter-spacing: 0.14em; color: var(--kiosk-ink); }
.tip-code small { color: var(--kiosk-muted); font-weight: 700; font-size: 0.7rem; }
.tip-card-body .tip-valid { text-align: center; color: var(--kiosk-muted); font-size: 0.75rem; margin-top: 0.5rem; }
/* Tips na de rit (venue_tip.py): "Toon code", the code and its QR code. */
.tip-card-body .tip-show { width: 100%; margin: 0.8rem 0 0; }
.tip-card-body .tip-show[hidden], .tip-card-body .tip-error[hidden] { display: none; }
.tip-code-box { display: grid; gap: 0.6rem; justify-items: center; margin-top: 0.75rem; }
.tip-code-box[hidden], .tip-qr[hidden] { display: none; }
.tip-code-box .tip-code { margin-top: 0; }
.tip-qr { width: min(100%, 220px); padding: 0.6rem; border: 1px solid #ececec; border-radius: 12px; background: #ffffff; }
.tip-qr svg { display: block; width: 100%; height: auto; }
.tip-card-body .tip-code-note { text-align: center; font-size: 0.82rem; font-weight: 700; color: var(--kiosk-ink); }
.tip-card-body .tip-code-note.is-off { color: var(--kiosk-red); }
.tip-card-body .tip-error { margin-top: 0.5rem; }
/* The partner's page (tip_partner.html): green valid, amber used, red otherwise. */
.partner-result { margin: 1rem 0; padding: 1rem; border: 2px solid var(--kiosk-line); border-radius: 16px; background: #ffffff; text-align: center; }
.partner-result.is-valid, .partner-result.is-done { border-color: var(--kiosk-success); background: #e8f7ef; }
.partner-result.is-used { border-color: var(--kiosk-warning); background: #fff6e5; }
.partner-result.is-expired, .partner-result.is-ended, .partner-result.is-unknown { border-color: var(--kiosk-red); background: var(--kiosk-red-tint); }
.partner-code { margin: 0; font-family: var(--font-mono); font-weight: 600; font-size: 1.6rem; letter-spacing: 0.12em; color: var(--kiosk-ink); }
.partner-state { margin: 0.35rem 0 0; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--kiosk-red); }
.partner-result.is-valid .partner-state, .partner-result.is-done .partner-state { color: var(--kiosk-success); }
.partner-result.is-used .partner-state { color: var(--kiosk-warning); }
.partner-detail { margin: 0.25rem 0 0.8rem; font-size: 0.85rem; color: var(--kiosk-muted); }
.partner-result form { margin: 0; }
.partner-result .kiosk-cta { margin: 0; }
.partner-check { display: grid; gap: 0.35rem; margin: 1rem 0 0.4rem; }
.partner-check label { font-weight: 800; font-size: 0.85rem; color: var(--kiosk-ink); }
.partner-check-row { display: grid; gap: 0.5rem; }
.partner-check-row input { min-width: 0; padding: 0.7rem 0.8rem; border: 1.5px solid var(--kiosk-line); border-radius: 12px;
  font-family: var(--font-mono); font-size: 1.15rem; letter-spacing: 0.1em; text-transform: uppercase; }
.partner-check-row .kiosk-cta { width: 100%; margin: 0; }
.partner-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 1rem 0; }
.partner-counts div { padding: 0.7rem; border: 1px solid var(--kiosk-line); border-radius: 12px; text-align: center; }
.partner-counts b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--kiosk-ink); }
.partner-counts span { font-size: 0.75rem; font-weight: 700; color: var(--kiosk-muted); }
/* Instellingen, Tips na de rit (settings.html): a row per tip that unfolds. */
.tip-admin { margin: 0 0 0.6rem; border: 1px solid var(--line); border-radius: 12px; }
.tip-admin > summary { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.85rem; cursor: pointer; list-style: none; }
.tip-admin > summary::-webkit-details-marker { display: none; }
.tip-admin > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.tip-admin-pos { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--surface-2); font-weight: 800; }
.tip-admin-name { flex: 1; min-width: 0; display: grid; }
.tip-admin-name b { overflow-wrap: anywhere; }
.tip-admin-name small { color: var(--muted); font-size: 0.78rem; }
.tip-admin-body { display: grid; gap: 0.8rem; padding: 0 0.85rem 0.85rem; }
.tip-admin-move, .tip-admin-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tip-admin-move form, .tip-admin-foot form { margin: 0; }
.tip-admin-modes { display: grid; gap: 0.45rem; margin: 0; padding: 0; border: 0; }
.tip-admin-modes legend { margin-bottom: 0.3rem; padding: 0; font-weight: 700; }
.tip-admin-modes label { display: flex; align-items: flex-start; gap: 0.6rem; }
.tip-admin-modes label span { display: grid; }
.tip-admin-modes small { color: var(--muted); font-size: 0.75rem; }
.tip-admin-link { padding: 0.75rem; border-radius: 10px; background: var(--surface-2); }
.tip-admin-link-row { display: flex; gap: 0.5rem; }
.tip-admin-link-row input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.8rem; }
.tip-admin-add { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); }
.tip-admin [hidden] { display: none; }
/* Analyse, Tips: the name may wrap, the partner on its own line. */
#raTips td.ra-t-name { white-space: normal; min-width: 11rem; }
#raTips td.ra-t-name small { display: block; color: var(--muted); font-size: 0.78rem; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .ride-licence.in #licence, .ride-star.on, .ride-podium .pod-bar, .ride-podium .pod-bar::after, .ride-me { animation: none; }
  .pod-bar { transition: none; }
}

/* Weer bij boeken (booking_weather.py): the forecast for the chosen time. */
.booking-weather-intro { margin: 0.35rem 0 1.1rem; line-height: 1.5; }
.booking-weather { margin: 0.5rem 0 0.2rem; padding: 0.55rem 0.8rem; border-radius: 12px; font-weight: 800; font-size: 0.9rem; }
.booking-weather.is-dry { background: #fff8db; color: #7a5a00; border: 1px solid #f3dd8a; }
.booking-weather.is-shower { background: #eef5ff; color: #245aa0; border: 1px solid #b9d2f2; }
.booking-weather.is-rain { background: #e3eefc; color: #1d4a86; border: 1px solid #8fb6ea; }
.booking-weather.is-deal { background: #fff0f0; color: var(--kiosk-red); border: 1px solid var(--kiosk-red); }
.suggestion-chip .chip-wx { display: block; font-size: 1rem; line-height: 1; margin-top: 0.15rem; }

/* Stickerkaart (sticker_card.py): five slots Rookie to Expert, a sticker
   that turns over with a shine, and the note on the car page. */
.sticker-card { background: linear-gradient(160deg, #fff 40%, #fff4dc); border: 2px dashed #f0d58a; border-radius: 18px; padding: 1rem 0.8rem 0.9rem; }
.sticker-card.is-full { border-style: solid; border-color: #f5b400; box-shadow: 0 8px 24px rgba(245, 180, 0, 0.25); }
.sticker-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; }
.sticker-slot { text-align: center; min-width: 0; }
.sticker-slot .sticker-art { position: relative; aspect-ratio: 1; border-radius: 50%; border: 2px dashed #d9cfc6; background: #faf7f5; display: grid; place-items: center; overflow: hidden; }
.sticker-slot .sticker-svg { width: 100%; height: 100%; opacity: 0.12; filter: grayscale(1); transition: opacity 0.4s, filter 0.4s, transform 0.4s; }
.sticker-slot.have .sticker-art { border: 0; background: none; overflow: visible; }
.sticker-slot.have .sticker-svg { opacity: 1; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25)); transform: rotate(-6deg); }
.sticker-slot.have:nth-child(even) .sticker-svg { transform: rotate(5deg); }
.sticker-slot.pop .sticker-svg { animation: stickerPop 0.6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes stickerPop { 0% { transform: scale(2.2) rotate(-30deg); opacity: 0; } }
.sticker-name { display: block; margin: 0.3rem -0.2rem 0; font-size: clamp(0.5rem, 2.5vw, 0.66rem); line-height: 1.15; white-space: nowrap; letter-spacing: -0.01em; font-weight: 800; color: var(--kiosk-muted); }
.sticker-slot.have .sticker-name { color: var(--kiosk-ink); }
.sticker-status { text-align: center; font-weight: 800; margin: 0.8rem 0 0.2rem; color: var(--kiosk-ink); }
.sticker-card.is-full .sticker-status { color: var(--kiosk-red); }
.sticker-note { display: block; text-align: center; color: var(--kiosk-muted); font-size: 0.7rem; }
.sticker-reveal { position: fixed; inset: 0; z-index: 58; background: radial-gradient(circle at 50% 42%, #3a0b0d, #0a0a0a 72%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; cursor: pointer; }
.sticker-reveal[hidden] { display: none; }
.sticker-reveal-title { color: #ffd21f; font-weight: 800; letter-spacing: 0.2em; margin: 0; }
.sticker-reveal-name { color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.8rem; margin: 0; }
.sticker-reveal-tap { color: #bbb; font-size: 0.8rem; margin: 0; }
.sticker-flip { width: 220px; height: 220px; perspective: 1000px; }
.sticker-flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.2, 1.2, .3, 1); }
.sticker-flip.open .sticker-flip-inner { transform: rotateY(180deg); }
.sticker-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.sticker-face[hidden] { display: none; }
.sticker-back { background: repeating-linear-gradient(45deg, #e31e24 0 14px, #c3161c 14px 28px); border: 6px solid #fff; display: grid; place-items: center; }
.sticker-back span { color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.4rem; text-align: center; line-height: 1; transform: rotate(-8deg); }
.sticker-front { transform: rotateY(180deg); }
.sticker-front .sticker-svg { width: 100%; height: 100%; }
.sticker-front::after { content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 225, 120, 0.6) 52%, transparent 65%);
  background-size: 260% 100%; animation: stickerHolo 2.4s ease-in-out infinite; }
@keyframes stickerHolo { 0% { background-position: 130% 0; } 60%, 100% { background-position: -40% 0; } }
.sticker-car-note { margin: 0 0 0.9rem; padding: 0.55rem 0.8rem; border-radius: 12px; background: #fff8db; border: 1px solid #f3dd8a; font-weight: 800; font-size: 0.85rem; color: #7a5a00; }
.sticker-car-note.is-full { background: #fdecec; border-color: var(--kiosk-red); color: var(--kiosk-red); }
@media (prefers-reduced-motion: reduce) {
  .sticker-flip-inner, .sticker-slot .sticker-svg { transition: none; }
  .sticker-slot.pop .sticker-svg, .sticker-front::after { animation: none; }
}

/* Vriendjessticker: the button on the card and the friend's landing page. */
.sticker-invite-btn { margin-top: 0.7rem; }
.invite-hero { text-align: center; margin: 0.6rem 0 0.4rem; }
.invite-sticker { width: 150px; margin: 0.4rem auto 0.6rem; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25)); animation: invitePop 0.8s cubic-bezier(.3, 1.6, .5, 1) both; }
.invite-sticker .sticker-svg { width: 100%; height: auto; }
@keyframes invitePop { from { transform: scale(0.3) rotate(-25deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .invite-sticker { animation: none; } }
.sticker-venue { justify-content: center; margin: 0 0 0.7rem; font-size: 0.7rem; }

/* Stickers with the Kids Supercar logo (_sticker_art.html): a medallion
   in the level's metal and enamel. Sized in container units, so the same
   markup works in a slot, on the reveal and on the invite page. */
.sticker-medal { --m1: #f3c89b; --m2: #b87333; --m3: #6e3b12; --e1: #2bb07c; --e2: #0f5a3c;
  --metal: linear-gradient(135deg, var(--m1) 0%, var(--m2) 45%, var(--m3) 70%, var(--m2) 100%);
  container-type: inline-size; position: relative; width: 100%; aspect-ratio: 170 / 196; }
.sticker-medal.lvl-2 { --m1: #ffffff; --m2: #b8c0c9; --m3: #6b7480; --e1: #2f5bb0; --e2: #132547; }
.sticker-medal.lvl-3 { --m1: #fff1b0; --m2: #e0a91d; --m3: #8a6208; --e1: #e0242b; --e2: #7d0a0e; }
.sticker-medal.lvl-4 { --m1: #ffe1d6; --m2: #d99a86; --m3: #8f5646; --e1: #7a3db3; --e2: #321452; }
.sticker-medal.lvl-5 { --m1: #fff1b0; --m2: #e0a91d; --m3: #8a6208; --e1: #26262d; --e2: #050507; }
.sticker-medal > div { position: absolute; }
.sm-rim { left: 2.35%; top: 2.04%; width: 95.3%; aspect-ratio: 1; border-radius: 50%; background: var(--metal); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.sm-enamel, .sm-holo { left: 9.4%; top: 8.16%; width: 81.2%; aspect-ratio: 1; border-radius: 50%; }
.sm-enamel { background: radial-gradient(circle at 38% 32%, var(--e1), var(--e2) 78%); box-shadow: inset 0 2cqw 5cqw rgba(0, 0, 0, 0.45), 0 0 0 1.8cqw rgba(255, 255, 255, 0.18); }
.lvl-5 .sm-enamel { background: repeating-linear-gradient(45deg, #141418 0 1.8cqw, #202026 1.8cqw 3.6cqw); }
.sm-dots { left: 14.1%; top: 12.2%; width: 71.8%; aspect-ratio: 1; border-radius: 50%; border: max(1px, 0.9cqw) dashed rgba(255, 255, 255, 0.35); }
.sm-stars { left: 0; right: 0; top: 15.3%; display: flex; justify-content: center; gap: 1.8cqw; }
.sm-stars i { width: 6.5cqw; height: 6.5cqw; background: var(--metal);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.sm-logo { left: 16.5%; top: 28.5%; width: 67%; height: 28.5%; background: var(--metal);
  -webkit-mask: url(/static/sticker-logo-mask.png) center / contain no-repeat; mask: url(/static/sticker-logo-mask.png) center / contain no-repeat;
  filter: drop-shadow(0 0.6cqw 0.4cqw rgba(0, 0, 0, 0.55)); }
.sm-holo { overflow: hidden; mix-blend-mode: soft-light; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 225, 120, 0.6) 52%, transparent 65%);
  background-size: 260% 100%; animation: stickerHolo 3.2s ease-in-out infinite; }
.sm-ribbon { left: 0; right: 0; top: 71.4%; height: 17.3%; background: var(--metal); clip-path: polygon(0 0, 100% 0, 93% 50%, 100% 100%, 0 100%, 7% 50%); display: grid; place-items: center; }
.sm-ribbon span { display: block; width: 88%; height: 76%; background: linear-gradient(var(--e1), var(--e2)); clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
  display: grid; place-items: center; color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 7.6cqw; letter-spacing: 0.08em;
  text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); white-space: nowrap; overflow: hidden; }
/* On the card: the ribbon carries the name, so the label under a slot is
   only for screen readers; a slot is the medallion's shape, not a circle. */
.sticker-card .sticker-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sticker-slot .sticker-art { aspect-ratio: 170 / 196; border: 0; border-radius: 0; background: none; overflow: visible; }
.sticker-slot .sticker-medal { opacity: 0.16; filter: grayscale(1); }
.sticker-slot.have .sticker-medal { opacity: 1; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3)); transform: rotate(-5deg); }
.sticker-slot.have:nth-child(even) .sticker-medal { transform: rotate(4deg); }
.sticker-slot.pop .sticker-medal { animation: stickerPop 0.6s cubic-bezier(.3, 1.8, .5, 1); }
/* The reveal: the medallion is taller than round. */
.sticker-flip { height: 254px; }
.sticker-front { border-radius: 0; overflow: visible; }
.sticker-front::after { display: none; }
.sticker-back { height: 220px; }
@media (prefers-reduced-motion: reduce) { .sm-holo, .sticker-slot.pop .sticker-medal { animation: none; } }

/* "Jouw rit" opgeschoond (27-09-2026): three small buttons under the
   licence, cards with a header link, a compact podium, and the hunt and the
   tip as two tiles that unfold. */
.lic-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.45rem; margin: 0.75rem 0 0; }
.lic-btn { display: grid; place-items: center; min-height: 2.6rem; padding: 0.4rem 0.3rem; border-radius: 12px; border: 2px solid var(--kiosk-red);
  background: #fff; color: var(--kiosk-red); font-weight: 800; font-size: 0.85rem; text-align: center; cursor: pointer; font-family: inherit; }
.lic-btn[hidden] { display: none; }
.lic-btn.is-solid { background: var(--kiosk-red); color: #fff; }
.lic-btn.is-open { background: var(--kiosk-red-tint); }
.lic-btn.lic-story { width: 100%; margin-top: 0.45rem; }
.lic-name-fold { margin-top: 0.6rem; }
.lic-name-fold .licence-name .email-field { margin-top: 0; }
.lic-photo-compact .licence-photo-pick > label { display: none; }
.lic-photo-compact .licence-photo-pick .kiosk-footnote { margin-top: 0.45rem !important; font-size: 0.7rem; text-align: center; }
.ride-card { border: 1px solid var(--kiosk-line); border-radius: 16px; padding: 0.8rem 0.85rem; }
.ride-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.15rem 0.5rem; margin-bottom: 0.5rem; }
.ride-head .ride-link { margin-left: auto; }
.ride-head .ride-h2 { margin: 0; font-size: 0.98rem; white-space: nowrap; }
.ride-link { background: none; border: 0; padding: 0; color: var(--kiosk-red); font: inherit; font-weight: 800; font-size: 0.72rem; text-decoration: none; cursor: pointer; white-space: nowrap; }
.ride-link[hidden] { display: none; }
.ride-podium.is-compact { min-height: 0; gap: 0.35rem; }
.ride-podium.is-compact .pod-bar { font-size: 1rem; padding-top: 0.15rem; border-radius: 8px 8px 0 0; }
.ride-podium.is-compact .pod-name { font-size: 0.72rem; }
.ride-podium.is-compact .pod-time { font-size: 0.64rem; }
#ridePodium .ride-me { margin-top: 0.5rem; padding: 0.45rem 0.65rem; font-size: 0.8rem; }
#ridePodium .ride-me-pos { font-size: 1.05rem; }
.sticker-card .ride-head { margin-bottom: 0; }
.sticker-card .ride-head .ride-h2 { text-align: left; }
.ride-card .ride-stars .ride-star { font-size: 2.2rem; }
.ride-more-title { margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kiosk-muted); }
.ride-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ride-tiles.is-single { grid-template-columns: 1fr; }
.ride-tile { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0.15rem; padding: 0.7rem; border-radius: 14px;
  border: 2px solid var(--kiosk-red); background: linear-gradient(160deg, #fff 55%, #fff1e6); color: var(--kiosk-ink); font-family: inherit; cursor: pointer; }
.ride-tile.is-tip { border-color: #f3dd8a; background: #fffaf2; }
.ride-tile.is-open { box-shadow: 0 0 0 3px var(--kiosk-red-tint); }
.ride-tile-ic { font-size: 1.6rem; line-height: 1; }
.ride-tile-img { width: 100%; height: 3.4rem; object-fit: cover; border-radius: 8px; margin-bottom: 0.2rem; }
.ride-tile b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 0.92rem; line-height: 1.15; }
.ride-tile small { color: var(--kiosk-muted); font-size: 0.72rem; font-weight: 700; line-height: 1.3; }
.ride-tile-go { margin-top: auto; padding-top: 0.3rem; color: var(--kiosk-red); font-weight: 800; font-size: 0.75rem; }
.ride-tile.is-wide { grid-column: 1 / -1; }
.ride-tile.is-game { background: #16171b; border-color: #16171b; color: #ffffff; }
.ride-tile.is-game b { color: #ffffff; }
.ride-tile.is-game small { color: #c9cbd2; }
.ride-tile.is-game .ride-tile-go { color: #ffd21f; }
.ride-tile.is-game.is-open { box-shadow: 0 0 0 3px #ffd21f55; }
.ride-tile-lamps { margin: 0.2rem 0 0.35rem; }
.ride-panel .game-card { margin: 0; }
.game-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.game-card .sticker-info { margin-top: 0; }
.game-card .sticker-info .ride-link { margin-right: 0.8rem; }
.ride-panel { margin-top: 0.6rem; }
.ride-panel .mission-optin, .ride-panel .tip-card { margin-top: 0; }

/* 28-09-2026: keep the page open during the ride; the sticker card's
   "how it works" and invite line; one line once reviewed; the rides to go. */
.keep-open { margin: 0.6rem 0 0.2rem; padding: 0.55rem 0.8rem; border-radius: 12px; background: #fff0f0; border: 2px solid var(--kiosk-red);
  color: var(--kiosk-red); font-weight: 800; font-size: 0.9rem; text-align: center; line-height: 1.4; animation: cta-pulse 2.2s ease-in-out infinite; }
.status-info .keep-open-note { margin: 0 0 0.6rem; font-weight: 800; color: var(--kiosk-red); }
.keep-open.is-soon { background: var(--kiosk-red); border-color: var(--kiosk-red); color: #fff; font-size: 0.95rem; animation: cta-pulse 1.6s ease-in-out infinite; }
.sticker-card { position: relative; }
.sticker-info-btn { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--kiosk-muted); background: #fff; color: var(--kiosk-muted);
  font: italic 800 0.85rem Georgia, serif; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.sticker-info { margin-top: 0.7rem; padding: 0.75rem 0.85rem; border-radius: 12px; background: #fff; border: 1px solid var(--kiosk-line); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12); font-size: 0.82rem; line-height: 1.45; color: var(--kiosk-ink); }
.sticker-info[hidden] { display: none; }
.sticker-info ul { margin: 0.35rem 0 0.4rem; padding-left: 1.1rem; }
.sticker-info li { margin-bottom: 0.15rem; }
.sticker-invite { text-align: center; margin: 0.35rem 0 0.2rem; }
.sticker-invite[hidden] { display: none; }
.sticker-invite small { display: block; color: var(--kiosk-muted); font-size: 0.7rem; font-weight: 700; }
.ride-review-done { display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.2rem 0.5rem; font-weight: 800; font-size: 0.88rem; color: var(--kiosk-ink); }
#rideReview.is-done .ride-review-done { display: flex; }
#rideReview.is-done > :not(.ride-review-done) { display: none; }
.ride-review-stars i { font-style: normal; color: #e2dedc; font-size: 1.05rem; }
.ride-review-stars i.on { color: #f5b400; }
.sticker-car-note small { display: block; margin-top: 0.15rem; font-weight: 700; font-size: 0.8rem; }
@media (prefers-reduced-motion: reduce) { .keep-open, .keep-open.is-soon { animation: none; } }

/* The weather discount of a suggested time, as a label on its chip. */
.suggestion-chip { position: relative; }
.suggestion-chip .chip-deal { position: absolute; top: -0.45rem; right: -0.35rem; background: var(--kiosk-red); color: #fff; font-size: 0.66rem; font-weight: 800;
  padding: 0.08rem 0.4rem; border-radius: 999px; box-shadow: 0 2px 6px rgba(227, 30, 36, 0.35); }
.suggestion-chips { padding-top: 0.55rem; }

/* Cars: "all bookings to another car", folded under the card's buttons. */
.car-move-all { margin-top: 0.6rem; }
.car-move-all summary { cursor: pointer; font-weight: 700; font-size: 0.85rem; }
.car-move-all form { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.car-move-all label { display: flex; gap: 0.4rem; align-items: center; }

/* Rapport alle vestigingen (report_all.html). */
.ra-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
@media (max-width: 900px) { .ra-layout { grid-template-columns: 1fr; } }
.ra-filters { display: grid; gap: 1rem; margin: 0; }
.ra-filters fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.ra-filters legend { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.ra-check { display: flex; gap: 0.5rem; align-items: center; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.ra-check input { accent-color: var(--accent); width: 1rem; height: 1rem; }
.ra-swatch { width: 0.65rem; height: 0.65rem; border-radius: 3px; display: inline-block; flex: none; }
.ra-quick { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ra-chip { font: 700 0.78rem inherit; font-family: inherit; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 999px; padding: 0.3rem 0.65rem; cursor: pointer; }
.ra-chip.is-on { background: var(--accent); border-color: var(--accent); color: #16171b; }
.ra-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.4rem; }
.ra-dates label { display: grid; gap: 0.2rem; font-size: 0.75rem; color: var(--muted); font-weight: 700; }
.ra-dates input { min-width: 0; }
.ra-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border-radius: 10px; border: 1px solid var(--line); }
.ra-seg button { font: inherit; font-weight: 700; font-size: 0.8rem; background: none; border: 0; border-radius: 7px; padding: 0.4rem 0.2rem; color: var(--muted); cursor: pointer; }
.ra-seg button[aria-pressed="true"] { background: var(--accent); color: #16171b; }
.ra-chip:focus-visible, .ra-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ra-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }  /* the tiles may not widen it past the screen */
.ra-main .chart-card { margin: 0; }
.ra-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; }
.ra-range { color: var(--muted); font-size: 0.9rem; }
.ra-range b { color: var(--ink); }
.ra-downloads { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ra-tiles { margin: 0; }
.ra-chart { width: 100%; height: 260px; display: block; }
.ra-chart .ra-grid { stroke: var(--line); }
.ra-chart .ra-axis { fill: var(--muted); font-size: 11px; font-family: inherit; }
.ra-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.8rem; color: var(--muted); font-weight: 700; margin-top: 0.4rem; }
.ra-legend > span { display: inline-flex; gap: 0.35rem; align-items: center; }
#raTable .ra-num { text-align: right; }
#raTable .ra-total td { font-weight: 800; border-top: 2px solid var(--line); }
.ra-demo { font-size: 0.82rem; color: var(--muted); }

/* The back of the licence (_licence_rear.html): a tap turns the card. */
.lic-flip { perspective: 1400px; cursor: pointer; border-radius: 16px; -webkit-tap-highlight-color: transparent; }
.lic-flip:focus-visible { outline: 3px solid var(--kiosk-red); outline-offset: 6px; }
.lic-flip-inner { display: grid; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(.2, .7, .2, 1); }
.lic-flip-inner > .licence { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.lic-flip-inner > .licence-rear { transform: rotateY(180deg); animation: none; }
.lic-flip.is-back .lic-flip-inner { transform: rotateY(180deg); }
.lic-flip.is-back .lic-flip-inner > .licence-rear { animation: licence-pulse 1.8s ease-in-out infinite; }
.lic-turn { margin: 0.45rem 0 0; text-align: center; font-size: 0.78rem; font-weight: 800; color: var(--kiosk-red); }
.rear-body { position: absolute; left: 4%; right: 4%; top: 23%; bottom: 17%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4%; align-items: center; }
.rear-map { width: 100%; height: 100%; display: block; overflow: visible; }
.rear-example { position: absolute; left: 0; top: -0.35rem; z-index: 1; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: #767676; padding: 0.12rem 0.45rem; border-radius: 999px; }
.rear-map .rear-halo { fill: none; stroke: #f6c9cb; stroke-width: 34; stroke-linejoin: round; }
.rear-map .rear-line { fill: none; stroke: var(--kiosk-red); stroke-width: 12; stroke-linejoin: round; stroke-linecap: round; }
.licence-rear.is-gold .rear-line { stroke: #8a6508; }
.licence-rear.is-silver .rear-line { stroke: #4b5563; }
.licence-rear.is-bronze .rear-line { stroke: #7a4a1e; }
.rear-map .rear-draw.go { stroke-dasharray: 100; stroke-dashoffset: 100; animation: rear-draw 2.4s 0.35s ease-out forwards; }
@keyframes rear-draw { to { stroke-dashoffset: 0; } }
.rear-stats { margin: 0; display: grid; gap: 0.5rem; text-align: right; }
.rear-stats dt { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #767676; order: 2; }
.rear-stats div { display: flex; flex-direction: column; }
.rear-stats dd { margin: 0; font-family: var(--font-display, 'Bricolage Grotesque'), sans-serif; font-weight: 800; font-size: clamp(0.95rem, 4.6vw, 1.3rem); line-height: 1; color: var(--kiosk-ink); }
@media (prefers-reduced-motion: reduce) { .lic-flip-inner { transition: none; } .rear-map .rear-draw.go { animation: none; stroke-dashoffset: 0; } }
.ra-group-label { margin: 0.55rem 0 0.1rem; font-size: 0.72rem; font-weight: 800; color: var(--ink); opacity: 0.8; }
.ra-group-label:first-of-type { margin-top: 0; }
.ra-heat { border-collapse: separate; border-spacing: 2px; width: auto; }
.ra-heat th { font-size: 0.7rem; color: var(--muted); font-weight: 700; padding: 0.15rem 0.3rem; text-align: center; }
.ra-heat tbody th { text-align: left; }
.ra-heat td { min-width: 1.9rem; height: 1.7rem; text-align: center; font-size: 0.72rem; border-radius: 4px; padding: 0 0.2rem; }
.ra-heat td[data-hot] { color: #16171b; font-weight: 800; }
.ra-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: 1.2rem; }
.ra-choice-venue { display: flex; gap: 0.4rem; align-items: center; margin: 0 0 0.4rem; font-size: 0.95rem; }
.ra-choice .ra-num { text-align: right; }
.ra-share { min-width: 9rem; }
.ra-share b { display: inline-block; width: 2.8rem; text-align: right; font-weight: 700; font-size: 0.8rem; vertical-align: middle; }
.ra-track { display: inline-block; width: calc(100% - 3.4rem); margin-left: 0.5rem; height: 0.55rem; vertical-align: middle; background: var(--line); border-radius: 3px; overflow: hidden; }
.ra-track .ra-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
/* The i next to a figure and its explanation (report_all.html). */
.ra-check-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.ra-info { flex: none; display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; padding: 0; margin-left: 0.25rem; vertical-align: middle;
  border-radius: 50%; border: 1.5px solid var(--muted); background: none; color: var(--muted); cursor: help;
  font: italic 700 0.68rem Georgia, "Times New Roman", serif; text-transform: none; letter-spacing: 0; line-height: 1; }
.ra-info:hover, .ra-info:focus-visible, .ra-info[aria-describedby] { color: var(--accent); border-color: var(--accent); outline: none; }
.ra-tip { position: fixed; z-index: 60; max-width: min(300px, calc(100vw - 16px)); padding: 0.55rem 0.7rem; border-radius: 10px;
  background: var(--ink); color: var(--surface); font-size: 0.8rem; font-weight: 600; line-height: 1.45; text-transform: none; letter-spacing: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); pointer-events: none; }
.ra-downloads .console-btn.is-disabled { opacity: 0.4; pointer-events: none; }
.ra-empty { margin: 0; color: var(--muted); font-weight: 700; text-align: center; padding: 2rem 1rem; }
/* Chart picker, lines, trend lines in the tiles, outliers, sortable table. */
.ra-chart-head { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.ra-chart-pick { display: flex; gap: 0.4rem; align-items: center; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.ra-chart-pick select { max-width: 14rem; }
.ra-chart .ra-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ra-spark { display: block; width: 100%; height: 28px; margin-top: 0.5rem; overflow: visible; }
.ra-spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; opacity: 0.85; }
.ra-spark circle { fill: var(--accent); }
.ra-outliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0.75rem; }
.ra-out { display: grid; gap: 0.15rem; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 10px; }
.ra-out-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ra-out b { font-size: 1.15rem; }
.ra-out-where { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
#raTable th.ra-sortable button { all: unset; cursor: pointer; font: inherit; color: inherit; }
#raTable th.ra-sortable button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#raTable td.is-best { color: var(--success); font-weight: 800; }
#raTable td.is-worst { color: var(--danger); }
.ra-seg-small { grid-auto-columns: auto; }
.ra-seg-small button { padding: 0.3rem 0.7rem; }
.ra-heat th.ra-heat-row { white-space: nowrap; font-weight: 700; color: var(--ink); }
.ra-heat td.is-out { background: repeating-linear-gradient(45deg, transparent 0 4px, var(--line) 4px 5px); }
.ra-heat td.ra-heat-total { font-weight: 800; color: var(--ink); background: none; }
/* Analyse, Boards: a row per car, how its board is now and over the period. */
/* A card per car: fits next to the filters and on a phone alike. */
.ra-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 0.8rem; }
.ra-board { display: grid; gap: 0.7rem; align-content: start; padding: 0.85rem 0.95rem; border: 1px solid var(--line); border-radius: 12px; }
.ra-board .ra-b-car { display: flex; flex-wrap: wrap; gap: 0.2rem 0.45rem; align-items: center; }
.ra-board .ra-b-car b { font-size: 0.98rem; }
.ra-board dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 1rem; }
.ra-board dt { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.15rem; }
.ra-board dd { margin: 0; font-size: 0.86rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.ra-board p { margin: 0; }
.ra-b-dot { display: inline-block; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--danger); }
.ra-b-dot.is-on { background: var(--success); }
.ra-b-dot.is-none { background: var(--line); }
.ra-b-when { white-space: nowrap; }
.ra-b-chip { display: block; width: fit-content; margin-top: 0.3rem; padding: 0.1rem 0.45rem; border-radius: 6px; font-size: 0.72rem; font-weight: 800;
  line-height: 1.35; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ra-b-chip.is-failed, .ra-b-chip.is-no_answer { background: color-mix(in srgb, var(--danger) 25%, transparent); }
.ra-b-muted, .ra-b-note { color: var(--muted); font-weight: 600; }
.ra-b-note { font-size: 0.75rem; }
/* De rem van de ouder (status.html): green while driving, amber when paused. */
.parent-pause { position: relative; margin: 0.7rem 0 0.3rem; padding: 0.75rem; border-radius: 14px; background: #e8f7ef; border: 2px solid #1f9d55; }
.parent-pause .parent-pause-info-btn { position: absolute; top: 0.5rem; right: 0.5rem; }
.parent-pause .pause-info { margin-top: 0.6rem; text-align: left; }
.pause-info p { margin: 0.35rem 0 0; }
.pause-info .ride-link { margin-top: 0.4rem; }
.parent-pause-state { margin: 0 0 0.55rem; padding: 0 1.8rem; font-weight: 800; color: #1f9d55; text-align: center; line-height: 1.4; }
.parent-pause .parent-pause-btn { margin: 0; background: var(--kiosk-red); }
.parent-pause.is-paused { background: #fff6e5; border-color: #d97706; }
.parent-pause.is-paused .parent-pause-state { color: #b45309; }
.parent-pause.is-paused .parent-pause-btn { background: #1f9d55; }
.parent-pause [hidden] { display: none !important; }  /* the button style would show a hidden button */
.parent-pause-warn { margin: 0.5rem 0 0; text-align: center; font-weight: 800; font-size: 0.85rem; color: var(--kiosk-ink); }

/* Win een gratis rit (_game_card.html): the start lights. */
.game-card { display: grid; gap: 0.6rem; }
.game-card .game-title { margin: 0; font-size: 1.05rem; color: var(--kiosk-red); letter-spacing: 0.04em; }
.game-card .game-intro { margin: 0; }
.game-lights { display: flex; gap: 8px; justify-content: center; padding: 14px; background: #16171b; border-radius: 14px; }
.game-lights span { width: 38px; height: 38px; border-radius: 50%; background: #2c2d33; }
.game-lights.on span.lit { background: var(--kiosk-red); box-shadow: 0 0 16px var(--kiosk-red); }
.game-lights.go span { background: #22c55e; box-shadow: 0 0 16px #22c55e; }
.game-card .game-tap { margin: 0; padding: 1.1rem; font-size: 1.1rem; touch-action: manipulation; }
.game-card [hidden] { display: none !important; }
.game-score { margin: 0; text-align: center; font-weight: 800; min-height: 1.3em; }
.game-left { margin: 0; text-align: center; }
.game-join { display: grid; gap: 0.5rem; padding: 0.8rem; border: 2px dashed var(--kiosk-red); border-radius: 14px; }
.game-join-title { margin: 0; font-weight: 800; color: var(--kiosk-red); }
.game-consent { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; }
.game-joined { margin: 0; font-weight: 800; color: #1f9d55; text-align: center; }
.game-card .game-share { margin: 0; }
.game-share-note { margin: 0; text-align: center; }
.game-card .game-share-image { justify-self: center; margin: -0.2rem 0 0; font-size: 0.8rem; }
/* Onboarding of a new venue (onboarding_form.html, onboarding_admin*.html). */
.sticker-full-go { display: block; text-align: center; font-weight: 800; margin: -0.2rem 0 0.4rem; }
.ob-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.ob-chip { font-size: 0.75rem; font-weight: 800; color: #b9750a; background: #fff6e5; border-radius: 999px; padding: 0.2rem 0.6rem; text-decoration: none; white-space: nowrap; }
.ob-chip.is-done { color: #1f9d55; background: #e8f7ef; }
.ob-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.ob-progress i { height: 6px; border-radius: 3px; background: var(--kiosk-line); }
.ob-progress i.done { background: var(--kiosk-success); }
.ob-progress i.now { background: var(--kiosk-red); }
.ob-step { margin: 0.6rem 0 0.1rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kiosk-red); }
.ob-form { display: grid; gap: 0.9rem; margin-top: 0.6rem; }
.ob-field { display: grid; gap: 0.3rem; }
.ob-field-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--kiosk-ink); }
.ob-field input[type=text], .ob-field input[type=email], .ob-field input[type=tel], .ob-field select, .ob-field textarea,
.ob-form textarea, .ob-staff input { font: inherit; font-size: 0.95rem; padding: 0.65rem 0.75rem; border: 1.5px solid var(--kiosk-line); border-radius: 10px; background: #fff; width: 100%; box-sizing: border-box; }
.ob-later { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 800; color: var(--kiosk-muted); border: 1.5px solid var(--kiosk-line); border-radius: 999px; padding: 0.1rem 0.55rem; cursor: pointer; white-space: nowrap; }
.ob-field.is-later .ob-later { color: #b9750a; border-color: #f0d49a; background: #fff6e5; }
.ob-field.is-later input, .ob-field.is-later select, .ob-field.is-later textarea { background: #fff6e5; border-color: #f0d49a; }
.ob-optional { font-weight: 600; color: var(--kiosk-muted); font-size: 0.8em; }
.ob-hint { margin: 0; font-size: 0.75rem; color: var(--kiosk-muted); line-height: 1.4; }
.ob-checks { display: grid; gap: 0.35rem; font-size: 0.9rem; }
.ob-checks label { display: flex; gap: 0.45rem; align-items: center; }
.ob-staff { display: grid; gap: 0.45rem; }
.ob-staff-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0.4rem; }
.ob-staff-row[hidden] { display: none; }
.ob-more, .ob-link { font: inherit; font-size: 0.85rem; font-weight: 800; color: var(--kiosk-red); background: none; border: 0; padding: 0; cursor: pointer; justify-self: start; text-decoration: none; }
.ob-nav { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; }
.ob-nav .kiosk-cta { margin: 0; }
.ob-nav .kiosk-cta:only-child { grid-column: 1 / -1; }
.ob-lock { border: 2px solid #f0d49a; background: #fff6e5; border-radius: 14px; padding: 0.8rem; display: grid; gap: 0.4rem; margin: 0.6rem 0; }
.ob-lock strong { color: #b9750a; }
.ob-lock ul { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; display: grid; gap: 0.2rem; }
.ob-lock a { color: var(--kiosk-red); font-weight: 800; margin-left: 0.3rem; }
.ob-terms { border: 1px solid var(--kiosk-line); border-radius: 12px; max-height: 320px; overflow-y: auto; padding: 0.3rem 0.8rem; margin: 0.6rem 0; font-size: 0.85rem; line-height: 1.5; }
.ob-terms h2 { font-size: 0.9rem; margin: 0.7rem 0 0.15rem; }
.ob-terms p { margin: 0 0 0.4rem; color: #33353c; }
.ob-agree { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; font-weight: 700; line-height: 1.4; }
.ob-agree input { margin-top: 0.2rem; }
.ob-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; }
.ob-form, .ob-form > *, .ob-form .email-field input { min-width: 0; }
.ob-form .email-field input, .ob-form .email-field textarea { width: 100%; box-sizing: border-box; }
.ob-sig-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; font-weight: 700; }
.ob-sig { width: 100%; height: 140px; border: 1.5px dashed #c9c6c0; border-radius: 12px; background: #fcfbf9; touch-action: none; cursor: crosshair; display: block; }
/* The time to beat on the game card, from a shared link (_game_dare.html). */
.game-target { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem;
  border-radius: 10px; background: #fff6e5; color: #b9750a; font-weight: 800; font-size: 0.85rem; }
.game-target b { font-family: var(--font-mono); color: var(--kiosk-ink); white-space: nowrap; }
.game-target.is-beaten { background: #e8f7ef; color: #1f9d55; }
/* The car page opened from a shared time (_game_dare.html). */
.game-dare { background: #16171b; color: #ffffff; border-radius: 14px; padding: 0.65rem 0.85rem; margin: 0 0 0.9rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; row-gap: 0.3rem; align-items: center; }
.game-dare-who { margin: 0; display: grid; gap: 0.1rem; min-width: 0; }
.game-dare-who span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd21f; }
.game-dare-who small { color: #c9cbd2; font-weight: 700; font-size: 0.76rem; }
.game-dare-time { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.game-dare-body { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; line-height: 1.4; color: #e6e7ea; }
.game-dare-body strong { color: #ffffff; }
.game-lamps { display: inline-flex; gap: 3px; vertical-align: 1px; margin-right: 0.3rem; }
.game-lamps i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.game-dare-line { margin: 0 0 0.9rem; padding: 0.55rem 0.75rem; border-radius: 12px; background: #16171b; color: #e6e7ea;
  font-size: 0.8rem; line-height: 1.4; font-weight: 600; }
.game-dare-line b { color: #ffffff; font-weight: 800; }
.game-board-title { margin: 0 0 0.3rem; font-weight: 800; font-size: 0.9rem; }
.game-board-title span { color: var(--kiosk-muted); font-weight: 700; }
.game-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.9rem; }
.game-board li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.5rem; padding: 0.35rem 0.55rem; border-radius: 8px; background: #f6f5f3; }
.game-board li.is-me { background: #fff0f0; color: var(--kiosk-red); font-weight: 800; }
.game-board li.is-empty { grid-template-columns: 1fr; color: var(--kiosk-muted); }
.game-board b { font-family: var(--font-mono, monospace); }

/* Onboarding in the console (onboarding_admin*.html): cards that show how
   far a venue got, "Vestiging uitnodigen" as its own window, fields with
   the label on top. Theme colours only, so every console theme fits. */
.obx-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.obx-head-actions form { margin: 0; }
.obx-intro { color: var(--muted); margin: -0.6rem 0 1.4rem; max-width: 72ch; line-height: 1.55; }
.obx-section { margin: 0 0 0.7rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.obx-done { margin-top: 1.4rem; }
.obx-done summary { cursor: pointer; list-style: none; }
.obx-done summary::-webkit-details-marker { display: none; }
.obx-done summary::before { content: "▸ "; }
.obx-done[open] summary::before { content: "▾ "; }
.obx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0.9rem; }
.obx-card { position: relative; display: grid; gap: 0.55rem; padding: 1rem 1.1rem 0.9rem; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.obx-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.obx-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.obx-card.is-waiting { border-color: var(--danger); }
.obx-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.obx-card-top b { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; }
.obx-card small { color: var(--muted); font-size: 0.78rem; overflow-wrap: anywhere; }
.obx-lang { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 0.1rem 0.45rem; }
.obx-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 0.15rem 0; }
.obx-steps i { height: 7px; border-radius: 4px; background: var(--line); }
.obx-steps i.done { background: var(--success); }
.obx-steps i.open { background: var(--warning); }
.obx-open { font-size: 0.8rem; color: var(--muted); }
.obx-open strong { color: var(--warning); }
.obx-foot { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 0.55rem; }
.obx-go { color: var(--accent); font-weight: 800; }

.obx-dialog { border: 1px solid var(--line); border-radius: 18px; padding: 0; background: var(--surface); color: var(--ink);
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 40px); box-shadow: 0 30px 80px rgb(0 0 0 / 0.5); }
.obx-dialog::backdrop { background: rgb(0 0 0 / 0.6); backdrop-filter: blur(2px); }
.obx-dialog form { display: grid; gap: 1.3rem; padding: 1.3rem 1.4rem 1.4rem; }
.obx-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.obx-dialog-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.4rem; }
.obx-close { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font-size: 1.3rem; line-height: 1; cursor: pointer; }
.obx-form { display: grid; gap: 1rem; }
.obx-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.75rem; min-width: 0; }
.obx-fieldset legend { padding: 0; margin-bottom: 0.7rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.obx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1rem; }
@media (max-width: 640px) { .obx-grid, .obx-how, .obx-open-grid, .obx-answer-grid { grid-template-columns: 1fr !important; } }
.obx-field { display: grid; gap: 0.35rem; align-content: start; font-size: 0.8rem; font-weight: 700; color: var(--muted); min-width: 0; }
.obx-field.full { grid-column: 1 / -1; }
.obx-field input, .obx-field select, .obx-field textarea { font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 0.65rem 0.75rem; width: 100%; box-sizing: border-box; min-width: 0; color-scheme: dark; }
.obx-field input:focus, .obx-field select:focus, .obx-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.obx-hint { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.45; }
.obx-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.obx-how label { position: relative; display: grid; gap: 0.25rem; padding: 0.85rem 0.95rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-2); cursor: pointer; }
.obx-how label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.obx-how input { position: absolute; opacity: 0; pointer-events: none; }
.obx-how b { color: var(--ink); font-size: 0.95rem; }
.obx-how span { color: var(--muted); font-size: 0.8rem; font-weight: 600; line-height: 1.4; }
.obx-actions { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.obx-actions form { margin: 0; }
.obx-checks { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.obx-checks label { display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.obx-checks label:has(input:checked) { border-color: var(--accent); }
.obx-link { font: inherit; font-size: 0.8rem; font-weight: 800; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }

.obx-hero { display: grid; gap: 1.1rem; }
.obx-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.obx-contact { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.85rem; }
.obx-stepbar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; }
.obx-stepbar li { display: grid; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; color: var(--muted); line-height: 1.25; }
.obx-stepbar i { height: 8px; border-radius: 4px; background: var(--line); }
.obx-stepbar li.done { color: var(--ink); }
.obx-stepbar li.done i { background: var(--success); }
.obx-stepbar li.open i { background: var(--warning); }
.obx-stepbar li.open { color: var(--warning); }
.obx-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.obx-timeline li { position: relative; padding-left: 1.1rem; display: grid; font-size: 0.8rem; color: var(--muted); }
.obx-timeline li::before { content: ""; position: absolute; left: 0; top: 0.3rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 2px solid var(--line); }
.obx-timeline li.done { color: var(--ink); }
.obx-timeline li.done::before { background: var(--success); border-color: var(--success); }
.obx-timeline small { color: var(--muted); font-size: 0.72rem; }
.obx-open-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.obx-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.obx-list li { display: grid; gap: 0.1rem; padding: 0.5rem 0.65rem; border-radius: 10px; background: var(--surface-2); font-weight: 700; font-size: 0.88rem; }
.obx-list span { font-weight: 600; font-size: 0.75rem; color: var(--muted); }
.obx-sign { margin-top: 1.25rem; border-color: var(--danger); display: grid; gap: 0.8rem; }
.obx-sign form { margin: 0; }
.obx-create { margin-top: 1.25rem; border-color: var(--success); }
.obx-wishes { margin: 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--surface-2); font-size: 0.88rem; }
.obx-articles { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; line-height: 1.5; font-size: 0.9rem; }
/* Onboarding: our own wording per clause (onboarding.clause_rows). */
.obx-texts h3 { margin: 1.1rem 0 0.45rem; font-size: 0.95rem; }
.obx-text { border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.75rem; margin: 0 0 0.4rem; }
.obx-text > summary { cursor: pointer; font-size: 0.88rem; line-height: 1.5; }
.obx-text > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.obx-text-n { font-weight: 800; margin-right: 0.4rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.obx-text.is-stale { border-color: var(--warning); }
.obx-text form { margin-top: 0.7rem; }
.obx-text textarea { min-height: 7rem; resize: vertical; }
.obx-tag { display: inline-block; margin-left: 0.35rem; padding: 0 0.45rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800;
  background: color-mix(in srgb, var(--warning) 28%, transparent); }
.obx-stale { margin: 0.55rem 0 0; color: var(--warning); font-weight: 700; font-size: 0.85rem; }
.obx-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.obx-answers h2 { display: flex; align-items: center; gap: 0.5rem; }
.obx-answers dl { margin: 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.45rem 0.8rem; font-size: 0.86rem; }
.obx-answers dt { color: var(--muted); font-weight: 600; }
.obx-answers dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.obx-step-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--line); flex: none; }
.obx-step-dot.done { background: var(--success); }
.obx-step-dot.open { background: var(--warning); }
.obx-sign .ob-sig, .obx-sign canvas { background: #fcfbf9; }
/* The venue's form a bit wider on a laptop (filling it in together). */
.kiosk-card.is-onboarding { max-width: 560px; }

/* ---------- The venue's onboarding form, wide (onboarding_form.html, 01-10-2026) ----------
   Steps on the left on a laptop, a row of step chips on a phone. Red is the
   venue's, blue is Kids Supercar's, amber is what's still open. */
.kiosk-card.is-onboarding.is-wide { max-width: 1060px; padding: 0; overflow: clip; }
.kiosk-card.is-wide .powered-by { margin: 0; border-radius: 0; }
.obw [hidden] { display: none !important; }
.obw { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 640px;
  background: linear-gradient(to right, #faf9f7 0 263px, var(--kiosk-line) 263px 264px, #ffffff 264px); }
.obw-side { position: sticky; top: 0; align-self: start; padding: 1.6rem 1.1rem 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; }
.obw-side-top { display: grid; gap: 0.55rem; }
.obw-venue { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kiosk-muted); overflow-wrap: anywhere; }
.obw-langs { display: flex; gap: 0.35rem; }
.obw-langs a { font: 700 0.68rem var(--font-mono); padding: 0.22rem 0.55rem; border-radius: 999px; border: 1.5px solid var(--kiosk-line);
  color: var(--kiosk-muted); text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.obw-langs a.on, .obw-langs a:hover { border-color: var(--kiosk-red); color: var(--kiosk-red); }
.obw-meter { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; border-radius: 14px; background: #ffffff;
  border: 1px solid var(--kiosk-line); text-decoration: none; color: var(--kiosk-ink); transition: transform 0.2s, box-shadow 0.2s; }
.obw-meter:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgb(0 0 0 / 0.4); }
.obw-meter svg { width: 46px; height: 46px; transform: rotate(-90deg); flex: none; }
.obw-meter circle { fill: none; stroke-width: 4.5; }
.obw-meter .bg { stroke: #efedea; }
.obw-meter .fg { stroke: var(--kiosk-red); stroke-linecap: round; stroke-dasharray: var(--p) 100; transition: stroke-dasharray 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.obw-meter.is-done .fg { stroke: var(--kiosk-success); }
.obw-meter span { display: grid; line-height: 1.2; }
.obw-meter b { font-family: var(--font-display); font-size: 1.25rem; }
.obw-meter small { font-size: 0.75rem; font-weight: 800; color: var(--kiosk-warning); }
.obw-meter.is-done small { color: var(--kiosk-success); }
.obw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.obw-steps a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.5rem 0.6rem;
  border-radius: 11px; text-decoration: none; color: var(--kiosk-muted); font-size: 0.86rem; font-weight: 700; transition: background 0.2s, color 0.2s; }
.obw-steps a:hover { background: #f1efec; color: var(--kiosk-ink); }
.obw-steps i { width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--kiosk-line); display: grid; place-items: center;
  font-style: normal; font-size: 0.72rem; font-weight: 800; background: #ffffff; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.obw-steps svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; }
.obw-steps li.done a { color: var(--kiosk-ink); }
.obw-steps li.done i { background: var(--kiosk-success); border-color: var(--kiosk-success); color: #ffffff; }
.obw-steps li.open i { background: #fff6e5; border-color: #f0d49a; color: var(--kiosk-warning); }
.obw-steps li.now a { background: var(--kiosk-red-tint); color: var(--kiosk-red); }
.obw-steps li.now:not(.done):not(.open) i { border-color: var(--kiosk-red); color: var(--kiosk-red); box-shadow: 0 0 0 4px rgb(227 30 36 / 0.12); }
.obw-steps li.ks { margin-bottom: 0.3rem; padding-bottom: 0.4rem; border-bottom: 1px dashed var(--kiosk-line); }
.obw-steps li.ks a { color: #245aa0; }
.obw-steps li.ks i { background: #eaf1fb; border-color: #c5d8f0; color: #245aa0; font-size: 0.58rem; letter-spacing: 0.02em; }
.obw-steps li.ks.now a { background: #eaf1fb; }
.obw-steps em { font-style: normal; font-size: 0.68rem; font-weight: 800; color: #245aa0; background: #eaf1fb; border-radius: 999px; padding: 0.05rem 0.45rem; }
.obw-steps li.pop i { animation: obw-pop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.obw-steps li.pop svg { animation: obw-draw 0.5s 0.25s ease-out both; }
.obw-legend { display: grid; gap: 0.4rem; font-size: 0.72rem; color: var(--kiosk-muted); font-weight: 600; line-height: 1.35; }
.obw-legend span { display: flex; gap: 0.5rem; align-items: center; }
.obw-legend b { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.obw-legend b.you { background: var(--kiosk-red); }
.obw-legend b.ks { background: #245aa0; }
.obw-legend b.open { background: #f0b545; }

.obw-main { padding: 2rem 2.3rem 2.3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; min-width: 0; }
.obw-stepnr { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kiosk-red); }
.obw-stepnr.is-ks { color: #245aa0; }
.obw-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.15rem); line-height: 1.05; margin: -0.35rem 0 0; text-wrap: balance; }
.obw-lead { margin: 0; color: #4a4c55; line-height: 1.55; max-width: 62ch; }
.obw-kind { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.82rem; font-weight: 700; color: #245aa0;
  background: #eaf1fb; border-radius: 999px; padding: 0.3rem 0.85rem 0.3rem 0.35rem; justify-self: start; }
.obw-kind i { font-style: normal; font-size: 0.6rem; font-weight: 800; background: #245aa0; color: #ffffff; border-radius: 999px; padding: 0.15rem 0.42rem; }
.obw-main.enter-r > * { animation: obw-in-r 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.obw-main.enter-l > * { animation: obw-in-l 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.obw-main.enter-up > * { animation: obw-up 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.obw-main > :nth-child(2) { animation-delay: 0.04s; }
.obw-main > :nth-child(3) { animation-delay: 0.08s; }
.obw-main > :nth-child(n+4) { animation-delay: 0.12s; }
.obw-main[class*="enter-"] .obw-field { animation: obw-up 0.4s calc(var(--i, 0) * 40ms + 0.12s) cubic-bezier(0.2, 0.8, 0.2, 1) both; }

.obw-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.obw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1.3rem; }
.obw-field { display: grid; gap: 0.4rem; min-width: 0; align-content: start; }
.obw-field.wide { grid-column: 1 / -1; }
.obw-field-top { display: flex; align-items: center; gap: 0.45rem; min-height: 1.6rem; }
.obw-field-top label, .obw-label { font-size: 0.86rem; font-weight: 800; color: var(--kiosk-ink); }
.obw-opt { font-weight: 600; color: var(--kiosk-muted); font-size: 0.9em; }
.obw-toggles { margin-left: auto; display: flex; gap: 0.3rem; }
.obw-tg { cursor: pointer; position: relative; }
.obw-tg input, .obw-chip input, .obw-yn input, .obw-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.obw-tg span { display: inline-block; font-size: 0.7rem; font-weight: 800; padding: 0.16rem 0.6rem; border-radius: 999px; border: 1.5px solid var(--kiosk-line);
  color: var(--kiosk-muted); background: #ffffff; transition: background 0.2s, border-color 0.2s, color 0.2s; user-select: none; }
.obw-tg:hover span { border-color: #cfccc6; color: var(--kiosk-ink); }
.obw-tg input:focus-visible + span, .obw-chip input:focus-visible + span, .obw-yn input:focus-visible + span { outline: 2px solid var(--kiosk-red); outline-offset: 2px; }
.is-later-tg input:checked + span { border-color: #f0d49a; background: #fff6e5; color: var(--kiosk-warning); animation: obw-tick 0.3s ease; }
.is-na-tg input:checked + span { border-color: #cfd3da; background: #eef0f3; color: #4b5563; animation: obw-tick 0.3s ease; }
.obw-info { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1.5px solid #b8b5ae; background: #ffffff; color: #6b6f7a; font: italic 800 0.72rem Georgia, serif;
  cursor: pointer; padding: 0; line-height: 1; display: grid; place-items: center; flex: none; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.obw-info:hover, .obw-info[aria-expanded="true"] { background: #245aa0; border-color: #245aa0; color: #ffffff; }
.obw-info-text { margin: 0; font-size: 0.8rem; line-height: 1.5; color: #23395d; background: #eaf1fb; border-radius: 10px; padding: 0.6rem 0.75rem; border-left: 3px solid #245aa0; }
.obw-info-text:not([hidden]), .obw-sub:not([hidden]), .obw-staff-row:not([hidden]) { animation: obw-drop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.obw input[type=text], .obw input[type=email], .obw input[type=tel], .obw input[type=time], .obw input[type=date], .obw select, .obw textarea {
  font: 600 0.95rem var(--font-body); padding: 0.7rem 0.8rem; border: 1.5px solid var(--kiosk-line); border-radius: 11px; background: #ffffff;
  color: var(--kiosk-ink); width: 100%; box-sizing: border-box; min-width: 0; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.obw input:focus, .obw select:focus, .obw textarea:focus { outline: none; border-color: var(--kiosk-ink); box-shadow: 0 0 0 4px rgb(20 17 16 / 0.07); }
.obw textarea { resize: vertical; line-height: 1.45; }
.obw-field.is-later input:not([type=checkbox]):not([type=radio]), .obw-field.is-later select, .obw-field.is-later textarea { background: #fff6e5; border-color: #f0d49a; }
.obw-field.is-na input:not([type=checkbox]), .obw-field.is-na select, .obw-field.is-na textarea { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; }
.obw input.ok { border-color: var(--kiosk-success); }
.obw input.bad { border-color: var(--kiosk-red); }
.obw-mailwrap { display: grid; gap: 0.25rem; min-width: 0; }
.obw-mail { font-size: 0.72rem; font-weight: 800; }
.obw-mail:empty { display: none; }
.obw-mail.ok { color: var(--kiosk-success); }
.obw-mail.ok::before { content: "\2713  "; }
.obw-mail.bad { color: var(--kiosk-red); }
.obw-hint { margin: 0; font-size: 0.75rem; color: var(--kiosk-muted); line-height: 1.45; }
.obw-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.obw-chip { position: relative; }
.obw-chip span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1.5px solid var(--kiosk-line);
  font-size: 0.86rem; font-weight: 700; cursor: pointer; background: #ffffff; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.obw-chip input:checked + span { border-color: var(--kiosk-red); background: var(--kiosk-red-tint); color: var(--kiosk-red); }
.obw-chip input:checked + span::before { content: "\2713"; font-weight: 800; }
.obw-yn { display: inline-flex; gap: 0.4rem; justify-self: start; }
.obw-yn label { position: relative; }
.obw-yn span { display: inline-block; min-width: 4.6rem; text-align: center; padding: 0.6rem 1rem; border-radius: 11px; border: 1.5px solid var(--kiosk-line);
  font-weight: 800; cursor: pointer; background: #ffffff; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; }
.obw-yn input:checked + span { border-color: var(--kiosk-red); background: var(--kiosk-red-tint); color: var(--kiosk-red); transform: translateY(-1px); }
.obw-check { display: inline-flex; gap: 0.55rem; align-items: center; font-size: 0.88rem; font-weight: 700; cursor: pointer; justify-self: start; }
.obw-check input, .obw-agree input { width: 1.1rem; height: 1.1rem; accent-color: var(--kiosk-red); margin: 0; flex: none; }
.obw-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.obw-hours { border: 1.5px solid var(--kiosk-line); border-radius: 13px; overflow: hidden; }
.obw-hours-row { display: grid; grid-template-columns: 7.2rem 7.4rem minmax(0, 1fr) minmax(0, 1fr); gap: 0.7rem; align-items: center; padding: 0.45rem 0.8rem;
  border-top: 1px solid #f1efec; transition: background 0.3s; }
.obw-hours-row:first-child { border-top: 0; }
.obw-day { font-weight: 800; font-size: 0.88rem; }
.obw .obw-hours-row input[type=time] { padding: 0.45rem 0.55rem; transition: opacity 0.25s; }
.obw-hours-row.is-closed input[type=time] { opacity: 0.28; pointer-events: none; }
.obw-hours-row.is-closed .obw-day { color: var(--kiosk-muted); }
.obw-hours-row.flash { animation: obw-flash 0.7s var(--d, 0ms) ease; }
.obw-switch { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.76rem; font-weight: 700; color: var(--kiosk-muted); cursor: pointer; position: relative; }
.obw-switch i { width: 30px; height: 18px; border-radius: 999px; background: #dedbd6; position: relative; transition: background 0.2s; flex: none; }
.obw-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #ffffff;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); }
.obw-switch input:checked + i { background: var(--kiosk-ink); }
.obw-switch input:checked + i::after { transform: translateX(12px); }
.obw-switch input:focus-visible + i { outline: 2px solid var(--kiosk-red); outline-offset: 2px; }
.obw-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.6rem; align-items: center; font-size: 0.82rem; font-weight: 700; color: var(--kiosk-muted); }
.obw-drop { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem; border: 1.5px dashed #cfccc6; border-radius: 13px; background: #fcfbf9; cursor: pointer;
  font-size: 0.85rem; color: var(--kiosk-muted); font-weight: 600; transition: border-color 0.2s, background 0.2s; position: relative; min-width: 0; overflow-wrap: anywhere; }
.obw-drop:hover { border-color: var(--kiosk-red); background: #ffffff; }
.obw-drop img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #ffffff; border: 1px solid var(--kiosk-line); flex: none; }
.obw-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.obw-staff { display: grid; gap: 0.55rem; }
.obw-staff-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 0.5rem; align-items: start; }
.obw-more, .obw-link { font: 800 0.85rem var(--font-body); color: var(--kiosk-red); background: none; border: 0; padding: 0; cursor: pointer; justify-self: start; text-decoration: none; }
.obw-more:hover, .obw-link:hover { text-decoration: underline; }
.obw-nav { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; margin-top: 0.3rem; }
.obw-nav #nextBtn, .obw-nav > a.kiosk-cta { order: 2; }
.obw-nav .obw-back { order: 1; padding-inline: 1.3rem; }
.obw-nav .kiosk-cta { margin: 0; }
.obw-nav .kiosk-cta:only-child { grid-column: 1 / -1; }
.obw-nav .kiosk-cta:not(.is-quiet) { box-shadow: 0 12px 24px -14px rgb(227 30 36 / 0.8); transition: transform 0.15s, box-shadow 0.2s; }
.obw-nav .kiosk-cta:not(.is-quiet):hover { transform: translateY(-1px); box-shadow: 0 16px 28px -14px rgb(227 30 36 / 0.85); }
.obw-ks { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.obw-ks div { background: #eaf1fb; border: 1px solid #c5d8f0; border-radius: 12px; padding: 0.65rem 0.8rem; display: grid; gap: 0.15rem;
  animation: obw-up 0.4s calc(var(--i, 0) * 35ms + 0.1s) cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.obw-ks dt { font-size: 0.7rem; font-weight: 800; color: #4b6a94; text-transform: uppercase; letter-spacing: 0.05em; }
.obw-ks dd { margin: 0; font-weight: 800; color: #17325a; overflow-wrap: anywhere; white-space: pre-line; }
.obw-ks dd.is-open { color: #6b85a8; font-weight: 700; font-style: italic; }
.obw-ks dd.is-open::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #f0b545; margin-right: 0.4rem; vertical-align: 1px;
  animation: obw-pulse 1.6s ease-in-out infinite; }
.obw-lock { border: 1.5px solid #f0d49a; background: #fff8ea; border-radius: 14px; padding: 0.9rem 1rem; display: grid; gap: 0.45rem; }
.obw-lock strong { color: var(--kiosk-warning); }
.obw-lock ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; font-size: 0.88rem; overflow-wrap: anywhere; }
.obw-lock a { color: var(--kiosk-red); font-weight: 800; margin-left: 0.3rem; text-decoration: none; }
.obw-lock a.obw-badge-ks { color: #245aa0; background: #eaf1fb; border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.75rem; }
.obw-summary { background: #141110; color: #ffffff; border-radius: 16px; padding: 1.1rem 1.25rem 1.2rem; }
.obw-summary h2 { margin: 0 0 0.65rem; font-family: var(--font-display); font-size: 1.15rem; }
.obw-summary ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.obw-summary li { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: 0.45rem; font-size: 0.9rem; line-height: 1.45; color: #e9e7e3;
  animation: obw-up 0.4s calc(var(--i, 0) * 60ms + 0.15s) cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.obw-summary li::before { content: "\2713"; color: #ffd21f; font-weight: 800; }
.obw-miss { background: #fff1d6; color: #9a5f00; border-radius: 4px; padding: 0 0.2rem; font-weight: 800; }
.obw-summary .obw-miss { background: #5a4310; color: #ffd98a; }
.obw-contract { border: 1.5px solid var(--kiosk-line); border-radius: 14px; background: #ffffff; }
.obw-contract summary { cursor: pointer; padding: 0.85rem 1rem; font-weight: 800; font-size: 0.92rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.obw-contract summary::-webkit-details-marker { display: none; }
.obw-contract summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--kiosk-red); transition: transform 0.25s; }
.obw-contract[open] summary::after { transform: rotate(45deg); }
.obw-contract-body { max-height: 480px; overflow-y: auto; padding: 0.2rem 1.25rem 1.3rem; border-top: 1px solid var(--kiosk-line);
  font-family: Georgia, "Times New Roman", serif; font-size: 0.9rem; line-height: 1.6; color: #2b2d33; }
.obw-contract[open] .obw-contract-body { animation: obw-drop 0.3s ease; }
.obw-c-title { text-align: center; overflow-wrap: anywhere; font-family: var(--font-display); font-size: clamp(0.95rem, 3.6vw, 1.15rem); font-weight: 800; letter-spacing: 0.06em; margin: 1rem 0 0.6rem; color: var(--kiosk-ink); }
.obw-c-head { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; margin: 1rem 0 0.35rem; color: var(--kiosk-ink); }
.obw-c-agreed { font-weight: 700; margin: 0.9rem 0; }
.obw-contract-body h3 { font-family: var(--font-body); font-size: 0.92rem; font-weight: 800; margin: 1.15rem 0 0.3rem; color: var(--kiosk-ink); }
.obw-clause { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); margin: 0 0 0.35rem; }
.obw-clause.is-solo { grid-template-columns: minmax(0, 1fr); }
.obw-clause b { font-family: var(--font-body); font-size: 0.8rem; color: var(--kiosk-muted); padding-top: 0.12rem; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.obw-clause span { white-space: pre-line; }
.obw-agree { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; font-weight: 700; line-height: 1.45; padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--kiosk-line); border-radius: 12px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.obw-agree:has(input:checked) { border-color: var(--kiosk-success); background: #f1faf5; }
.obw-agree input { margin-top: 0.15rem; }
.obw-sig-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.86rem; font-weight: 800; }
.obw-sig { height: 170px; transition: border-color 0.3s, background 0.3s; }
.obw-sig.is-signed { border-color: #1b2a6b; border-style: solid; background: #ffffff; }
.obw .kiosk-error.shake { animation: obw-shake 0.4s; }
#signBtn.is-busy { opacity: 0.7; pointer-events: none; }
.obw-backline { margin: 0; }
.obw-done { text-align: center; display: grid; justify-items: center; gap: 0.3rem; }
.obw-done-check { width: 86px; height: 86px; margin-bottom: 0.4rem; }
.obw-done-check circle { fill: #e8f7ef; stroke: var(--kiosk-success); stroke-width: 3; }
.obw-done-check path { fill: none; stroke: var(--kiosk-success); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; }
.obw-done.is-fresh .obw-done-check { animation: obw-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.obw-done.is-fresh .obw-done-check path { animation: obw-draw-long 0.55s 0.35s ease-out both; }
.obw-done .kiosk-cta { margin-top: 0.6rem; }
.obw-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; }
@keyframes obw-in-r { from { opacity: 0; transform: translateX(26px); } }
@keyframes obw-in-l { from { opacity: 0; transform: translateX(-26px); } }
@keyframes obw-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes obw-drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes obw-pop { from { transform: scale(0.4); } }
@keyframes obw-draw { from { stroke-dashoffset: 16; } }
@keyframes obw-draw-long { from { stroke-dashoffset: 40; } }
@keyframes obw-tick { 50% { transform: scale(1.12); } }
@keyframes obw-flash { 30% { background: #fff1d6; } }
@keyframes obw-pulse { 50% { opacity: 0.3; } }
@keyframes obw-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (max-width: 860px) {
  .obw { grid-template-columns: minmax(0, 1fr); background: #ffffff; min-height: 0; }
  .obw-side { position: static; background: #faf9f7; border-bottom: 1px solid var(--kiosk-line); padding: 1.1rem 1rem 0.9rem; gap: 0.8rem; }
  .obw-side-top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .obw-steps { display: flex; overflow-x: auto; gap: 0.35rem; scrollbar-width: none; margin: 0 -1rem; padding: 0.1rem 1rem; }
  .obw-steps::-webkit-scrollbar { display: none; }
  .obw-steps li { flex: none; }
  .obw-steps li.ks { border-bottom: 0; margin: 0; padding: 0; }
  .obw-steps a { grid-template-columns: 22px auto auto; gap: 0.4rem; padding: 0.3rem 0.65rem 0.3rem 0.35rem; border: 1px solid var(--kiosk-line); background: #ffffff; border-radius: 999px; font-size: 0.78rem; }
  .obw-steps i { width: 22px; height: 22px; font-size: 0.65rem; }
  .obw-steps li:not(.now) span { display: none; }
  .obw-steps li:not(.now) a { grid-template-columns: 22px auto; padding-right: 0.35rem; }
  .obw-legend { display: none; }
  .obw-meter { padding: 0.5rem 0.7rem; }
  .obw-meter svg { width: 36px; height: 36px; }
  .obw-main { padding: 1.3rem 1.1rem 1.5rem; }
}
@media (max-width: 640px) {
  .kiosk-page:has(.is-wide) { padding: 0.75rem; }
  .obw-grid, .obw-ks, .obw-two { grid-template-columns: minmax(0, 1fr); }
  .obw-hours-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 0.4rem; padding: 0.55rem 0.7rem; }
  .obw-switch { justify-self: end; }
  .obw-staff-row { grid-template-columns: minmax(0, 1fr); padding: 0.6rem; border: 1px solid var(--kiosk-line); border-radius: 12px; }
  .obw-field-top { flex-wrap: wrap; }
  .obw-range { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .obw-range span { padding-left: 0.2rem; }
  .obw-c-title { font-size: 0.9rem; letter-spacing: 0; hyphens: auto; }
  .obw-contract-body { padding-inline: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .obw *, .obw-done * { animation: none !important; transition: none !important; }
}
/* The phone book under Vestigingen (venue_contacts.html). */
.obx-search { display: block; margin: 0 0 1rem; max-width: 460px; }
.obx-search input { width: 100%; box-sizing: border-box; font: inherit; padding: 0.65rem 0.85rem; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); }
.obx-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.obx-contact { align-content: start; }
.obx-contact:hover { transform: none; }
.obx-contact[hidden] { display: none; }
.obx-contact dl { margin: 0; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.55rem 0.7rem; font-size: 0.86rem; }
.obx-contact dt { color: var(--muted); font-weight: 600; padding-top: 0.1rem; }
.obx-contact dd { margin: 0; min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.obx-links { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
.obx-pill { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; background: var(--surface-2); max-width: 100%; overflow-wrap: anywhere; }
.obx-pill:hover { border-color: var(--accent); color: var(--accent); }
.obx-pill.is-urgent { border-color: var(--danger); color: var(--danger); }
.obx-none { color: var(--muted); font-style: italic; }
.obx-staff { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; }
.obx-staff a { color: var(--muted); font-size: 0.8rem; margin-left: 0.25rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.obw-meter[style^="--p: 0;"] .fg { opacity: 0; }

/* Who started a ride (rides.html) and where staff are logged in (users.html). */
.started-by { margin-top: 0.2rem; font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; color: var(--accent-2); }
.session-row.is-mine td { background: color-mix(in srgb, var(--success) 7%, transparent); }
.car-ip { margin: 0.35rem 0 0.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; font-size: 0.85rem; }
.car-ip > span:first-child { color: var(--muted); }
.car-ip small { color: var(--muted); font-size: 0.72rem; }

/* Onboarding form, feedback 01-10-2026: wider on a big screen, who fills
   what as headings in the side bar, a light summary, a check mark in a
   right e-mail field, and copying the hours one day down. */
.kiosk-card.is-onboarding.is-wide { max-width: 1240px; }
.obw-steps li.obw-group { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kiosk-muted);
  padding: 0.35rem 0.6rem 0.15rem; border: 0; margin: 0; }
.obw-steps li.obw-group.is-ks { color: #245aa0; }
.obw-icons { margin: 0; font-size: 0.74rem; font-weight: 700; color: var(--kiosk-muted); }
.obw-summary { background: #f2f7f3; color: var(--kiosk-ink); border: 1px solid #d3e5d8; }
.obw-summary li { color: #2b3530; grid-template-columns: 1.35rem minmax(0, 1fr); }
.obw-summary li::before { content: "\2713"; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; border-radius: 50%;
  background: var(--kiosk-success); color: #ffffff; font-size: 0.72rem; }
.obw-summary .obw-miss { background: #fff1d6; color: #9a5f00; }
.obw-inwrap { position: relative; display: block; min-width: 0; }
.obw .obw-inwrap input { padding-right: 2.6rem; }
.obw-ok { display: none; position: absolute; right: 0.7rem; top: 50%; width: 1.35rem; height: 1.35rem; margin-top: -0.675rem; border-radius: 50%;
  background: var(--kiosk-success); color: #ffffff; font-style: normal; font-size: 0.78rem; font-weight: 800; place-items: center; pointer-events: none; }
.obw-ok::before { content: "\2713"; }
.obw-inwrap.is-ok .obw-ok { display: grid; animation: obw-pop 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.obw-hours-row { grid-template-columns: 7.2rem 7.4rem minmax(0, 1fr) minmax(0, 1fr) 2rem; }
.obw-next { width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--kiosk-line); background: #ffffff; color: var(--kiosk-muted);
  font: 800 0.95rem var(--font-body); cursor: pointer; display: grid; place-items: center; padding: 0; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.obw-next:hover, .obw-next:focus-visible { border-color: var(--kiosk-red); color: var(--kiosk-red); background: var(--kiosk-red-tint); outline: none; }
.obw-copyall { margin: 0 0 0.1rem; }
.obx-field.obx-inline { display: flex; align-items: center; gap: 0.5rem; }
@media (max-width: 640px) {
  .obw-hours-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .obw-hours-row > span:last-child { display: none; }
  .obw-next { grid-column: 1 / -1; justify-self: end; width: auto; height: auto; border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) { .obw-inwrap.is-ok .obw-ok { animation: none; } }

/* Instellingen: one size for the explanation under a heading (01-10-2026). */
.chart-card p.console-empty { font-size: 0.85rem; line-height: 1.5; }
/* Labels, options and sub-headings no bigger than the card's title (h2,
   0.95rem). A default only (:where): rows with their own size keep it. */
:where(.chart-card) label { font-size: 0.88rem; }
:where(.chart-card) h3 { font-size: 0.9rem; }
/* Hulp & contact (help.html). */
.help-contact { margin: 0 0 0.35rem; font-size: 0.9rem; }
/* Removing a car (cars.html) and the removed ones in the dossier overview. */
.car-remove-hint { margin: 0 0 0.6rem; font-size: 0.78rem; color: var(--muted); }
.dossier-removed { margin: -0.5rem 0 1.5rem; padding: 0.8rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius-console); }
.dossier-removed h3 { margin: 0 0 0.5rem; }
.dossier-removed-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; padding: 0.3rem 0; font-size: 0.88rem; }
.dossier-removed-row .row-form { margin: 0; }
.help-edit { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.help-edit > summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; margin-bottom: 0.7rem; }
:where(.chart-card .pricing-form) > label > :is(input:not([type="checkbox"]):not([type="radio"]), select) { margin-left: 0.5rem; }
:where(.chart-card .pricing-form) > label > :is(input[type="text"], input[type="url"], input[type="email"]) { width: min(100%, 24rem); }
:where(.chart-card .pricing-form) > label > :is(input[type="text"], input[type="url"], input[type="email"], input[type="number"], input[type="date"], select) {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; font-size: 0.85rem; padding: 0.3rem 0.5rem;
}
:where(.chart-card .pricing-form) > label:has(> textarea) { display: grid; gap: 0.35rem; }
:where(.chart-card .pricing-form) > label > textarea { width: 100%; min-height: 5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; font-size: 0.85rem; padding: 0.4rem 0.55rem; }

/* The phone book: e-mail as plain text that wraps, the footer on one line. */
.obx-mail { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; font-weight: 600; }
.obx-mail:hover { color: var(--accent); }
.obx-contact .obx-links { align-items: center; }
.obx-contact .obx-foot { gap: 0.6rem; }
.obx-contact .obx-foot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obx-contact .obx-go { white-space: nowrap; flex: none; }
.obx-contact .obx-card-top small { white-space: nowrap; }

/* Gebruikers: older logins of one person folded into one line. */
.session-stale td { color: var(--muted); font-size: 0.82rem; }

/* A card never wider than its column: long names, domains and e-mails wrap or shorten inside it. */
.obx-card { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.obx-card-top { min-width: 0; flex-wrap: wrap; }
.obx-card-top b { min-width: 0; overflow-wrap: anywhere; }
.obx-staff a { margin-left: 0; }
/* Contact cards side by side: the footer always on the bottom line, the same height in every card. */
.obx-contact { display: flex; flex-direction: column; gap: 0.55rem; }
.obx-contact .obx-foot { margin-top: auto; }

/* Board koppelen (board_link.html): the car id and key, once, with copy buttons. */
.board-secret p, .board-command { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 0.6rem; }
.board-secret span { min-width: 4.5rem; color: var(--muted); font-size: 0.85rem; }
.board-secret code, .board-command code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem 0.6rem; font-size: 0.85rem; overflow-wrap: anywhere; min-width: 0; flex: 1 1 16rem; }
.board-steps { margin: 0.4rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.6rem; }
.board-os { margin: 0.6rem 0 0.25rem; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.flash-progress { margin-top: 0.9rem; }
.flash-bar { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.flash-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.3s ease; }
#flashStatus { margin: 0.5rem 0 0; font-weight: 700; }
.flash-log { margin-top: 0.6rem; }
.flash-log pre { max-height: 14rem; overflow: auto; font-size: 0.75rem; background: var(--surface-2); border-radius: 8px; padding: 0.6rem; white-space: pre-wrap; }
.flash-manual { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.75rem; font-size: 0.85rem; color: var(--muted); }
.ride-marks { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.3rem; font-size: 0.7rem; color: var(--muted); }
.ride-marks .is-missing { color: var(--danger, #d64545); font-weight: 600; }

/* Dossier per car and per venue (dossier.py). */
.dossier-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 1rem; }
.dossier-saved { margin: 0 0 1.25rem; padding: 0.75rem 1rem; border-radius: var(--radius-console); border: 1px solid var(--success); color: var(--ink); background: var(--surface); }
.dossier-saved.is-bad { border-color: var(--danger); }
.dossier-saved a { margin-left: 0.4rem; }
.dossier-big { margin: 0.1rem 0 0.25rem; font-size: 1.1rem; }
.dossier-sub { margin: 0; font-size: 0.8rem; color: var(--muted); }
.dossier-date { white-space: nowrap; }
.dossier-edit { margin-top: 0.45rem; font-size: 0.8rem; }
.dossier-edit > summary { cursor: pointer; color: var(--accent); }
.dossier-edit-form { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.dossier-edit-form input { flex: 1 1 8rem; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; font-size: 0.85rem; padding: 0.35rem 0.5rem; }
.dossier-edit-form .console-btn { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.dossier-form { margin-bottom: 1rem; }
.dossier-form > summary { cursor: pointer; list-style: none; }
.dossier-form > summary::-webkit-details-marker { display: none; }
.dossier-form > summary h2 { display: inline; margin: 0; }
.dossier-form > summary::before { content: "+"; display: inline-block; width: 1.2rem; font-weight: 700; color: var(--muted); }
.dossier-form[open] > summary::before { content: "\2212"; }
.dossier-form[open] > summary { margin-bottom: 0.9rem; }
.dossier-checks { display: grid; gap: 0.5rem; }
.dossier-check { margin: 0; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-console); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem; }
.dossier-check legend { float: left; width: 100%; padding: 0; margin-bottom: 0.2rem; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.dossier-check label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); min-height: 2rem; }
.dossier-check input[type="radio"] { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }
.dossier-wide { flex: 1 1 18rem; }
.dossier-wide input, .dossier-wide textarea { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; font-size: 0.85rem; padding: 0.4rem 0.5rem; }
.dossier-h2 { font-family: var(--font-display); font-size: 1rem; margin: 1.5rem 0 0.75rem; }
.dossier-what div { margin-top: 0.2rem; color: var(--muted); font-size: 0.82rem; }
td.dossier-what { white-space: normal; min-width: 16rem; }
td.dossier-wrap { white-space: normal; min-width: 7rem; }
a.status-chip { text-decoration: none; }

/* ---------- Error pages (07-10-2026) ----------
   Customers (error_base.html): the whole phone in our look. Staff
   (console_error.html): the dashboard's dark card. */
body.ks-error {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; color: #ffffff;
  font-family: var(--font-body);
  background: radial-gradient(120% 60% at 50% 42%, rgba(227, 30, 36, 0.26), rgba(227, 30, 36, 0) 60%), #0b0b0c;
}
.ks-error-top { position: relative; padding: calc(22px + env(safe-area-inset-top, 0px)) 16px 0; text-align: center; }
.ks-error-logo { height: 56px; width: auto; }
.ks-error-stripe { display: block; width: 46px; height: 4px; border-radius: 2px; background: #e31e24; margin: 12px auto 0; }
.ks-error-help { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: 16px; text-align: left; }
.ks-error-help > summary { list-style: none; cursor: pointer; font-size: 0.8rem; font-weight: 800; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; padding: 0.35rem 0.85rem; }
.ks-error-help > summary::-webkit-details-marker { display: none; }
.ks-error-help[open] > summary { background: rgba(255, 255, 255, 0.12); }
.ks-error-help-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(80vw, 290px); background: #17181c; border: 1px solid #2a2c32; border-radius: 14px; padding: 14px 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); z-index: 2; }
.ks-error-help-panel b { display: block; margin-bottom: 6px; }
.ks-error-help-panel p { margin: 0 0 8px; font-size: 0.88rem; line-height: 1.45; color: #c9cbd1; }
.ks-error-help-panel p:last-child { margin-bottom: 0; }
.ks-error-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; width: 100%; max-width: 30rem; margin: 0 auto; padding: 24px 22px; box-sizing: border-box; }
.ks-error-icon svg { display: block; width: 96px; height: 96px; }
.ks-error-main h1 { font-family: var(--font-display); font-size: clamp(1.75rem, 7vw, 2.3rem); line-height: 1.12; font-weight: 800; margin: 0; text-wrap: balance; }
.ks-error-main p { margin: 0; font-size: 1.02rem; line-height: 1.55; color: #c9cbd1; }
.ks-error-main p.ks-error-hint { font-size: 0.88rem; color: #9a9da5; }
.ks-error-venue { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; background: rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 5px 12px; }
.ks-error-venue i { width: 7px; height: 7px; border-radius: 50%; background: #f5a524; }
.ks-error-btn { display: block; width: 100%; max-width: 300px; margin-top: 8px; background: #e31e24; color: #ffffff; font: inherit; font-weight: 800; font-size: 1rem; padding: 0.95rem 1.2rem; border: 0; border-radius: 12px; text-decoration: none; cursor: pointer; }
.ks-error-btn:focus-visible, .ks-error-help > summary:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.ks-error-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.ks-error-langs a { color: #c9cbd1; font-size: 0.78rem; font-weight: 700; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 3px 10px; }
.ks-error-langs a.active { color: #ffffff; border-color: #ffffff; }
.ks-error-foot { padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ks-error-foot b { display: block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.ks-error-foot span { display: block; margin-top: 6px; font-size: 0.75rem; color: #8d9098; }
.ks-error-foot a { color: inherit; }
body.ks-staff-error {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 34px 16px; box-sizing: border-box;
  font-family: var(--font-body); color: #eef0f3;
  background: radial-gradient(70% 70% at 50% 35%, rgba(255, 214, 10, 0.07), rgba(255, 214, 10, 0) 70%), #0d0e11;
}
.ks-staff-card { width: min(100%, 520px); display: grid; gap: 12px; background: #17181c; border: 1px solid #2a2c32; border-radius: 16px; padding: 28px 28px 26px; }
.ks-staff-logo { height: 34px; width: auto; }
.ks-staff-card h1 { font-family: var(--font-display); font-size: 1.5rem; margin: 6px 0 0; }
.ks-staff-card p { margin: 0; color: #b4b8c0; font-size: 0.95rem; }
.ks-staff-card p.ks-staff-detail { background: #0f1013; border: 1px solid #2a2c32; border-radius: 10px; padding: 10px 12px; color: #eef0f3; }
.ks-staff-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
/* Fixed colours: a page on its own doesn't know the dashboard theme chosen. */
.ks-staff-btns a, .ks-staff-btns button { font: inherit; font-size: 0.9rem; font-weight: 800; padding: 0.6rem 1rem; border-radius: 10px; text-decoration: none; cursor: pointer; }
.ks-staff-primary { background: #ffd60a; color: #141110; border: 0; }
.ks-staff-secondary { background: transparent; color: #eef0f3; border: 1px solid #3a3d44; }

/* ---------- Stickerkaart bewaren met je e-mail (_sticker_card.html) ---------- */
.sticker-keep { display: grid; gap: 0.4rem; }
/* .sticker-note and the form set a display of their own: hidden must still hide them. */
.sticker-keep [hidden] { display: none; }
.sticker-keep .ride-link { font-size: inherit; text-decoration: underline; }
.sticker-keep-form { display: grid; gap: 0.35rem; margin-top: 0.2rem; }
.sticker-keep-form label { font-size: 0.78rem; font-weight: 800; color: var(--kiosk-muted); }
.sticker-keep-form small { font-size: 0.7rem; color: var(--kiosk-muted); }
.sticker-keep-row { display: flex; gap: 0.4rem; }
.sticker-keep-row input { flex: 1; min-width: 0; font: inherit; font-size: 0.9rem; padding: 0.55rem 0.7rem; border: 2px solid var(--kiosk-line); border-radius: 10px; background: #fff; color: var(--kiosk-ink); }
.sticker-keep-btn { flex: none; font: inherit; font-weight: 800; font-size: 0.85rem; padding: 0.55rem 0.9rem; border: 0; border-radius: 10px; background: var(--kiosk-red); color: #fff; cursor: pointer; }
.sticker-keep-btn:disabled { opacity: 0.6; }
.sticker-keep-msg { margin: 0; font-size: 0.8rem; font-weight: 700; color: #1a7f45; }
.sticker-keep-msg.is-bad { color: var(--kiosk-red); }

/* ---------- Search (search.html, the box in base_console.html) ---------- */
.console-search { margin-left: auto; flex: 0 1 18rem; min-width: 0; }
.console-search input { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font: inherit; font-size: 0.85rem; padding: 0.45rem 0.9rem; }
.console-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 640px) { .console-search { flex: 1 1 100%; margin-left: 0; } }
.search-page-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin: 0 0 0.6rem; }
.search-page-form input[type="search"] { flex: 1 1 18rem; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font: inherit; font-size: 1rem; padding: 0.6rem 0.8rem; }
.search-scope { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.search-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 1rem; align-items: start; }
.search-group h2 { display: flex; align-items: center; gap: 0.5rem; }
.search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.search-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.6rem; padding: 0.55rem 0.6rem; margin: 0 -0.6rem; border-radius: 8px; color: var(--ink); text-decoration: none; }
.search-list a:hover, .search-list a:focus-visible { background: var(--surface-2); }
.search-list b { font-size: 0.92rem; overflow-wrap: anywhere; }
.search-list .status-chip { justify-self: end; align-self: start; }
.search-meta { grid-column: 1 / -1; font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.search-snippet { color: var(--ink); opacity: 0.8; }