/* ==========================================================================
   TABIFLOW V2 — Stop Drawer (per-stop edit sheet)
   --------------------------------------------------------------------------
   File: styles/components/drawer.css
   Source: Mock-up/planner-v2-mockup.html sections 7 (Drawer CSS), A44/A54
   Load order: After cards.css, before styles.css

   All rules scoped under html.tf-v2panel — V1 drawer is unaffected until
   the feature flag is enabled (?v2panel=1).

   Token-pass strategy: V1 class names (.mobile-place-sheet, .hold-popup-*)
   are reused with V2 tokens rather than renamed. This avoids touching the
   massive V1 JS template. New A44/A54 classes (.v2-bridge-btn, etc.) are
   purely additive — they don't exist in V1 HTML.

   !important annotations: used only where V1 inline or specificity conflicts
   exist. Removed at Integration week cleanup (Week 10).
   ========================================================================== */


/* ==========================================================================
   BACKDROP OVERLAY
   V1: rgba(2, 7, 18, 0.54) — deepens slightly in V2.
   ========================================================================== */

html.tf-v2panel .mobile-place-backdrop {
  background: rgba(0, 0, 0, 0.5);
}


/* ==========================================================================
   BOTTOM SHEET
   V1: background #07101c, border rgba(184,215,255,0.18), gap 12px, pad 16px.
   V2: surface bg, token border, handle bar via ::before.
   Note: positioning (left/right/bottom/max-height) stays as V1 — don't touch.
   ========================================================================== */

html.tf-v2panel .mobile-place-sheet {
  background: var(--tf-bg-surface) !important;
  border-color: var(--tf-border-soft) !important;
  color: var(--tf-text-primary) !important;
  padding-top: var(--tf-space-sm) !important;
  gap: var(--tf-space-sm) !important;
}

/* Handle bar — centered at top of sheet, purely cosmetic */
html.tf-v2panel .mobile-place-sheet::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  background: var(--tf-border-soft);
  border-radius: var(--tf-radius-full);
  margin: 0 auto var(--tf-space-xs);
  flex-shrink: 0;
}


/* ==========================================================================
   SHEET HEADER
   V1: plain flex row. V2: elevated background + bottom divider.
   ========================================================================== */

html.tf-v2panel .mobile-place-sheet-head {
  background: var(--tf-bg-elevated);
  border-bottom: 1px solid var(--tf-border-line);
  border-radius: var(--tf-radius-md) var(--tf-radius-md) 0 0;
  padding: var(--tf-space-md) var(--tf-space-lg);
  margin: calc(var(--tf-space-sm) * -1) -16px 0;
}

html.tf-v2panel .mobile-place-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tf-text-muted) !important;
}

html.tf-v2panel .mobile-place-sheet h2 {
  color: var(--tf-text-primary);
  font-size: 16px;
  font-weight: 700;
  margin: 2px 0 0;
}

html.tf-v2panel .mobile-place-close {
  color: var(--tf-text-secondary) !important;
}

/* Official name hint (V2-only, injected by JS below h2) */
html.tf-v2panel .v2-official-name-hint {
  font-size: 11px;
  color: var(--tf-text-muted);
  margin-top: 2px;
}

html.tf-v2panel .v2-official-name-hint .hint-label {
  font-weight: 600;
}

html.tf-v2panel .v2-official-name-hint .hint-value {
  color: var(--tf-text-secondary);
}


/* ==========================================================================
   TABS
   V1: border-bottom var(--line), V1 accent active color.
   V2: token border, primary-soft active state.
   ========================================================================== */

html.tf-v2panel .hold-popup-tabs {
  border-bottom-color: var(--tf-border-line);
  gap: var(--tf-space-xs);
}

html.tf-v2panel .hold-popup-tab {
  color: var(--tf-text-muted);
  background: transparent;
  border-color: transparent;
  border-radius: var(--tf-radius-sm);
}

html.tf-v2panel .hold-popup-tab.is-active {
  background: var(--tf-primary-soft);
  border-color: var(--tf-primary-soft);
  color: var(--tf-primary);
}


/* ==========================================================================
   TAG CHIPS
   V1: V1 accent rgba colors. V2: token elevated + primary tint.
   ========================================================================== */

html.tf-v2panel .hold-popup-tag-chip {
  background: var(--tf-bg-elevated);
  border-color: var(--tf-border-soft);
  color: var(--tf-text-secondary);
}

html.tf-v2panel .hold-popup-tag-chip.is-selected {
  background: var(--tf-primary-soft);
  border-color: var(--tf-primary-soft);
  color: var(--tf-primary);
}


/* ==========================================================================
   LOCATION TAB — inputs, status, controls
   ========================================================================== */

html.tf-v2panel .hold-popup-saved-status {
  color: var(--tf-text-primary);
  font-size: 13px;
  font-weight: 600;
}

html.tf-v2panel .hold-popup-saved-address {
  color: var(--tf-text-muted);
  font-size: 12px;
}

