/* Shared card component for rides/stays/flights, used by both the Travel
   hub (app/views/travel/index.html.erb) and Search (app/views/schedule/
   search.html.erb) so the two pages render the exact same markup for the
   same record — same look, same actions, same navigation — instead of two
   independently maintained visual styles for one underlying model.

   Namespaced under .tcard-list / .tcard (not .trv-page's original bare
   .row/.av/etc) since those bare names are already independently reused
   and scoped by several other pages (advice_questions, coordination/
   minimal) — reusing them unscoped here would collide.

   Colors reuse the site-wide --color-* tokens (application.css) rather
   than .trv-page's local short aliases, so this renders correctly on any
   page without needing that page to also define --ink/--fog/etc. */

.tcard-list {
  background: var(--color-neutral-paper);
  border: 1px solid var(--color-neutral-fog);
  border-radius: 16px;
  padding: 2px 22px;
  box-shadow: 0 1px 3px rgba(21, 20, 19, 0.05);
}

.tcard { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--color-neutral-fog); }
.tcard:last-child { border-bottom: 0; }
/* Search's filter JS (schedule_search_controller.js) hides non-matching
   cards via the `hidden` attribute (row.hidden = true), not a class. Same
   specificity as the rule above and same origin (both author rules, so the
   UA stylesheet's [hidden] doesn't apply here) — source order decides, and
   this needs to win. */
.tcard[hidden] { display: none; }

