/* flights.css — travel / flights view (.tv-*) */

.tv-wrap { padding: var(--space-gutter); padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
/* Header chrome (.tv-header / .tv-title / .tv-header-actions /
   .tv-icon-btn) — DELETED in commit 3: replaced by PwaPageHeader. */

/* Sub-tabs — primitive: mountTabStrip(variant:'underline') */
.tv-tabs { margin-bottom: var(--space-roomy); }

/* ─── Urgent Banner — title row delegated to uxAlertBanner ─── */
.tv-urgent {
  background: color-mix(in srgb, var(--color-error) 6%, transparent); border: 1px solid color-mix(in srgb, var(--color-error) 20%, transparent);
  border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: var(--space-roomy);
}
.tv-urgent-item {
  display: flex; align-items: center; gap: var(--space-snug); padding: 7px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent);
}
.tv-urgent-item:first-of-type { border-top: none; }
.tv-urgent-text { flex: 1; font-size: 13px; color: var(--text); }
.tv-urgent-action {
  padding: 5px 12px; border-radius: var(--radius-tight); font-size: 12px; font-weight: 600;
  cursor: pointer; border: none; white-space: nowrap;
}
.tv-urgent-action.view { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); }
.tv-urgent-action.rebook { background: color-mix(in srgb, var(--color-error) 15%, transparent); color: var(--color-error); }
.tv-urgent-action.checkin { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }

/* ─── Timeline Layout ───
   .tv-timeline migrated 2026-05-03 to .base-stack from pwa/styles/base.css.
   The .tv-timeline class stays on the element as the JS query target
   (flights.js:237 `querySelector('.tv-timeline')`) but no longer carries
   layout — the .base-stack sibling class provides it. */
.tv-tl-item { display: flex; gap: var(--space-sm); }
.tv-tl-time {
  width: 44px; flex-shrink: 0; text-align: right; padding-top: var(--space-roomy);
}
.tv-tl-hour { font-size: 14px; font-weight: 700; color: var(--text); }
.tv-tl-date { font-size: 11px; color: var(--hint); margin-top: 1px; }
.tv-tl-card { flex: 1; min-width: 0; }

/* ─── Flight Card ─── */
.tv-card {
  background: var(--bg2); border-radius: var(--radius-roomy); padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent);
}
/* v3 — Voyager Midnight muted accent palette */
.tv-card.status-on-time { border-left-color: var(--color-success); }
.tv-card.status-active { border-left-color: var(--color-primary); }
.tv-card.status-delayed { border-left-color: var(--color-warning); }
.tv-card.status-cancelled { border-left-color: var(--color-error); }
.tv-card.status-landed { border-left-color: var(--color-on-surface-variant); }
.tv-card.status-gate-open { border-left-color: var(--color-secondary); }
.tv-card.status-unknown { border-left-color: var(--color-outline); }

/* Card header / route / times — deleted in T-11. flightCard() owns
   these styles via .pwa-fc-code, .pwa-fc-airline, .pwa-fc-route,
   .pwa-fc-times, .pwa-fc-time-* (pwa/components/flight-card.js). */

/* Production-specific extras kept under .tv-card wrapper */
.tv-time-was { font-size: 10px; color: var(--color-warning); font-weight: 500; }
.tv-delay-strip { margin: 6px 0; }
.tv-countdown-strip { display: flex; justify-content: flex-end; margin: 4px 0; }
.tv-countdown {
  font-size: 12px; font-weight: 600; color: var(--link);
  align-self: center; white-space: nowrap;
}
.tv-countdown.soon { color: var(--sev-soon); }
.tv-countdown.imminent { color: var(--sev-imminent); }

/* Progress rail — deleted in T-11. flightCard() owns the 5-phase
   progress UI via .pwa-fc-progress (pwa/components/flight-card.js,
   shipped in commit 2 / a7a9cf4). The view passes opts.progress via
   window.travelTransforms.toFlightCardOpts. */

/* ─── Info Row ─── */
.tv-info {
  display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px;
  color: var(--hint); margin-bottom: var(--space-snug);
}
.tv-info-item { display: flex; align-items: center; gap: 3px; }

/* ─── Gate Badge (prominent during boarding) ─── */
.tv-gate-tba {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-tight); font-weight: 600; font-size: 12px;
  background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); animation: tv-pulse-subtle 2s ease-in-out infinite;
}
@keyframes tv-pulse-subtle { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tv-gate-tba { animation: none; }
}

/* ─── Action Buttons (3 per row, pill-shaped) ─── */
.tv-actions { display: flex; gap: var(--space-tight); flex-wrap: wrap; }
.tv-action {
  flex: 1; min-width: 0; padding: 8px 6px; border-radius: var(--radius-default);
  font-size: 11px; font-weight: 600; cursor: pointer; text-align: center;
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent);
  background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-action:active { background: color-mix(in srgb, var(--color-on-surface) 8%, transparent); }
.tv-action.primary {
  background: color-mix(in srgb, var(--color-success) 15%, transparent); border-color: color-mix(in srgb, var(--color-success) 25%, transparent); color: var(--color-success);
}
.tv-action.primary:active { background: color-mix(in srgb, var(--color-success) 25%, transparent); }
.tv-action.danger {
  background: color-mix(in srgb, var(--color-error) 12%, transparent); border-color: color-mix(in srgb, var(--color-error) 20%, transparent); color: var(--color-error);
}
.tv-action.accent {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent); border-color: color-mix(in srgb, var(--color-primary) 20%, transparent); color: var(--color-primary);
}

/* ─── Weather Strip ─── */
.tv-weather-strip {
  font-size: 11px; color: var(--hint); padding: 4px 10px; margin-bottom: var(--space-base);
  background: color-mix(in srgb, var(--color-on-surface) 3%, transparent); border-radius: var(--radius-tight);
}

