/* ═══════════════════════════════════════════════════════════
   翠的足迹 · 投放点选择器（两级下拉 + Circle to Search Bar）
   先生 2026-09-24 的口述规格，逐条照做：
     · 检索：圆形图标按钮**形变**成搜索输入框
         宽度 56 → 470
         圆角 999 → 16
         同一条 cubic-bezier(.2,.9,.22,1)，360ms 内连续插值
         图标同步左移到内边距处
         占位文字与光标**等宽度落定后**再淡入
         全程**不切换组件**（是同一个元素在形变，不是"圆按钮消失、输入框出现"）
     · 两级下拉：一级文本「翠的足迹」，二级是行程表里的每一趟
   依赖 theme-light.css 的令牌；不依赖任何库。
   ═══════════════════════════════════════════════════════════ */

.fp-pick { --fp-w: 470px; --fp-dur: 360ms; --fp-ease: cubic-bezier(.2, .9, .22, 1); position: relative; }

/* ⚠️ 必须抬一层：ui.css 里有一条 `.glass > * { position: relative; z-index: 1; }`，
   而上传页的拖放区 `.drop` 与"选择器所在的那一行"**都是 .glass 的直接子元素、同为 z-index 1** ——
   同为 1 时按树序画，拖放区在后面，就把展开的下拉整个盖住：
   鼠标点下去命中的是"点这里选照片"，而不是行程条目（祥量到 elementFromPoint = DIV.drop 才发现）。
   选择器自带 .fp-pick（position:relative；z-index auto）**建不出**比兄弟更高的层，
   所以这一行得自己写 z-index。 */
.fp-row { position: relative; z-index: 30; }

/* ── 检索：圆形 ⇄ 搜索条（同一个元素） ── */
.fp-searchbar {
  position: relative;
  width: 56px; height: 56px; border-radius: 999px;
  display: flex; align-items: center;
  background: rgba(255, 252, 251, .92);
  border: 1px solid var(--stroke);
  box-shadow: 0 8px 22px rgba(120, 80, 76, .12), inset 0 1px 0 rgba(255, 255, 255, .6);
  cursor: pointer;
  transition: width var(--fp-dur) var(--fp-ease), border-radius var(--fp-dur) var(--fp-ease);
}
.fp-searchbar.open { width: min(var(--fp-w), calc(100vw - 64px)); border-radius: 16px; cursor: text; }
/* 图标：居中 ⇄ 左移到内边距处（与宽度同一条曲线、同一段时长 = 同步）
   ⚠️ 这里**不能用 left: 50%**：百分比会和"正在长大的宽度"相乘，跟 18px 插值时
      图标会先往右飘到 80px 再荡回来（祥量出来的：最大值 80.7px）。
      写死 28px（正是 56px 圆的圆心）与 18px 两个**长度**插值，才是干净的"同步左移"。 */
