/* Passenger Stage 6: activity list, ride details and receipts. */
html[data-theme] body[data-page="passenger"] #passengerRidesScreen .passenger-screen-scroll {
  padding-inline: 20px;
}
html[data-theme] body[data-page="passenger"] #passengerRidesScreen .passenger-screen-head {
  padding-inline: 0;
}
html[data-theme] body[data-page="passenger"] #passengerRideHistoryTabs {
  background: var(--tg-surface-2);
  border: 1px solid var(--tg-border);
  border-radius: 15px;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(3,minmax(0,1fr));
  min-height: 52px;
  padding: 4px;
}
html[data-theme] body[data-page="passenger"] #passengerRideHistoryTabs button {
  border-radius: 11px;
  font-size: 12px;
  min-width: 0;
  padding-inline: 5px;
}
html[data-theme] body[data-page="passenger"] #passengerRideHistoryTabs button.active {
  background: var(--tg-green);
  color: var(--app-on-accent);
}
html[data-theme] body[data-page="passenger"] #passengerRideHistoryList {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
html[data-theme] body[data-page="passenger"] .passenger-ride-row {
  align-items: center;
  border-radius: 17px;
  grid-template-columns: 48px minmax(0,1fr) 18px;
  min-height: 88px;
  padding: 12px 14px;
}
html[data-theme] body[data-page="passenger"] .passenger-ride-row > span {
  align-items: center;
  background: color-mix(in srgb,var(--tg-green) 12%,var(--tg-surface-3));
  border: 1px solid color-mix(in srgb,var(--tg-green) 36%,var(--tg-border));
  border-radius: 50%;
  color: var(--tg-green);
  display: flex;
  height: 46px;
  justify-content: center;
  width: 46px;
}
html[data-theme] body[data-page="passenger"] .passenger-ride-row > span svg { height: 22px; width: 22px; }
html[data-theme] body[data-page="passenger"] .passenger-ride-row strong { font-size: 15px; }
html[data-theme] body[data-page="passenger"] .passenger-ride-row b { justify-self: start; margin-top: 2px; }
html[data-theme] body[data-page="passenger"] .passenger-history-state {
  border-radius: 17px;
  min-height: 210px;
}
html[data-theme] body[data-page="passenger"] .history-loading-spinner {
  animation: history-pulse .9s ease-in-out infinite alternate;
  background: var(--tg-green);
  border-radius: 999px;
  display: block;
  height: 5px;
  width: 42px;
}
html[data-theme] body[data-page="passenger"] #passengerInfoScreen .passenger-page-header {
  align-items: center;
}
html[data-theme] body[data-page="passenger"] #passengerInfoScreen .passenger-info-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
  gap: 12px;
  padding: 0;
}
html[data-theme] body[data-page="passenger"] #passengerInfoScreen .passenger-info-row {
  background: var(--tg-surface-2);
  border: 1px solid var(--tg-border);
  border-radius: 14px;
  min-height: 58px;
  padding: 12px 14px;
}
.history-detail-route,.history-detail-receipt {
  background: var(--tg-surface-2);
  border: 1px solid var(--tg-border);
  border-radius: 17px;
  padding: 8px 14px;
}
.history-detail-route > div { align-items: center; display: grid; gap: 12px; grid-template-columns: 34px 1fr; min-height: 68px; }
.history-detail-route > div + div { border-top: 1px solid var(--tg-border); }
.history-detail-route i { align-items: center; background: var(--tg-green); border-radius: 10px; color: var(--app-on-accent); display: flex; font-style: normal; font-weight: 850; height: 34px; justify-content: center; width: 34px; }
.history-detail-route small,.history-detail-receipt span { color: var(--tg-muted); display: block; font-size: 11px; }
.history-detail-route strong { display: block; font-size: 14px; margin-top: 3px; }
.history-detail-receipt { margin-top: 12px; }
.history-detail-receipt > div { align-items: center; display: flex; justify-content: space-between; min-height: 44px; }
.history-detail-receipt > div + div { border-top: 1px solid var(--tg-border); }
.history-detail-receipt > div:last-child strong { font-size: 20px; }
html[data-theme] body[data-page="passenger"] #passengerInfoScreen .passenger-info-actions { display: grid; gap: 10px; margin-top: 4px; }
html[data-theme] body[data-page="passenger"] #passengerInfoScreen .passenger-info-action { min-height: 56px; }
html[data-theme] body[data-page="passenger"] #passengerInfoScreen .passenger-info-action.primary { background: var(--tg-green); color: var(--app-on-accent); opacity: 1; }
html[data-theme] body[data-page="passenger"] #passengerInfoScreen .passenger-info-action.secondary { background: transparent; border: 1px solid var(--tg-green); color: var(--tg-green); }
@keyframes history-pulse { to { opacity: .32; transform: scaleX(.55); } }