/* ============================================================
   足迹页 · 自定义页面模板（tracks.php）样式
   依赖主题 style.css 的变量、hm-* 热力组件与 pagenav 分页
   ============================================================ */

.tracks-wrap { max-width: 1080px }

/* ---- 上区：地图 3 + 信息 2 ---- */
.tk-hero {
  display: grid; grid-template-columns: 3fr 2fr; gap: 1rem;
  height: 640px; margin: 1.5rem 0 1rem;
}

/* 地图卡：#tracksMap 由 Tracks 插件渲染 Mapbox */
.tk-map {
  position: relative; overflow: hidden;
  background: var(--card); border: var(--bd); border-radius: 12px;
  scroll-margin-top: 5rem;
}
.tk-map .tk-map-canvas { position: absolute; inset: 0 }
/* Mapbox 样式加载完成前的格纹底 */
.tk-map .tk-map-canvas::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, color-mix(in srgb, var(--line) 55%, transparent) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--line) 55%, transparent) 39px 40px);
}
.tk-map #tracksMap { position: absolute; inset: 0 }

/* 地图角标：状态提示（加载中 / 已渲染 N 条 / 未配置 token） */
.tk-map .tk-map-note {
  position: absolute; left: .9rem; bottom: 2.7rem; z-index: 1;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; color: var(--faint);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: 1px dashed var(--line); border-radius: 7px; padding: .25rem .6rem;
  pointer-events: none;
}

/* 视图切换：足迹干道 / 全国足迹 */
.tk-map .tk-view-toggle {
  position: absolute; left: .9rem; top: .8rem; z-index: 1;
  display: flex; gap: .35rem;
}
.tk-map .tk-view-toggle[hidden] { display: none }
.tk-map .tk-view-toggle button {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  color: var(--sub);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid var(--line); border-radius: 7px;
  padding: .3rem .65rem; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tk-map .tk-view-toggle button:hover { color: var(--ink); border-color: var(--accent) }
.tk-map .tk-view-toggle button.is-active {
  color: var(--accent-deep); font-weight: 700;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}

/* 全国视图信标：脉冲圆点 + 标签 */
.tk-map .tk-beacon { display: flex; flex-direction: column; align-items: center; gap: .3rem; pointer-events: none }
.tk-map .tk-beacon i {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2.5px solid var(--card);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: tk-pulse 2.4s ease-out infinite;
}
@keyframes tk-pulse {
  0% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent) }
  70% { box-shadow: 0 0 0 16px transparent }
  100% { box-shadow: 0 0 0 2px transparent }
}
.tk-map .tk-beacon span {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px; padding: .15rem .55rem;
  white-space: nowrap;
}

/* 悬浮信息面板：列表点选后展示单条轨迹（贴底通栏 + 半透明可见地图） */
.tk-map .tk-map-panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: none;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  backdrop-filter: blur(2px);
  padding: .6rem .9rem .65rem;
  font-family: var(--sans);
}
.tk-map .tk-map-panel.is-open { display: block }
.tk-map .tk-panel-loading { font-family: var(--mono); font-size: .72rem; color: var(--faint); padding: .2rem 0 }
.tk-map .tk-panel-close {
  position: absolute; right: .3rem; top: .25rem;
  width: 1.6rem; height: 1.6rem; border: none; background: none; cursor: pointer;
  font-size: .95rem; line-height: 1; color: var(--faint);
}
.tk-map .tk-panel-close:hover { color: var(--ink) }
.tk-map .tk-panel-head { display: flex; align-items: center; gap: .5rem; padding-right: 1.4rem; min-width: 0 }
.tk-map .tk-panel-head svg { width: .95rem; height: .95rem; stroke: var(--accent-deep); flex: none }
.tk-map .tk-panel-head b { font-family: var(--sans); font-size: .78rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tk-map .tk-panel-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .3rem .8rem; margin-top: .5rem;
}
.tk-map .tk-panel-meta span { display: flex; align-items: baseline; gap: .4rem; min-width: 0 }
.tk-map .tk-panel-meta span i { font-style: normal; font-family: var(--sans); font-size: .64rem; color: var(--faint); flex: none }
.tk-map .tk-panel-meta span b {
  font-family: var(--mono); font-size: .7rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Mapbox 控件与归因：跟随主题弱化 */
.tk-map .mapboxgl-ctrl-group {
  background: var(--card) !important; border: var(--bd) !important;
  box-shadow: none !important; overflow: hidden;
}
.tk-map .mapboxgl-ctrl-group button + button { border-top: var(--bd) }
.tk-map .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
  /* 地图固定暗色样式，控件图标反色保证可见 */
  filter: invert(1) grayscale(1);
  opacity: .7;
}
.tk-map .mapboxgl-ctrl-attrib {
  background: color-mix(in srgb, var(--card) 72%, transparent) !important;
  font-size: .58rem;
}
.tk-map .mapboxgl-ctrl-attrib a { color: var(--faint) }

/* Mapbox 弹窗：卡片化并跟随明暗变量 */
.tk-map .mapboxgl-popup-content {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .85rem; box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  font-family: var(--sans);
}
.tk-map .mapboxgl-popup-content b {
  display: block; font-size: .8rem; font-weight: 700; line-height: 1.35;
  max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-map .mapboxgl-popup-content span {
  display: block; margin-top: .2rem;
  font-family: var(--mono); font-size: .68rem; color: var(--sub);
}
.tk-map .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color: var(--card) }
.tk-map .mapboxgl-popup-anchor-top .mapboxgl-popup-tip { border-bottom-color: var(--card) }
.tk-map .mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: var(--card) }
.tk-map .mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: var(--card) }

