/* ==========================================================================
   TABIFLOW V2 — Pin Modal (Page 5b)
   --------------------------------------------------------------------------
   File:  styles/components/pin-sheet.css
   Scope: All rules scoped to html.tf-v2panel — zero V1 impact.
   Pass:  1 (CSS + minimal HTML additions)
   Page:  5b (pin modal bottom-sheet visual pass)

   Components covered:
     1.  Backdrop                (.modal-backdrop)
     2.  Pin modal — bottom sheet (#pin-modal.location-workspace-mobile)
     3.  Handle bar              (::before pseudoelement)
     4.  Header                  (.modal-header inside #pin-modal)
     5.  Title swap              (.modal-title hidden, .pin-modal-v2-title shown)
     6.  Cancel button           (#pin-close)
     7.  Modal body              (.pin-modal-body — scrollable)
     8.  Search shell — L1      (.pin-search-shell, hide copy + disclaimer + quick-actions)
     9.  Layer 2 disclosure      (#pin-v2-more-ways .pin-collapsible)
    10.  Collapsible pattern     (.pin-collapsible, summary, .pin-collapsible-body)
    11.  Alt-action buttons      (.pin-alt-action)
    12.  Paste section           (.pin-paste-section — token pass)
    13.  Advanced — L3           (#pin-advanced.pin-collapsible — token pass)
    14.  Footer actions          (.pin-footer-actions, #pin-save primary, #pin-clear danger)
    15.  Row-gap suppression     (.row-gap inside #pin-modal)
    16.  Reduce motion

   !important annotations:
     - Position (left/right/bottom/padding) on .location-workspace-mobile — defeats
       V1 @media (max-width: 768px) block which uses !important on those same props.
     - Input/button color overrides — defeat V1 specificity from styles.css
       blanket rules inside #pin-modal.
     - Will be audited for removal at Integration Week 10 cleanup.

   Cascade trap notes:
     - No class names contain "menu" or "more" as root segment — safe from
       V1 #planner [class*="menu"] / [class*="more"] blanket rules.
       (#pin-v2-more-ways is ID-scoped, not a class.)
     - .modal-backdrop rule adds to existing V1 backdrop colour — V1 has no
       explicit background set on .modal-backdrop, so no conflict.
   ========================================================================== */


/* ── 1. Backdrop ─────────────────────────────────────────────────────────── */

html.tf-v2panel .modal-backdrop {
  background: rgba(0, 0, 0, 0.6);
}


/* ── 2. Pin modal — bottom sheet ─────────────────────────────────────────── */
/*
 * V1 mobile (@media max-width: 768px): left/right/bottom 10px w/ !important,
 * padding: 12px, overflow: auto.
 * V1 other mobile: inset: auto 0 0 0, overflow: auto.
 * V2: flush full-width bottom sheet — padding delegated to header + body.
 * All !important here defeat the V1 @media block equivalents.
 */

html.tf-v2panel #pin-modal.location-workspace-mobile {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  max-height: 90dvh !important;
  background: var(--tf-bg-surface) !important;
  border: 1px solid var(--tf-border-soft) !important;
  border-bottom: none !important;
  border-radius: var(--tf-radius-lg) var(--tf-radius-lg) 0 0 !important;
  color: var(--tf-text-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}


/* ── 3. Handle bar ───────────────────────────────────────────────────────── */
/*
 * Pseudoelement sits above the header — same pattern as drawer.css
 * .mobile-place-sheet::before.
 */

html.tf-v2panel #pin-modal.location-workspace-mobile::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  background: var(--tf-border-soft);
  border-radius: var(--tf-radius-full);
  margin: var(--tf-space-sm) auto var(--tf-space-xs);
  flex-shrink: 0;
}


/* ── 4. Header — elevated surface with bottom divider ───────────────────── */
/*
 * V1 (#pin-modal .modal-header): padding-bottom: 8px, border-bottom rgba(255,255,255,0.06).
 * V2: elevated bg, token border-line, consistent padding.
 */

html.tf-v2panel #pin-modal .modal-header {
  background: var(--tf-bg-elevated) !important;
  border-bottom: 1px solid var(--tf-border-line) !important;
  border-radius: 0;
  padding: var(--tf-space-md) var(--tf-space-lg) !important;
  gap: var(--tf-space-sm);
  flex-shrink: 0;
}