/* ─── Packing Badge ─── */
.tv-pack-badge {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: var(--radius-wide); margin-bottom: var(--space-base);
}
/* ─── Packing Section (trip detail) ─── */
.tv-packing-section {
  margin-top: var(--space-gutter); border-top: 1px solid var(--border); padding-top: var(--space-sm);
}

/* ─── Travel Timeline (Detail Panel) ─── */
.tv-travel-timeline { display: flex; flex-direction: column; gap: 0; }
.tv-tl-step {
  display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: var(--space-tight);
  padding: 5px 0; font-size: 12px; color: var(--hint);
  border-left: 2px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent); margin-left: 13px; padding-left: var(--space-sm);
}
.tv-tl-step:first-child { padding-top: 0; }
.tv-tl-step:last-child { border-left-color: transparent; }
.tv-tl-step-icon { font-size: 14px; margin-left: -23px; background: var(--bg2); padding: 2px 0; }
.tv-tl-step-label { color: var(--text); font-weight: 500; }
.tv-tl-step-time { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.tv-tl-step-detail { font-size: 11px; color: var(--hint); }
.tv-tl-step-active .tv-tl-step-label { color: var(--link); font-weight: 700; }
.tv-tl-step-active .tv-tl-step-time { color: var(--link); }
.tv-tl-step-done .tv-tl-step-label { opacity: 0.5; }
.tv-tl-step-done .tv-tl-step-time { opacity: 0.5; }
.tv-tl-step-done { border-left-color: var(--link); }

/* ─── Usage / Placeholder — empty/icon/hint delegated to uxEmpty() ─── */
.tv-trips-placeholder { text-align: center; padding: 0 20px 60px; color: var(--hint); }
.tv-usage { font-size: 11px; color: var(--hint); text-align: center; margin-top: var(--space-gutter); opacity: 0.5; }
.tv-usage .warn { color: var(--color-warning); }

/* ─── Modal ─── */
.tv-modal {
  position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, var(--color-scrim) 60%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.tv-modal-content {
  background: var(--bg2); border-radius: var(--radius-lg); padding: var(--space-md); width: 300px;
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent);
}
.tv-modal-content h3 { margin-bottom: var(--space-gutter); font-size: 18px; }
.tv-input {
  width: 100%; padding: 10px 14px; border-radius: var(--radius-snug);
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 15%, transparent); background: var(--bg);
  color: var(--text); font-size: 16px; text-transform: uppercase;
  outline: none; margin-bottom: var(--space-gutter); box-sizing: border-box;
}
.tv-input:focus { border-color: var(--link); }
.tv-modal-buttons { display: flex; gap: var(--space-snug); justify-content: flex-end; }
.tv-modal-cancel { background: none; border: none; color: var(--hint); padding: 8px 16px; font-size: 15px; cursor: pointer; border-radius: var(--radius-default); }
.tv-modal-ok { background: var(--btn); color: var(--btn-text); border: none; padding: 8px 20px; border-radius: var(--radius-default); font-size: 15px; font-weight: 600; cursor: pointer; }
.tv-modal-ok:disabled { opacity: 0.5; }

/* Skeleton — primitive: uxSkeleton(height) */

/* ─── Severity tokens (shared by trip + flight cards) ─── */
.tv-card { --sev-imminent: var(--color-error); --sev-soon: var(--color-warning); --sev-upcoming: var(--color-primary); --sev-future: color-mix(in srgb, var(--color-on-surface) 45%, transparent); --sev-success: var(--color-success); }
/* Used by trip-detail header — kept after overview-card redesign moved this off the card. */

/* ─── Cross-suggestion ─── */
.tv-suggestion { border: 1px dashed color-mix(in srgb, var(--color-on-surface) 15%, transparent); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: var(--space-sm); background: color-mix(in srgb, var(--color-primary) 4%, transparent); display: flex; align-items: center; gap: var(--space-snug); }
.tv-suggestion-text { font-size: 13px; color: var(--hint); flex: 1; }
.tv-suggestion-btn { padding: 5px 14px; border-radius: var(--radius-default); background: var(--link); color: var(--color-on-primary); border: none; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.tv-suggestion-close { background: none; border: none; color: var(--hint); font-size: 16px; cursor: pointer; padding: 0 4px; flex-shrink: 0; }

/* ─── Recent Hotel Searches ─── */
.tv-recent-pills { display: flex; gap: var(--space-tight); flex-wrap: wrap; padding: 6px 0; }
.tv-recent-pill { padding: 5px 12px; border-radius: var(--radius-wide); background: color-mix(in srgb, var(--color-on-surface) 6%, transparent); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); color: var(--text); font-size: 12px; cursor: pointer; white-space: nowrap; }
.tv-recent-pill:active { background: color-mix(in srgb, var(--color-on-surface) 12%, transparent); }

/* ─── Hotel Map Tile ─── */
.tv-hotel-map { width: 100%; height: 120px; border-radius: var(--radius-default); object-fit: cover; margin-top: var(--space-base); cursor: pointer; background: color-mix(in srgb, var(--color-on-surface) 4%, transparent); }

