/* ================================================================
   探头地图页。设计令牌全部复用 index.html 里的 :root，
   这里只写地图页独有的部件，不重新定义颜色。
   ================================================================ */

/* 这条必须在最前面。
   下面好几个部件（.map-status、.map-fallback）自己带 display:flex，
   而 UA 样式表里的 [hidden]{display:none} 特异性比类选择器低 —— 结果是
   JS 里 node.hidden = true 根本关不掉它们：加载提示一直挂着，
   地图加载成功后那块「未配置」的说明还会整片盖在地图上面。 */
[hidden] { display: none !important; }

.map-shell {
  position: relative;
  /* 顶栏和标签栏是固定的，地图要正好填满中间那块，不能出现整页滚动 */
  height: calc(100dvh - var(--topbar-h) - var(--tabbar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  min-height: 380px;
  overflow: hidden;
  background: var(--sunken);
}

/* z-index: 0 不是可有可无的一行 —— 它给地图容器建了自己的层叠上下文。
   腾讯地图 SDK 会往容器里插一个 z-index:1000 的浮层；容器要是 z-index:auto，
   那个 1000 就和搜索框（12）、右下角工具栏（11）在同一个上下文里比大小，
   于是把它们**整个盖住**：按钮看得见、点不动，而且不报任何错。
   建了上下文之后，SDK 内部再大的 z-index 也出不来这个容器。 */
.map-canvas { position: absolute; inset: 0; z-index: 0; }
.map-canvas canvas { outline: none; }

.map-fallback {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 28px; margin: 0;
  background: var(--sunken); color: var(--body);
  font-size: 13px; line-height: 1.7; text-align: center;
}

/* ---------------- 搜索 ---------------- */
.map-search-anchor {
  position: absolute; z-index: 12;
  top: 12px; left: 12px; right: 12px;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.map-search-anchor > * { pointer-events: auto; }

.map-search-box {
  display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 12px;
  /* 白底。深色是深色 UI 时期留下的，压在卫星影像上既认不出是输入框，
     和已经改白的图层按钮也对不上。 */
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-pill);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.map-search-icon {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 1.6px solid var(--muted); position: relative;
}
.map-search-icon::after {
  content: ''; position: absolute; right: -4px; bottom: -4px;
  width: 6px; height: 1.6px; background: var(--muted); transform: rotate(45deg);
}
.map-search-input {
  flex: 1; min-width: 0; border: none; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--ink);
}
.map-search-input:focus { outline: none; }
.map-search-input::placeholder { color: var(--muted); }
.map-search-input::-webkit-search-cancel-button { display: none; }

.map-search-spinner {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid var(--hairline-2); border-top-color: var(--green);
  animation: dsSpin .8s linear infinite;
}
.map-search-clear {
  width: 22px; height: 22px; flex: none; border: none; border-radius: 50%;
  background: var(--sunken); color: var(--body);
  font-size: 15px; line-height: 1; cursor: pointer;
}

.map-suggestions {
  max-height: 46vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--r-card); box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
  overflow-x: hidden;
}
.map-suggestion {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: 11px 14px; border: none; background: none; text-align: left;
  font-family: inherit; cursor: pointer;
}
.map-suggestion + .map-suggestion { border-top: 1px solid var(--hairline); }
.map-suggestion:hover, .map-suggestion:active { background: var(--sunken); }
.map-suggestion-title { font-size: 13.5px; color: var(--ink); }
.map-suggestion-address { font-size: 11.5px; color: var(--muted); }

/* ---------------- 浮层面板（附近 / 新增 / 图层） ---------------- */
.map-panel {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--r-card); box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.map-panel-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px 10px; border-bottom: 1px solid var(--hairline);
}
.map-panel-heading { flex: 1; min-width: 0; }
.map-panel-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.map-panel-caption { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.map-panel-close {
  flex: none; width: 26px; height: 26px; border: none; border-radius: 50%;
  background: var(--sunken); color: var(--body); font-size: 15px; line-height: 1; cursor: pointer;
}
.map-panel-list { max-height: 42vh; overflow-y: auto; }
.map-panel-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 14px; border: none; background: none; text-align: left;
  font-family: inherit; cursor: pointer;
}
.map-panel-item + .map-panel-item { border-top: 1px solid var(--hairline); }
.map-panel-item:hover, .map-panel-item:active { background: var(--sunken); }
.map-panel-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.map-panel-name {
  font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.map-panel-meta { font-size: 11.5px; color: var(--muted); }
.map-panel-empty, .map-panel-error, .map-loading-line {
  padding: 16px 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted); text-align: center;
}
.map-panel-error { color: var(--on-tint-red); background: var(--red-tint); }
.map-retry {
  border: none; background: none; color: var(--green);
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0 2px;
}