/* ── 5. Title swap ───────────────────────────────────────────────────────── */
/*
 * V1: .modal-title = "Set location for this stop" (14px 700 in V1 mobile media query)
 * V2: .pin-modal-v2-title = "Pin a place" (injected as first child of .modal-header)
 */

html.tf-v2panel #pin-modal .modal-title {
  display: none;
}

html.tf-v2panel #pin-modal .pin-modal-v2-title {
  display: block !important;
  font-size: 14px;
  font-weight: 600;
  color: var(--tf-text-primary);
  flex: 1;
}


/* ── 6. Cancel button ────────────────────────────────────────────────────── */

html.tf-v2panel #pin-close {
  color: var(--tf-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  min-height: var(--tf-tap-min) !important;
}


/* ── 7. Modal body — scrollable content ──────────────────────────────────── */
/*
 * flex: 1 lets body fill remaining space below header.
 * overflow-y: auto enables scroll within the sheet without scrolling the page.
 * gap: 0 — V1 set 10px gap; V2 uses margin-based spacing via .pin-collapsible.
 */

html.tf-v2panel #pin-modal .pin-modal-body {
  padding: var(--tf-space-lg) !important;
  overflow-y: auto;
  flex: 1;
  gap: 0 !important;
}


/* ── 8. Search shell — L1 ────────────────────────────────────────────────── */
/*
 * Visual: elevated card with border, radius.
 * Hidden elements:
 *   .pin-search-copy  — V1 kicker ("📍 Location") + title ("Search place first")
 *   .pin-search-label — redundant "Search place" label (search input has placeholder)
 *   .pin-search-disclaimer — class added in HTML to the verbose location-permission text
 *   .pin-quick-actions — V1 trio (current location, paste, manual) replaced by L2
 */

html.tf-v2panel #pin-modal .pin-search-shell {
  background: var(--tf-bg-elevated);
  border: 1px solid var(--tf-border-soft);
  border-radius: var(--tf-radius-md);
  padding: var(--tf-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-sm);
}

html.tf-v2panel #pin-modal .pin-search-copy {
  display: none;
}

html.tf-v2panel #pin-modal .pin-search-label {
  display: none;
}

html.tf-v2panel #pin-modal .pin-search-disclaimer {
  display: none;
}

html.tf-v2panel #pin-modal .pin-quick-actions {
  display: none !important;
}

/* Search input */
html.tf-v2panel #pin-modal .pin-search-input {
  background: var(--tf-bg-elevated-2) !important;
  border: 1px solid var(--tf-border-soft) !important;
  color: var(--tf-text-primary) !important;
  border-radius: var(--tf-radius-sm) !important;
}

html.tf-v2panel #pin-modal .pin-search-input:focus {
  border-color: var(--tf-primary) !important;
  outline: none;
  box-shadow: var(--tf-focus-ring);
}

/* Voice button */
html.tf-v2panel #pin-voice-btn {
  color: var(--tf-text-secondary) !important;
  background: transparent !important;
  border: none !important;
}

/* Voice status */
html.tf-v2panel #pin-voice-status {
  color: var(--tf-text-muted);
  font-size: 11px;
}


/* ── 9. Layer 2 — More ways to add ──────────────────────────────────────── */
/*
 * Added to planner.html with style="display:none" so V1 never sees it.
 * Under .tf-v2panel the !important defeats the inline style.
 */

html.tf-v2panel #pin-v2-more-ways {
  display: block !important;
}


/* ── 10. Collapsible <details> pattern ───────────────────────────────────── */
/*
 * Shared by #pin-v2-more-ways (L2) and #pin-advanced (L3, which gets
 * the pin-collapsible class added in planner.html).
 * summary::after ▾/▴ replaces the native <details> disclosure triangle.
 */

html.tf-v2panel #pin-modal .pin-collapsible {
  border-top: 1px solid var(--tf-border-line);
  margin-top: var(--tf-space-md);
  padding-top: var(--tf-space-md);
}

html.tf-v2panel #pin-modal .pin-collapsible summary {
  display: flex;
  align-items: center;
  list-style: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--tf-text-secondary);
  padding: var(--tf-space-xs) 0;
  font-family: inherit;
  width: 100%;
  min-height: var(--tf-tap-min);
  gap: var(--tf-space-sm);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html.tf-v2panel #pin-modal .pin-collapsible summary::-webkit-details-marker {
  display: none;
}