/* ─── Hotel Filter ─── */
.tv-filter-wrap { position: relative; display: inline-flex; }
.tv-filter-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--link); display: none; }
.tv-filter-summary { font-size: 12px; color: var(--link); margin-bottom: var(--space-base); font-weight: 500; }
.tv-star-pills { display: flex; gap: var(--space-tight); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.tv-star-pill { padding: 5px 12px; border-radius: var(--radius-wide); font-size: 13px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--color-on-surface) 15%, transparent); background: none; color: var(--text); }
.tv-star-pill.active { background: var(--link); color: var(--color-on-primary); border-color: var(--link); }
.tv-filter-row { display: flex; gap: var(--space-snug); align-items: center; margin-bottom: var(--space-sm); }
.tv-filter-row label { font-size: 13px; color: var(--hint); flex-shrink: 0; }
.tv-filter-row input[type="number"] { width: 80px; padding: 6px 10px; border-radius: var(--radius-default); border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 14px; }
.tv-cancel-pill { padding: 5px 14px; border-radius: var(--radius-wide); font-size: 13px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--color-on-surface) 15%, transparent); background: none; color: var(--text); margin-bottom: var(--space-sm); display: inline-block; }
.tv-cancel-pill.active { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }

/* ─── Hotel Detail Panel ─── */
.tv-hotel-detail { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; opacity: 0; }
.tv-hotel-detail.open { max-height: 600px; opacity: 1; margin-top: var(--space-base); }
.tv-hotel-nav { display: flex; gap: 0; background: color-mix(in srgb, var(--color-on-surface) 4%, transparent); border-radius: var(--radius-default); padding: var(--space-hairline); position: sticky; top: 0; z-index: 1; margin-bottom: var(--space-base); }
.tv-hotel-nav-btn { flex: 1; padding: 6px 0; border: none; background: none; color: var(--hint); font-size: 12px; font-weight: 600; border-radius: var(--radius-tight); cursor: pointer; }
.tv-hotel-nav-btn.active { background: var(--link); color: var(--color-on-primary); }
/* Init-hidden state — `pointer-events:none` distinguishes this rule from
   the global `.hidden` shape (state toggled to .active by JS). */
.tv-hotel-section { display: none; pointer-events: none; }
.tv-hotel-section.active { display: block; pointer-events: auto; }

/* ─── Date Comparison ─── */
.tv-date-compare { margin-top: var(--space-sm); }
.tv-date-row { display: flex; align-items: center; gap: var(--space-base); padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent); font-size: 13px; cursor: pointer; }
.tv-date-row:last-child { border-bottom: none; }
.tv-date-row .date { flex: 1; color: var(--text); font-weight: 500; }
.tv-date-row .price { font-weight: 700; }
.tv-date-row .price.cheaper { color: var(--color-success); }
.tv-date-row .price.same { color: var(--hint); }
.tv-date-row .price.pricier { color: var(--color-warning); }
.tv-date-row .count { font-size: 11px; color: var(--hint); }

/* ─── Offline Badge ─── */
.tv-offline-badge { font-size: 9px; font-weight: 700; background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); padding: 2px 6px; border-radius: var(--radius-sm); margin-left: var(--space-xs); vertical-align: middle; }

/* ─── Detail Panel ─── */
.tv-detail-panel {
  max-height: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease;
  opacity: 0; margin-top: 0;
}
.tv-detail-panel.open { max-height: 900px; opacity: 1; margin-top: var(--space-snug); }
.tv-detail-section { margin-bottom: var(--space-snug); }
.tv-detail-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--hint); margin-bottom: var(--space-tight); padding-bottom: var(--space-xs);
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.tv-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; padding: 3px 0;
}
.tv-detail-row .lbl { color: var(--hint); }
.tv-detail-row .val { color: var(--text); font-weight: 500; text-align: right; }
.tv-detail-time-block {
  display: flex; gap: var(--space-sm); margin-bottom: var(--space-tight);
}
.tv-detail-time-col { flex: 1; }
.tv-detail-time-col .lbl { font-size: 10px; color: var(--hint); margin-bottom: var(--space-hairline); }
.tv-detail-time-col .val { font-size: 13px; font-weight: 600; }
.tv-detail-time-col .sub { font-size: 10px; color: var(--hint); }
.tv-detail-actions { display: flex; gap: var(--space-tight); flex-wrap: wrap; margin-top: var(--space-base); }

/* ─── Trip Cards ─── */
/* G-01: Detected-trip candidate cards (above the trips list).
   Distinct from .tv-trip-card by the dashed border so the operator
   instantly reads them as "pending decision," not committed trips. */
.tv-trips-detected {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.tv-detected-card {
  border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}
.tv-detected-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.tv-detected-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600; font-size: 14px;
  color: var(--color-on-surface);
}
.tv-detected-conf {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}
.tv-detected-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--hint);
}
.tv-detected-actions {
  margin-top: 10px;
  display: flex; gap: 6px;
}
.tv-detected-actions button {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
}

.tv-trip-card {
  border-left-color: var(--sev-upcoming);
  cursor: pointer; transition: transform 0.15s;
  padding: 14px 16px;
}
.tv-trip-card:active { transform: scale(0.99); }
.tv-trip-card.trip-active    { border-left-color: var(--color-success); }
.tv-trip-card.trip-completed { border-left-color: var(--hint); opacity: 0.7; }

/* Identity zone + smart-status banner — DELETED: tripCard() owns the
   title/route/dates/status surface internally (commit 4a). The
   nextDeadline.label/subtitle is now mapped to tripCard's callout
   slot via toTripCardOpts(); the legacy .tv-trip-identity /
   .tv-trip-status / .tv-trip-status-* rules had no remaining markup
   consumers after commit 4a. */

/* T-08 (legacy-trips-view-retirement): chip-row + detail-panel CSS
   removed. Trip-card click navigates directly to #/trips/:id (the new
   interior view). */