.map-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--muted); }
.map-dot.inner { background: var(--green); }
.map-dot.outer { background: var(--ring-out-text); }
.map-dot.suspected_abandoned { background: var(--muted); }

/* ---------------- 右侧工具栏 ---------------- */
.map-rail {
  position: absolute; right: 12px; bottom: 20px; z-index: 11;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.map-tool-slot { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.map-tool {
  width: 46px; height: 46px; flex: none; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--hairline); border-radius: 14px;
  /* 白底。原来是深色的（深色 UI 时期留下的），压在卫星影像上认不出是按钮 ——
     影像本身就是深的，深按钮糊在里面。白底加一层实影是地图浮层的通行做法。 */
  background: rgba(255, 255, 255, .96); color: var(--body);
  font-family: inherit; font-size: 10px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.map-tool[aria-expanded="true"] { color: var(--green); border-color: var(--green-300); background: var(--green-tint); }
.map-tool.busy { color: var(--muted); }
.map-tool-glyph { font-size: 15px; line-height: 1; }
.map-tool.busy .map-tool-glyph { animation: dsSpin .9s linear infinite; }
.map-tool-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--alert-red); color: var(--canvas);
  font-size: 10px; line-height: 17px; text-align: center;
}

.map-popover {
  position: absolute; right: 54px; bottom: 0; width: 232px;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--r-card); box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.map-popover.wide { width: 288px; }

.map-filter {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 11px 14px; border: none; background: none;
  font-family: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer;
}
.map-filter + .map-filter { border-top: 1px solid var(--hairline); }
.map-filter-label { flex: 1; }
.map-filter-check {
  width: 17px; height: 17px; flex: none; border-radius: 5px;
  border: 1.5px solid var(--hairline-2); position: relative;
}
.map-filter[aria-pressed="true"] .map-filter-check { background: var(--green); border-color: var(--green); }
.map-filter[aria-pressed="true"] .map-filter-check::after {
  content: ''; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px;
  border: solid var(--on-accent); border-width: 0 1.8px 1.8px 0; transform: rotate(42deg);
}
.map-filter[aria-pressed="false"] .map-filter-label { color: var(--muted); }

/* ---------------- 状态条 ---------------- */
.map-status {
  position: absolute; left: 50%; top: 66px; z-index: 10; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(26, 26, 24, .82); color: #fff; font-size: 12px; white-space: nowrap;
}
.map-status::before {
  content: ''; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: dsSpin .8s linear infinite;
}
.map-summary {
  position: absolute; left: 12px; bottom: 20px; z-index: 10; max-width: min(62%, 320px);
  padding: 7px 12px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .96); border: 1px solid var(--hairline-2);
  color: var(--body); font-size: 11.5px; line-height: 1.5;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
}
.map-summary:empty { display: none; }

/* ================================================================
   探头详情弹层
   ================================================================ */
/* 整个弹层是**一个**滚动容器（.sheet 自带 overflow-y:auto），标题吸顶。
   原来是 flex 分栏 + 内容区单独 overflow：结果手指或滚轮落在标题那一片时
   完全不动 —— 而那正是弹层最上面、最先被碰到的地方。iOS 上嵌套滚动
   还会有更难说清的表现。一个滚动容器就没有这些问题。 */
.camera-sheet { display: block; }
.camera-sheet-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; gap: 12px;
  /* 负边距把吸顶条铺满整个弹层宽度，否则内容会从左右 16px 的留白里穿过去 */
  margin: 0 calc(var(--sp-4) * -1);
  padding: 6px var(--sp-4) 12px;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
