.maplibregl-map{position:absolute;inset:0}
.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{display:none}
.maplibregl-ctrl-group{background:#122D1C;border:1px solid rgba(201,168,76,.2)!important;border-radius:6px!important}
.maplibregl-ctrl-group button{width:32px;height:32px}
.maplibregl-ctrl-group button+button{border-top:1px solid rgba(201,168,76,.15)!important}
.maplibregl-canvas{cursor:default}
#map .maplibregl-ctrl-group,.maplibregl-map .maplibregl-ctrl-group{background:rgba(13,36,22,.92)!important;border:1px solid rgba(201,168,76,.4)!important;box-shadow:none!important}
#map .maplibregl-ctrl-group button,.maplibregl-map .maplibregl-ctrl-group button{background:transparent!important;border-bottom:1px solid rgba(201,168,76,.2)!important;width:30px!important;height:30px!important}
#map .maplibregl-ctrl-group button:last-child,.maplibregl-map .maplibregl-ctrl-group button:last-child{border-bottom:none!important}
#map .maplibregl-ctrl-group button:hover,.maplibregl-map .maplibregl-ctrl-group button:hover{background:rgba(201,168,76,.15)!important}
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{filter:invert(75%) sepia(60%) saturate(600%) hue-rotate(5deg) brightness(110%)!important}
.map-home-btn{position:absolute;top:80px;left:10px;z-index:100;width:30px;height:30px;background:rgba(13,36,22,.92);border:1px solid rgba(201,168,76,.4);border-radius:4px;color:var(--gold);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.map-home-btn:hover{background:rgba(201,168,76,.2)}
.mload{position:absolute;inset:0;background:rgba(13,36,22,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:500;gap:18px}
.dots{display:flex;gap:8px}
.dots span{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:pulse 1.2s ease-in-out infinite}
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
/* User-location marker pulse (Find Me). The marker element is a transparent
   blue ring with a small solid centre; the ring gently breathes so the user
   can see their live dot without it obscuring any underlying location dot. */
@keyframes ekUserPulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.12);opacity:.75}}
.msub{font-size:14px;color:var(--soft);text-align:center;max-width:300px}
.tog{position:absolute;top:50%;left:0;transform:translateY(-50%);z-index:1000;background:#0D2416;border:1px solid var(--bd);border-left:none;border-radius:0 6px 6px 0;width:22px;height:52px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:12px;transition:background .15s}
.tog:hover{background:rgba(18,45,28,.9)}
.map-overlays{position:absolute;top:14px;right:14px;z-index:400;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.progress{background:rgba(13,36,22,.65);backdrop-filter:blur(10px);border:1px solid var(--bd);border-radius:8px;padding:13px 18px;min-width:210px}
.prog-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--soft);margin-bottom:9px}
.prog-row{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.prog-label{font-size:13px;width:74px;flex-shrink:0;color:var(--ink)}
.prog-track{flex:1;height:4px;background:rgba(201,168,76,.12);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;border-radius:2px;transition:width .4s}
.prog-count{font-size:12px;color:var(--soft);min-width:34px;text-align:right}
.legend{background:rgba(13,36,22,.65);backdrop-filter:blur(10px);border:1px solid var(--bd);border-radius:8px;padding:12px 16px}
.leg-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--soft);margin-bottom:8px}
.leg-item{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px;color:var(--ink)}
.leg-dot{width:12px;height:12px;border-radius:50%}
.locate-btn{position:absolute;bottom:22px;left:14px;z-index:410;background:rgba(13,36,22,.7);backdrop-filter:blur(8px);border:1px solid var(--bd);border-radius:8px;padding:8px 13px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:'Jost',sans-serif;font-size:13px;font-weight:500;color:var(--gold-l);transition:all .15s}
.locate-btn:hover{background:rgba(18,45,28,.92);border-color:var(--gold)}
.locate-btn span{font-size:17px;line-height:1}
/* #mobile-detail: default hidden on desktop. mobile.css promotes to full-width bottom sheet. */
#mobile-detail{display:none}
#mobile-detail.on{display:flex}

/* #log-detail: inline panel at the bottom of the Log tab sidebar on desktop,
   same pattern as .detail in Locations tab. On mobile it's never used (mobile
   Log clicks use #mobile-detail instead). */
#log-detail{display:none;flex-shrink:0;border-top:1px solid var(--bd);background:rgba(13,36,22,.88);flex-direction:column;max-height:50%}
#log-detail.on{display:flex}