/* Bottom-sheet modals */
.tv-trip-modal-overlay, .tv-stage-modal-overlay, .tv-note-modal-overlay {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--color-scrim) 50%, transparent); z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
}
.tv-trip-modal {
  background: var(--bg2); border-radius: 16px 16px 0 0; padding: 20px 16px 24px;
  width: 100%; max-width: 480px; max-height: 80vh; overflow-y: auto;
  animation: tv-slide-up 0.25s ease-out;
}
@keyframes tv-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.tv-trip-modal h3 { margin: 0 0 16px; font-size: 17px; font-weight: 700; }
.tv-trip-modal-field {
  display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-sm);
}
.tv-trip-modal-field span { font-size: 12px; color: var(--hint); font-weight: 600; }
.tv-trip-modal-field input, .tv-trip-modal-field textarea {
  background: var(--bg); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent); border-radius: var(--radius-default);
  padding: 10px 12px; font-size: 15px; color: var(--text); font-family: inherit;
}
.tv-trip-modal-field input:focus, .tv-trip-modal-field textarea:focus {
  outline: none; border-color: var(--link);
}
.tv-trip-modal-actions { display: flex; gap: var(--space-base); margin-top: var(--space-gutter); }
.tv-trip-modal-btn {
  flex: 1; padding: var(--space-sm); border: none; border-radius: var(--radius-snug); font-size: 15px;
  font-weight: 600; cursor: pointer;
}
.tv-trip-modal-btn.cancel { background: color-mix(in srgb, var(--color-on-surface) 8%, transparent); color: var(--hint); }
.tv-trip-modal-btn.save { background: var(--link); color: var(--color-on-primary); }

/* ─── Flight Search ─── */
.tv-flight-search {
  background: var(--bg2); border-radius: var(--radius-roomy); padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent); margin-bottom: var(--space-roomy);
}
.tv-fs-label { font-size: 11px; color: var(--hint); display: block; margin-bottom: 3px; }
.tv-fs-input {
  width: 100%; padding: 8px 10px; border-radius: var(--radius-default);
  border: 1px solid var(--border); background: var(--input-bg, color-mix(in srgb, var(--color-on-surface) 6%, transparent));
  color: var(--text); font-size: 14px; box-sizing: border-box;
}
.tv-fs-input:focus { border-color: var(--link); outline: none; }
.tv-fs-ac {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-default);
  max-height: 180px; overflow-y: auto; box-shadow: 0 4px 12px color-mix(in srgb, var(--color-scrim) 30%, transparent);
}
.tv-fs-ac-item {
  padding: 8px 10px; cursor: pointer; font-size: 13px; color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent);
}
.tv-fs-ac-item:hover, .tv-fs-ac-item.active { background: color-mix(in srgb, var(--color-on-surface) 6%, transparent); }
.tv-fs-ac-code { font-weight: 700; margin-right: var(--space-tight); }
.tv-fs-ac-type { font-size: 11px; color: var(--hint); float: right; }

.tv-fs-sort-pill {
  padding: 5px 14px; border-radius: var(--radius-wide); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent);
  background: none; color: var(--hint); font-size: 12px; font-weight: 600; cursor: pointer;
}
.tv-fs-sort-pill.active { background: var(--link); color: var(--color-on-primary); border-color: var(--link); }

.tv-fs-offer {
  background: var(--bg2); border-radius: var(--radius-md); padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent); margin-bottom: var(--space-base);
}
.tv-fs-offer-top { margin-bottom: var(--space-base); }
.tv-fs-offer-airline { font-size: 11px; color: var(--hint); }
.tv-fs-offer-fn { font-size: 14px; font-weight: 700; }
.tv-fs-offer-price {
  margin-left: auto; font-size: 16px; font-weight: 800; color: var(--text);
}
.tv-fs-offer-price-currency { font-size: 11px; font-weight: 600; color: var(--hint); }
.tv-fs-offer-route {
  display: flex; align-items: center; gap: var(--space-tight); margin-bottom: var(--space-tight);
}
.tv-fs-offer-time { font-size: 15px; font-weight: 700; }
.tv-fs-offer-code { font-size: 11px; color: var(--hint); }
.tv-fs-offer-arrow {
  flex: 1; text-align: center; font-size: 11px; color: var(--hint);
  border-top: 1px dashed color-mix(in srgb, var(--color-on-surface) 15%, transparent); margin: 0 4px; position: relative; padding-top: var(--space-xs);
}
.tv-fs-offer-stops { font-size: 10px; color: var(--color-warning); font-weight: 600; }
.tv-fs-offer-meta {
  display: flex; gap: var(--space-snug); font-size: 11px; color: var(--hint); margin-bottom: var(--space-base);
}
.tv-fs-offer-track {
  padding: 5px 14px; border-radius: var(--radius-default); background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary); border: none; font-size: 12px; font-weight: 600; cursor: pointer;
}
.tv-fs-offer-track:disabled { opacity: 0.5; cursor: default; }
.tv-fs-combined-header {
  font-size: 14px; font-weight: 700; color: var(--text); padding: 10px 0 6px;
  display: flex; justify-content: space-between; align-items: center;
}
.tv-fs-combined-price { color: var(--link); font-size: 16px; font-weight: 800; }
.tv-fs-section-label {
  font-size: 11px; font-weight: 700; color: var(--hint); text-transform: uppercase;
  letter-spacing: 0.5px; padding: 6px 0 4px;
}
.tv-fs-recent-pills { display: flex; gap: var(--space-tight); flex-wrap: wrap; }
.tv-fs-recent-pill {
  padding: 4px 12px; border-radius: var(--radius-wide); border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent);
  background: none; color: var(--hint); font-size: 12px; cursor: pointer;
}
.tv-fs-recent-pill:hover { background: color-mix(in srgb, var(--color-on-surface) 6%, transparent); }