html.tf-v2panel #pin-modal .pin-collapsible summary::marker {
  content: none;
}

html.tf-v2panel #pin-modal .pin-collapsible summary::after {
  content: '▾';
  margin-left: auto;
  font-size: 10px;
  color: var(--tf-text-muted);
  line-height: 1;
}

html.tf-v2panel #pin-modal .pin-collapsible[open] summary::after {
  content: '▴';
}

html.tf-v2panel #pin-modal .pin-collapsible summary:focus-visible {
  outline: none;
  box-shadow: var(--tf-focus-ring);
  border-radius: var(--tf-radius-sm);
}


/* ── 11. Collapsible body ────────────────────────────────────────────────── */

html.tf-v2panel #pin-modal .pin-collapsible-body {
  padding-top: var(--tf-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-sm);
}


/* ── 12. Alt-action buttons (Layer 2 options) ───────────────────────────── */
/*
 * Four paths: current location, paste map link, drop a pin, enter manually.
 * min-height: var(--tf-tap-min) — 44px touch target per HIG.
 */

html.tf-v2panel #pin-modal .pin-alt-action {
  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-family: inherit;
  cursor: pointer;
  text-align: left;
  min-height: var(--tf-tap-min);
  transition: background var(--tf-duration-fast) var(--tf-ease);
}

html.tf-v2panel #pin-modal .pin-alt-action:hover,
html.tf-v2panel #pin-modal .pin-alt-action:active {
  background: var(--tf-bg-elevated-2);
}

html.tf-v2panel #pin-modal .pin-alt-action:focus-visible {
  outline: none;
  box-shadow: var(--tf-focus-ring);
}

html.tf-v2panel #pin-modal .pin-alt-action .pin-alt-icon {
  font-size: 16px;
  flex-shrink: 0;
}


/* ── 13. Paste section — token pass ──────────────────────────────────────── */
/*
 * .pin-paste-section always visible — "Paste a map link" in L2 delegates to
 * #pin-open-paste which reads clipboard and fills #pin-gmap below.
 */

html.tf-v2panel #pin-modal #pin-gmap {
  background: var(--tf-bg-elevated) !important;
  border: 1px solid var(--tf-border-soft) !important;
  color: var(--tf-text-primary) !important;
  border-radius: var(--tf-radius-sm) !important;
}

html.tf-v2panel #pin-modal #pin-gmap:focus {
  border-color: var(--tf-primary) !important;
  outline: none;
  box-shadow: var(--tf-focus-ring);
}

html.tf-v2panel #pin-modal .pin-paste-helper {
  color: var(--tf-text-muted);
  font-size: 11px;
}


/* ── 14. Advanced (L3) inputs — token pass ───────────────────────────────── */
/*
 * #pin-advanced gets class="pin-advanced pin-collapsible" in planner.html.
 * <details> open/close and ▾/▴ handled by the .pin-collapsible rules above.
 * V1 summary styled as ".btn.btn-ghost" — hidden by display:none on V1
 * btn class within #pin-advanced under V2 is reset below.
 */

html.tf-v2panel #pin-modal #pin-advanced > summary {
  /* Override V1 .btn.btn-ghost specificity on the Advanced summary */
  color: var(--tf-text-secondary) !important;
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html.tf-v2panel #pin-modal #pin-label-manual,
html.tf-v2panel #pin-modal #pin-lat,
html.tf-v2panel #pin-modal #pin-lng {
  background: var(--tf-bg-elevated) !important;
  border: 1px solid var(--tf-border-soft) !important;
  color: var(--tf-text-primary) !important;
  border-radius: var(--tf-radius-sm) !important;
}

html.tf-v2panel #pin-modal #pin-label-manual:focus,
html.tf-v2panel #pin-modal #pin-lat:focus,
html.tf-v2panel #pin-modal #pin-lng:focus {
  border-color: var(--tf-primary) !important;
  outline: none;
  box-shadow: var(--tf-focus-ring);
}


/* ── 15. Footer actions — Save (primary) + Remove pin (danger) ───────────── */

