/*-----地图窗口样式（线路地图tab：查看器 + 站点交互浮层）-----*/

/*-----① 查看器基础（map- 前缀）-----*/
/*-----地图窗口全屏模式：隐藏顶部导航(header)与二级导航(nav-2nd)，保留左侧选项与地图区域-----
   线路图/站点交互图共享同一窗口，统一走 map-fullscreen-active 一套逻辑-----*/
body.map-fullscreen-active .site-header,
body.map-fullscreen-active .nav-2nd-bar {
    display: none !important;
}

/* 桌面端：左侧三级导航列贴顶，地图容器铺满其右侧的整个视口 */
@media (min-width: 1025px) {
    body.map-fullscreen-active .nav-3rd-column {
        top: 0;
    }
    body.map-fullscreen-active #map-window-content .map-window {
        top: 0;
        left: 210px;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
    }
}

/* 移动/平板端：左侧选项变为顶部横栏并贴顶，地图铺满其下方 */
@media (max-width: 1024px) {
    body.map-fullscreen-active .nav-3rd-column {
        top: 0;
    }
    body.map-fullscreen-active #map-window-content .map-window {
        top: var(--nav3rd-height);
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
    }
}

/* 全屏按钮选中态 */
#map-window-content .map-control.active {
    background: #4a6cf7;
    color: #fff;
}
#map-window-content .map-control.active:hover {
    background: #3a5be0;
    box-shadow: 0 3px 14px #00000038;
}

/*-----查看/交互模式开关地图说明下方，区域/地图说明按钮同排同块-----*/
.nav-3rd-panel .map-nav-item.map-mode-toggle {
    font-size: 16px; /* 与nav-2nd字体一致 */
    font-weight: 600;
    color: #333;
    background: #ffffff;
    text-align: center;
}
.nav-3rd-panel .map-nav-item.map-mode-toggle:hover {
    background: #f5f5f5; /* 与nav-2nd悬浮一致 */
    color: #333;
}
.nav-3rd-panel .map-nav-item.map-mode-toggle:hover .nav-label {
    transform: scale(1.06); /* 与nav-2nd悬浮文字放大一致 */
}
/* 激活=主题色方块白字；靠 .map-mode-toggle.active 更高特异性(0,4,0)压过基类 .map-nav-item.active(0,3,0)，无需!important */
.nav-3rd-panel .map-nav-item.map-mode-toggle.active,
.nav-3rd-panel .map-nav-item.map-mode-toggle.active:hover {
    background: var(--theme-color);
    color: #ffffff;
}

/*-----图片展示区域样式-----*/
.map-window {
    width: 100%;
    height: calc(100vh - var(--header-height) * 2); /*减去导航栏+下拉栏高度*/
    position: fixed;
    top: calc(var(--header-height) * 2); /*位于下拉栏下方*/
    left: 0;
    overflow: hidden; /*隐藏超出区域的图片*/
    background: #f5f5f5;
    cursor: grab; /*空白区域抓手光标*/
    touch-action: none; /*移动端单指拖拽/双指pinch交给JS，禁止浏览器滚动/缩放默认手势*/
}

/*地铁线网图底图：铺满容器、等比 contain，与站点热区层(.map-overlay)共用同一 transform(0,0 原点)对齐；
  缩放/平移由JS控制，与站点交互统一采用同一套坐标系 */
.map-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: 0 0;
    cursor: grab;
    transition: transform 0.08s linear; /*拖拽平滑过渡*/
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    pointer-events: none; /*纯显示层：交互事件落到容器，避免原生图片拖拽吞掉pointermove*/
}

.map-window:active {
    cursor: grabbing; /*按住拖拽：握拳光标*/
}

/*缩放控制按钮：四个控件横排一行（桌面与移动端一致）*/
.map-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 99;
}

.map-control {
    width: 57px;
    height: 57px;
    border: none;
    border-radius: 10px;
    background: #ffffffeb;
    color: #333;
    font-size: 30px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px #0000002e;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, box-shadow 0.15s;
    line-height: 1;
    padding: 0;
}