/* Duffel real-offers toggle — duffel-flight-booking spec Wave 3 (W3-T04). */
.tv-fs-mode-row {
  align-items: center;
  gap: var(--space-tight);
  margin: var(--space-tight) 0;
  flex-wrap: wrap;
}
.tv-fs-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.tv-fs-mode-toggle input[type=checkbox] {
  accent-color: var(--link);
}
.tv-fs-mode-label {
  font-weight: 600;
}
.tv-fs-mode-hint {
  font-size: 11px;
  color: var(--hint);
}
.tv-fs-duffel-banner {
  margin: var(--space-tight) 0;
  padding: 8px 12px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--color-warn) 12%, transparent);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}

/* ────────────────────────────────────────────────────────────────────
 * Flights view utility classes — closes the raw inline-style gap
 * (flights.js carried 122 inline `style="..."` attrs as of 2026-05-03).
 * Approach mirrors schedule.js / backlog.js sweeps. CSS-var carve-out
 * (--fl-img-h) handles dynamic per-row image sizes.
 * ──────────────────────────────────────────────────────────────────── */

/* Hidden init elements — promoted to .hidden in pwa/styles/base.css 2026-05-03.
   Markup migrated to use the global .hidden class. */

/* Empty / loading state copy. */
.fl-empty-pad        { color: var(--hint); text-align: center; padding: var(--space-wide); }
.fl-empty-pad-tight  { color: var(--hint); text-align: center; padding: var(--space-sm); }
.fl-error-pad-tight  { color: var(--color-error); text-align: center; padding: var(--space-sm); }

/* Section / heading typography. */
.fl-section-heading {
  font-size: 13px; font-weight: 700; color: var(--hint);
  padding: 12px 0 6px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.fl-form-label {
  font-size: 12px; color: var(--hint);
  display: block; margin-bottom: var(--space-xs);
}
.fl-meta-block {
  font-size: 13px; color: var(--hint);
  margin-bottom: var(--space-base);
}

/* Form inputs. */
.fl-form-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-default);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
}

/* Generic flex utilities used in flight-segment rows. */
.fl-flex-110 { flex: 1; min-width: 110px; }
.fl-flex-100-rel { flex: 1; min-width: 100px; position: relative; }
.fl-flex-130 { flex: 0 0 130px; }

/* Spacing helpers. */
.fl-mb-12 { margin-bottom: var(--space-sm); }
.fl-mt-6  { margin-top: var(--space-tight); }
.fl-px-16 { padding: 0 16px 16px; }

/* Tone classes — drop inline color: switches in summary rows. */
.fl-success-strong { color: var(--color-success); font-weight: 700; }

/* Misc text utilities. */
.fl-text-uppercase    { text-transform: uppercase; }
.fl-text-right        { text-align: right; }
.fl-text-center-mt-12 { text-align: center; margin-top: var(--space-sm); }

