/* ─── Shared Routebook card — 1:1 port of src/components/RouteCard.tsx ───
   Invites renders RequestCard.tsx; the public route search page has its
   corresponding RouteCard.tsx rules in index.html. Keep both aligned to
   the native components when their measurements or theme tokens change.

   Native → web mapping notes you must preserve:
     • theme.white is a SEMANTIC token — "primary foreground". In native
       it resolves to #1c1c1e in LightColors and #ffffff in DarkColors.
       Every text node in RouteCard.tsx uses theme.white and relies on
       FONT WEIGHT + SIZE for hierarchy, NOT colour. Do not use muted
       greys for the date line or section labels — that would deviate.
     • Radius.card = 24. Not 16, not 20.
     • SEP (border between card sections) is rgba(0,0,0,0.07) light /
       rgba(255,255,255,0.11) dark — note the asymmetry.
     • Section background inside the card (route row) is theme.ink5 —
       #e5e5ea light / #2c2c2c dark. Different from the card body.
     • Price pill bg is rgba(0,0,0,0.06) light / rgba(255,255,255,0.15)
       dark. No border, no shadow.
     • Seat scarcity colours are hardcoded: #22c55e / #f59e0b / #ef4444
       for plenty / urgent / full. They do NOT theme.
   -------------------------------------------------------------------- */

:root {
  --rc-fg:            #1c1c1e;             /* theme.white (LightColors) */
  --rc-card-bg:       #ffffff;             /* theme.ink3 (LightColors) */
  --rc-section-bg:    #e5e5ea;             /* theme.ink5 (LightColors) */
  --rc-border:        rgba(0,0,0,0.07);    /* card border + SEP */
  --rc-avatar-border: rgba(0,0,0,0.08);
  --rc-price-bg:      rgba(0,0,0,0.06);
  --rc-badge-bg:      #0c0c0e;             /* NEW / ARRANGED pill */
  --rc-badge-fg:      #ffffff;
  --rc-share-hover:   rgba(0,0,0,0.06);
  --rc-shadow:        none;
}
html[data-theme="dark"] {
  --rc-fg:            #ffffff;             /* theme.white (DarkColors) */
  --rc-card-bg:       #0f0f0f;             /* CardBackground fallback: theme.ink2 */
  --rc-section-bg:    #2c2c2c;             /* theme.ink5 (DarkColors) */
  --rc-border:        rgba(255,255,255,0.14);
  --rc-avatar-border: rgba(255,255,255,0.12);
  --rc-price-bg:      rgba(255,255,255,0.15);
  --rc-badge-bg:      #ffffff;
  --rc-badge-fg:      #0c0c0e;
  --rc-share-hover:   rgba(255,255,255,0.08);
  --rc-shadow:        none;                /* RequestCard has no card shadow */
}

/* ─── Card container ─ RouteCard.tsx:383-392 ─────────────────────────── */
.rc {
  display: block;
  width: 100%;
  background: var(--rc-card-bg);
  color: var(--rc-fg);
  border: 1px solid var(--rc-border);
  border-radius: 24px;             /* Radius.card */
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--rc-shadow);
  transition: transform .12s, border-color .18s;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.rc:active { transform: scale(0.948); }
.rc.rc-expired { opacity: 0.4; cursor: default; }

/* ─── WHO section ─ RouteCard.tsx:408-444 ────────────────────────────── */
.rc-who {
  display: flex;
  align-items: flex-start;
  padding: 14px 14px 13px;         /* RequestCard.tsx header */
  gap: 12px;
}
.rc-av {
  width: 44px;
  height: 44px;
  border-radius: 10px;             /* Radius.sm + 2 — not Radius.sm */
  display: grid;
  place-items: center;
  color: #ffffff;
  font-weight: 700;                /* Inter_700Bold */
  font-size: 15px;
  background: #4a6fa5;             /* fallback — pages override via inline style */
  border: 1px solid var(--rc-avatar-border);
  flex-shrink: 0;
  overflow: hidden;
}
.rc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 3px;
}
.rc-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.rc-name {
  font-weight: 600;                /* Inter_600SemiBold */
  font-size: 17px;
  letter-spacing: -0.3px;
  color: var(--rc-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.rc-leaves {
  font-weight: 400;                /* Inter_400Regular */
  font-size: 12px;
  letter-spacing: 0.1px;
  color: var(--rc-fg);             /* same colour as name — hierarchy is weight */
  margin-top: 1px;
}
.rc-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  align-self: flex-start;
}

/* NEW / ARRANGED pill — makeStyles.newBadge/confirmedBadge */
.rc-badge {
  background: var(--rc-badge-bg);
  color: var(--rc-badge-fg);
  border-radius: 4px;
  padding: 3px 7px;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
  flex-shrink: 0;
}

/* Share button — makeStyles.shareBtn { padding: 4 } */
.rc-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: 0;
  color: var(--rc-fg);
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s;
}
.rc-share ion-icon { font-size: 18px; }
.rc-share:hover { background: var(--rc-share-hover); }