html.tf-v2panel .hold-popup-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tf-text-muted);
}

html.tf-v2panel .mobile-place-paste-input {
  background: var(--tf-bg-elevated);
  border: 1px solid var(--tf-border-soft);
  color: var(--tf-text-primary);
  border-radius: var(--tf-radius-md);
  resize: none;
}

html.tf-v2panel .mobile-place-paste-input:focus {
  border-color: var(--tf-primary);
  outline: none;
  box-shadow: var(--tf-focus-ring);
}

html.tf-v2panel .hold-popup-disclaimer {
  color: var(--tf-text-muted);
  font-size: 11px;
}

html.tf-v2panel .hold-popup-continue-btn {
  background: var(--tf-primary) !important;
  color: var(--tf-primary-ink) !important;
  border-color: var(--tf-primary) !important;
}

html.tf-v2panel .hold-popup-maps-btn {
  color: var(--tf-text-secondary) !important;
  border-color: var(--tf-border-soft) !important;
  background: transparent !important;
}

html.tf-v2panel .hold-popup-maps-btn:hover {
  color: var(--tf-primary) !important;
  border-color: var(--tf-primary) !important;
  background: var(--tf-primary-soft) !important;
}

html.tf-v2panel .hold-popup-change-btn {
  color: var(--tf-text-muted);
  border-color: var(--tf-border-soft);
  font-size: 12px;
}

html.tf-v2panel .hold-popup-change-btn:hover {
  color: var(--tf-text-secondary);
  border-color: var(--tf-text-muted);
}


/* ==========================================================================
   A44 — BRIDGE BUTTONS (View on Maps + Search Google Maps)
   Source: Mock-up section 7 (.drawer-btn), adapted for bottom-sheet context.
   Injected by JS when v2Panel + hasSavedLocation.
   ========================================================================== */

html.tf-v2panel .v2-bridge-btns {
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-sm);
}

html.tf-v2panel .v2-bridge-btn {
  display: flex;
  align-items: center;
  gap: var(--tf-space-sm);
  width: 100%;
  background: var(--tf-bg-elevated);
  border: 1px solid var(--tf-border-soft);
  color: var(--tf-text-primary);
  border-radius: var(--tf-radius-md);
  padding: var(--tf-space-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  min-height: var(--tf-tap-min);
  transition:
    background-color var(--tf-duration-fast) var(--tf-ease),
    border-color var(--tf-duration-fast) var(--tf-ease);
}

html.tf-v2panel .v2-bridge-btn:hover,
html.tf-v2panel .v2-bridge-btn:active {
  background: var(--tf-bg-elevated-2);
}

html.tf-v2panel .v2-bridge-btn:focus-visible {
  outline: none;
  box-shadow: var(--tf-focus-ring);
}

html.tf-v2panel .v2-bridge-btn .v2-btn-icon {
  font-size: 16px;
  flex-shrink: 0;
  opacity: 0.8;
}

/* ↗ external-launch indicator — signals tap will leave Tabiflow (A35 lock, sec-8) */
html.tf-v2panel .v2-bridge-btn .v2-btn-hint {
  font-size: 11px;
  color: var(--tf-text-muted);
  margin-left: auto;
  flex-shrink: 0;
}


/* ==========================================================================
   A54 — ROUTE-TO-NEXT BUTTON
   Source: Mock-up lines 1124-1144 (.route-next-btn).
   Tabi (teal) tint — matches transit/navigation theme.
   Hidden on last stop (JS skips the HTML injection entirely).
   ========================================================================== */

html.tf-v2panel .v2-route-next-btn {
  display: flex;
  align-items: center;
  gap: var(--tf-space-sm);
  width: 100%;
  background: var(--tf-tabi-bg);
  border: 1px solid var(--tf-tabi-border);
  color: var(--tf-day-3-teal);
  border-radius: var(--tf-radius-md);
  padding: var(--tf-space-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  min-height: var(--tf-tap-min);
  transition:
    background-color var(--tf-duration-fast) var(--tf-ease),
    border-color var(--tf-duration-fast) var(--tf-ease);
}

html.tf-v2panel .v2-route-next-btn:hover,
html.tf-v2panel .v2-route-next-btn:active {
  background: rgba(43, 184, 184, 0.18);
}

html.tf-v2panel .v2-route-next-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(43, 184, 184, 0.3);
}

html.tf-v2panel .v2-route-next-btn .v2-btn-icon {
  font-size: 16px;
  flex-shrink: 0;
}


/* ==========================================================================
   COPY ROW (Tags + Notes tabs) — minor V2 polish
   ========================================================================== */

html.tf-v2panel .hold-popup-copy-label {
  color: var(--tf-text-muted);
  font-size: 11px;
}


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

@media (prefers-reduced-motion: reduce) {
  html.tf-v2panel .v2-bridge-btn,
  html.tf-v2panel .v2-route-next-btn {
    transition: none;
  }
}