/* =============================================================================
   TRACKED CARD - SVG flight card with swipe-reveal panels
   Layout: 320px (shares) | 100% (flight) | 80px (actions)
   Flight panel fills container, shares/actions scroll into view
   Grid + SVG: preserveAspectRatio="none" on SVGs fills cells exactly
   ============================================================================= */

.tc {
  display: grid;
  grid-template-columns: 320px 100% 80px;
  grid-template-rows: 170px;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 0.75rem;
  /* Constrain width so flight column (100%) = 400px = SVG viewBox */
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.tc::-webkit-scrollbar {
  display: none;
}

/* Shares panel - left */
.tc-shares {
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #ffffff;
  overflow: hidden;
  position: relative;
  min-height: 0; /* Firefox: allow grid item to respect row height */
}

/* SVG border frame overlay */
.tc-shares .border-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tc-shares .shares-scroll {
  overflow-y: auto;
  min-height: 0;
  background: #ffffff;
}

/* Flight panel - center (default view) */
.tc-flight {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 0; /* Firefox: allow grid item to respect row height */
}

/* Actions panel - right */
.tc-actions {
  scroll-snap-align: start;
  min-height: 0; /* Firefox: allow grid item to respect row height */
}

/* SVG fills grid cell - preserveAspectRatio="none" handles aspect ratio */
.tc svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Shares panel SVGs: auto height so they stack in scroll area */
.tc-shares > svg,
.tc-shares .shares-scroll svg {
  height: auto;
}

/* Disable expensive SVG filters for Safari performance */
.tc g[filter] {
  filter: none;
}

/* Subtle CSS shadow - GPU accelerated, makes cards pop */
.tc-flight svg,
.tc-actions svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08))
          drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}

/* Touch feedback for action buttons */
[data-action="delete-flight"],
[data-action="delete-share"],
[data-action="edit"],
[data-action="share"] {
  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
  transform-origin: center;
}

[data-action="delete-flight"]:active,
[data-action="delete-share"]:active,
[data-action="edit"]:active,
[data-action="share"]:active {
  opacity: 0.5;
  transform: scale(0.92);
}