@import url('./vendor/maplibre/maplibre-gl.css');
.e8-debug-hud{position:absolute;z-index:5;top:8px;left:8px;margin:0;padding:10px 12px;pointer-events:none;white-space:pre;font:11px/1.55 Consolas,monospace;color:#cdefff;background:#061627dc;border:1px solid #426779;border-radius:5px}
.e8-label{color:#effaff;background:#072134de;border:1px solid #78a2b5a0;border-radius:5px;padding:6px 9px;white-space:pre-line;font:12px/1.5 system-ui;cursor:pointer;box-shadow:0 3px 12px #0005}

.e8-statusbar{position:absolute;left:0;bottom:0;z-index:1;box-sizing:border-box;width:100%;margin:0;padding:0 20px 0 0;border:0;background:rgba(255,255,255,.2);color:#000;font-size:12px;line-height:normal;text-align:right;white-space:nowrap;pointer-events:none;user-select:none}
.e8-statusbar[hidden],.e8-statusbar [hidden]{display:none}
/* 狀態列滿寬時，比例尺與版權控制項需避開最底下一行。 */
.e8-statusbar-visible .maplibregl-ctrl-bottom-left,.e8-statusbar-visible .maplibregl-ctrl-bottom-right,.e8-source-attribution-visible .maplibregl-ctrl-bottom-left,.e8-source-attribution-visible .maplibregl-ctrl-bottom-right{bottom:18px}
/* 圖資署名持續可見，以透明文字取代白色資訊塊；白色描邊維持底圖上的可讀性。 */
.maplibregl-map .maplibregl-ctrl-attrib:not(.maplibregl-compact){background:transparent;border-radius:0;text-shadow:0 0 2px #fff,0 0 3px #fff}
.e8-source-attribution{position:absolute;left:4px;bottom:0;z-index:1;max-width:calc(100% - 220px);font:11px/17px Arial,sans-serif;color:#000;text-shadow:0 0 2px #fff,0 0 3px #fff;overflow-wrap:anywhere}
.e8-source-attribution a{color:inherit}

.e8-popup{position:relative;max-width:calc(100vw - 60px);color:#172d3b;font:14px/1.5 system-ui}
.e8-popup-content{max-height:min(50vh,320px);overflow:auto;padding:4px 20px 4px 4px}
.e8-popup-closer{position:absolute;right:0;top:0;z-index:1;text-decoration:none;color:inherit;font:24px/1 system-ui;cursor:pointer}

/* 沿用 E7 控制列尺寸與透明度，獨立按鈕避免 MapLibre 群組底色連成白色區塊。 */
.maplibregl-ctrl-group.e8-mode-control{width:42px;background:transparent;border-radius:0;box-shadow:none}
.maplibregl-ctrl-group.e8-mode-control button{width:32px;height:32px;margin:3.6px;padding:0;border:0;border-radius:4px;background:rgba(0,0,0,.72);color:#fff;font:600 16px/32px Arial,sans-serif;box-shadow:none}
.maplibregl-ctrl-group.e8-mode-control button:focus{border-radius:4px;box-shadow:none}
.maplibregl-ctrl-group.e8-mode-control button:hover{background:rgba(0,0,0,.8)}
.maplibregl-ctrl-group.e8-mode-control button:active{background:rgba(0,0,0,.85)}
.e8-mode-control button:focus-visible{outline:2px solid #0096ff;outline-offset:2px}
.maplibregl-ctrl-group.e8-mode-control .e8-mode-button{font-size:14px}
.maplibregl-ctrl-group.e8-mode-control .e8-zoom-button{font-size:24px;line-height:30px}
.maplibregl-ctrl-group.e8-mode-control button.e8-compass-button{position:relative;width:50px;height:50px;margin:0;border-radius:50%;transform:translateX(-4px);box-shadow:inset 0 0 0 3px rgba(255,255,255,.15)}
.e8-compass-needle{position:absolute;top:12px;left:21px;width:8px;height:28px;transform-origin:50% 50%}
.e8-compass-needle::before,.e8-compass-needle::after{position:absolute;left:0;width:0;height:0;content:"";border-style:solid}
.e8-compass-needle::before{top:0;border-width:0 4px 14px;border-color:transparent transparent #e8483b}
.e8-compass-needle::after{bottom:0;border-width:14px 4px 0;border-color:#fff transparent transparent}
.e8-compass-direction{position:absolute;width:8px;height:8px;color:#ccc;font:600 6px/8px Arial,sans-serif;text-align:center}
.e8-compass-n{top:3px;left:21px}.e8-compass-e{top:21px;right:3px}.e8-compass-s{bottom:3px;left:21px}.e8-compass-w{top:21px;left:3px}

/* 原生比例尺負責距離與寬度，外框沿用 E7；底部控制列會自動避開座標與來源署名。 */
.e8-scale-control{padding:2px;border-radius:4px;background:rgba(0,60,136,.3);pointer-events:none;user-select:none}
.maplibregl-ctrl-bottom-left .e8-scale-control{margin:0 0 8px 8px}
.e8-scale-control .maplibregl-ctrl-scale{float:none;clear:none;margin:1px;padding:0 2px;border:1px solid #eee;border-top:none;background:transparent;color:#eee;font:10px/normal Arial,sans-serif;text-align:center;will-change:contents,width}
.e8-scale-control[hidden]{display:none}
