/* ==========================================================================
   TABIFLOW V2 — Trip Name Menu + Guesstimate Badge
   --------------------------------------------------------------------------
   File:  styles/components/menus.css
   Scope: All rules scoped to html.tf-v2panel — zero V1 impact.
   Pass:  1 (CSS foundation)

   Components covered:
     1. Trip name button + inline rename  (.trip-name-wrap, .trip-name-btn,
                                          #trip-name-input)
     2. Trip ▾ dropdown menu             (.trip-menu and descendants)
     3. Guesstimate badge                (.day-compact-times,
                                          .v2-guesstimate-badge)

   NOTE — A46 copy: layout uses line-height + padding, not fixed heights,
   so the modal body can grow or shrink 30-50% when final lawyer text
   lands without requiring a CSS rebuild.
   ========================================================================== */


/* ── 1. Trip name button (topbar) ─────────────────────────────────────────── */

/* Hidden in V1 — the wrapper only becomes visible under tf-v2panel */
.trip-name-wrap {
  display: none;
}

html.tf-v2panel .trip-name-wrap {
  display: flex;
  align-items: center;
  position: relative;
  /* position:relative anchors the absolute-positioned .trip-menu */
}

html.tf-v2panel .trip-name-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 6px 8px;
  border-radius: var(--tf-radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--tf-text-primary);
  cursor: pointer;
  white-space: nowrap;
  min-height: var(--tf-tap-min);
  transition: color 0.15s;
}

html.tf-v2panel .trip-name-btn:hover,
html.tf-v2panel .trip-name-btn:focus-visible {
  color: var(--tf-primary);
  outline: none;
}

html.tf-v2panel .trip-name-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

html.tf-v2panel .trip-name-chevron {
  font-size: 11px;
  opacity: 0.55;
  flex-shrink: 0;
  transition: transform 0.15s;
}

html.tf-v2panel .trip-name-btn[aria-expanded="true"] .trip-name-chevron {
  transform: rotate(180deg);
}

/* Inline rename input — replaces button label while renaming */
html.tf-v2panel #trip-name-input {
  display: none;
  padding: 4px 8px;
  border: 1px solid var(--tf-primary);
  border-radius: var(--tf-radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--tf-text-primary);
  background: var(--tf-bg-elevated);
  min-width: 120px;
  max-width: 200px;
  box-shadow: var(--tf-focus-ring);
  outline: none;
}

html.tf-v2panel #trip-name-input.is-renaming {
  display: block;
}


/* ── 2. Trip ▾ dropdown menu ──────────────────────────────────────────────── */
/*
 * SPECIFICITY NOTE (v1-v2-conflict-registry entry #3)
 * V1 styles.css: `#planner [class*="menu"] { display:none !important; }`
 * Specificity (1,1,0) + !important catches every class containing "menu".
 * Fix: add #planner ID scope + !important to every display declaration so
 * V2 specificity (1,2,1) beats V1's (1,1,0) at equal !important weight.
 * Container uses ID selector #trip-menu for maximum specificity safety.
 */

html.tf-v2panel #planner #trip-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  min-width: 210px;
  background: var(--tf-bg-elevated);
  border: 1px solid var(--tf-border-soft);
  border-radius: var(--tf-radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.13);
  padding: 4px 0;
}

html.tf-v2panel #planner #trip-menu.is-open {
  display: block !important;
}

html.tf-v2panel #planner .trip-menu-header {
  display: block !important;
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tf-text-secondary);
  opacity: 0.65;
  user-select: none;
}

html.tf-v2panel #planner .trip-menu-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  font-size: 15px;
  font-family: inherit;
  color: var(--tf-text-primary);
  cursor: pointer;
  text-align: left;
  min-height: var(--tf-tap-min);
  transition: background 0.1s;
}

html.tf-v2panel #planner .trip-menu-item:hover,
html.tf-v2panel #planner .trip-menu-item:focus-visible {
  background: var(--tf-bg-surface);
  outline: none;
}