/* Buttons. */
.fl-btn-pill {
  padding: 4px 12px; border-radius: var(--radius-tight);
  background: var(--btn); color: var(--btn-text);
  border: none; font-size: 13px; cursor: pointer;
}
.fl-btn-secondary {
  padding: 6px 16px; border-radius: var(--radius-default);
  background: var(--btn); color: var(--btn-text);
  border: none; font-size: 13px; cursor: pointer;
}
.fl-btn-primary {
  padding: 8px 16px; border-radius: var(--radius-default);
  background: var(--link); color: var(--color-on-primary);
  border: none; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.fl-btn-disabled {
  padding: 8px 12px; border-radius: var(--radius-default);
  background: var(--btn); color: var(--btn-text);
  border: none; font-size: 14px; cursor: pointer;
  opacity: 0.4;
}
.fl-btn-icon {
  padding: var(--space-tight); border: none; background: none;
  cursor: pointer; font-size: 16px;
  align-self: flex-end; margin-bottom: var(--space-tight);
}

/* Image preview (height flows in via --fl-img-h). */
.fl-photo {
  width: 100%; height: var(--fl-img-h, 160px);
  border-radius: var(--radius-default); object-fit: cover;
  margin-bottom: var(--space-base);
}

/* Animation helper for chevron rotate. */
.fl-rotate-host { transition: transform 0.2s; display: inline-block; }

/* ── Layout wrappers ──────────────────────────────────────────────── */
.fl-flex-80        { flex: 0 0 80px; }
.fl-flex-120       { flex: 1; min-width: 120px; }

.fl-hotel-search   { padding: 12px 16px; }
.fl-hs-results     { margin-top: var(--space-sm); }
.fl-documents-pad  { padding: var(--space-gutter); }
.fl-trip-modal-scroll { max-height: 80vh; overflow-y: auto; }
.fl-modal-actions-mt  { margin-top: var(--space-base); }

/* Overview tab layout */
.fl-overview-wrap { padding: var(--space-gutter); }
/* .fl-overview-grid → .base-grid-cards | .fl-stat-grid → .base-grid-stats
   (pwa/styles/base.css). Markup composes both classes 2026-05-03. */
.fl-backlog-filters { margin-top: -8px; margin-bottom: var(--space-base); }

/* Divider between bookings sections */
.fl-section-divider { padding: 0 16px 8px; }
.fl-section-divider-line { border-bottom: 1px solid var(--border); }
.fl-tracked-title  { padding: 4px 16px 8px; font-size: 13px; font-weight: 600; color: var(--hint); }

/* ── Full-width action buttons ────────────────────────────────────── */
.fl-fs-btn {
  margin-top: var(--space-snug); width: 100%; padding: var(--space-snug);
  border-radius: var(--radius-snug);
  background: var(--link); color: var(--color-on-primary);
  border: none; font-size: 14px; font-weight: 600; cursor: pointer;
}
.fl-hs-btn {
  padding: 8px 16px; border-radius: var(--radius-default);
  background: var(--link); color: var(--color-on-primary);
  border: none; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.fl-hs-filter-btn {
  padding: 8px 12px; border-radius: var(--radius-default);
  background: var(--btn); color: var(--btn-text);
  border: none; font-size: 14px; cursor: pointer; opacity: 0.4;
}
.fl-trip-create-btn {
  padding: 10px 20px; border-radius: var(--radius-md);
  background: var(--link); color: var(--color-on-primary);
  border: none; font-size: 15px; font-weight: 600; cursor: pointer;
}
.fl-trip-detect-btn {
  padding: 10px 20px; border-radius: var(--radius-md);
  background: var(--btn); color: var(--btn-text);
  border: none; font-size: 15px; font-weight: 600; cursor: pointer;
}
.fl-track-btn {
  padding: 4px 12px; border-radius: var(--radius-tight);
  background: var(--link); color: var(--color-on-primary);
  border: none; font-size: 13px; cursor: pointer;
}
.fl-compare-btn {
  padding: 6px 16px; border-radius: var(--radius-default);
  background: var(--btn); color: var(--btn-text);
  border: none; font-size: 13px; cursor: pointer;
}

/* ── Fallback pattern card (uxCard primitives unavailable) ────────── */
.fl-fallback-card {
  padding: var(--space-gutter); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* ── Flight card inline states ────────────────────────────────────── */
.fl-card-pointer  { cursor: pointer; }
.fl-gate-close-val { color: var(--color-warning); font-weight: 600; }
.fl-info-item-dim  { margin-left: auto; opacity: 0.5; }

/* Packing badge — 3-tone state classes (replaces inline `style="background:${color}22;color:${color}"`
   which was emitting invalid `var(--color-success)22` strings). */
.fl-pack-badge-warn {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning); cursor: pointer;
}
.fl-pack-badge-tone-success {
  background: color-mix(in srgb, var(--color-success) 13%, transparent);
  color: var(--color-success); cursor: pointer;
}
.fl-pack-badge-tone-warning {
  background: color-mix(in srgb, var(--color-warning) 13%, transparent);
  color: var(--color-warning); cursor: pointer;
}
.fl-pack-badge-tone-error {
  background: color-mix(in srgb, var(--color-error) 13%, transparent);
  color: var(--color-error); cursor: pointer;
}

/* Travel-time strips */
.fl-info-success {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  padding: 6px 10px; border-radius: var(--radius-default); margin-bottom: var(--space-snug);
}
.fl-info-item-success { font-weight: 600; color: var(--color-success); }
.fl-info-primary {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  padding: 6px 10px; border-radius: var(--radius-default); margin-bottom: var(--space-snug);
}
.fl-info-item-bold { font-weight: 600; color: var(--text); }

/* Group labels in timeline */
.fl-group-today {
  font-size: 13px; font-weight: 700; color: var(--link);
  padding: 4px 0 6px; text-transform: uppercase; letter-spacing: 0.5px;
}
.fl-group-past {
  font-size: 13px; font-weight: 700; color: var(--hint);
  padding: 12px 0 6px; text-transform: uppercase; letter-spacing: 0.5px;
  opacity: 0.5; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-tight);
}
.fl-past-arrow { transition: transform 0.2s; display: inline-block; }

/* ── Flight search results ─────────────────────────────────────────── */
.fl-seats-warn    { color: var(--color-warning); }
.fl-offer-right   { text-align: right; }
.fl-divider-sm    { border-bottom: 1px solid var(--border); margin: 8px 0; }
.fl-result-count  { font-size: 12px; color: var(--hint); margin-bottom: var(--space-tight); }
.fl-alt-hint      { color: var(--hint); text-align: center; font-size: 12px; padding-bottom: var(--space-sm); }
.fl-quota-hint    { color: var(--hint); text-align: center; font-size: 12px; }

/* ── Hotel offer cards ─────────────────────────────────────────────── */
.fl-free-cancel        { color: var(--color-success); font-size: 12px; }
.fl-hotel-desc         { font-size: 12px; color: var(--hint); margin-top: var(--space-tight); line-height: 1.4; }
.fl-hotel-map-big      { width: 100%; height: 160px; border-radius: var(--radius-default); object-fit: cover; margin-bottom: var(--space-base); }
.fl-directions-link    { font-size: 12px; color: var(--link); text-decoration: none; }
.fl-hotel-card         { margin-bottom: var(--space-base); cursor: pointer; }
.fl-hotel-name         { font-size: 14px; }
.fl-hotel-price        { font-weight: 600; }
.fl-hotel-actions      { margin-top: var(--space-tight); display: flex; gap: var(--space-tight); }
.fl-free-cancel-val    { color: var(--color-success); }
.fl-compare-wrap       { text-align: center; margin-top: var(--space-sm); }

/* Date compare */
.fl-nearby-dates-title { font-size: 13px; font-weight: 600; color: var(--hint); margin-bottom: var(--space-base); }
.fl-date-row-dim       { opacity: 0.5; }

/* ── Tracking summary strip ────────────────────────────────────────── */
.fl-summary-headline {
  font-family: 'Space Grotesk', var(--font-headline, system-ui), sans-serif;
  font-size: 18px; font-weight: 600; margin-top: var(--space-hairline);
}
.fl-summary-right { display: flex; flex-direction: column; gap: var(--space-tight); align-items: flex-end; }

/* ── Tracking-summary strip init ──────────────────────────────────── */
.fl-summary-strip-init { display: none; margin-bottom: var(--space-sm); }

/* ── Flight-search toggle row ─────────────────────────────────────── */
.fl-fs-toggle { padding: 0 0 8px; cursor: pointer; }
.fl-fs-toggle-label { font-size: 13px; font-weight: 600; color: var(--link); }
.fl-fs-chevron { margin-left: auto; font-size: 11px; color: var(--hint); transition: transform 0.2s; }

/* ── Flight-search form rows ─────────────────────────────────────── */
.fl-form-row     { display: flex; gap: var(--space-base); align-items: flex-end; flex-wrap: wrap; }
.fl-form-row-mt  { display: flex; gap: var(--space-base); align-items: flex-end; flex-wrap: wrap; margin-top: var(--space-base); }

/* ── Swap button ─────────────────────────────────────────────────── */
.fl-swap-btn { padding: var(--space-tight); border: none; background: none; cursor: pointer; font-size: 16px; align-self: flex-end; margin-bottom: var(--space-tight); }

/* ── Sort bar ────────────────────────────────────────────────────── */
.fl-sort-bar { display: flex; gap: var(--space-tight); margin-bottom: var(--space-snug); }

/* ── Trip placeholder CTA row ────────────────────────────────────── */
.fl-trip-cta-row { display: flex; gap: var(--space-base); margin-top: var(--space-sm); justify-content: center; }

/* ── Bookings section title (Space Grotesk eyebrow) ─────────────── */
.fl-bookings-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-on-surface-variant);
}
.fl-bookings-title-flights { padding: 12px 16px 8px; }
.fl-bookings-title-hotels  { padding: 12px 16px 8px; }
.fl-bookings-title-cars    { padding: 24px 16px 8px; }
.fl-bookings-title-lounges { padding:  8px 16px 8px; }