/* Price pill — makeStyles.priceBadge/priceText */
.rc-price {
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--rc-price-bg);
  color: var(--rc-fg);
  font-weight: 600;                /* Inter_600SemiBold */
  font-size: 13px;
  letter-spacing: -0.1px;
  flex-shrink: 0;
}
.rc-price.rc-free { color: #4ade80; }

/* Seats pill — makeStyles.seatsBadge/seatsText */
.rc-seats {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #22c55e;             /* plenty — green-500 */
  color: #ffffff;
  font-weight: 700;                /* Inter_700Bold */
  font-size: 13px;
  letter-spacing: -0.1px;
  flex-shrink: 0;
}
.rc-seats.rc-one  { background: #f59e0b; }   /* amber-500 */
.rc-seats.rc-full { background: #ef4444; }   /* red-500 */
.rc-seats svg { width: 14px; height: 14px; display: block; color: #ffffff; }

/* ─── WHERE section ─ RouteCard.tsx:556-590 ──────────────────────────── */
.rc-route {
  display: flex;
  align-items: flex-start;
  padding: 13px 14px;
  background: var(--rc-section-bg);
  border-top: 1px solid var(--rc-border);
  border-bottom: 1px solid var(--rc-border);
}
.rc-col { flex: 1; min-width: 0; }
.rc-col-right { align-items: flex-end; text-align: right; }
.rc-arrow {
  width: 30px;
  display: flex;
  justify-content: center;
  padding-top: 19px;
  flex-shrink: 0;
  color: var(--rc-fg);
  font-size: 13px;
}
.rc-label {
  font-weight: 500;                /* Inter_500Medium */
  font-size: 9px;
  color: var(--rc-fg);             /* same primary — not muted */
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 5px;
}
.rc-city {
  font-weight: 600;                /* Inter_600SemiBold */
  font-size: 20px;
  color: var(--rc-fg);
  letter-spacing: -0.4px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rc-time {
  font-weight: 600;                /* Inter_600SemiBold routeEst */
  font-size: 12px;
  color: var(--rc-fg);
  letter-spacing: -0.1px;
  margin-top: 4px;
}

/* Mobile — allow 2-line city (native uses numberOfLines={2}) */
@media (max-width: 560px) {
  .rc-city {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 18px;
    line-height: 22px;
  }
}

/* Invite metadata gets its own row rather than squeezing the person/date. */
@media (max-width: 767px), (pointer: coarse) {
  .rc-who { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px; }
  .rc-info { margin-top: 0; }
  .rc-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .rc-right { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; }
  .rc-leaves { line-height: 18px; }
}

/* Short phone widths need room for the actual pickup/drop-off place names. */
@media (max-width: 480px) {
  .rc-route { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rc-col-right { text-align: left; align-items: flex-start; }
  .rc-arrow { display: none; }
  .rc-city {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow-wrap: anywhere;
    font-size: 18px;
    line-height: 24px;
  }
}

/* ─── School badge — compact pill next to driver name ────────────────── */
.rc-school {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: var(--rc-price-bg);
  border: 1px solid var(--rc-avatar-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rc-fg);
  letter-spacing: 0.1px;
  max-width: 160px;
}
.rc-school ion-icon { font-size: 11px; }
.rc-school-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Mutual riders ─ RouteCard.tsx:617-636 ──────────────────────────── */
.rc-mutual {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
}
.rc-mutual-avs { display: flex; }
.rc-mutual-av {
  width: 17px;
  height: 17px;
  border-radius: 8.5px;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-weight: 600;
  font-size: 5px;
  border: 2px solid var(--rc-card-bg);
}
.rc-mutual-av + .rc-mutual-av { margin-left: -5px; }
.rc-mutual-text {
  font-weight: 400;
  font-size: 11px;
  color: var(--rc-fg);
}
.rc-mutual-bold { font-weight: 500; }