/* 离线体验改造（预下载引导 + 离线底图 α 档）的全部新增样式。
 *
 * 约定：
 *   - 只用 styles.css 里已有的主题令牌，不硬编码颜色 —— 深色/浅色两套主题
 *     在 styles.css:9190 与 9331 各自重定义了同名令牌，这里跟随即可；
 *   - 不新增常驻区块：引导条是 position:fixed 的浮层，出现时才占位，
 *     且只在「在线 + 未下载 + 停留够久」时出现，不给手机常态信息密度添负担；
 *   - 移动端避让底部导航：导航高度是 calc(56px + --safe-bottom)，
 *     项目既有约定用 66px 这个偏移（见 styles.css:6823/6869/6896/7276）。
 */

/* ============ 一、预下载引导条（任务 A） ============ */

.offline-nudge {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(66px + var(--safe-bottom));
  z-index: 60; /* 低于弹层，高于地图控件 */
  width: min(560px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.offline-nudge[hidden] {
  display: none;
}

.offline-nudge-text {
  flex: 1 1 auto;
  min-width: 0;
}

.offline-nudge-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.offline-nudge-detail {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

/* Wi-Fi 判定降级时的提示：不拦人，只是劝一句 */
.offline-nudge-hint {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
}

.offline-nudge-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.offline-nudge-download,
.offline-nudge-dismiss {
  white-space: nowrap;
}

/* 手机上文字与按钮不再并排，改为上下两段，保证 375×667 内不出横向滚动 */
@media (max-width: 480px) {
  .offline-nudge {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    /* 【2026-09-29 修 D8】手机底部「推荐点位」栏收起时仍会露出顶上 76px 一条
       （styles.css 窄屏规则：transform: translateY(calc(100% - 76px))，且它同样锚在
       bottom: calc(66px + --safe-bottom)）。浮层原来也锚在这个位置、z-index 60 又高于栏的 24，
       实测把那条带子的**每一个落点**都盖住 ⇒ 推荐栏的点击与上下拖动全都点不到
       （2026-09-28 真机验收里 F3 就是这么红的）。抬到那条带子之上（76px 带子 + 8px 间隙）。 */
    bottom: calc(66px + var(--safe-bottom) + 84px);
  }

  .offline-nudge-actions {
    justify-content: flex-end;
  }
}

/* ============ 二、离线底图 α 档（任务 B） ============ */

/* B2 点位聚合簇：只有离线态才会由 offline-map.js 生成这些节点 */
.cluster-layer {
  pointer-events: auto;
}

.cluster-node {
  cursor: pointer;
}

.cluster-node .cluster-pin {
  fill: var(--coral);
  stroke: var(--surface);
  stroke-width: 1.5;
}

.cluster-node .cluster-count {
  fill: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

/* 浅色主题下珊瑚底配白字对比不足时，交给 --on-accent 令牌（深色主题会自动翻） */

/* B3 标签分级：档位由 offline-map.js 写在 #mapSvg 的 data-tier 上。
   低缩放只留区名，高缩放才放细标签，避免区名与点位标签互相压盖。 */
#mapSvg[data-tier="region"] .spot-label {
  display: none;
}

#mapSvg[data-tier="region+"] .spot-label {
  /* 中间档：细标签降权呈现，仍可见但不与区名争视觉重心 */
  opacity: 0.72;
}

/* 离线内置底图下，区名不抢点位标签的视觉层级 */
#mapSvg[data-offline="1"] .region-label {
  fill: var(--muted);
}

#mapSvg[data-offline="1"] .spot-label {
  fill: var(--ink);
}

/* B4 离线时「在线底图」按钮置灰：离线点了只会失败，不该让它看起来可点 */
#useOnlineMap:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ============ 三、离线资料包弹层的滚动（7 座城市超出可视高度） ============ */

/* .my-content-dialog 是 grid，行模板最后一行是 minmax(0,1fr) —— 正好留给
   #offlinePacksList。城市从 4 座增到 7 座后内容超出固定高度，但该列表原先
   没有 overflow，多出来的行被直接裁掉、也无法滚动。
   这里把它变成可滚动区（grid 子项要能滚动，min-height:0 是前提）。 */
.offline-packs-dialog .offline-packs-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin; /* 桌面端给一条细滚动条；移动端由系统覆盖 */
}

.offline-packs-dialog .offline-packs-status {
  min-height: 0;
}

/* 从预下载引导条跳进来时，把目标城市那行短暂高亮 + 脉冲，用户一眼知道点哪 */
.offline-packs-dialog .offline-pack-row.offline-pack-target {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px var(--coral);
  animation: offline-pack-pulse 0.9s ease-in-out 2;
}

@keyframes offline-pack-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--coral); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .offline-packs-dialog .offline-pack-row.offline-pack-target {
    animation: none;
  }
}