/* ───────────────────────────────────────────────────────────────
   duffel-flight-booking — booking sheet + bookings list
   ─────────────────────────────────────────────────────────────── */

/* Modal sheet */
.duf-sheet-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
  z-index: 998; backdrop-filter: blur(2px);
}
.duf-sheet {
  position: fixed; inset: 8% 50% auto 50%; transform: translateX(-50%);
  width: min(560px, 92vw); max-height: 84vh; overflow-y: auto;
  background: var(--bg, #1a1a1a); color: var(--text, #f0f0f0);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px; z-index: 999;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  padding: 16px 20px;
}
.duf-sheet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.duf-sheet-title { font-size: 17px; font-weight: 600; }
.duf-sheet-close {
  background: none; border: none; color: inherit; font-size: 22px;
  cursor: pointer; line-height: 1; padding: 4px 8px;
}
.duf-sheet-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
  background: var(--surface, rgba(255,255,255,0.03)); padding: 10px 14px;
  border-radius: 8px; margin-bottom: 14px; font-size: 13px;
}
.duf-summary-fn { font-weight: 600; }
.duf-summary-route { color: var(--text-muted, #aaa); }
.duf-summary-price { font-weight: 600; text-align: right; }
.duf-summary-expiry { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted, #999); }
.duf-expiry-countdown { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--warn, #ffb84d); }

/* Form */
.duf-pax-form { display: flex; flex-direction: column; gap: 10px; }
.duf-pax-row { display: flex; gap: 10px; flex-wrap: wrap; }
.duf-pax-row label { display: flex; flex-direction: column; flex: 1 1 140px; font-size: 12px; color: var(--text-muted, #999); }
.duf-pax-row input,
.duf-pax-row select {
  margin-top: 4px; padding: 8px 10px; min-height: 40px;
  background: var(--input-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 6px; color: inherit; font-size: 14px;
}
.duf-pax-row input:focus, .duf-pax-row select:focus { outline: 2px solid var(--accent, #4d8eff); outline-offset: 1px; }
.duf-pax-passport { font-size: 13px; padding: 4px 0; }
.duf-pax-passport summary { cursor: pointer; color: var(--accent, #4d8eff); padding: 4px 0; }
.duf-pax-errors { color: var(--error, #ff6363); font-size: 13px; min-height: 18px; }
.duf-pax-submit {
  margin-top: 6px; padding: 10px 16px; min-height: 44px;
  background: var(--accent, #4d8eff); color: white;
  border: none; border-radius: 6px; font-weight: 600; font-size: 14px;
  cursor: pointer;
}
.duf-pax-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Payment surfaces */
.duf-payment { margin: 8px 0; }
.duf-payment-banner {
  font-size: 12px; padding: 8px 10px; border-radius: 6px;
  background: rgba(77, 142, 255, 0.1); border-left: 3px solid var(--accent, #4d8eff);
}
.duf-payment-banner-mock {
  background: rgba(255, 184, 77, 0.1); border-left-color: var(--warn, #ffb84d);
}
.duf-payment-mock { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.duf-card-brand {
  display: inline-block; min-width: 70px; padding: 4px 8px; font-size: 11px;
  color: var(--text-muted, #999); text-transform: uppercase; align-self: flex-end;
}

/* Confirmation */
.duf-confirm {
  background: rgba(76, 209, 138, 0.1); border: 1px solid rgba(76, 209, 138, 0.3);
  border-radius: 8px; padding: 16px; text-align: center;
}
.duf-confirm-mock {
  background: rgba(255, 184, 77, 0.08); border-color: rgba(255, 184, 77, 0.3);
}
.duf-confirm-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.duf-confirm-ref { font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px; color: var(--text-muted, #ccc); }
.duf-confirm-meta { font-size: 13px; margin: 6px 0; color: var(--text-muted, #aaa); }
.duf-confirm-note { font-size: 12px; color: var(--text-muted, #999); margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.duf-confirm-close {
  margin-top: 12px; padding: 8px 16px; min-height: 40px;
  background: var(--accent, #4d8eff); color: white;
  border: none; border-radius: 6px; font-weight: 600; cursor: pointer;
}
.hidden { display: none !important; }

/* Bookings list (sub-tab → bookings → flights section) */
.tv-fb-loading,
.tv-fb-msg,
.tv-fb-empty {
  padding: 16px; font-size: 13px; color: var(--text-muted, #999); text-align: center;
}
.tv-fb-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 16px; margin: 0 16px 8px;
  background: var(--surface, rgba(255,255,255,0.02));
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 8px;
}
.tv-fb-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tv-fb-name { font-weight: 600; flex: 1 1 auto; }
.tv-fb-badge {
  display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; border-radius: 3px;
}
.tv-fb-badge-mock { background: rgba(255, 184, 77, 0.18); color: #ffb84d; }
.tv-fb-badge-real { background: rgba(76, 209, 138, 0.18); color: #4cd18a; }
.tv-fb-price { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-muted, #ccc); }
.tv-fb-row-mid { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.tv-fb-seg {
  padding: 2px 8px; background: rgba(255,255,255,0.04); border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px;
}
.tv-fb-row-bot { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-muted, #999); }
.tv-fb-pnr { font-family: var(--font-mono, ui-monospace, monospace); }
.tv-fb-pax { flex: 1 1 auto; }
.tv-fb-cancel {
  padding: 6px 12px; min-height: 32px;
  background: transparent; color: var(--error, #ff6363);
  border: 1px solid rgba(255, 99, 99, 0.4); border-radius: 4px;
  font-size: 12px; cursor: pointer;
}
.tv-fb-cancel:hover { background: rgba(255, 99, 99, 0.08); }
.tv-fb-cancel:disabled { opacity: 0.5; cursor: not-allowed; }

/* Hotel search row */
.fl-hs-form-row { display: flex; gap: var(--space-base); flex-wrap: wrap; align-items: flex-end; }

/* ═════════════════════════════════════════════════════════════════════
 * Trips redesign 2026-05-08 — list layout
 * ═════════════════════════════════════════════════════════════════════
 * - Empty state: aspirational hero with primary CTA + 3 sample tiles.
 * - Loading skeleton: 16:9-shaped placeholders (no layout shift on load).
 * - Active trip: full-width "now playing" treatment, pinned at the top.
 * - Upcoming/past trips: 2-up grid at desktop (≥1024px), 1-up below.
 *
 * The actual card visuals live in pwa/components/trip-card.js (.pwa-tc-hero
 * surface). The wrappers here only handle layout + section grouping.
 */

.tv-trip-card { padding: 0; border-left: none; background: transparent; cursor: default; }
.tv-trip-card:active { transform: none; }

.tv-trips-active { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.tv-trips-active .tv-trip-card .pwa-tc-hero {
  /* "Now playing" elevation — taller cover, primary-tinted ring, deeper shadow. */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent),
              0 4px 24px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.tv-trips-active .tv-trip-card .pwa-tc-hero-cover { aspect-ratio: 21/9; }

.tv-trips-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) {
  .tv-trips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Empty state */
.tv-trips-empty { display: flex; flex-direction: column; gap: 28px; padding: 40px 20px; max-width: 720px; margin: 0 auto; }
.tv-trips-empty-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.tv-trips-empty-icon { font-size: 56px !important; color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  width: 96px; height: 96px; border-radius: var(--radius-full, 999px);
  display: inline-flex; align-items: center; justify-content: center;
  font-variation-settings: 'FILL' 0, 'wght' 300; }
.tv-trips-empty-title { font-family: 'Inter', system-ui, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-on-surface); margin: 4px 0 0; }
.tv-trips-empty-body { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; color: var(--color-on-surface-variant); margin: 0; max-width: 380px; }
.tv-trips-empty-actions { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.tv-trips-empty-cta { display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; border-radius: 8px; border: none; background: var(--color-primary); color: var(--color-on-primary); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; }
.tv-trips-empty-cta:hover { opacity: 0.92; }
.tv-trips-empty-cta .material-symbols-outlined { font-size: 18px; }
.tv-trips-empty-secondary { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--color-on-surface) 12%, transparent); background: transparent; color: var(--color-on-surface); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; }
.tv-trips-empty-secondary:hover { background: color-mix(in srgb, var(--color-on-surface) 6%, transparent); }
.tv-trips-empty-secondary .material-symbols-outlined { font-size: 18px; }
.tv-trips-empty-samples { padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent); }
.tv-trips-empty-samples-label { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-on-surface-variant); margin-bottom: 12px; }
.tv-trips-empty-samples-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 768px) { .tv-trips-empty-samples-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tv-trips-empty-sample { display: flex; align-items: center; gap: 12px; padding: 12px;
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 5%, transparent);
  border-radius: 8px; }
.tv-trips-empty-sample .material-symbols-outlined { font-size: 22px; color: var(--color-on-surface-variant); flex-shrink: 0; font-variation-settings: 'FILL' 0, 'wght' 300; }
.tv-trips-empty-sample-name { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--color-on-surface); }
.tv-trips-empty-sample-dates { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-on-surface-variant); margin-top: 2px; }

/* Hero-shaped loading skeleton — matches the real card's footprint so the
 * layout doesn't reflow when /api/trips resolves. */
.tv-trip-card-skel {
  background: var(--color-surface-container-low, color-mix(in srgb, var(--color-surface) 70%, transparent));
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  margin-bottom: 16px;
}
.tv-trip-card-skel-cover {
  width: 100%; aspect-ratio: 16/9;
  background: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
  position: relative; overflow: hidden;
}
.tv-trip-card-skel-cover::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--color-on-surface) 4%, transparent) 50%,
    transparent 100%);
  animation: tv-trip-skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes tv-trip-skel-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.tv-trip-card-skel-body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; }