html.tf-v2panel #planner .trip-menu-icon {
  display: inline-block !important;
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

html.tf-v2panel #planner .trip-menu-item.danger {
  color: #c0392b;
}

html.tf-v2panel #planner .trip-menu-divider {
  display: block !important;
  height: 1px;
  background: var(--tf-border-soft);
  margin: 4px 0;
}

/* Mochi tips toggle — ON/OFF pill inside #mochi-tips-toggle button.
 * Sits flush-right; uses primary token tint so the state pill reads as
 * a control affordance rather than passive text. */
html.tf-v2panel #planner #mochi-tips-toggle {
  /* Ensure flex layout puts the pill flush-right */
  justify-content: flex-start;
}

html.tf-v2panel #planner #mochi-tips-toggle .trip-menu-label {
  flex: 1;
}

html.tf-v2panel #planner #mochi-tips-state {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tf-primary);
  background: rgba(127, 119, 221, 0.12);   /* tinted --tf-primary */
  border-radius: 999px;
  flex-shrink: 0;
}


/* ── 3. Guesstimate badge (compact day card) ──────────────────────────────── */

html.tf-v2panel .day-compact-times {
  font-size: 11px;
  opacity: 0.54;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px;
}

html.tf-v2panel .v2-guesstimate-badge {
  display: inline;
  background: none;
  border: none;
  border-bottom: 1px dotted currentColor;
  padding: 0;
  margin-left: 2px;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0.8;
  line-height: inherit;
}

html.tf-v2panel .v2-guesstimate-badge:hover,
html.tf-v2panel .v2-guesstimate-badge:focus-visible {
  opacity: 1;
  outline: none;
}


/* ── 4. Stop ⋮ action panel — V2 (Page 6, Section 18) ────────────────────── */
/*
 * NAMING NOTE (v1-v2-conflict-registry entry #3)
 * V1 styles.css: `#planner [class*="menu"]` and `[class*="more"]` both
 * display:none !important. Panel is outside #planner (position:fixed), but
 * class names are kept clean of both substrings as a defensive measure.
 * Uses: #stop-action-panel (ID), .stop-action-overlay, .stop-act-* prefix.
 */

/* Overlay — full-screen tap-to-dismiss backdrop */
.stop-action-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 180;
  background: transparent;
}

html.tf-v2panel .stop-action-overlay.is-open {
  display: block;
}

/* Panel container — positioned near tapped stop */
#stop-action-panel {
  display: none;
  position: fixed;
  z-index: 190;
  min-width: 240px;
  max-width: 300px;
  background: var(--tf-bg-elevated);
  border: 1px solid var(--tf-border-soft);
  border-radius: var(--tf-radius-md);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  max-height: 80dvh;
  overflow-y: auto;
}

html.tf-v2panel #stop-action-panel.is-open {
  display: block !important;
}

/* Header — "[stop name] · actions" */
html.tf-v2panel #stop-action-panel .stop-act-header {
  display: block !important;
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tf-text-secondary);
  opacity: 0.7;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action buttons */
html.tf-v2panel #stop-action-panel .stop-act-btn {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  font-size: 14px;
  font-family: inherit;
  color: var(--tf-text-primary);
  cursor: pointer;
  text-align: left;
  min-height: var(--tf-tap-min);
  transition: background 0.1s;
}

html.tf-v2panel #stop-action-panel .stop-act-btn:hover,
html.tf-v2panel #stop-action-panel .stop-act-btn:focus-visible {
  background: var(--tf-bg-surface);
  outline: none;
}

html.tf-v2panel #stop-action-panel .stop-act-btn.is-danger {
  color: var(--tf-danger);
}

html.tf-v2panel #stop-action-panel .stop-act-btn.is-active {
  color: var(--tf-primary);
}

html.tf-v2panel #stop-action-panel .stop-act-btn:disabled,
html.tf-v2panel #stop-action-panel .stop-act-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Icon column */
html.tf-v2panel #stop-action-panel .stop-act-icon {
  display: inline-block !important;
  font-size: 15px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