/* 右侧信息列：统计 / 热力（弹性占满）/ 概览 */
.tk-side { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1rem; min-height: 0 }
.tk-card {
  background: var(--card); border: var(--bd); border-radius: 12px; min-width: 0;
  padding: 1.25rem;
}

/* 记录概览卡：条数大字 + 跨度 / 来源两行 */
.tk-overview { display: flex; flex-direction: column; gap: 1rem }
.tk-over-list { display: flex; flex-direction: column }
.tk-over-list .tk-sum-b-row { display: flex; align-items: baseline; gap: .55rem; padding: .22rem 0 }
.tk-over-list .tk-sum-b-row .name { flex: none; font-size: .75rem; color: var(--sub) }
.tk-over-list .tk-sum-b-row .value {
  margin-left: auto; font-family: var(--mono); font-size: .75rem; font-weight: 700;
  color: var(--ink); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 总里程统计卡 */
.tk-sum { display: flex; flex-direction: column; gap: 1rem }
.tk-sum-head { display: flex; align-items: baseline; justify-content: space-between }
.tk-sum-head .tk-sum-label { font-family: var(--mono); font-size: .75rem; letter-spacing: .26em; color: var(--faint) }
.tk-total { display: flex; align-items: baseline; gap: .45rem; line-height: 1 }
.tk-total b { font-family: var(--mono); font-size: 1.75rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.tk-total i { font-style: normal; font-family: var(--mono); font-size: .875rem; font-weight: 700; color: var(--faint) }
.tk-sum-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.tk-sum-list .tk-sum-b-row { display: flex; align-items: center; gap: .55rem }
.tk-sum-list .tk-sum-b-row svg { width: .95rem; height: .95rem; stroke: var(--accent-deep); flex: none }
.tk-sum-list .tk-sum-b-row .name { font-size: .75rem; color: var(--sub) }
.tk-sum-list .tk-sum-b-row .value { margin-left: auto; font-family: var(--mono); font-size: .75rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums }
.tk-sum-list .tk-sum-b-row .value i { font-style: normal; font-size: .75rem; font-weight: 400; color: var(--faint); margin-left: .12em }

/* 每日里程热力卡：格子流式填满卡宽（周数由服务端输出） */
.tk-heat { gap: 1rem; display: flex; flex-direction: column; min-height: 0 }
.tk-heat .hm-wrap { align-self: stretch; margin: auto 0; width: 100% }
.tk-heat .hm-body { grid-template-columns: repeat(var(--weeks, 23), 1fr) }

/* ---- 足迹卡片列表（左 icon · 中标题/里程 · 右日期） ---- */
.tk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-bottom: .4rem }
.tk-item {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: .8rem; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  padding: 1rem; cursor: pointer;
  transition: transform .18s, border-color .18s;
}
.tk-item:hover { transform: translateY(-2px); border-color: var(--accent) }
.tk-item.is-active { border-color: var(--accent); background: var(--accent-soft) }
.tk-item .tk-item-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.tk-item .tk-item-icon svg { width: 1.15rem; height: 1.15rem; stroke: var(--accent-deep) }
.tk-item .tk-item-body { min-width: 0; height: 2.5rem; display: flex; flex-direction: column; justify-content: space-around; gap: .15rem }
.tk-item .tk-item-title { font-size: .75rem; font-weight: 400; color: var(--sub); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tk-item .tk-item-value { display: flex; align-items: baseline; gap: .3rem; line-height: 1 }
.tk-item .tk-item-value b { font-family: var(--mono); font-size: 1.125rem; font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.tk-item .tk-item-value b.is-name { font-family: var(--sans); font-size: .875rem }
.tk-item .tk-item-value i { font-style: normal; font-family: var(--mono); font-size: .75rem; font-weight: 400; color: var(--faint) }
.tk-item .tk-item-date { flex: none; font-family: var(--mono); font-size: .75rem; color: var(--faint); text-align: right }
.tk-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--faint); font-size: .875rem }

/* ---- 地域隐私：整条未公开的行程 ---- */
/* 卡片保留、打「未公开」标；pointer-events 直接禁掉点选与悬停 */
.tk-item.is-private {
  position: relative; cursor: default; pointer-events: none;
  border-style: dashed; opacity: .72;
}
.tk-item.is-private .tk-item-icon { position: relative }
.tk-item.is-private .tk-item-icon svg { stroke: var(--faint) }
.tk-item.is-private .tk-item-icon::after {
  content: "未公开";
  position: absolute; top: -.45rem; right: -.55rem;
  font-size: .6rem; line-height: 1; padding: .18rem .34rem;
  border-radius: 999px; white-space: nowrap;
  color: var(--faint); background: var(--card); border: 1px solid var(--line);
}

/* 明细面板：部分路线未公开的说明 */
.tk-map .tk-panel-note { margin-top: .45rem; font-size: .64rem; color: var(--faint) }

/* 分页 */
.tk-list .pagenav { padding: .8rem 0 1.2rem }

/* ---- 响应式 ---- */
@media (max-width: 900px) {
  .tk-hero { grid-template-columns: 1fr; height: auto }
  .tk-map { height: 340px }
  .tk-map .tk-panel-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 760px) {
  .tk-grid { grid-template-columns: 1fr }
}