/* Location view: dark street map. Detail block top-left, Nearby as a row of tiles along the bottom. */
#locationView{position:fixed;inset:0;z-index:80;background:#07090B;color:#F4F1EA;opacity:0;visibility:hidden;transition:opacity .6s var(--ease-out),visibility 0s linear .6s}
#locationView[hidden]{display:none}
#locationView.is-open{opacity:1;visibility:visible;transition:opacity .6s var(--ease-out)}
#locationView .loc-map{position:absolute;inset:0}
#locationView button{-webkit-appearance:none;appearance:none;box-shadow:none;border-radius:0}

/* Top bar: title on the left, back to the tour on the right */
.loc-head{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:calc(env(safe-area-inset-top,0px) + 1.3rem) clamp(1.4rem,3vw,2.6rem) 2.2rem;background:linear-gradient(rgba(7,9,11,.9),rgba(7,9,11,0));pointer-events:none}
.loc-head > *{pointer-events:auto}
.loc-kicker{display:block;font-family:var(--font-sans);font-size:9px;font-weight:500;letter-spacing:.24em;color:#8f9aa1}
.loc-title{margin:.45rem 0 0;font-family:var(--font-display);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.05;letter-spacing:-.01em}
/* .loc-close shares the Exterior view's .plan-back style from index.html */
.loc-close:focus-visible{outline:1px solid rgba(244,241,234,.6);outline-offset:6px}

/* Compass: minimal north mark, top-right under the header. The map never rotates, so it stays put. */
.loc-compass{position:absolute;top:calc(env(safe-area-inset-top,0px) + 7.2rem);right:clamp(1.4rem,3vw,2.6rem);z-index:3;width:44px;height:44px;pointer-events:none}
.loc-compass svg{display:block;width:100%;height:100%;overflow:visible}
.loc-compass text{font-family:var(--font-sans);font-size:7px;font-weight:500;fill:#F4F1EA;text-anchor:middle}
.loc-compass path{stroke-width:.8;stroke-linecap:round}

/* Detail block: top-left, under the title */
.loc-card{position:absolute;top:calc(env(safe-area-inset-top,0px) + 7.2rem);left:clamp(1.4rem,3vw,2.6rem);z-index:3;width:min(300px,calc(100% - 2.8rem));pointer-events:none}
.loc-card-kicker{display:block;font-family:var(--font-sans);font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#8f9aa1}
.loc-card h3{margin:.35rem 0 0;font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1.1}
.loc-card p{margin:.4rem 0 0;font-family:var(--font-sans);font-size:11px;line-height:1.5;color:#8f9aa1}
.loc-card-foot{display:flex;align-items:baseline;gap:.9rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid rgba(244,241,234,.14)}
.loc-card-foot p{margin:0;white-space:nowrap}
.loc-card.is-in > *{animation:loc-rise .7s var(--ease-out) both}
.loc-card.is-in > :nth-child(2){animation-delay:.06s}
.loc-card.is-in > :nth-child(3){animation-delay:.12s}
@keyframes loc-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.loc-card strong{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1;color:#F4F1EA;white-space:nowrap}

/* Nearby: a row of tiles along the bottom */
.loc-panel{position:absolute;left:clamp(1.4rem,3vw,2.6rem);right:clamp(1.4rem,3vw,2.6rem);bottom:calc(env(safe-area-inset-bottom,0px) + 1.4rem);z-index:3}
.loc-panel-kicker{display:block;padding:0 0 .7rem;font-family:var(--font-sans);font-size:9px;font-weight:500;letter-spacing:.24em;color:#8f9aa1}
/* Map credit required by the OSM / OpenMapTiles licenses: kept quiet, on the NEARBY line */
.loc-credit{position:absolute;top:0;right:0;margin:0;font-family:var(--font-sans);font-size:8px;font-weight:400;letter-spacing:.08em;line-height:9px;color:rgba(244,241,234,.32)}
.loc-credit a{color:inherit;text-decoration:none}
.loc-credit a:hover,.loc-credit a:focus-visible{color:rgba(244,241,234,.7);outline:none}
.loc-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:0;padding:0;list-style:none}
/* A tile: its sign and number, what it is, its name, the minutes to it. A fine line draws along
   its top edge when it is chosen, and an arrow comes in beside the time. */
.loc-row{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;width:100%;height:100%;padding:1rem 1rem 1.05rem;border:1px solid rgba(244,241,234,.1);background:rgba(7,9,11,.66);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);color:rgba(244,241,234,.72);text-align:left;cursor:pointer;transition:border-color .35s var(--ease-out),background .35s var(--ease-out),color .35s var(--ease-out)}
.loc-row:before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:#F4F1EA;transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out)}
.loc-row:focus-visible{outline:1px solid rgba(244,241,234,.6);outline-offset:3px}
.loc-row.is-active{border-color:rgba(244,241,234,.26);background:rgba(244,241,234,.07);color:#F4F1EA}
.loc-row.is-active:before{transform:scaleX(1)}
.loc-row-top{display:flex;justify-content:space-between;align-items:center;width:100%}
.loc-row-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(244,241,234,.2);transition:border-color .35s var(--ease-out),background .35s var(--ease-out)}
.loc-row.is-active .loc-row-icon{border-color:#F4F1EA;background:#F4F1EA}
.loc-row.is-active .loc-row-icon svg{stroke:#07090B}
.loc-row-n{font-family:var(--font-sans);font-size:9px;font-weight:500;letter-spacing:.22em;color:rgba(244,241,234,.3);font-variant-numeric:tabular-nums}
.loc-row-text{display:flex;flex-direction:column;min-width:0}
.loc-row-kind{margin-bottom:.35rem;font-family:var(--font-sans);font-size:8px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#8f9aa1}
.loc-row-name{font-family:var(--font-display);font-size:17px;line-height:1.15}
.loc-row-foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem;width:100%;margin-top:auto}
.loc-row .m{font-family:var(--font-sans);font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#8f9aa1;transition:color .35s var(--ease-out)}
.loc-row.is-active .m{color:#F4F1EA}
.loc-row-go{flex:none;width:22px;height:10px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-8px);transition:opacity .35s var(--ease-out),transform .5s var(--ease-out)}
.loc-row.is-active .loc-row-go{opacity:1;transform:none}
@media(hover:hover) and (pointer:fine){
 .loc-row:hover{border-color:rgba(244,241,234,.3);color:#F4F1EA}
 .loc-row:hover .loc-row-icon{border-color:rgba(244,241,234,.55)}
 .loc-row:hover .loc-row-go{opacity:.7;transform:none}
}
/* the tiles rise into place, one after the other, each time the view opens */
#locationView.is-open .loc-list li{animation:loc-rise .8s var(--ease-out) both}
#locationView.is-open .loc-list li:nth-child(1){animation-delay:.35s}
#locationView.is-open .loc-list li:nth-child(2){animation-delay:.42s}
#locationView.is-open .loc-list li:nth-child(3){animation-delay:.49s}

@media(max-width:700px){
 .loc-head{padding-left:1.2rem;padding-right:1.2rem}
 .loc-card{left:1.2rem;right:4.4rem;width:auto;top:calc(env(safe-area-inset-top,0px) + 6.6rem)}
 .loc-compass{top:calc(env(safe-area-inset-top,0px) + 6.6rem);right:1.2rem}
 .loc-card-foot p{display:none}
 .loc-panel{left:1.2rem;right:1.2rem}
 .loc-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
 .loc-row{padding:.7rem .6rem .8rem;gap:.5rem}
 .loc-row-name{font-size:13px}
 .loc-row .m{font-size:8px;letter-spacing:.08em}
 .loc-row-kind,.loc-row-n,.loc-row-go{display:none}
}

/* Places on the map: a small glass disc with its sign, a fine ring that closes round it when it is
   chosen (the disc then turns to ivory), its name and the minutes to it underneath. */
.loc-pin{position:relative;display:block;width:30px;height:30px;padding:0;border:0;background:transparent;color:#F4F1EA;cursor:pointer;transition:opacity .5s var(--ease-out)}
.loc-pin-dot{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(244,241,234,.34);background:rgba(7,9,11,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.5);transition:border-color .35s var(--ease-out),background .35s var(--ease-out),transform .45s var(--ease-out)}
.loc-pin-ring,.loc-pin-wave{position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(244,241,234,.6);opacity:0;pointer-events:none}
.loc-pin-ring{transform:scale(.78);transition:opacity .4s var(--ease-out),transform .6s var(--ease-out)}
.loc-pin-wave{inset:0}
.loc-pin-label{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.95);pointer-events:none}
.loc-pin-label b{font-family:var(--font-sans);font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#D9D3C3;transition:color .35s var(--ease-out)}
.loc-pin-label i{font-family:var(--font-sans);font-style:normal;font-size:8px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#8f9aa1}
.loc-pin.is-active .loc-pin-dot{border-color:#F4F1EA;background:#F4F1EA;transform:scale(1.06)}
.loc-pin.is-active .loc-pin-dot svg{stroke:#07090B}
.loc-pin.is-active .loc-pin-ring{opacity:.5;transform:scale(1)}
.loc-pin.is-active .loc-pin-label b{color:#F4F1EA}
.loc-pin.is-dim{opacity:.38}
@media(hover:hover) and (pointer:fine){
 .loc-pin:hover .loc-pin-dot{border-color:#F4F1EA}
 .loc-pin:hover .loc-pin-ring{opacity:.35;transform:scale(1)}
}
.loc-pin:focus-visible{outline:1px solid #F4F1EA;outline-offset:8px;border-radius:50%}
.loc-pin-dot svg,.loc-row-icon svg{width:15px;height:15px;fill:none;stroke:#F4F1EA;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s var(--ease-out)}

/* The site: a point and two rings that spread from it across the ground, driven from the frame
   loop (location.js updatePulse). Close in, the tower is drawn on the map: the point steps back
   and the rings stay. */
.loc-site{position:relative;width:0;height:0}
.loc-site b{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#F4F1EA;box-shadow:0 0 0 2px rgba(7,9,11,.7),0 0 10px rgba(244,241,234,.5);transition:opacity .5s var(--ease-out);will-change:transform}
.loc-site i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:1px solid rgba(244,241,234,.7);opacity:0;will-change:transform,opacity}
.loc-map.is-near .loc-site b{opacity:0}


.maplibregl-ctrl-attrib{background:rgba(7,9,11,.6)!important;color:#8f9aa1!important;font-family:var(--font-sans);font-size:9px}
.maplibregl-ctrl-attrib a{color:#8f9aa1!important}

@media(prefers-reduced-motion:reduce){
 #locationView,.loc-row,.loc-row:before,.loc-row-go,.loc-pin,.loc-pin-dot,.loc-pin-ring{transition:none}
 .loc-site i{opacity:.25;transform:scale(1.1)}
 /* things appear in place: a short fade, no movement */
 #locationView.is-open .loc-list li,.loc-card.is-in > *{animation:loc-fade .3s ease both;animation-delay:0s}
}
@keyframes loc-fade{from{opacity:0}to{opacity:1}}