/* ═══════════════════════════════════════════════════════════
   翠的足迹 · 顶部导航栏的二级下拉（悬停展开，不占地方）
   先生 2026-09-24 夜的要求：
     · 放进顶部导航栏，一级「翠的足迹」，二级是每一趟行程
     · **鼠标一悬停，子菜单就弹出来**；鼠标挪开，层级自己收回去
     · 平时只占一个词的位置（面板是浮层，absolute，不挤别人）
   做法要点：
     · 触发器与面板之间**用内边距搭桥**（不是留空隙）——留空隙的话，鼠标从词上
       斜着移进面板的途中会"悬空"一下，菜单就闪没了
     · 面板进出各给一点点过渡（约 160ms），不作"瞬间开关"，观感才不抖
   ═══════════════════════════════════════════════════════════ */

.fpnav { position: relative; display: inline-flex; align-items: center; }
.fpnav > .fpnav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  padding: 7px 12px; border-radius: 999px; cursor: default;
  color: var(--text-2); background: transparent; border: 1px solid transparent;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.fpnav:hover > .fpnav-btn, .fpnav.on > .fpnav-btn, .fpnav > .fpnav-btn:focus-visible {
  color: var(--text); background: rgba(166, 79, 99, .08); border-color: rgba(166, 79, 99, .20);
}
.fpnav .fpnav-caret { font-size: 10px; opacity: .6; transition: transform 160ms ease; }
.fpnav:hover .fpnav-caret, .fpnav.on .fpnav-caret { transform: rotate(180deg); }

/* 浮层：绝对定位 + 上边距搭桥（padding-top 而不是 margin-top）
   ⚠️ 2026-10-06 夜：改成**贴右**（left:auto; right:0）。原来锚在触发器左边往右铺，
      而「翠的足迹」被插在顶栏右组最前面（x≈960@1280），345px 的面板于是探出视口 24px
      ——实测 docScrollWidth 1304 > 1280、76 个元素越界（开着的时候整页能左右晃）。
      往左铺就没有这回事；面板本来也是从右往左看更顺。
      再用 max-width 兜一层，窄到 320 的机器也不会捅出去。 */
.fpnav > .fpnav-panel {
  position: absolute; left: auto; right: 0; top: 100%; z-index: 200;
  padding-top: 8px;                       /* ← 这道桥：鼠标从这里过，不会"悬空" */
  min-width: 268px; max-width: calc(100vw - 24px);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.fpnav:hover > .fpnav-panel, .fpnav.on > .fpnav-panel, .fpnav:focus-within > .fpnav-panel {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s;
}
.fpnav-panel .fpnav-box {
  /* 面板高度 2026-10-06 夜收短（先生："挡住了"）：原来 min(70vh, 520px)，
     592 高的窗口里几乎铺满整屏，地图全被盖住。改成 min(50vh, 420px)，
     露得出下面的地图；列表本来就带滚动，翻起来一样。 */
  max-height: min(50vh, 420px); overflow: auto; padding: 8px;
  border-radius: 16px;
  background: rgba(255, 252, 251, .97);
  border: 1px solid rgba(166, 79, 99, .18);
  box-shadow: 0 22px 60px rgba(120, 80, 76, .22);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.fpnav-box .fpnav-head {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 10px 8px;
  font-size: 11.5px; letter-spacing: .08em; color: var(--a1); font-weight: 800;
}
.fpnav-box .fpnav-head .n { margin-left: auto; color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.fpnav-box .fpnav-year {
  padding: 8px 10px 4px; font-size: 11px; letter-spacing: .1em; color: var(--faint);
  font-variant-numeric: tabular-nums; border-top: 1px solid var(--stroke); margin-top: 4px;
}
.fpnav-box .fpnav-year:first-of-type { border-top: 0; margin-top: 0; }
.fpnav-box a.fpnav-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 10px; border-radius: 10px; text-decoration: none;
  font-size: 13px; color: var(--text-2);
}
.fpnav-box a.fpnav-item:hover { background: rgba(166, 79, 99, .09); color: var(--text); }
.fpnav-box a.fpnav-item .day { color: var(--warm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fpnav-box a.fpnav-item .ti { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.fpnav-box a.fpnav-item .no { margin-left: auto; font-size: 11px; color: var(--warm); }
.fpnav-box .fpnav-foot {
  display: block; margin-top: 6px; padding: 9px 10px; border-top: 1px solid var(--stroke);
  font-size: 12.5px; font-weight: 700; color: var(--a1); text-decoration: none; border-radius: 0 0 10px 10px;
}
.fpnav-box .fpnav-foot:hover { background: rgba(166, 79, 99, .08); }
.fpnav-box .fpnav-load { padding: 12px 10px; font-size: 12.5px; color: var(--faint); }

@media (prefers-reduced-motion: reduce) {
  .fpnav > .fpnav-panel, .fpnav .fpnav-caret, .fpnav > .fpnav-btn { transition: none; }
}

/* ── 2026-10-02（2.0）：窄屏不许把整页撑宽 ───────────────────────────────
   这份浮层原来没有宽度上限，而里面每一行的"日期 + 标题 + 张数"三件全是 nowrap：
   实测量出来 442px（390 屏上），**手机浏览器于是把整页缩小到 0.87 倍去塞**——
   09-23 评审记的 P0-2「整页被缩到 0.867×」就是它。宽屏上看不出来，
   小屏上全站都糊一层。这里给它一个明确的宽度：标题改成可折行、超长省略。 */
@media (max-width: 720px) {
  .fpnav > .fpnav-panel {
    left: auto; right: 0; min-width: 0;
    width: min(340px, calc(100vw - 24px));
  }
  .fpnav-panel .fpnav-box { max-width: 100%; }
  .fpnav-box a.fpnav-item { flex-wrap: wrap; row-gap: 1px; }
  .fpnav-box a.fpnav-item .ti { max-width: 100%; white-space: normal; overflow: visible; }
  .fpnav-box .fpnav-head { flex-wrap: wrap; }
}