/* ==========================================================================
   TABIFLOW V2 — Trip Header + Inline Add-Stop Row
   --------------------------------------------------------------------------
   File: styles/components/trip-header.css
   Source: Mock-up/planner-v2-mockup.html §2 (Trip header + inline add-stop)
   Load order: After map-pane.css, before shell.css

   Chain 1 scope:
     Gap #1 — Trip header row fixed below V2 shell topbar.
              Shows trip name (left) and trip-level pinned fraction (right).
              DOM: #v2-trip-header (static in planner.html, updated by
              syncTripHeader() on every renderPlanner() cycle).
     Gap #9 — Inline "+ Add a stop" row inside day card body.
              Replaces split mobileStickyAddHtml (before items) +
              footer "+ Add Stop" button. One <button class="add-stop">
              pattern across all viewports, gated on v2Panel.

   All rules scoped to html.tf-v2panel — V1 users never see these surfaces.
   Scroll-body top adjustment uses html.tf-v2panel.tf-v2shell compound
   selector (trip header only exists when both flags are active).

   z-index map:
     #v2-trip-header: 115 (above .scroll-body 110; below shell topbar/tabbar 120)

   Height tokens:
     --v2-trip-header-h: 40px — compact secondary header

   !important policy: every usage annotates which rule it defeats.
   ========================================================================== */


/* ── 0. Height token ────────────────────────────────────────────────────── */
/*
 * Defined on compound selector — only active when both V2 flags are on.
 * Used below to push .scroll-body top down by the header height.
 */

html.tf-v2panel.tf-v2shell {
  --v2-trip-header-h: 40px;
}


/* ── 1. Scroll-body top adjustment ──────────────────────────────────────── */
/*
 * shell.css §7 sets .scroll-body top to var(--v2-shell-topbar-h) + safe area.
 * Under tf-v2panel the trip header sits in that gap, so push scroll-body
 * down by an additional --v2-trip-header-h.
 *
 * Specificity: html.tf-v2panel.tf-v2shell .scroll-body = (0,0,3,1) vs
 * shell.css html.tf-v2shell .scroll-body = (0,0,2,1). Extra class wins
 * without !important — but !important added defensively per loading order.
 */

html.tf-v2panel.tf-v2shell .scroll-body {
  top: calc(var(--v2-shell-topbar-h) + var(--v2-trip-header-h) + env(safe-area-inset-top, 0px)) !important;
  /* defeats shell.css L554 html.tf-v2shell .scroll-body top */
}


/* ── 2. Trip header — base (hidden outside V2 panel + shell) ────────────── */
/*
 * #v2-trip-header sits in planner.html between the V2 shell topbar and the
 * tab bar. style="display:none" set in HTML; .is-open reveals via !important.
 * Follows the same "inline-none defeated by class" pattern as V2 panes.
 */

#v2-trip-header {
  display: none;
}


/* ── 3. Trip header — revealed under V2 panel + shell ──────────────────── */
/*
 * Fixed directly below the V2 shell topbar. Full-width, 40px tall.
 * Trip name left (flex:1, ellipsis on overflow); pinned fraction right.
 * border-bottom: separates header from scroll-body content.
 * No animation — static persistent row (unlike slide-in panes).
 * padding-top: env(safe-area-inset-top) — topbar already absorbs the notch;
 * the trip header is below the topbar so no additional safe-area needed.
 */

html.tf-v2panel.tf-v2shell #v2-trip-header {
  display: flex !important; /* defeats inline style="display:none" */
  align-items: center;
  justify-content: space-between;
  gap: var(--tf-space-sm);
  position: fixed;
  top: calc(var(--v2-shell-topbar-h) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  height: var(--v2-trip-header-h);
  padding: 0 var(--tf-space-md);
  background: var(--tf-bg-page);
  border-bottom: 1px solid var(--tf-border-line);
  z-index: 115;
}


/* ── 4. Trip name span ──────────────────────────────────────────────────── */
/*
 * Left slot — trip name (from getTripDisplayName()).
 * flex:1 + overflow:hidden + text-overflow:ellipsis: truncates long names.
 * white-space:nowrap: keeps single-line.
 */

html.tf-v2panel .v2-trip-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--tf-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}


