/* ==========================================================================
   TABIFLOW V2 — Day Card + Stop Row System
   --------------------------------------------------------------------------
   File: styles/components/cards.css
   Source: Mock-up/planner-v2-mockup.html lines 621–740, 1999–2052 (Day 8, locked)
   Load order: After buttons.css, before styles.css

   All rules scoped under html.tf-v2panel — V1 day cards and stop rows
   are unaffected until the feature flag is enabled (?v2panel=1).

   !important annotations: used only where renderPlanner() sets conflicting
   inline styles (background, padding, border, border-radius on
   .day-card-toggle and .stop-row). Will be removed when the JS template
   is updated to emit clean V2 HTML (Page 1 JS pass).

   Pre-written sections (.day-pill, .stop-marker, .travel-arrow):
   These classes don't exist in V1 HTML. CSS is ready; the JS template
   update will inject the HTML that activates them.
   ========================================================================== */


/* ==========================================================================
   DAY CARD CONTAINER
   No inline styles set by JS — these apply immediately at ?v2panel=1.
   ========================================================================== */

html.tf-v2panel .day-card {
  background: var(--tf-bg-surface);
  border: 1px solid var(--tf-border-soft);
  border-radius: var(--tf-radius-md);
  margin-bottom: var(--tf-space-sm);
  overflow: hidden;
}


/* ==========================================================================
   DAY CARD TOGGLE (header button — V1 name for the day header row)
   Inline styles set by renderPlanner(): background, border, border-radius,
   padding, margin-bottom. !important overrides; removed in JS template pass.
   ========================================================================== */

html.tf-v2panel .day-card-toggle {
  background: var(--tf-bg-elevated) !important;
  border: none !important;
  border-bottom: 1px solid var(--tf-border-line) !important;
  border-radius: 0 !important;
  padding: var(--tf-space-md) var(--tf-space-lg) !important;
  margin-bottom: 0 !important;
}

html.tf-v2panel .day-card-toggle:hover {
  background: var(--tf-bg-elevated-2) !important;
}

html.tf-v2panel .day-card-title {
  color: var(--tf-text-primary);
  font-size: 14px !important;
  font-weight: 700;
}

html.tf-v2panel .day-stop-summary {
  color: var(--tf-text-muted);
  font-size: 11px !important;
}

html.tf-v2panel .day-card-chevron {
  color: var(--tf-text-muted);
}


/* ==========================================================================
   DAY PILL — colored by day index
   Pre-written: activates when JS template injects <span class="day-pill d1">
   inside the day header. Day 1 = pink, D2 = gold, ... D6 = purple.
   ========================================================================== */

html.tf-v2panel .day-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--tf-radius-full);
  color: var(--tf-primary-ink);
}

html.tf-v2panel .day-pill.d1 { background: var(--tf-day-1-pink); }
html.tf-v2panel .day-pill.d2 { background: var(--tf-day-2-gold); }
html.tf-v2panel .day-pill.d3 { background: var(--tf-day-3-teal); }
html.tf-v2panel .day-pill.d4 { background: var(--tf-day-4-blue); }
html.tf-v2panel .day-pill.d5 { background: var(--tf-day-5-green); }
html.tf-v2panel .day-pill.d6 { background: var(--tf-day-6-purple); }


/* ==========================================================================
   DAY FRACTION BADGE — "2 of 3 pinned" in day header
   Pre-written: activates when JS template injects .day-fraction span.
   ========================================================================== */

html.tf-v2panel .day-fraction {
  margin-left: auto;
  font-size: 11px;
  color: var(--tf-text-secondary);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   DAY BODY
   desktopBodyStyle inline is empty on mobile (our target scope).
   Rules apply cleanly on mobile; desktop sidebar layout unaffected.
   ========================================================================== */

html.tf-v2panel .day-body {
  background: var(--tf-bg-surface);
  padding: var(--tf-space-sm) 0 var(--tf-space-md);
}


/* ==========================================================================
   STOP ROW
   Inline styles set by renderPlanner(): display, gap, align-items, padding,
   border-radius, background. !important overrides V1 inline; cleaned up
   in JS template pass.
   ========================================================================== */

html.tf-v2panel .stop-row {
  display: flex;
  align-items: center;
  gap: var(--tf-space-sm) !important;
  padding: var(--tf-space-md) var(--tf-space-lg) !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--tf-border-line);
  cursor: pointer;
  transition: background var(--tf-duration-fast) var(--tf-ease);
}

/* .stop-row:last-child intentionally omitted — each .stop-row is the
   only child of its .stop-item wrapper, so :last-child would match every
   row. All stop rows carry a border-bottom; the day body padding absorbs
   the final one. */

html.tf-v2panel .stop-row:hover {
  background: var(--tf-bg-elevated) !important;
}

/* .stop-item wrapper: remove V1 margin-bottom (16px inline).
   Divider lines on .stop-row handle stop separation in V2. */
html.tf-v2panel .stop-item {
  margin-bottom: 0 !important;
}

/* Draft (empty "Where to?") stop rows — dimmed */
html.tf-v2panel .stop-row.is-draft-row {
  opacity: 0.6;
}


/* ==========================================================================
   STOP MARKER — circular day-colored badge
   Pre-written: activates when JS template injects <span class="stop-marker
   pinned-d1">. Solid fill = pinned, dashed = fogged (unpinned).
   ========================================================================== */

html.tf-v2panel .stop-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--tf-bg-elevated-2);
  color: var(--tf-text-secondary);
}