.map-control:hover {
    background: #e8f0fe;
    box-shadow: 0 3px 14px #00000038;
}

.map-control:active {
    background: #d2e3fc;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .map-control {
        width: 44px;
        height: 44px;
        font-size: 24px;
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    .map-control {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }
}

/*-----信息弹窗样式-----*/
.map-info-modal {
    display: none; /*默认隐藏*/
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100; /* 信息弹窗为最顶层模态层，须高于地图控件(z-index:99)等所有层 */
}

/*点击触发时显示模态框并居中内容*/
.map-info-modal.show {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 弹窗内容框：适配电脑端和移动端，移动端优先设计：width: 90% 确保在小屏幕上占据大部分宽度
max-width: 400px限制在大屏幕上的最大宽度，避免过宽，min-width: 280px保证在极小屏幕上仍有足够的可读空间*/
.map-info-content {
    width: 90%; /* 移动端优先：占据屏幕90%宽度 */
    max-width: 400px; /* 电脑端最大宽度限制 */
    min-width: 280px; /* 最小宽度保证可读性 */
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    position: relative;
}

/* 关闭按钮样式 */
.map-info-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.map-info-close:hover {
    color: var(--theme-color);
}

.map-info-content p {
    color: #333;
    line-height: 1.6;
}

/*-----地图说明弹窗内的操作提示列表-----*/
.map-info-hints {
    text-align: left;
    font-size: 14px;
    line-height: 1.8;
    padding-left: 20px;
    margin: 4px 0 12px;
}

/* 调整地图容器位置，使其位于右侧内容区域（仅桌面端：左侧三级导航列为固定侧栏） */
@media (min-width: 1025px) {
    #map-window-content .map-window {
        position: fixed; /* 固定定位 */
        top: calc(var(--header-height) + var(--nav2nd-height)); /* 位于顶部二级导航栏下方 */
        left: 210px; /* 紧贴左侧三级导航列右侧（列宽210px） */
        right: 0;
        bottom: 0;
        width: auto; /* 由left和right决定 */
        height: auto; /* 由top和bottom决定 */
        overflow: hidden;
    }
}

/* 移动/平板端（≤1024px，非全屏）：三级导航变为顶部横栏，地图窗口铺满其下方 */
@media (max-width: 1024px) {
    #map-window-content .map-window {
        top: calc(var(--header-height) + var(--nav2nd-height) + var(--nav3rd-height));
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
    }
}

@media (min-width: 769px) {
    #map-window-content .map-info-content {
        width: min(600px, 90vw);
        height: min(600px, 90vw); /* 正方形 */
        max-height: 90vh;
    }
}

/*-----② 站点交互浮层（map- 前缀：交互层；stn- 前缀：站点详情/提示层）-----*/
/* 交互层 svg：等比 meet 居中（默认 preserveAspectRatio），与 img contain 重叠对齐；
   自身不拦截，仅热区 circle 开启指针事件 */
#map-window-content .map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    transition: transform 0.08s linear;
    pointer-events: none;
    overflow: visible;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