html.tf-v2panel #pin-modal .pin-footer-actions {
  border-top: 1px solid var(--tf-border-line) !important;
  padding-top: var(--tf-space-md) !important;
  margin-top: var(--tf-space-md);
}

html.tf-v2panel #pin-save {
  background: var(--tf-primary) !important;
  color: var(--tf-primary-ink) !important;
  border-color: var(--tf-primary) !important;
  min-height: var(--tf-tap-min) !important;
}

html.tf-v2panel #pin-save:hover {
  opacity: 0.88;
}

html.tf-v2panel #pin-clear {
  color: var(--tf-danger) !important;
  border-color: rgba(236, 94, 138, 0.32) !important;
  background: transparent !important;
  min-height: var(--tf-tap-min) !important;
}

html.tf-v2panel #pin-clear:hover {
  background: rgba(236, 94, 138, 0.08) !important;
}


/* ── 16. Row-gap suppression ─────────────────────────────────────────────── */
/*
 * V1 .row-gap divs add vertical whitespace between pin modal sections.
 * V2 uses margin-top on .pin-collapsible instead — suppress V1 gaps to
 * avoid double-spacing.
 */

html.tf-v2panel #pin-modal .row-gap {
  display: none;
}


/* ── 17. Reduce motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html.tf-v2panel #pin-modal .pin-alt-action {
    transition: none;
  }
}


/* ── 18. V2-only reveals — elements hidden by inline style in HTML ───────── */
/*
 * Inline style="display:none" is used so V1 users never see these elements.
 * !important defeats the inline style — same pattern as #pin-v2-more-ways.
 * .pin-modal-v2-title reveal is in section 5 (display: block !important there).
 */

html.tf-v2panel #pin-modal .pin-search-l1-hint {
  display: block !important;
  font-size: 11px;
  color: var(--tf-text-muted);
  margin: 0;
  line-height: 1.4;
}


/* ── 19. V1 #pin-v2-drop-map-btn — orphaned, hidden in V1 cascade ─────── */
/*
 * V1-only button (inside V1-only #pin-v2-more-ways details, which is itself
 * hidden in V2 — see L528 comment in planner.html). V2 implements drop-pin
 * via #pin-finder-drop-pin-btn in the finder shell §25. This rule keeps the
 * V1 button hidden in V1 mode (where it would otherwise show); V2 never
 * reaches it because the parent #pin-v2-more-ways is V1-only.
 */

html.tf-v2panel #pin-modal #pin-v2-drop-map-btn {
  display: none;
}


/* ── 20. Search results — token pass ─────────────────────────────────────── */
/*
 * .stop-place-results and .stop-place-result are shared with the stop drawer.
 * These rules are scoped to #pin-modal to avoid cascade bleed elsewhere.
 * V1 uses hardcoded rgba hover colors — overridden with tokens here.
 */

html.tf-v2panel #pin-modal .stop-place-results {
  background: var(--tf-bg-elevated);
  border: 1px solid var(--tf-border-soft);
  border-radius: var(--tf-radius-md);
  overflow: hidden;
  margin-top: var(--tf-space-sm);
}

html.tf-v2panel #pin-modal .stop-place-result {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--tf-border-line) !important;
  color: var(--tf-text-primary) !important;
  padding: var(--tf-space-md) !important;
}

html.tf-v2panel #pin-modal .stop-place-result:last-child {
  border-bottom: none !important;
}

html.tf-v2panel #pin-modal .stop-place-result:hover,
html.tf-v2panel #pin-modal .stop-place-result:active {
  background: var(--tf-bg-elevated-2) !important;
}

html.tf-v2panel #pin-modal .stop-place-result:focus-visible {
  outline: none;
  box-shadow: var(--tf-focus-ring);
}

html.tf-v2panel #pin-modal .stop-place-result .result-main {
  color: var(--tf-text-primary) !important;
  font-size: 13px;
  font-weight: 600;
}

html.tf-v2panel #pin-modal .stop-place-result .result-sub {
  color: var(--tf-text-muted) !important;
  font-size: 11px;
  opacity: 1 !important;
}


/* ── 21. Selection summary — token pass ──────────────────────────────────── */
/*
 * Shown after a place is selected from search results.
 * V1: bare div with .btn.btn-ghost children — no surface treatment.
 * V2: card surface matching .pin-search-shell pattern.
 */

