/* Ride Along widget styles — matches the Live Transit Detroit chrome. */

.ra-wrap {
  font-family: 'Inter', system-ui, sans-serif;
  background: rgba(12, 17, 22, 0.92);
  border: 1px solid rgba(245, 242, 234, 0.14);
  border-radius: 12px;
  padding: 16px;
  color: #F5F2EA;
  max-width: 360px;
  max-height: 70vh;
  overflow-y: auto;
}

.ra-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ra-hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: #9AA0A6;
}

.ra-select {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  background: #0C1116;
  color: #F5F2EA;
  border: 1px solid rgba(245, 242, 234, 0.2);
  border-radius: 8px;
}

.ra-empty {
  font-size: 13px;
  color: #9AA0A6;
  margin: 12px 0 0;
}

.ra-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
}

.ra-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}

.ra-route {
  font-size: 15px;
}

.ra-dest {
  font-size: 13px;
  color: #9AA0A6;
}

.ra-bus {
  margin: 0 0 12px;
  font-size: 13px;
  color: #9AA0A6;
}

.ra-here {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #F5F2EA;
}

.ra-next-time {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: #E85D1A;
}

.ra-time {
  color: #9AA0A6;
  font-size: 13px;
}

.ra-note {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.5;
  color: #9AA0A6;
}

.ra-xfer {
  display: block;
  margin: 4px 0 0;
  font-size: 12px;
  color: #9AA0A6;
}

.ra-next {
  background: rgba(232, 93, 26, 0.12);
  border: 1px solid rgba(232, 93, 26, 0.45);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
}

.ra-next-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #E85D1A;
}

.ra-next-name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.ra-next-x {
  margin: 6px 0 0;
  font-size: 13px;
  color: #9AA0A6;
}

.ra-sub {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9AA0A6;
}

.ra-stops {
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.9;
}

.ra-stop {
  color: #F5F2EA;
}

.ra-xlist {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.8;
  color: #9AA0A6;
  list-style: disc;
}

.ra-leave {
  /* Sticky at the tile's bottom edge (2026-10-16): the rider's exit
     control must be reachable without scrolling — it is the last
     element of the ride body, and position:sticky;bottom:0 pins it
     to whichever scrollport holds the tile (the card on mobile, the
     wrap on desktop) while the stops list scrolls beneath it. The
     opaque background keeps rows from showing through. */
  position: sticky;
  bottom: 0;
  margin-top: 10px;
  background: #0d1218;
  width: 100%;
  padding: 10px;
  font-size: 14px;
  background: transparent;
  color: #F5F2EA;
  border: 1px solid rgba(245, 242, 234, 0.25);
  border-radius: 8px;
  cursor: pointer;
}

.ra-leave:hover {
  border-color: #E85D1A;
  color: #E85D1A;
}

/* Return (project 11): restores the tile's previous state — a
   distinct control from Get off, which ends the ride. It sits
   directly above Get off in the ride body; Get off keeps the
   sticky bottom slot. */
.ra-return {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  font-size: 14px;
  background: transparent;
  color: #F5F2EA;
  border: 1px solid rgba(232, 93, 26, 0.55);
  border-radius: 8px;
  cursor: pointer;
}

.ra-return:hover {
  border-color: #E85D1A;
  color: #E85D1A;
}