.camera-sheet-eyebrow { font-size: 11px; color: var(--muted); letter-spacing: .05em; }
.camera-sheet-title { margin: 3px 0 0; font-size: 18px; font-weight: 600; line-height: 1.35; }
.camera-sheet-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }

.map-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600;
  background: var(--pill-mute); color: var(--body);
}
.map-status-badge.inner { background: var(--ring-in-tint); color: var(--ring-in-text); }
.map-status-badge.outer { background: var(--ring-out-tint); color: var(--ring-out-text); }
.map-status-badge.suspected_abandoned { background: var(--pill-mute); color: var(--muted); }

/* 近期新增。用红色是刻意的：地图上其余所有颜色都在表达「在哪个环」，
   只有这一个在说「这是新出现的，你以前走这条路时它还不在」。 */
.map-new-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--red-tint); color: var(--alert-red);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.map-new-tag.sm { padding: 0 5px; margin-left: 6px; font-size: 10px; }
.camera-sheet-note { font-size: 11.5px; color: var(--muted); }

.camera-sheet-body { padding-top: 14px; padding-bottom: 8px; }

.map-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0 0 14px; }
.map-fact { font-size: 12px; color: var(--body); }
.map-fact-label { color: var(--muted); margin-right: 6px; }

.map-card {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: 14px; margin-bottom: 12px;
}
.map-card-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 11px; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.map-count {
  min-width: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--sunken); color: var(--muted);
  font-size: 11px; font-weight: 600; text-align: center;
}
.map-card-note { font-size: 11.5px; font-weight: 400; color: var(--muted); margin-left: auto; }

.map-images { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.map-image-item { flex: none; width: 176px; margin: 0; }
.map-image {
  width: 176px; height: 118px; object-fit: cover; display: block;
  border-radius: var(--r-icon); background: var(--sunken); cursor: zoom-in;
}
.map-image-title {
  margin-top: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.map-report + .map-report { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.map-report-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.map-report-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; }
.map-report-status.working { color: var(--green); }
.map-report-status.not_working { color: var(--alert-red); }
.map-feedback-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.map-feedback-dot.working { background: var(--green); }
.map-feedback-dot.not-working { background: var(--alert-red); }
.map-report-mine {
  padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--green-tint); color: var(--green); font-size: 10.5px; font-weight: 600;
}
/* 审核态只会出现在自己那条上。整条压淡 + 一枚标签，一眼看出「别人还看不到」 */
.map-report.unpublished { opacity: 0.72; }
.map-report-review {
  padding: 1px 7px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 600; max-width: 60%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.map-report-review.pending { background: var(--amber-tint); color: var(--amber); }
.map-report-review.rejected { background: var(--red-tint); color: var(--on-tint-red); }
.map-report-time { margin-left: auto; font-size: 11px; color: var(--muted); }
.map-report-note { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--body); }
.map-report-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.map-report-photo {
  width: 74px; height: 74px; object-fit: cover; border-radius: 8px;
  background: var(--sunken); cursor: zoom-in;
}

.map-comment + .map-comment { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--hairline); }
.map-comment-meta { font-size: 11.5px; color: var(--muted); }
.map-comment-author { color: var(--body); font-weight: 600; }
.map-comment-body { margin-top: 4px; font-size: 13px; line-height: 1.65; color: var(--body); }

