:root{color-scheme:dark;--coal:#242625;--cream:#fff0d8;--muted:#c7bca9;--orange:#ffad5c;--line:#665444;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--cream);background:var(--coal)}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button{color:var(--cream);background:var(--coal);border:1px solid var(--line);border-radius:12px;min-height:44px}button:hover,a:hover{color:var(--orange)}button:focus-visible,a:focus-visible,#map:focus-visible{outline:3px solid var(--orange);outline-offset:3px}[hidden]{display:none!important}
#map{position:fixed;inset:0;background:#292b2b}.identity{position:absolute;top:24px;left:24px;padding:18px 22px;background:#242625f5;border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 28px #0003;max-width:calc(100% - 100px);pointer-events:none}.identity h1{font-size:20px;line-height:1.3;margin:0 0 10px;font-weight:700;letter-spacing:-.4px}.identity h1 span{margin-right:5px}.identity-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);flex-wrap:wrap}.identity-meta #count{font-size:14px;color:var(--cream)}.identity a{pointer-events:auto;text-underline-offset:4px;padding:5px 0}.preview{color:var(--orange);border:1px solid #805a33;padding:3px 7px;border-radius:6px;font-size:10px;text-transform:uppercase;letter-spacing:1px}.cobweb{position:absolute;right:0;top:0;width:180px;opacity:.10;filter:invert(1);pointer-events:none}
.ol-control{background:none;padding:0}.ol-control:hover{background:none}.ol-zoom{top:130px;right:24px;left:auto;display:flex;flex-direction:column;gap:6px}.ol-control button{background:var(--coal);color:var(--orange);width:44px;height:44px;margin:0;border:1px solid var(--line);border-radius:12px;font-size:24px;line-height:1}.ol-control button:hover,.ol-control button:focus{background:#39342c}.ol-rotate{top:236px;right:24px}.ol-rotate button{font-size:18px}.ol-attribution{display:none}.credits{position:absolute;left:12px;bottom:8px;padding:5px 8px;border-radius:6px;background:#242625ed;font-size:10px;line-height:1.5;color:var(--muted)}.credits a{text-underline-offset:2px}
.navigation{position:absolute;right:24px;bottom:32px;display:flex;align-items:flex-end;flex-direction:column;gap:12px}.menu-toggle{padding:0 20px;min-height:52px;background:var(--orange);color:#241e16;border-color:var(--orange);box-shadow:0 4px 20px #0005;font-weight:750;display:flex;align-items:center;gap:10px}.menu-toggle:hover{background:#ffc080;color:#241e16}.menu-toggle span{font-size:21px}#menu-panel{width:280px;padding:12px;background:#242625fa;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 32px #0005;max-height:calc(100dvh - 200px);overflow:auto}#menu-panel a,#menu-panel button{display:flex;align-items:center;gap:12px;text-align:left;text-decoration:none;padding:10px 12px;width:100%;min-height:48px;font-size:15px;border:0;border-radius:9px;background:none}#menu-panel a:hover,#menu-panel button:hover{background:#3a332b}#menu-panel a span:first-child,#menu-panel button>span:first-child{font-size:22px;color:var(--orange);width:24px;text-align:center}#menu-panel a span:last-child:not(:first-child){margin-left:auto}.menu-heading{margin:6px 12px 12px;color:var(--muted);font-size:12px;letter-spacing:.3px;border-bottom:1px solid #514638;padding-bottom:16px}
.popup{position:absolute;bottom:24px;left:-150px;width:300px;max-width:calc(100vw - 32px);padding:20px;border-radius:18px;background:var(--coal);border:1px solid #a16d3b;box-shadow:0 10px 40px #0006;overflow-wrap:anywhere}.popup:after{content:"";position:absolute;bottom:-8px;left:142px;width:14px;height:14px;transform:rotate(45deg);background:var(--coal);border-right:1px solid #a16d3b;border-bottom:1px solid #a16d3b}.popup-heading{display:flex;align-items:center;gap:10px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--orange);margin-bottom:12px}.popup-heading img{width:32px;height:36px;object-fit:contain}.popup h2{font-size:21px;line-height:1.3;letter-spacing:-.4px;margin:0 0 8px}.popup p{font-size:15px;color:var(--muted);line-height:1.5;margin:0 0 18px}.close-button{padding:8px 14px;display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:14px;width:100%;background:#393129;border-color:#805a33}.close-button span{font-size:24px;color:var(--orange)}
dialog{background:var(--coal);color:var(--cream);border:1px solid #946536;border-radius:20px;width:min(520px,calc(100vw - 32px));padding:28px;max-height:calc(100dvh - 48px);box-shadow:0 20px 80px #0008}dialog::backdrop{background:#101512b8}dialog h2{font-size:26px;line-height:1.2;letter-spacing:-.7px;margin:10px 0 24px}dialog p,dialog li{font-size:15px;line-height:1.6;color:#e4d8c5}dialog ul{padding-left:20px}dialog li{margin:12px 0}dialog li::marker{color:var(--orange)}.eyebrow{color:var(--orange);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}dialog form{margin-top:24px}#location-status{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;background:var(--coal);border:1px solid var(--line);padding:12px 18px;border-radius:12px;font-size:14px}
@media(max-width:600px){.identity{top:12px;left:12px;padding:14px 16px;max-width:calc(100% - 24px);width:calc(100% - 24px);border-radius:15px}.identity h1{font-size:18px;margin-bottom:7px}.identity-meta{gap:8px}.identity-meta #count{font-size:13px}.identity-meta a{font-size:11px}.cobweb{width:110px;opacity:.06}.ol-zoom{right:12px;top:126px}.ol-rotate{right:12px;top:234px}.navigation{right:12px;bottom:44px}.menu-toggle{min-height:48px;padding:0 18px}.credits{left:8px;bottom:6px;font-size:9px;padding:4px 6px}.popup{padding:18px}.popup h2{font-size:20px}dialog{padding:22px}dialog h2{font-size:23px}}
.keyboard-places button{position:absolute;width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.keyboard-places button:focus{position:fixed;left:16px;bottom:100px;width:auto;max-width:calc(100% - 32px);height:auto;min-height:44px;padding:12px 18px;clip-path:none;white-space:normal;z-index:10}

.identity h1>img{width:25px;height:25px;object-fit:contain;vertical-align:middle;margin-right:5px}.menu-heading>img{width:20px;height:20px;object-fit:contain;vertical-align:middle}.ol-zoom .ol-zoom-in,.ol-zoom .ol-zoom-out{border-radius:12px}

/* Anchor the existing interface to the visible viewport, including safe areas. */
#interface {
  --edge:24px;
  --inset-top:max(var(--edge),env(safe-area-inset-top,0px));
  --inset-right:max(var(--edge),env(safe-area-inset-right,0px));
  --inset-bottom:max(8px,env(safe-area-inset-bottom,0px));
  --inset-left:max(var(--edge),env(safe-area-inset-left,0px));
  position:fixed;left:var(--ui-left,0px);top:var(--ui-top,0px);
  width:var(--ui-width,100vw);height:var(--ui-height,100vh);height:var(--ui-height,100dvh);
  padding:var(--inset-top) var(--inset-right) var(--inset-bottom) var(--inset-left);
  z-index:2;pointer-events:none;
}
#interface .identity{top:var(--inset-top);left:var(--inset-left);width:fit-content;max-width:calc(100% - var(--inset-left) - var(--inset-right));z-index:2}
.identity h1,.identity-meta>*{overflow-wrap:anywhere;min-width:0}
#interface .navigation{right:var(--inset-right);bottom:calc(var(--inset-bottom) + var(--credits-height,24px) + 8px);max-width:calc(100% - var(--inset-left) - var(--inset-right));z-index:3;pointer-events:none}
#menu-panel{max-width:100%;max-height:var(--menu-room,calc(100vh - 240px));overscroll-behavior:contain}
#menu-panel a,#menu-panel button{overflow-wrap:anywhere;flex-shrink:0}
#menu-panel a>span,#menu-panel button>span{min-width:0;flex-shrink:0}
#menu-panel button #location-label{flex:1}
.menu-toggle{max-width:100%;white-space:normal}
#interface .credits{left:var(--inset-left);bottom:var(--inset-bottom);max-width:calc(100% - var(--inset-left) - var(--inset-right));pointer-events:auto}
.ol-zoom{top:var(--controls-top,130px)!important;right:var(--controls-right,24px)!important}
.ol-rotate{top:calc(var(--controls-top,130px) + 106px)!important;right:var(--controls-right,24px)!important}
.popup{max-width:calc(var(--ui-width,100vw) - 32px);max-height:var(--popup-room,calc(100vh - 180px));overflow:auto}
.popup{left:0;transform:translateX(-50%)}
.popup:after{left:calc(50% - 7px)}
#interface dialog{pointer-events:auto;max-height:calc(var(--ui-height,100vh) - 32px);overflow:auto}
#interface #location-status{pointer-events:auto}
@media(max-width:600px){#interface{--edge:12px}#interface .identity{width:calc(100% - var(--inset-left) - var(--inset-right))}}

/* Map pinches belong to OpenLayers; only actual menu surfaces receive UI touches. */
#map{touch-action:none;-webkit-tap-highlight-color:transparent}
#interface #menu-toggle,#interface #menu-panel{pointer-events:auto}
/* A pinch starting on the menu control stays neutral; taps still activate it. */
#menu-toggle,#menu-toggle *{touch-action:none}

/* Allow UI scrolling, but leave page pinch out of the browser gesture set. */
#interface,#menu-panel,.popup,dialog,.keyboard-places{touch-action:pan-x pan-y}

/* Visible only when explicitly requested with ?diag=gesty. */
:root{--gesture-diag-version:20261027-cards1}
#gesture-diagnostics{position:absolute;left:12px;bottom:40px;width:min(220px,calc(100% - 160px));padding:8px 10px;background:var(--coal);color:var(--cream);border:1px solid var(--line);border-radius:10px;font-size:11px;pointer-events:auto;touch-action:pan-x pan-y;z-index:5;overflow-wrap:anywhere}
#gesture-diagnostics[open]{width:calc(100% - 24px);max-height:45%;overflow:auto}
#gesture-diagnostics summary{cursor:pointer;min-height:30px}
#gesture-diagnostics summary span{display:block;color:var(--orange)}
#gesture-diagnostics p{font-size:12px;line-height:1.4;margin:8px 0}
#gesture-diagnostics button{padding:8px 12px}
#gesture-diagnostics textarea{display:block;width:100%;height:130px;margin-top:8px;font:11px/1.4 monospace;color:var(--cream);background:#191c1a;resize:vertical;touch-action:pan-x pan-y}

/* The same address content becomes a compact, scrollable card on narrow screens. */
#interface .bottom-card{
  position:absolute;left:var(--inset-left);right:var(--inset-right);
  bottom:calc(var(--inset-bottom) + var(--credits-height,24px) + 8px);
  width:auto;max-width:none;max-height:min(42%,var(--card-room,320px));
  transform:none;z-index:4;pointer-events:auto;overflow-y:auto;
  overscroll-behavior:contain;touch-action:pan-y;padding:14px 16px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;
}
.bottom-card *{touch-action:pan-y}
.bottom-card:after{display:none}
.bottom-card .popup-heading{grid-column:1;grid-row:1;margin:0;gap:8px;font-size:10px}
.bottom-card .popup-heading img{width:24px;height:26px}
.bottom-card h2{grid-column:1;grid-row:2;font-size:18px;line-height:1.3;margin:0}
.bottom-card p{grid-column:1/-1;grid-row:3;font-size:14px;line-height:1.5;margin:0}
.bottom-card .close-button{grid-column:2;grid-row:1/3;align-self:start;position:sticky;top:0;width:auto;gap:10px;padding:5px 10px;font-size:13px;touch-action:none}
.bottom-card .close-button *{touch-action:none}
#interface.has-card .navigation{bottom:calc(var(--inset-bottom) + var(--credits-height,24px) + 16px + var(--card-height,140px))}

/* A local choice for the two overlapping restaurant icons, inside the existing card. */
.tenant-choice{display:grid;gap:8px;margin:4px 0 14px}
.tenant-choice button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;text-align:left;line-height:1.35;font-size:14px}
.tenant-choice img{width:30px;height:32px;object-fit:contain;flex:none}
.bottom-card .tenant-choice{grid-column:1/-1;grid-row:4;margin:0}