/* ============================================================
   帮遛狗 · 地图样式 (map.css)
   配合 assets/js/map.js 使用。色值全部取 tokens.css 变量。
   ============================================================ */

/* ---------- 全屏地图层 ---------- */
.map-layer {
  position: fixed;
  inset: 0;
  margin: 0 auto;
  max-width: var(--app-max);
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  animation: wd-fade .18s ease;
}

.map-bar {
  height: var(--appbar-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-2) 0 var(--sp-1);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 2;
}
.map-bar-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink); border-radius: var(--r-md);
  cursor: pointer;
}
.map-bar-btn:active { background: var(--surface-3); }
.map-bar-title { font-size: var(--fs-lg); font-weight: 500; flex: 1; }
.map-bar-ok {
  flex: none;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-right: var(--sp-2);
  cursor: pointer;
}
.map-bar-ok:active { opacity: .88; }

/* ---------- 地图画布 ---------- */
.map-canvas {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #FBFAF7;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.map-canvas.dragging { cursor: grabbing; }

.map-svg { position: absolute; inset: 0; display: block; pointer-events: none; }

/* ---------- POI 标记 ---------- */
.map-pois { position: absolute; inset: 0; pointer-events: none; }
.map-poi { position: absolute; width: 0; height: 0; pointer-events: auto; cursor: pointer; }
.map-poi .mp-dot {
  position: absolute; left: -4.5px; top: -4.5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(44, 44, 42, .28);
}
.map-poi .mp-lb {
  position: absolute; left: 9px; top: -9px;
  font-size: var(--fs-xs);
  line-height: 16px;
  white-space: nowrap;
  color: var(--ink-2);
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 0 3px #fff;
}
.map-poi.k-park  .mp-dot { background: var(--teal); }
.map-poi.k-mall  .mp-dot { background: var(--amber-600); }
.map-poi.k-vet   .mp-dot { background: var(--red-600); }
.map-poi.k-metro .mp-dot { background: var(--gray-800); }
.map-poi.k-school .mp-dot { background: var(--amber); }

/* ---------- 我的位置 ---------- */
.map-me-marker { position: absolute; width: 0; height: 0; pointer-events: none; }
.map-me-marker .mmm-dot {
  position: absolute; left: -8px; top: -8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary-100);
  border: 2px solid var(--primary);
  box-shadow: 0 1px 4px rgba(24, 95, 165, .35);
}
.map-me-marker .mmm-dot::after {
  content: ''; position: absolute; left: 4px; top: 4px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--primary);
}
.map-me-marker .mmm-lb {
  position: absolute; left: 12px; top: -9px;
  font-size: var(--fs-xs); line-height: 16px; white-space: nowrap;
  color: var(--primary); font-weight: 500;
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

/* ---------- 准星图钉 ---------- */
.map-crosshair {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(44, 44, 42, .3));
}

/* ---------- 工具按钮 ---------- */
.map-tools {
  position: absolute; right: var(--sp-3); bottom: 62px;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.map-tool {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink-2);
  box-shadow: var(--shadow-2);
  cursor: pointer;
}
.map-tool:active { background: var(--surface-3); }

.map-locate {
  position: absolute; right: var(--sp-3); bottom: var(--sp-3);
  display: inline-flex; align-items: center; gap: 4px;
  height: 34px; padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--primary);
  font-size: var(--fs-sm); font-weight: 500;
  box-shadow: var(--shadow-2);
  cursor: pointer;
}
.map-locate:active { background: var(--primary-50); }

.map-mark {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3);
  padding: 3px 8px;
  font-size: var(--fs-xs);
  color: var(--hint);
  background: rgba(255, 255, 255, .72);
  border-radius: var(--r-pill);
  pointer-events: none;
}

/* ---------- 底部信息面板 ---------- */
.map-panel {
  flex: none;
  position: relative;
  z-index: 2;
  margin-top: -12px;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-3);
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
  max-height: 62%;
  overflow-y: auto;
}