/* 站点热区：透明可命中，覆盖原 svg g[id^="stn_"] 的点击范围 */
#map-window-content .map-overlay .map-hot {
    fill: transparent;
    pointer-events: all; /* 整个圆可命中，避免只点中圆心像素时才响应 */
    cursor: pointer;
}
/* 选中站点的高亮圈（动态插入，随交互层一起transform） */
#map-window-content .map-overlay .map-hl {
    fill: none;
    stroke: #e3002b;
    stroke-width: 3;
    pointer-events: none;
}
/* 侧边站点详情面板 交互模式显示*/
#map-window-content .stn-detail-panel {
    position: fixed;
    top: calc(var(--header-height) + var(--nav2nd-height));
    right: 0;
    left: auto;
    bottom: 0;
    width: 320px;
    height: auto;
    --panel-alpha: 0.92; /* 面板透明度统一变量，由滑条实时更新 */
    background: rgba(255,255,255,var(--panel-alpha));
    border-left: 1px solid #e2e6ee;
    box-shadow: -2px 0 8px #00000014;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 45;
    display: flex;
    flex-direction: column;
}
#map-window-content .stn-detail-panel.open { transform: translateX(0); }
/* 初次打开提示面板（居中偏上；用户操作地图或选中站点后由JS隐藏）*/
#map-window-content .stn-hint-panel {
    position: fixed;
    top: 30vh; /* 中上部：全图contain居中时避开边缘贴角，放大浏览时也不在常规操作热点区 */
    left: 50%;
    transform: translateX(-50%);
    max-width: 300px;
    background: #ffffffeb;
    border: 1px solid #e2e6ee;
    border-radius: 8px;
    box-shadow: 0 2px 10px #0000001f;
    padding: 14px 36px 14px 16px;
    z-index: 55;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#map-window-content .stn-hint-panel.hidden { display: none; }
#map-window-content .stn-hint-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: none;
    background: #00000000;
    color: #6b7280;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}
#map-window-content .stn-hint-close:hover { background: #0000000d; color: #374151; }
#map-window-content .stn-hint-cn { font-size: 14px; color: #1f2937; line-height: 1.5; }
#map-window-content .stn-hint-en { font-size: 12px; color: #6b7280; line-height: 1.5; }
/* 面板底部透明度控制条：固定底部，不随内容滚动 */
#map-window-content .stn-detail-panel .stn-opacity-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid #e2e6ee;
    background: rgba(255,255,255,var(--panel-alpha));
    font-size: 0.8rem;
    color: #4b5563;
}
#map-window-content .stn-detail-panel .stn-opacity-bar label { white-space: nowrap; }
#map-window-content .stn-detail-panel .stn-opacity-bar input[type="range"] { flex: 1; cursor: pointer; }
#map-window-content .stn-detail-panel .stn-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0; /* 固定顶部，不随内容滚动（替代原先滚动容器内 sticky 方案） */
    margin: 0;
    padding: 4px 16px 12px;
    background: rgba(255,255,255,var(--panel-alpha)); /* 跟随面板透明度变量，遮挡下方且不脱离整体调透 */
}
#map-window-content .stn-detail-panel .stn-detail-close {
    position: static;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: #0000000d; /* 常驻圆形淡背景，不只在悬停时出现 */
    font-size: 1.4rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, box-shadow 0.15s;
}
#map-window-content .stn-detail-panel .stn-detail-close:hover {
    background: #0000001f; /* 悬停时颜色稍微变深 */
    color: #374151;
    box-shadow: 0 1px 6px #0000001f; /* 圆阴影放大一些 */
}
#map-window-content .stn-detail-panel .stn-detail-content {
    padding: 12px 16px 14px; /* 上间距 12px 承接 header 下 padding，左右与 header 对齐 */
    overflow-y: auto;
    flex: 1;
}
#map-window-content .stn-detail-panel .section { margin-bottom: 16px; }
#map-window-content .stn-detail-panel #stn-detail-name strong {
    font-size: 1.15rem;
    color: #1f2937;
}
#map-window-content .stn-detail-panel #stn-detail-name .en {
    display: block;
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 2px;
}
#map-window-content .stn-detail-panel .transfer-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 0.72rem;
    color: #ffffff;
    background: #e3002b;
    border-radius: 10px;
    vertical-align: middle;
}
#map-window-content .stn-detail-panel .route-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
#map-window-content .stn-detail-panel .route-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
#map-window-content .stn-detail-panel .route-name { font-size: 0.9rem; color: #374151; }
/* 可折叠区块：仅标题栏带满宽背景，内容区透明（与其他section一致） */
#map-window-content .stn-detail-panel .stn-collapse {
    margin: 0 0 10px;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