html.tf-v2panel #pin-modal .pin-selection-summary {
  background: var(--tf-bg-elevated);
  border: 1px solid var(--tf-border-soft);
  border-radius: var(--tf-radius-md);
  padding: var(--tf-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-sm);
  margin-top: var(--tf-space-sm);
}

html.tf-v2panel #pin-modal .pin-selection-summary-kicker {
  color: var(--tf-text-muted) !important;
  font-size: 11px;
}

html.tf-v2panel #pin-modal .pin-selection-summary-label {
  color: var(--tf-text-primary) !important;
  font-size: 13px;
  font-weight: 600;
}

html.tf-v2panel #pin-modal .pin-selection-summary-address,
html.tf-v2panel #pin-modal .pin-selection-summary-support {
  color: var(--tf-text-muted) !important;
  font-size: 11px;
  opacity: 1 !important;
}

html.tf-v2panel #pin-modal .pin-selection-summary-actions {
  display: flex;
  gap: var(--tf-space-sm);
  margin-top: var(--tf-space-xs);
}

html.tf-v2panel #pin-open-link,
html.tf-v2panel #pin-selection-change {
  color: var(--tf-primary) !important;
  background: transparent !important;
  border-color: var(--tf-border-soft) !important;
  font-size: 12px !important;
  padding: var(--tf-space-xs) var(--tf-space-sm) !important;
  min-height: var(--tf-tap-min) !important;
}

html.tf-v2panel #pin-open-link:hover,
html.tf-v2panel #pin-selection-change:hover {
  background: var(--tf-primary-soft) !important;
}

html.tf-v2panel #pin-open-link:focus-visible,
html.tf-v2panel #pin-selection-change:focus-visible {
  outline: none;
  box-shadow: var(--tf-focus-ring);
}


/* ── 22. Labels — token pass ─────────────────────────────────────────────── */
/*
 * Targets .label class inside #pin-modal:
 *   "📍 Paste location" label (for #pin-gmap)
 *   "Address or place name" label (for #pin-label-manual)
 *   "Latitude" label (for #pin-lat)
 *   "Longitude" label (for #pin-lng)
 * V1: .label has white/elevated color from styles.css blanket rule.
 */

html.tf-v2panel #pin-modal .label {
  color: var(--tf-text-secondary) !important;
  font-size: 12px;
  font-weight: 500;
}


/* ── 23. Focus-visible — danger ring on Remove pin ───────────────────────── */

html.tf-v2panel #pin-clear:focus-visible {
  outline: none;
  box-shadow: var(--tf-focus-ring-danger);
}


/* ── 24. C2 — three-tab modal (tab bar + panels) ─────────────────────────── */

/* Reveal tab bar and V2 header */
html.tf-v2panel #pin-modal-tab-bar {
  display: flex !important;
  flex-shrink: 0;
  gap: 6px;
  padding: 0 var(--tf-space-lg) var(--tf-space-sm);
  border-bottom: 1px solid var(--tf-border-line);
}

html.tf-v2panel #pin-modal .pin-modal-v2-header {
  display: flex !important;
  flex-direction: column;
  gap: 1px;
}

html.tf-v2panel #pin-modal .pin-modal-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tf-text-muted);
}

html.tf-v2panel #pin-modal .pin-modal-stop-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--tf-text-primary);
}

/* Hide the old V1 title and V2 "Pin a place" title in tab mode */
html.tf-v2panel #pin-modal .modal-title,
html.tf-v2panel #pin-modal .pin-modal-v2-title {
  display: none !important;
}

/* Tab button styles */
html.tf-v2panel .pin-modal-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 4px;
  border-radius: var(--tf-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--tf-text-muted);
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  min-height: 36px;
}

html.tf-v2panel .pin-modal-tab.is-active {
  background: var(--tf-bg-elevated);
  border-color: var(--tf-border-soft);
  color: var(--tf-text-primary);
}

html.tf-v2panel .pin-modal-tab:focus-visible {
  outline: none;
  box-shadow: var(--tf-focus-ring);
}

/* Tab panels */
html.tf-v2panel .pin-tab-panel {
  display: block;
}

html.tf-v2panel .pin-tab-panel[hidden] {
  display: none !important;
}