.map-sel { display: flex; align-items: center; gap: var(--sp-3); }
.map-sel-main { flex: 1; min-width: 0; }
.map-sel-name {
  font-size: var(--fs-lg); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-sel-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

.map-match {
  display: flex; align-items: center; gap: 6px;
  margin-top: var(--sp-3);
  padding: 8px 10px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.map-match.ok   { background: var(--teal-50);    color: #085041; }
.map-match.warn { background: var(--amber-50);   color: #633806; }
.map-match.none { background: var(--surface-3);  color: var(--muted); }
.map-match .ic { flex: none; }

.map-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.map-chip {
  padding: 5px 10px;
  font-size: var(--fs-sm);
  color: var(--primary);
  background: var(--primary-50);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.map-chip:active { background: var(--primary-100); }

/* ---------- 搜索列表 ---------- */
.map-search-list { margin-top: var(--sp-2); max-height: 46dvh; overflow-y: auto; }
.map-search-list .list-item {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* ---------- 只读查看 ---------- */
.map-view-head { }
.map-view-name { font-size: var(--fs-lg); font-weight: 500; }
.map-view-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

.map-target { position: absolute; width: 0; height: 0; pointer-events: none; }
.map-target .mt-pin {
  position: absolute; left: -17px; top: -34px;
  filter: drop-shadow(0 3px 5px rgba(44, 44, 42, .3));
}
.map-target .mt-range {
  position: absolute;
  border-radius: 50%;
  background: rgba(24, 95, 165, .12);
  border: 1px dashed var(--primary);
}
.map-target .mt-dot {
  position: absolute; left: -15px; top: -15px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--primary);
  color: var(--primary);
  font-size: var(--fs-xs);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- 迷你地图（页面内嵌） ---------- */
.map-mini {
  position: relative;
  /* Leaflet 内部 pane 的 z-index 高达 200~1000，会盖过 z-index 100 的弹窗；
     isolation 让 .map-mini 自成堆叠上下文，把 Leaflet 层级封死在卡片内 */
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #FBFAF7;
}
.map-mini .mm-lb {
  position: absolute; left: 8px; bottom: 8px;
  max-width: 68%;
  padding: 3px 8px;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  background: rgba(255, 255, 255, .86);
  border-radius: var(--r-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-mini .mm-tip {
  position: absolute; right: 8px; top: 8px;
  padding: 3px 8px;
  font-size: var(--fs-xs);
  color: var(--amber);
  background: rgba(250, 238, 218, .92);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.map-mini .mm-mark {
  position: absolute; left: 8px; top: 8px;
  font-size: 10px;
  color: var(--hint);
  background: rgba(255, 255, 255, .72);
  padding: 2px 6px;
  border-radius: var(--r-pill);
  pointer-events: none;
}

/* ---------- 地图卡片入口（表单内） ---------- */
.map-entry {
  position: relative;
  margin-top: var(--sp-2);
}
.map-entry .me-hit {
  position: absolute; inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-md);
}
.map-entry .me-hit:active { background: rgba(44, 44, 42, .04); }
.map-entry .me-bar {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 8px 12px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  pointer-events: none;
}
.map-entry .me-bar .me-t {
  font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-entry .me-bar .me-a {
  flex: none;
  font-size: var(--fs-sm);
  color: var(--primary);
  display: inline-flex; align-items: center; gap: 2px;
}

/* ---------- 查看地图按钮 ---------- */
.map-open-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-size: var(--fs-sm);
  color: var(--primary);
  background: var(--primary-50);
  border: 0; border-radius: var(--r-pill);
  cursor: pointer;
}
.map-open-btn:active { background: var(--primary-100); }

/* ============================================================
   附近任务地图（腿子端「地图看单」）
   ============================================================ */

/* ---------- 任务图钉：价格气泡 + 圆点 ---------- */
.map-jobs { position: absolute; inset: 0; pointer-events: none; }
.map-job {
  position: absolute;
  width: 0; height: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity .16s ease;
}
.map-job .mj-dot {
  position: absolute; left: -7px; top: -7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 2.5px solid #fff;
  box-shadow: 0 1px 5px rgba(44, 44, 42, .3);
  transition: transform .16s ease, background .16s ease;
}
.map-job .mj-bub {
  position: absolute; left: 0; top: -13px;
  transform: translate(-50%, -100%);
  display: inline-flex; align-items: center; gap: 3px;
  height: 26px; padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 0 0 1px var(--line), 0 3px 10px rgba(44, 44, 42, .16);
  transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.map-job .mj-bub::after {
  content: '';
  position: absolute; left: 50%; bottom: -3.5px;
  width: 7px; height: 7px; margin-left: -3.5px;
  background: inherit;
  border-radius: 1px;
  transform: rotate(45deg);
}
.map-job .mj-bub em {
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  color: var(--muted);
}
.map-job.on .mj-bub {
  background: var(--primary);
  color: var(--on-primary);
  transform: translate(-50%, -100%) scale(1.1);
  box-shadow: 0 0 0 1px var(--primary), 0 6px 16px rgba(12, 68, 124, .32);
}
.map-job.on .mj-bub em { color: rgba(255, 255, 255, .82); }
.map-job.on .mj-dot {
  background: var(--primary-800);
  transform: scale(1.35);
  box-shadow: 0 0 0 5px var(--primary-50);
}

/* 参照地标（不可点，仅做方位参考） */
.map-poi.lm { pointer-events: none; }

/* ---------- 选中小区浮条 ---------- */
.map-board-chip {
  position: absolute; left: var(--sp-3); right: var(--sp-3); top: var(--sp-3);
  z-index: 8;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px 8px 8px 12px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  animation: wd-fade .16s ease;
}
.map-board-chip[hidden] { display: none; }
.map-board-chip .mcb-t {
  flex: 1; min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-board-chip .mcb-go {
  flex: none;
  display: inline-flex; align-items: center; gap: 2px;
  height: 28px; padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.map-board-chip .mcb-go:active { opacity: .88; }

/* ---------- 底部任务面板 ---------- */
.map-board {
  flex: none;
  position: relative;
  z-index: 2;
  margin-top: -12px;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-3);
  padding: var(--sp-4) 0 calc(var(--sp-4) + env(safe-area-inset-bottom));
}
.map-board-head { padding: 0 var(--sp-4) var(--sp-3); }
.map-board-head .mbh-t { font-size: var(--fs-md); color: var(--ink-2); }
.map-board-head .mbh-t b { color: var(--primary); font-size: var(--fs-lg); font-weight: 600; }
.map-board-head .mbh-s { font-size: var(--fs-xs); color: var(--hint); margin-top: 3px; }

.map-board-cards {
  display: flex;
  gap: var(--sp-3);
  padding: 2px var(--sp-4) 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--sp-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.map-board-cards::-webkit-scrollbar { display: none; }

.mb-card {
  flex: none;
  width: 212px;
  scroll-snap-align: start;
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.mb-card.on {
  background: var(--primary-50);
  border-color: var(--primary-200);
  box-shadow: var(--shadow-1);
}
.mb-card .mbc-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
}
.mb-card .mbc-pet {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-card .mbc-money {
  flex: none;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.mb-card .mbc-meta {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 5px;
}
.mb-card .mbc-addr {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-card .mbc-addr .ic, .mb-card .mbc-meta .ic { flex: none; }
.mb-card .mbc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line-2);
}
.mb-card .mbc-dist { font-size: var(--fs-xs); color: var(--hint); }
.mb-card .mbc-go {
  flex: none;
  display: inline-flex; align-items: center; gap: 2px;
  border: 0; padding: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.mb-card .mbc-go:active { opacity: .7; }

/* ---------- 空态 ---------- */
.map-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: var(--sp-8);
  text-align: center;
}
.map-empty .mpe-ic {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--hint);
  margin-bottom: var(--sp-3);
}
.map-empty .mpe-t { font-size: var(--fs-lg); font-weight: 500; color: var(--ink); }
.map-empty .mpe-d { font-size: var(--fs-sm); color: var(--muted); }

/* ---------- 任务大厅入口：可点的「附近任务」统计块 ---------- */
.stat-link {
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.stat-link .st-k { display: inline-flex; align-items: center; gap: 2px; }
.stat-link .st-k .ic { color: var(--primary); }
.stat-link:active { background: var(--primary-50); border-color: var(--primary-200); }

/* ---------- 任务大厅入口：地图看单条 ---------- */
.board-entry {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  margin-top: var(--sp-3);
  padding: 10px var(--sp-3);
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--surface) 78%);
  border: 1px solid var(--primary-100);
  border-radius: var(--r-lg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.board-entry:active { background: var(--primary-50); }
.board-entry .be-ic {
  flex: none;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
}
.board-entry .be-tx {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.board-entry .be-tx b { font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.board-entry .be-tx em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.board-entry .be-ar { flex: none; display: inline-flex; color: var(--primary); }

/* ============================================================
   真实地图（Leaflet）容器与图钉样式
   ============================================================ */
.map-canvas .leaflet-host { position: absolute; inset: 0; z-index: 0; }
.map-mini .leaflet-host { position: absolute; inset: 0; }
.leaflet-container {
  background: #dfe6ec;
  font: inherit;
  outline: none;
}
.leaflet-container a { color: var(--primary); }

/* 选点 / 查看图钉 */
.lf-pin { background: transparent; border: 0; }
.lf-pin .lf-pin-inner {
  display: block;
  filter: drop-shadow(0 3px 5px rgba(44, 44, 42, .3));
}

/* 我的位置 */
.lf-me { background: transparent; border: 0; }
.lf-me .lf-me-dot {
  display: block;
  width: 14px; height: 14px;
  margin: 2px;
  border-radius: 50%;
  background: var(--primary-100);
  border: 2px solid var(--primary);
  box-shadow: 0 1px 4px rgba(24, 95, 165, .35);
}

/* 任务图钉（价格气泡） */
.lf-job { background: transparent; border: 0; }
.lf-job .lf-job-bub {
  transform: translate(-50%, -100%);
  display: inline-flex; align-items: center; gap: 3px;
  height: 26px; padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 0 0 1px var(--line), 0 3px 10px rgba(44, 44, 42, .16);
  cursor: pointer;
}
.lf-job .lf-job-bub::after {
  content: '';
  position: absolute; left: 50%; bottom: -3.5px;
  width: 7px; height: 7px; margin-left: -3.5px;
  background: inherit;
  border-radius: 1px;
  transform: rotate(45deg);
}
.lf-job .lf-job-bub em { font-style: normal; font-weight: 500; font-size: 10px; color: var(--muted); }

/* 离线 / 瓦片加载失败提示 */
.leaflet-host.lf-offline::after {
  content: '离线 · 地图底图不可用';
  position: absolute; left: 8px; top: 8px; z-index: 5;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  color: var(--hint);
  background: rgba(255, 255, 255, .82);
  border-radius: var(--r-pill);
  pointer-events: none;
}

/* 迷你地图离线兜底（Leaflet 未加载） */
.map-mini.mm-fallback {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #F4F2EC, #F4F2EC 12px, #EDEAE1 12px, #EDEAE1 24px);
}
.map-mini.mm-fallback::after {
  content: '地图组件未加载';
  font-size: var(--fs-xs); color: var(--hint);
  background: rgba(255, 255, 255, .85); padding: 3px 8px; border-radius: var(--r-pill);
}

/* ============================================================
   行政区划级联 + 远程搜索（2026-09-18 新增）
   ============================================================ */

/* 所在区域行：选点面板里的行政区划入口 */
.map-area {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.map-area-main { flex: 1; min-width: 0; }
.map-area-lbl { font-size: var(--fs-xs); color: var(--hint); }
.map-area-val {
  font-size: var(--fs-sm); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.map-area-val.is-empty { color: var(--hint); }

/* 搜索结果分区标题 */
.map-search-sec {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--hint);
  padding: var(--sp-3) 2px var(--sp-1);
}
.map-search-sec .ic { color: var(--hint); }

/* 行政区划级联的面包屑与列表 */
.mp-crumb { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.mp-crumb button {
  font: inherit; font-size: var(--fs-xs);
  background: var(--surface-3); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 3px 10px; cursor: pointer; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-crumb button.on { background: var(--primary-100); color: #042C53; border-color: transparent; }
.mp-crumb button:disabled { opacity: .45; cursor: default; }