#map-window-content .stn-detail-panel .stn-collapse > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 6px 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    background: #e9ebef;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid #e5e7eb;
    user-select: none;
    transition: background 0.15s;
}
#map-window-content .stn-detail-panel .stn-collapse > summary:hover { background: #e5e7eb; }
/* 折叠内容区：透明背景，仅留内边距，与面板其他区块保持一致 */
#map-window-content .stn-detail-panel .stn-collapse > :not(summary) { padding: 8px 10px; }
#map-window-content .stn-detail-panel .stn-collapse > summary::-webkit-details-marker { display: none; }
#map-window-content .stn-detail-panel .stn-collapse > summary::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid #374151;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform 0.15s;
    flex-shrink: 0;
}
#map-window-content .stn-detail-panel .stn-collapse:not([open]) > summary::after {
    transform: rotate(0deg);
}
#map-window-content .stn-detail-panel .stn-collapse[open] > summary::after {
    transform: rotate(90deg);
}
/* MINECRAFT坐标等非折叠标题保持原有 h4 外观 */
#map-window-content .stn-detail-panel h4 { margin: 0 0 6px; font-size: 0.9rem; font-weight: 600; color: #374151; }
#map-window-content .stn-detail-panel .exits-list { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; color: #4b5563; }
#map-window-content .stn-detail-panel .exit-item { display: flex; gap: 8px; align-items: baseline; }
#map-window-content .stn-detail-panel .exit-dir {
    display: inline-block;
    margin-right: 4px;
    font-weight: 600;
    color: #1f2937;
}
#map-window-content .stn-detail-panel .muted { color: #9aa3b2; font-size: 0.85rem; }
#map-window-content .stn-detail-panel .coord-row {
    display: flex;
    gap: 8px;
    font-size: 0.82rem;
    color: #4b5563;
    margin-top: 4px;
}
#map-window-content .stn-detail-panel .coord-label {
    flex-shrink: 0;
    color: #6b7280;
    font-weight: 600;
}
#map-window-content .stn-detail-panel .coord-val { color: #1f2937; }
#map-window-content .stn-detail-panel .exit-name { font-weight: 600; color: #1f2937; min-width: 25px; }
#map-window-content .stn-detail-panel .exit-dest { color: #4b5563; }
/* 控制按钮：复用本文件上方 .map-controls/.map-control（右下角）。
   详情面板打开时右移到面板左侧，避免被遮挡 */
#map-window-content:has(.stn-detail-panel.open) .map-controls {
    right: calc(320px + 24px);
}

/* 全屏模式（map-fullscreen-active）：header/nav-2nd已隐藏，详情面板与提示面板贴顶。
   仅桌面端生效：若全宽度作用，top:0 特异性会压过移动端抽屉的 top:auto(见≤768px媒体查询)，
   导致移动端全屏时底部抽屉被钉在顶部（"面板靠顶"）。移动端全屏保持底部抽屉布局。 */
@media (min-width: 769px) {
    body.map-fullscreen-active #map-window-content .stn-detail-panel {
        top: 0;
    }
    /* 提示面板在全屏下保持居中偏上（基础规则30vh），无需覆盖 */
}

/* 移动端：右侧详情面板改为从底部滑出，最大占用窗口高度45% */
@media (max-width: 768px) {
    #map-window-content .stn-detail-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        max-height: 45vh;
        border-left: none;
        border-top: 1px solid #e2e6ee;
        box-shadow: 0 -2px 8px #00000014;
        transform: translateY(100%);
        border-radius: 12px 12px 0 0;
    }
    #map-window-content .stn-detail-panel.open {
        transform: translateY(0);
    }
    /* 移动端提示面板：居中偏上继承基础规则(30vh)，位于底部抽屉(45vh)之上，无需覆盖 */
    /* 面板打开时（底部抽屉占45vh），把右下角控件上移到抽屉之上，避免被遮挡 */
    #map-window-content:has(.stn-detail-panel.open) .map-controls {
        right: 20px;
        bottom: calc(45vh + 14px);
    }
}