/**
 * JoyTrack — 赛事轨迹通用组件样式（地图 + 海拔剖面图）
 *
 * 供以下场景共用，确保展示一致性：
 *  - 赛事首页组别轨迹图（components/game/event/trackprofile）
 *  - GPS 追踪页（game/gps）
 * 差异仅体现在功能开关（人数柱图 / 选手圆点等），视觉风格统一由本文件维护。
 * 前缀 jt- 避免与各页面既有样式冲突。
 */

/* 公里点标记：白底描边小胶囊 */
.jt-km-marker {
    background: rgba(255,255,255,.92); color: #0d0d0d; border: 1px solid #A40A3C;
    border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 14px;
    text-align: center; padding: 0 3px; box-shadow: 0 1px 3px rgba(0,0,0,.3); white-space: nowrap;
}

/* 计时点（CP）编号圆点：无服务信息的普通计时点 */
.jt-cp-num {
    display: flex; align-items: center; justify-content: center;
    width: 24px !important; height: 24px !important;
    margin-left: -12px !important; margin-top: -12px !important;
    border-radius: 50%; background: #A40A3C; color: #fff;
    font-size: 10px; font-weight: 700; border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.35); box-sizing: border-box;
}

/* 有服务的计时点：白色胶囊 + 服务图标（最多 2 个，多出 +N），与普通编号圆点区分 */
.jt-cp-marker {
    display: flex; align-items: center; justify-content: center; gap: 3px;
    height: 26px; padding: 0 7px;
    background: rgba(255,255,255,.96); border: 1.5px solid #A40A3C; border-radius: 13px;
    box-shadow: 0 1px 4px rgba(0,0,0,.35); box-sizing: border-box;
}
.jt-cp-marker img { width: 16px; height: 16px; object-fit: contain; }
.jt-cp-marker-txt { font-size: 11px; font-weight: 700; color: #A40A3C; }
.jt-cp-marker-more { font-size: 10px; font-weight: 700; color: #A40A3C; }

/* 轨迹/海拔图联动悬浮点 */
.jt-hover-marker {
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 3px solid #A40A3C;
    box-shadow: 0 1px 5px rgba(0,0,0,.45); box-sizing: border-box;
}

/* 计时点详情（UTMB 风格信息栅格）：Leaflet popup 与悬浮面板共用 */
.jt-cp-popup { min-width: 260px; font-size: 12px; }
.jt-cp-popup .cp-name { font-size: 14px; font-weight: 700; color: #A40A3C; margin-bottom: 8px; }
.jt-cp-popup .cp-tag {
    font-size: 10px; background: #A40A3C; color: #fff; border-radius: 3px;
    padding: 1px 5px; font-weight: 500; vertical-align: 1px;
}
.jt-cp-popup .cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; }
.jt-cp-popup .cp-cell span { display: block; color: #9ca3af; font-size: 11px; line-height: 1.4; }
.jt-cp-popup .cp-cell b { font-size: 13px; color: #111; font-weight: 600; }
.jt-cp-popup .cp-services {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid #f3f4f6;
    display: flex; flex-wrap: wrap; gap: 8px 16px;
}
.jt-cp-popup .cp-service {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: #374151; line-height: 1.2;
}
.jt-cp-popup .cp-service img { width: 20px; height: 20px; object-fit: contain; }
.jt-cp-popup .cp-summary {
    margin-top: 8px; padding-top: 6px; border-top: 1px solid #f3f4f6;
    color: #6b7280; line-height: 1.6; max-width: 300px; white-space: pre-wrap;
}

/* CP 详情悬浮面板（不吸附点位，覆盖地图中央） */
.jt-cp-panel {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 1001; background: #fff; border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.25); padding: 16px 18px;
    max-width: min(92%, 420px); max-height: 85%; overflow-y: auto;
}
.jt-cp-close {
    position: absolute; top: 6px; right: 10px; border: none; background: none;
    font-size: 18px; color: #999; cursor: pointer; line-height: 1;
}
.jt-cp-close:hover { color: #333; }