/* Footer lives outside modal-body — never shrinks, always anchored at bottom */
html.tf-v2panel #pin-modal .pin-footer-actions {
  flex-shrink: 0;
  padding: var(--tf-space-md) var(--tf-space-lg) var(--tf-space-lg);
}

/* Tags tab panel */
html.tf-v2panel .pin-tab-tags-content {
  padding: var(--tf-space-md) 0;
}

/* Notes tab panel */
html.tf-v2panel .pin-tab-notes-content {
  padding: var(--tf-space-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-sm);
}

html.tf-v2panel .pin-notes-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--tf-text-secondary);
}

html.tf-v2panel .pin-notes-textarea {
  resize: none;
  min-height: 120px;
  color: var(--tf-text-primary) !important;
  background: var(--tf-bg-elevated) !important;
  border-color: var(--tf-border-soft) !important;
}

html.tf-v2panel .pin-notes-textarea:focus {
  border-color: var(--tf-primary) !important;
  outline: none;
  box-shadow: var(--tf-focus-ring);
}

/* "Close" button replaces "Cancel" in V2 tab mode */
html.tf-v2panel #pin-modal .pin-modal-v2-header ~ #pin-close {
  font-size: 13px;
}


/* ── 25. C2 — finder shell (Location tab finder-first) ───────────────────── */

/* Reveal finder shell and hide V1 search shell elements in V2 */
html.tf-v2panel #pin-finder-shell {
  display: flex !important;
  flex-direction: column;
  gap: var(--tf-space-sm);
}

html.tf-v2panel #pin-modal .pin-search-shell {
  display: none;
}

/* Hide V2 more-ways disclosure in V2 panel (replaced by finder + not-in-list) */
html.tf-v2panel #pin-v2-more-ways {
  display: none !important;
}

/* Hide V1 paste section in V2 (paste lives in finder shell "Not in the list?") */
html.tf-v2panel #pin-modal #pin-paste-section {
  display: none !important;
}

/* Finder label */
html.tf-v2panel .pin-finder-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--tf-text-secondary);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Finder result rows */
html.tf-v2panel .pin-finder-result {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--tf-radius-sm);
  border: 1px solid var(--tf-border-line);
  background: transparent;
  color: var(--tf-text-primary);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  margin-bottom: 5px;
  transition: background 100ms;
}

html.tf-v2panel .pin-finder-result:hover,
html.tf-v2panel .pin-finder-result:active {
  background: var(--tf-bg-elevated);
}

html.tf-v2panel .pin-finder-result:focus-visible {
  outline: none;
  box-shadow: var(--tf-focus-ring);
}

html.tf-v2panel .pin-finder-result-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

html.tf-v2panel .pin-finder-result-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.tf-v2panel .pin-finder-result-vicinity {
  font-size: 11px;
  color: var(--tf-text-muted);
}

html.tf-v2panel .pin-finder-result-icon {
  flex: 0 0 auto;
  color: var(--tf-primary);
  font-weight: 600;
  font-size: 16px;
}

html.tf-v2panel .pin-finder-empty {
  font-size: 12px;
  color: var(--tf-text-muted);
  padding: 6px 2px;
}

/* "Not in the list?" section */
html.tf-v2panel .pin-not-in-list {
  border-top: 1px solid var(--tf-border-line);
  padding-top: var(--tf-space-md);
  margin-top: var(--tf-space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--tf-space-sm);
}

html.tf-v2panel .pin-not-in-list-label {
  font-size: 11px;
  color: var(--tf-text-muted);
  font-weight: 500;
}

html.tf-v2panel .pin-google-maps-btn {
  font-size: 13px;
  min-height: var(--tf-tap-min);
}

/* V2 drop-pin entry — peer to "Find on Google Maps" inside #pin-not-in-list. */
html.tf-v2panel .pin-finder-drop-pin-btn {
  font-size: 13px;
  min-height: var(--tf-tap-min);
  margin-top: var(--tf-space-xs);
}


/* ── 26. C2 — "Not right" retry notice (map confirm overlay) ─────────────── */

.mobile-place-not-right-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #2c2310;
  color: #ef9f27;
  font-size: 12px;
  margin-bottom: 8px;
}

.mobile-place-not-right-icon {
  flex: 0 0 auto;
  font-size: 14px;
}