.fp-searchbar .fp-ico {
  position: absolute; left: 28px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; color: var(--a1);
  transition: left var(--fp-dur) var(--fp-ease), transform var(--fp-dur) var(--fp-ease);
}
.fp-searchbar.open .fp-ico { left: 18px; transform: none; }
/* 输入框：宽度落定后才淡入（所以 transition-delay 正是形变那段时长） */
.fp-searchbar input {
  flex: 1; min-width: 0; height: 100%;
  padding: 0 16px 0 52px;
  border: 0; outline: none; background: transparent;
  font: inherit; font-size: 14px; color: var(--text);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
}
.fp-searchbar.open input { opacity: 1; pointer-events: auto; transition-delay: var(--fp-dur); }
.fp-searchbar input::placeholder { color: var(--faint); }
.fp-searchbar .fp-clear {
  position: absolute; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: transparent; color: var(--faint); cursor: pointer; font-size: 15px;
  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
.fp-searchbar.open .fp-clear { opacity: 1; pointer-events: auto; transition-delay: var(--fp-dur); }
.fp-searchbar .fp-clear:hover { color: var(--text); background: rgba(166, 79, 99, .08); }

/* ── 已选那一行的"胶囊"（选过之后显示，点它重新展开下拉） ── */
.fp-chosen {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 8px 14px; border-radius: 999px; margin-bottom: 10px;
  font-size: 13px; font-weight: 600; color: var(--text);
  background: rgba(166, 79, 99, .07); border: 1px solid rgba(166, 79, 99, .22);
  cursor: pointer; text-align: left;
}
/* ⚠️ 必须写这一条：上面给了 display:inline-flex，而 [hidden] 的 display:none 优先级更低，
   于是"还没选"时页面上会挂着一个空胶囊（祥从截图里看出来的）。 */
.fp-chosen[hidden] { display: none; }
.fp-chosen .fp-day { color: var(--warm); font-variant-numeric: tabular-nums; font-weight: 700; }
.fp-chosen .fp-none { color: var(--faint); font-weight: 400; }

/* ── 两级下拉 ── */
.fp-panel {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 40;
  width: min(560px, calc(100vw - 64px)); max-height: 340px; overflow: auto;
  padding: 8px; border-radius: 18px; display: none;
  background: rgba(255, 252, 251, .97);
  border: 1px solid var(--stroke);
  box-shadow: 0 22px 60px rgba(120, 80, 76, .2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.fp-panel.on { display: block; }
/* ── 窄屏：面板改成**往上展开**（2026-10-03 凌晨，第三版才对）──────────────────
   前两版都错在这儿：
     · 面板默认是 `top: calc(100% + 8px)` —— 从搜索框**往下**长。
       而在投放条里，搜索框的底边已经在 743px（视口 844），下面只剩 101px。
     · 祥第二版只去压 max-height（算成 694px），**压了也没用**：能用的空间本来就只有 101px。
       实测第一条行程 top=798、底 836，而底部工具条从 780 就开始 —— 被压住 57px。
   正解：让面板**从投放条的底边往上长**（bottom: 100% + 8px），
   于是它占的是地图那块空地，跟底部工具条**完全不相干**。
   限高按"往上还有多少"给：100dvh − 420px（420 ≈ 顶栏 74 + 投放条自身与上下间隙）。
   这样列表第一行永远紧贴投放条上方，读起来也顺：先看"选一趟"，再往下按"放好了"。 */
@media (max-width: 720px) {
  .fp-panel {
    top: auto;
    bottom: calc(100% + 8px);
    max-height: calc(100vh - 420px);
  }
  @supports (height: 100dvh) {
    .fp-panel { max-height: calc(100dvh - 420px); }
  }
}
.fp-l1 {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px;
  font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--a1);
  background: rgba(166, 79, 99, .06); cursor: pointer;
}
.fp-l1 .fp-n { margin-left: auto; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.fp-l1 .fp-caret { transition: transform 220ms ease; }
.fp-panel.collapsed .fp-l1 .fp-caret { transform: rotate(-90deg); }
.fp-panel.collapsed .fp-l2 { display: none; }
.fp-l2 { margin: 6px 0 0; padding: 0; list-style: none; }
.fp-l2 button {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 10px; border: 0; background: transparent;
  font: inherit; font-size: 13.5px; color: var(--text-2); cursor: pointer;
}
.fp-l2 button:hover { background: rgba(166, 79, 99, .08); color: var(--text); }
.fp-l2 button.on { background: rgba(166, 79, 99, .12); color: var(--text); font-weight: 700; }
.fp-l2 .fp-day { color: var(--warm); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.fp-l2 .fp-place { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; }
.fp-l2 .fp-cnt { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fp-empty { padding: 14px 12px; font-size: 13px; color: var(--faint); line-height: 1.9; }
.fp-empty b { color: var(--text-2); }

/* 减少动态效果：不形变，直接给结果 */
@media (prefers-reduced-motion: reduce) {
  .fp-searchbar, .fp-searchbar .fp-ico { transition-duration: 1ms; }
  .fp-searchbar.open input, .fp-searchbar.open .fp-clear { transition-delay: 0ms; }
}