/* ── 5. Trip completion span ────────────────────────────────────────────── */
/*
 * Right slot — "N of M pinned" (hidden attr when no pinnable stops).
 * .v2-trip-num: bold numerals so "8 of 14" reads as a ratio at a glance.
 * font-variant-numeric: tabular-nums — columns stay stable as counts change.
 */

html.tf-v2panel .v2-trip-completion {
  font-size: 12px;
  color: var(--tf-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

html.tf-v2panel .v2-trip-num {
  font-weight: 600;
  color: var(--tf-text-primary);
  font-variant-numeric: tabular-nums;
}


/* ── 6. Inline "+ Add a stop" row (Gap #9) ──────────────────────────────── */
/*
 * Replaces: mobileStickyAddHtml (sticky before items, mobile-only) +
 *           conditional footer "+ Add Stop" button (desktop).
 * New: single <button class="add-stop" data-add="${i}"> rendered
 *      AFTER stopRevealHtml inside .day-body, gated on v2Panel.
 *
 * Parent prefix .day-body gives specificity (0,0,3,1) — beats any V1
 * .add-stop hypothetical at (0,0,1,0). Consistent with Panel B cascade
 * lesson (720fa28). No "menu" or "more" in class name (V1 blanket rules
 * styles.css L1484–1486; conflict-registry #3).
 *
 * Styled as a muted action row, not a prominent button:
 *   - color: --tf-text-secondary baseline
 *   - hover/focus: surface background + primary text
 *   - .plus: primary-coloured + icon to match mockup §2 visual
 *
 * min-height: 44px (--tf-tap-min) meets IW10 tap-target spec.
 * No .focus() call — v2-bug-log #1 (iOS ghost-click after tap).
 */

html.tf-v2panel .day-body .add-stop {
  display: flex;
  align-items: center;
  gap: var(--tf-space-sm);
  width: 100%;
  padding: 10px var(--tf-space-md);
  min-height: var(--tf-tap-min);
  background: none;
  border: none;
  font-size: 14px;
  font-family: inherit;
  color: var(--tf-text-secondary);
  cursor: pointer;
  text-align: left;
  border-radius: var(--tf-radius-md);
  transition: background var(--tf-duration-fast), color var(--tf-duration-fast);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html.tf-v2panel .day-body .add-stop:hover,
html.tf-v2panel .day-body .add-stop:focus-visible {
  background: var(--tf-bg-elevated);
  color: var(--tf-text-primary);
  outline: none;
}

html.tf-v2panel .day-body .add-stop:focus-visible {
  box-shadow: var(--tf-focus-ring);
}

html.tf-v2panel .day-body .plus {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--tf-primary);
  flex-shrink: 0;
  user-select: none;
}


/* ── 7. Reduced-motion override ─────────────────────────────────────────── */
/*
 * No animations introduced in this file (trip header and add-stop row are
 * static / transition-only). Dock button transitions (background/color) are
 * safe to keep per prefers-reduced-motion spec. No overrides needed.
 */


/* ── 8. "Made on this device" subline (Q1 B-9, mockup §7) ──────────────── */

/* V1 baseline — element hidden */
.v2-device-subline {
  display: none;
}

/* V2 reveal */
html.tf-v2panel .v2-device-subline {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--tf-text-muted);
  padding-top: var(--tf-space-md);
  padding-bottom: var(--tf-space-sm);
  line-height: 1.4;
  user-select: none;
}


/* ── 9. Privacy promise banner (Q1 B-10, mockup §7) ────────────────────── */

/* V1 baseline — element hidden */
.v2-privacy-banner {
  display: none;
}

/* V2 reveal */
html.tf-v2panel .v2-privacy-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--tf-space-sm);
  margin: var(--tf-space-sm) var(--tf-space-lg) var(--tf-space-lg);
  padding: var(--tf-space-md);
  background: var(--tf-bg-elevated);
  border-radius: var(--tf-radius-md);
  font-size: 12px;
  color: var(--tf-text-secondary);
  line-height: 1.5;
  text-align: left;
}


/* ── 10. Topbar "N days" meta (Q1 B-1, mockup §7) ──────────────────────── */

/* V1 baseline — element is inside .v2-shell-topbar which is already
   display:none in V1; rule included for explicitness. */
.v2-trip-meta {
  display: none;
}

/* V2 shell reveal — subdued inline text next to trip name */
html.tf-v2shell .v2-trip-meta {
  display: inline;
  font-size: 12px;
  color: var(--tf-text-secondary);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}