/* Destination tabs on the ticket lists (2026-09-30). Companion to destination-tabs.js; look only.
   A small tab strip above the tickets (the same segmented look as the Ticket / Adaptive Ticket / Strategy switch, one size smaller):
   All + one tab per destination that has tickets in the list. The choice hides the cards of the other destinations (display: none,
   the cards stay in the page). Nothing shows until the script has built the strip. Rollback: delete the destination-tabs.css line in index.html. */
.dt-strip {
  display: flex; align-items: center; gap: 2px;
  width: fit-content; max-width: calc(100% - 24px);
  margin: 12px 12px 0; padding: 2px;
  border-radius: 10px;
  background: var(--ap-fill, rgba(120, 120, 128, .12));
  overflow-x: auto; scrollbar-width: none;
}
.dt-strip::-webkit-scrollbar { display: none; }
.dt-strip[hidden] { display: none; }

.dt-strip .dt-tab {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 14px; margin: 0;
  border: 0; border-radius: 8px; background: transparent;
  font: 500 13px/1 var(--ap-font, -apple-system, system-ui, sans-serif); white-space: nowrap;
  color: var(--ap-text-2, #6e6e73);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: color .15s var(--ap-ease, ease), background .15s var(--ap-ease, ease), box-shadow .15s var(--ap-ease, ease);
}
.dt-strip .dt-tab:hover { color: var(--ap-text, #1d1d1f); }
.dt-strip .dt-tab[aria-selected="true"] {
  color: var(--ap-text, #1d1d1f); background: var(--ap-surface, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .06);
}
.dt-strip .dt-tab:focus-visible { outline: 2px solid var(--ap-blue, #4f46e5); outline-offset: 1px; }
.dt-strip .dt-n { font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ap-text-2, #6e6e73); }

/* the cards of the destinations that are not chosen */
app-main mat-expansion-panel[data-dt-hide] { display: none !important; }

@media (max-width: 700px) {
  .dt-strip { margin: 8px 8px 0; max-width: calc(100% - 16px); }
  .dt-strip .dt-tab { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .dt-strip .dt-tab { transition: none; } }