/* ---------------- 反馈表单 ---------------- */
.map-feedback-desc { margin: 0 0 11px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.map-feedback-statuses { display: flex; gap: 9px; }
.map-feedback-status {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 0; border: 1.5px solid var(--hairline); border-radius: var(--r-icon);
  background: var(--card); color: var(--body);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.map-feedback-status.selected { border-color: var(--green); background: var(--green-tint); color: var(--green-700); }
.map-feedback-status:disabled { opacity: .55; cursor: not-allowed; }

.map-feedback-note {
  width: 100%; min-height: 84px; margin-top: 12px; padding: 11px 12px; resize: vertical;
  border: 1px solid var(--hairline-2); border-radius: var(--r-icon);
  background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 13.5px; line-height: 1.6;
}
.map-feedback-note:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.map-feedback-count { margin-top: 5px; text-align: right; font-size: 11px; color: var(--muted); }
.map-feedback-count.full { color: var(--alert-red); }

.map-photo-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.map-photo-preview { position: relative; width: 74px; height: 74px; }
.map-photo-preview img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
  background: var(--sunken); cursor: zoom-in;
}
.map-photo-remove {
  position: absolute; top: -6px; right: -6px; width: 21px; height: 21px;
  border: none; border-radius: 50%; background: rgba(26, 26, 24, .82); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer;
}
.map-photo-add {
  width: 74px; height: 74px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1.5px dashed var(--hairline-2); border-radius: 8px;
  background: var(--card); color: var(--muted);
  font-family: inherit; font-size: 10.5px; cursor: pointer;
}
.map-photo-add-symbol { font-size: 17px; line-height: 1; color: var(--body); }
.map-feedback-caption { margin: 8px 0 0; font-size: 11px; color: var(--muted); line-height: 1.5; }

.map-feedback-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.map-feedback-hint { flex: 1; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.map-feedback-hint.ready { color: var(--green); }
.map-feedback-hint.done { color: var(--green-700); }
.map-feedback-actions .btn { flex: none; width: auto; padding: 12px 22px; font-size: 14px; }

/* ---------------- 图片放大 ---------------- */
#maskPhoto { align-items: center; background: rgba(12, 12, 11, .9); cursor: zoom-out; }
#maskPhoto img {
  max-width: 94vw; max-height: 88vh; object-fit: contain;
  border-radius: 6px; background: #1a1a18;
}

/* ================================================================
   桌面：地图不再是「手机里的一块」，左侧列表 + 右侧整幅地图
   ================================================================ */
@media (min-width: 900px) {
  .map-shell { height: calc(100dvh - var(--topbar-h)); border-radius: 0; }

  .map-search-anchor {
    top: 16px; left: 16px; right: auto; width: 340px;
    max-height: calc(100% - 32px);
  }
  .map-suggestions { max-height: 320px; }
  .map-rail { right: 20px; bottom: 28px; }
  .map-popover { right: 54px; }
  .map-summary { left: 372px; bottom: 28px; }
  .map-status { top: 20px; left: auto; right: 20px; transform: none; }
  .map-panel-list { max-height: 320px; }

  /* 详情在桌面上是右侧面板，不是模态框。
     它必须**不挡地图**：面板只占 420px，剩下一大片还是地图，用户会在那儿
     拖地图、点定位和图层。遮罩层原样铺满视口的话，那一大片的点击和滚轮
     全被它吃掉 —— 表现就是「按钮点不动、详情也滑不动」（滑的其实是地图那侧）。
     所以桌面上遮罩透明 + pointer-events:none，只有面板自己收事件。 */
  #maskCamera {
    align-items: stretch; justify-content: flex-end;
    background: transparent; pointer-events: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  #maskCamera .sheet {
    max-width: 420px; max-height: none; height: 100%;
    border-radius: 0; animation: none;
    padding-bottom: 20px;
    pointer-events: auto;
    border-left: 1px solid var(--hairline-2);
    box-shadow: -10px 0 30px rgba(0, 0, 0, .55);
  }

  /* 面板一开，右下角那排工具和状态条要让开，否则藏在面板底下点不到 */
  body.camera-sheet-open .map-rail { right: 440px; }
  body.camera-sheet-open .map-status { right: 440px; }
  #maskCamera .sheet-grip { display: none; }
  /* 桌面上抽屉顶部没有那条 grip，吸顶条要自己补足上缘留白 */
  .camera-sheet-head { padding-top: 18px; }
  .map-image-item, .map-image { width: 100%; }
  .map-images { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; }
}

/* 图层按钮的选中态。两页共用（地图页、路线页），
   按钮上的字是「现在是什么」，选中态再强调一次当前处于卫星图。 */
.map-tool.on { border-color: var(--green); color: var(--green-700); }
.map-tool .map-tool-text { font-size: 10px; line-height: 1; }