/* Divider */
html.tf-v2panel #stop-action-panel .stop-act-divider {
  display: block !important;
  height: 1px;
  background: var(--tf-border-soft);
  margin: 3px 0;
}

/* Section label — "Coming v1.1" / "Coming v1.5" */
html.tf-v2panel #stop-action-panel .stop-act-label {
  display: block !important;
  padding: 6px 16px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tf-text-muted);
  user-select: none;
  margin: 0;
}

/* Teaser items (disabled future actions) */
html.tf-v2panel #stop-action-panel .stop-act-teaser {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  opacity: 0.35;
  pointer-events: none;
  font-size: 14px;
  color: var(--tf-text-primary);
  min-height: var(--tf-tap-min);
}

/* Version badge on teasers */
html.tf-v2panel #stop-action-panel .stop-act-badge {
  display: inline-block !important;
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--tf-radius-sm);
  background: var(--tf-primary-soft);
  color: var(--tf-primary);
}

/* Sub-picker back button */
html.tf-v2panel #stop-action-panel .stop-act-back {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--tf-border-soft);
  font-size: 13px;
  font-family: inherit;
  color: var(--tf-primary);
  cursor: pointer;
  width: 100%;
  text-align: left;
  min-height: var(--tf-tap-min);
}

html.tf-v2panel #stop-action-panel .stop-act-back:hover,
html.tf-v2panel #stop-action-panel .stop-act-back:focus-visible {
  background: var(--tf-primary-soft);
  outline: none;
}

/* Sub-picker pick buttons (Copy tags / Move to day options) */
html.tf-v2panel #stop-action-panel .stop-act-pick-btn {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--tf-border-line);
  font-size: 14px;
  font-family: inherit;
  color: var(--tf-text-primary);
  cursor: pointer;
  text-align: left;
  min-height: var(--tf-tap-min);
}

html.tf-v2panel #stop-action-panel .stop-act-pick-btn:last-child {
  border-bottom: none;
}

html.tf-v2panel #stop-action-panel .stop-act-pick-btn:hover,
html.tf-v2panel #stop-action-panel .stop-act-pick-btn:focus-visible {
  background: var(--tf-bg-surface);
  outline: none;
}

/* Sub-text for pick items (tag list preview / day info) */
html.tf-v2panel #stop-action-panel .stop-act-pick-sub {
  display: block;
  font-size: 11px;
  color: var(--tf-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}


/* ── 4b. Stop ⋮ trigger — V1 leak fix + tap target (Page 6 audit-gap) ─────── */
/*
 * Fix 1 — V1 trigger leak (2026-05-23)
 * styles.css sets display:inline-flex (line 3336) and
 * display:inline-flex !important inside a media query (line 4011).
 * Using html ancestor (specificity 0,0,1,1 + !important) unambiguously
 * beats V1's plain-class rule (0,0,1,0 + !important) regardless of
 * source order.  V2 re-show rule wins on specificity (0,1,1,1 > 0,0,1,1).
 */
html .stop-row-actions-trigger { display: none !important; }

/*
 * Fix 2 — Tap target (2026-05-23)
 * V1 forces 36×36 px via body .stop-row-actions-trigger (specificity
 * 0,0,1,1 + !important on min-height/min-width, line 6024). V2 rule at
 * (0,1,1,1) wins and raises to 44 px HIG minimum.
 *
 * Fix 3 — Center content + focus ring (IW10-4 + IW10-1, 2026-05-25)
 * align-items/justify-content center the icon glyph in the 44×44 box.
 * focus-visible ring matches the shell.css interactive-chrome pattern.
 * No !important on alignment/focus — no V1 conflict at this specificity.
 */
html.tf-v2panel .stop-row-actions-trigger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: var(--tf-tap-min) !important;
  min-width: var(--tf-tap-min) !important;
}

html.tf-v2panel .stop-row-actions-trigger:focus-visible {
  outline: none;
  box-shadow: var(--tf-focus-ring);
  border-radius: var(--tf-radius-sm);