/* ===== 三角洲·通用地图板块：前台地图嵌入组件 =====
   配合 templates/html/delta/delta_map_embed.html 的 {{define "mapEmbed"}} 使用。
   标注坐标是底图百分比，叠加层统一用 viewBox="0 0 100 100" preserveAspectRatio="none"
   或 left/top 百分比，因此底图缩放时标注始终对齐。
   stroke 一律加 vector-effect="non-scaling-stroke"，避免被 viewBox 拉伸变粗。 */

.map-embed {
    margin: 1.25rem 0;
    border: 1px solid var(--dta-border);
    border-radius: 14px;
    background: var(--dta-panel);
    overflow: hidden;
}

/* 头部：地图名 + 提示 */
.map-embed .me-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--dta-border);
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
}
body.theme-light .map-embed .me-head { color: #0f172a; }
.map-embed .me-head .me-hint {
    margin-left: auto;
    font-size: .74rem;
    font-weight: 400;
    color: var(--dta-muted);
}

/* 画布：底图 + 叠加层 */
.map-embed .me-canvas {
    position: relative;
    line-height: 0;
    background: rgba(15, 23, 42, .04);
}
.map-embed .me-canvas > img {
    width: 100%;
    height: auto;
    display: block;
}
.map-embed .me-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.map-embed .me-svg polygon,
.map-embed .me-svg polyline {
    pointer-events: auto;
    cursor: pointer;
    transition: fill-opacity .15s ease, stroke-opacity .15s ease;
}
.map-embed .me-svg .me-shape.active { fill-opacity: .5; stroke-opacity: 1; }
.map-embed .me-svg .me-shape.dim { fill-opacity: .05; stroke-opacity: .2; }

/* 路线途经点序号（用序号表示方向，不受底图长宽比影响） */
.map-embed .me-seq {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    min-width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    border-radius: 99px;
    font-size: .62rem;
    font-weight: 700;
    color: #061018;
    background: #fff;
    border: 1px solid var(--dta-border-strong);
    pointer-events: none;
}

/* 标点 */
.map-embed .me-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.map-embed .me-pin .me-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 1px 4px rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: transform .15s ease;
}
.map-embed .me-pin.active .me-dot { transform: scale(1.5); }
.map-embed .me-pin .me-label {
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    background: rgba(6, 16, 24, .74);
    border: 1px solid var(--dta-border-strong);
    border-radius: 6px;
    padding: .05rem .38rem;
    white-space: nowrap;
    text-decoration: none;
}
body.theme-light .map-embed .me-pin .me-label { color: #0f172a; background: rgba(255, 255, 255, .88); }

/* 未上传底图时的占位 */
.map-embed .me-empty {
    padding: 2.4rem 1rem;
    text-align: center;
    color: var(--dta-muted);
    font-size: .84rem;
    line-height: 1.8;
}
.map-embed .me-empty i { font-size: 1.7rem; display: block; margin-bottom: .4rem; opacity: .6; }

/* 图例：点一下高亮图上对应的标注 */
.map-embed .me-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .55rem;
    padding: .7rem .85rem .2rem;
}
.map-embed .me-item {
    text-align: left;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--dta-border);
    border-radius: 10px;
    padding: .5rem .6rem;
    cursor: pointer;
    transition: all .18s ease;
    line-height: 1.55;
}
body.theme-light .map-embed .me-item { background: rgba(15, 23, 42, .02); }
.map-embed .me-item:hover,
.map-embed .me-item.active { border-color: var(--dta-border-strong); background: rgba(34, 211, 238, .07); }
.map-embed .me-item.dim { opacity: .35; }
.map-embed .me-item .me-rn {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    color: #fff;
    font-size: .85rem;
}
body.theme-light .map-embed .me-item .me-rn { color: #0f172a; }
.map-embed .me-item .me-sw {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    flex: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}
body.theme-light .map-embed .me-item .me-sw { box-shadow: 0 0 0 1px rgba(15, 23, 42, .18); }
.map-embed .me-item .me-kind {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 400;
    color: var(--dta-muted);
}
.map-embed .me-item .me-tags { margin-top: .25rem; }
.map-embed .me-item .me-note {
    font-size: .74rem;
    color: var(--dta-muted);
    margin-top: .3rem;
}
.map-embed .me-item a { color: inherit; }

.map-embed .me-foot {
    padding: .35rem .85rem .75rem;
    font-size: .74rem;
    color: var(--dta-muted);
    line-height: 1.7;
}