html.tf-v2panel .stop-marker.pinned-d1 { background: var(--tf-day-1-pink);   color: var(--tf-primary-ink); }
html.tf-v2panel .stop-marker.pinned-d2 { background: var(--tf-day-2-gold);   color: var(--tf-primary-ink); }
html.tf-v2panel .stop-marker.pinned-d3 { background: var(--tf-day-3-teal);   color: var(--tf-primary-ink); }
html.tf-v2panel .stop-marker.pinned-d4 { background: var(--tf-day-4-blue);   color: var(--tf-primary-ink); }
html.tf-v2panel .stop-marker.pinned-d5 { background: var(--tf-day-5-green);  color: var(--tf-primary-ink); }
html.tf-v2panel .stop-marker.pinned-d6 { background: var(--tf-day-6-purple); color: var(--tf-primary-ink); }

html.tf-v2panel .stop-marker.fogged {
  background: transparent;
  color: var(--tf-text-muted);
  border: 1.5px dashed var(--tf-text-muted);
}


/* ==========================================================================
   FOGGED STOP ROW — unpinned stop in Pin Quest layer 1
   Per tom-current-task.md spec: opacity 0.4 + dashed marker (above).
   Activates when JS template adds .fogged class to .stop-row.
   ========================================================================== */

html.tf-v2panel .stop-row.fogged {
  opacity: 0.4;
}

html.tf-v2panel .stop-row.fogged .stop-label {
  color: var(--tf-text-secondary);
}


/* ==========================================================================
   STOP ROW CONTENT AREAS
   ========================================================================== */

html.tf-v2panel .stop-row-content {
  flex: 1;
  min-width: 0;
}

html.tf-v2panel .stop-row-pin-address {
  font-size: 11px;
  color: var(--tf-text-muted);
  margin-top: 2px;
}

html.tf-v2panel .stop-row-meta-chip {
  background: var(--tf-bg-elevated);
  border: 1px solid var(--tf-border-soft);
  border-radius: var(--tf-radius-full);
  color: var(--tf-text-secondary);
  font-size: 11px;
  padding: 2px 8px;
}


/* ==========================================================================
   TRAVEL ARROW — tappable transit estimate between stops
   Pre-written: activates when Page 2 JS template injects
   <button class="travel-arrow"> between stop rows (A54 route-to-next).
   Source: Mock-up lines 1999–2052.
   ========================================================================== */

html.tf-v2panel .travel-arrow {
  display: flex;
  align-items: center;
  gap: var(--tf-space-sm);
  padding: 10px var(--tf-space-md);
  margin: var(--tf-space-xs) var(--tf-space-lg);
  min-height: var(--tf-tap-min);
  background: var(--tf-bg-elevated);
  border: 1px solid var(--tf-border-soft);
  border-radius: var(--tf-radius-md);
  font-size: 12px;
  color: var(--tf-text-secondary);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: calc(100% - var(--tf-space-lg) * 2);
  transition:
    background-color var(--tf-duration-fast) var(--tf-ease),
    border-color var(--tf-duration-fast) var(--tf-ease);
}

html.tf-v2panel .travel-arrow:hover,
html.tf-v2panel .travel-arrow:active {
  background: var(--tf-bg-surface);
  border-color: var(--tf-border-line);
}

html.tf-v2panel .travel-arrow:focus-visible {
  outline: none;
  box-shadow: var(--tf-focus-ring);
}

html.tf-v2panel .travel-arrow .mode-icon {
  font-size: 16px;
  flex-shrink: 0;
}

html.tf-v2panel .travel-arrow .arrow-glyph {
  color: var(--tf-text-muted);
  font-size: 11px;
}

html.tf-v2panel .travel-arrow .approx {
  color: var(--tf-text-muted);
}

html.tf-v2panel .travel-arrow .mode {
  font-size: 10px;
  letter-spacing: 0.02em;
}

html.tf-v2panel .travel-arrow .duration {
  flex: 1;
  min-width: 0;
}

html.tf-v2panel .travel-arrow .chevron {
  margin-left: auto;
  color: var(--tf-text-muted);
  font-size: 14px;
  flex-shrink: 0;
}


/* ==========================================================================
   ADD STOP BUTTON V2 (day footer)
   ========================================================================== */

html.tf-v2panel .day-add-btn {
  color: var(--tf-text-muted);
  border: 1px dashed var(--tf-border-soft);
  font-size: 13px;
  border-radius: var(--tf-radius-md);
}

html.tf-v2panel .day-add-btn:hover {
  color: var(--tf-primary);
  border-color: var(--tf-primary);
  background: var(--tf-primary-soft);
}


/* ==========================================================================
   ACCESSIBILITY — reduce motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html.tf-v2panel .stop-row,
  html.tf-v2panel .travel-arrow {
    transition: none;
  }
}


/* ==========================================================================
   A46 TIME GUESSTIMATE — per-leg transit connector row
   Rendered by a46BuildTransitRowHtml(), inserted between consecutive stop items.
   Scoped to tf-v2panel only.
   ========================================================================== */

html.tf-v2panel .a46-transit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px 2px 16px;
  min-height: 24px;
  font-size: 11px;
  color: var(--tf-text-muted);
  letter-spacing: 0.01em;
  user-select: none;
}

html.tf-v2panel .a46-transit-row.a46-no-coords {
  opacity: 0.35;
}

html.tf-v2panel .a46-t-icon {
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

html.tf-v2panel .a46-t-label {
  line-height: 1;
}