.tcard:nth-child(even) {
  border-bottom-color: var(--color-neutral-mist, #CBD5E1);
}

@supports (selector(:nth-child(even of :not([hidden])))) {
  .tcard:nth-child(even) {
    border-bottom-color: var(--color-neutral-fog, #E2E8F0);
  }
  .tcard:nth-child(even of :not([hidden])) {
    border-bottom-color: var(--color-neutral-mist, #CBD5E1);
  }
}

@supports (selector(:nth-last-child(1 of :not([hidden])))) {
  .tcard:nth-last-child(1 of :not([hidden])) {
    border-bottom: 0;
  }
}

.tcard.tcard--even {
  border-bottom-color: var(--color-neutral-mist, #CBD5E1) !important;
}

.tcard.tcard--last-visible {
  border-bottom: 0 !important;
}

.tcard__avatar { width: 34px; height: 34px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; margin-top: 1px; }
.tcard__avatar--ride { background: var(--color-brand-primary-light); color: var(--color-brand-primary); }
.tcard__avatar--room { background: var(--color-brand-gold-light); color: var(--color-brand-gold); }

.tcard__name-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.tcard__name { font-size: 15.5px; font-weight: 600; color: var(--color-neutral-ink); letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; }
a.tcard__name:hover { color: var(--color-brand-primary); }

.tcard__status { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--color-neutral-slate); }
.tcard__status .tcard__dot { width: 6px; height: 6px; border-radius: 99px; }
.tcard__status--looking .tcard__dot { background: var(--color-brand-gold); }
.tcard__status--available .tcard__dot { background: var(--color-semantic-positive); }

.tcard__route { font-size: 14px; color: var(--color-neutral-graphite); margin-top: 3px; }
.tcard__route .tcard__arrow { color: var(--color-neutral-mist); margin: 0 5px; }
.tcard__route-link { color: inherit; text-decoration: none; font-weight: 600; }
.tcard__route-link:hover { color: var(--color-brand-primary); text-decoration: underline; }

.tcard__when { display: flex; align-items: baseline; gap: 7px; margin-top: 9px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tcard__when .tcard__date { font-size: 14px; font-weight: 600; color: var(--color-neutral-ink); }
.tcard__when .tcard__at { font-size: 13px; color: var(--color-neutral-mist); }
.tcard__when .tcard__time { font-size: 14px; font-weight: 600; color: var(--color-neutral-ink); }

.tcard__cost { font-size: 13px; color: var(--color-neutral-stone); margin-top: 5px; }

.tcard__note { font-family: var(--font-serif); font-size: 13.5px; font-style: italic; color: var(--color-neutral-slate); line-height: 1.45; margin-top: 8px; max-width: 42rem; }
.tcard__note span { display: block; margin: 0; }
.tcard__note br { display: none; }

.tcard__reach { border: 1px solid var(--color-neutral-fog); background: #fff; color: var(--color-neutral-graphite); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 99px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tcard__reach:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.tcard__reach svg { width: 13px; height: 13px; }

.tcard__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; position: relative; }
.tcard__right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tcard__right .together { margin-top: 2px; }

/* ── social cluster ("together") ── */
.together { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 12px; font-weight: 650; color: var(--color-neutral-slate); max-width: 100%; }
.together__copy { white-space: nowrap; }
.together__copy strong { color: var(--color-neutral-ink); font-weight: 800; }
.together__people { display: flex; align-items: center; flex-shrink: 0; }
.together form.button_to,
.together__people > .together__avatar:not(:first-child) { margin: 0 0 0 -5px; }
.together form.button_to:first-child { margin-left: 0; }
.together__avatar { appearance: none; -webkit-appearance: none; padding: 0; width: 26px; height: 26px; border-radius: 99px; border: 2px solid var(--color-neutral-paper); font-family: var(--font-sans); font-size: 9.5px; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(21, 20, 19, 0.12); }
button.together__avatar { cursor: pointer; transition: transform .14s, box-shadow .14s; }
button.together__avatar:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(21, 20, 19, 0.16); }
.together__more { width: 26px; height: 26px; margin-left: -5px; border-radius: 99px; border: 2px solid var(--color-neutral-paper); background: var(--color-neutral-cream); color: var(--color-neutral-slate); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.together__group-form { margin: 0 4px 0 0 !important; }
.together__group-form + form.button_to,
.together__group-form + .together__avatar { margin-left: 0 !important; }
.together__group { appearance: none; -webkit-appearance: none; border: 1px solid var(--color-neutral-fog); background: var(--color-neutral-paper); color: var(--color-neutral-graphite); font-family: var(--font-sans); font-size: 11px; font-weight: 800; min-height: 26px; padding: 0 10px; border-radius: 99px; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(21, 20, 19, 0.06); }
.together__group:hover { border-color: var(--color-neutral-stone); color: var(--color-neutral-ink); }

.tcard-list form.button_to,
.tflight-list form.button_to { margin: 0; }

/* travel/_reach, travel/_share_menu, and travel/_copy_link_button are
   shared structural partials (already reused across several pages) but
   ship no CSS of their own — each consuming page supplies it. This is this
   component's copy, shared by both the ride/stay card list and the flight
   card list since both render the same three partials. */
.tcard-list .reach,
.tflight-list .reach { border: 1px solid var(--color-neutral-fog); background: #fff; color: var(--color-neutral-graphite); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 99px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tcard-list .reach:hover,
.tflight-list .reach:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.tcard-list .reach svg,
.tflight-list .reach svg { width: 13px; height: 13px; }

@media (max-width: 720px) {
  .tcard-list { padding: 2px 16px; }
  .tcard { padding: 16px 0; gap: 12px; }
  .tcard__right { align-items: flex-start; }
  .together { justify-content: flex-start; }
}


/* ── flights ── */
.tflight-list { background: var(--color-neutral-paper); border: 1px solid var(--color-neutral-fog); border-radius: 16px; padding: 2px 22px; box-shadow: 0 1px 3px rgba(21, 20, 19, 0.05); }
.tflight { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--color-neutral-fog); }
.tflight:first-child { border-top: 0; }
.tflight__airline { display: flex; align-items: center; gap: 11px; min-width: 130px; }
.tflight__logo { width: 34px; height: 34px; border-radius: 8px; background: var(--color-neutral-linen); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--color-neutral-graphite); }
.tflight__name { font-size: 13.5px; font-weight: 600; }
.tflight__stops-label { font-size: 12.5px; color: var(--color-neutral-stone); margin-top: 1px; }
.tflight__times { display: flex; align-items: center; gap: 14px; }
.tflight__times .tflight__t { font-family: var(--font-sans); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tflight__times .tflight__t .tflight__ampm { font-size: 12px; color: var(--color-neutral-stone); font-family: var(--font-sans); font-weight: 500; }
.tflight__times .tflight__seg { flex: 1; min-width: 60px; text-align: center; }
.tflight__times .tflight__dur { font-size: 11.5px; color: var(--color-neutral-stone); }
.tflight__times .tflight__line { height: 1.5px; background: var(--color-neutral-fog); position: relative; margin-top: 5px; }
.tflight__times .tflight__line::after { content: ""; position: absolute; right: 0; top: -2.5px; width: 6px; height: 6px; border-radius: 99px; background: var(--color-neutral-mist); }
.tflight__times .tflight__stops { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; margin-top: 6px; padding: 3px 7px; border-radius: 99px; background: var(--color-neutral-cream); border: 1px solid var(--color-neutral-fog); color: var(--color-neutral-graphite); font-size: 11.5px; font-weight: 650; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tflight__ap { font-size: 15px; font-weight: 700; color: var(--color-neutral-graphite); text-align: center; margin-top: 3px; letter-spacing: 0.03em; }
.tflight__date { font-size: 11.5px; color: var(--color-neutral-stone); text-align: center; margin-top: 2px; }
.tflight__times .tflight__t .tflight__dayoff { font-size: 11px; font-weight: 700; color: var(--color-brand-accent); vertical-align: super; margin-left: 2px; font-family: var(--font-sans); }
.tflight__right { text-align: right; }
.tflight__price { font-family: var(--font-sans); font-size: 19px; font-weight: 800; }
.tflight__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; position: relative; }
.tflight[hidden] { display: none; }

/* ─── Itineraries & Journey Cards ─── */
.tflight-journeys {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tflight-journey-card {
  margin-bottom: 0;
}

.tflight-journey-card[hidden],
.tflight-list[hidden] {
  display: none !important;
}

.tflight-itinerary {
  border-bottom: 0;
}

.tflight-itinerary[hidden] {
  display: none !important;
}

.tflight-itinerary:not(:has(.tflight:not([hidden]))) {
  display: none !important;
}

.tflight-itinerary__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--color-neutral-fog, #E3DED5);
}

.tflight-itinerary__header[hidden] {
  display: none !important;
}

.tflight-itinerary__header:not([hidden]) + .tflight {
  border-top: 0 !important;
}

.tflight-itinerary__route {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 750;
  color: var(--color-neutral-ink, #2A2724);
  letter-spacing: 0.01em;
}

.tflight-itinerary__icon {
  width: 14px;
  height: 14px;
  color: var(--color-brand-primary, #2563EB);
  flex-shrink: 0;
}

.tflight-itinerary__badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 650;
  color: var(--color-neutral-slate, #645D56);
  background: var(--color-neutral-cream, #FAF8F5);
  border: 1px solid var(--color-neutral-fog, #E3DED5);
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: 0.01em;
}

/* ─── Layover & Connecting Flight Indicator ─── */
.tflight-connection {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
}

.tflight-connection[hidden] {
  display: none !important;
}

.tflight-connection:not([hidden]) + .tflight {
  border-top: 0;
}

.tflight-connection__line {
  flex: 1;
  height: 0;
  border-top: 1px dashed var(--color-neutral-fog, #E3DED5);
}

.tflight-connection__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--color-neutral-cream, #FAF8F5);
  border: 1px solid var(--color-neutral-fog, #E3DED5);
  border-radius: 99px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-neutral-slate, #645D56);
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(21, 20, 19, 0.03);
  white-space: nowrap;
}

.tflight-connection__icon {
  width: 12px;
  height: 12px;
  color: var(--color-brand-primary, #2563EB);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .tflight-journeys {
    gap: 12px;
  }
  .tflight-list { padding: 2px 16px; }
  .tflight-connection {
    padding: 6px 0;
  }
  .tflight-connection__pill {
    font-size: 11px;
    padding: 3px 10px;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* The 3-column grid (airline / times / price+actions) needs ~480px of
     min-content to avoid overlap — on a phone width that clipped the price
     and any extra_content chip off the right edge with no way to see them.
     Stack into rows instead, each free to use the full card width. */
  .tflight {
    grid-template-columns: 1fr;
    grid-template-areas: "airline" "times" "right";
    padding: 16px 0;
    gap: 10px;
  }
  .tflight__airline { grid-area: airline; min-width: 0; }
  .tflight__times { grid-area: times; }
  .tflight__right { grid-area: right; text-align: left; }
  .tflight__actions { justify-content: flex-start; }
}

/* ─── Stay Reviews & Ratings Direct Inline Badge ─── */
.stay-reviews {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}

.stay-reviews__pill {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  background: var(--color-brand-gold-light, #FAF2E0);
  border: 1px solid rgba(201, 154, 59, 0.35);
  color: var(--color-brand-gold-dark, #A87E28);
  border-radius: 99px;
  padding: 1.5px 7px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s ease;
}

.stay-reviews__pill:hover {
  background: #fdf5e6;
  border-color: var(--color-brand-gold, #C99A3B);
  color: var(--color-brand-gold-dark, #8A6417);
  box-shadow: 0 1px 4px rgba(201, 154, 59, 0.18);
  text-decoration: none;
}

.stay-reviews__star {
  color: var(--color-brand-gold, #C99A3B);
  flex-shrink: 0;
}

.stay-reviews__score {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  color: var(--color-neutral-ink, #2A2724);
  letter-spacing: -0.01em;
}

.stay-reviews__count {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 0.625rem;
  color: var(--color-neutral-stone, #78716c);
}

.stay-reviews__label {
  color: var(--color-brand-gold-dark, #A87E28);
  font-weight: 700;
}

.stay-reviews__ext {
  color: var(--color-neutral-stone, #8A847A);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.stay-reviews__pill:hover .stay-reviews__ext {
  color: var(--color-brand-gold-dark, #8A6417);
}

.stay-reviews__secondary {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  font-family: var(--font-sans);
  font-size: 0.65625rem;
  font-weight: 650;
  color: var(--color-neutral-stone, #78716c);
  text-decoration: none;
  padding: 1px 5px;
  border-radius: 99px;
  background: var(--color-neutral-linen, #F6F4EF);
  border: 1px solid var(--color-neutral-fog, #E3DED5);
  line-height: 1.25;
  transition: all 0.15s ease;
}

.stay-reviews__secondary:hover {
  color: #00AA6C;
  border-color: rgba(0, 170, 108, 0.4);
  background: rgba(0, 170, 108, 0.08);
  text-decoration: none;
}

.stay-reviews__secondary .stay-reviews__ext {
  color: currentColor;
  opacity: 0.7;
}

/* ─── Address & Location Directions Toggle ─── */
.stay-address-trigger {
  background: none;
  border: 1px solid transparent;
  padding: 4px 8px;
  margin: -4px -8px;
  font: inherit;
  color: var(--color-neutral-ink, #2A2724);
  text-align: left;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.45;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.stay-address-trigger:hover {
  background: rgba(0, 0, 0, 0.035);
  border-color: var(--color-neutral-fog, #E3DED5);
}

.stay-address-trigger.is-active,
.stay-address-trigger[aria-expanded="true"] {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.stay-address-pin {
  color: var(--color-neutral-slate, #645D56);
  flex-shrink: 0;
  margin-top: 3px;
}

.stay-address-text {
  font-weight: 550;
  font-size: 0.875rem;
  color: var(--color-neutral-ink, #2A2724);
}

.stay-address-chevron {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--color-neutral-slate, #645D56);
  transition: transform 0.2s ease, color 0.15s ease;
  opacity: 0.6;
}

.stay-address-trigger:hover .stay-address-chevron {
  opacity: 1;
}

.stay-address-trigger.is-active .stay-address-chevron,
.stay-address-trigger[aria-expanded="true"] .stay-address-chevron {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--color-brand-primary, #2563EB);
}

.stay-directions-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.2rem;
  animation: stayDirectionsFade 0.16s ease-out;
}

.stay-directions-menu[hidden] {
  display: none !important;
}

@keyframes stayDirectionsFade {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.stay-directions-chip {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 5px 11px;
  font-family: var(--font-sans);
  font-weight: 650;
  font-size: 0.75rem;
  transition: all 0.12s ease;
  cursor: pointer;
  background: var(--color-neutral-linen, #F6F4EF);
  border: 1px solid var(--color-neutral-fog, #E3DED5);
  color: var(--color-neutral-graphite, #2A2724);
  border-radius: 8px;
  line-height: 1.2;
}

.stay-directions-chip:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  color: var(--color-neutral-ink, #0f172a);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.stay-directions-chip svg {
  flex-shrink: 0;
}

.stay-copy-btn {
  border: 1px dashed var(--color-neutral-fog, #cbd5e1);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.stay-copy-btn:hover {
  background: #ffffff;
  border-style: solid;
}