:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172c24; }
* { box-sizing: border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; }
#map { position:fixed; inset:0; background:#f6f3ed; }
button,a,input { -webkit-tap-highlight-color: transparent; }
button { font:inherit; cursor:pointer; }
[hidden] { display:none !important; }
.floating-actions { position:fixed; z-index:1000; right:max(20px,env(safe-area-inset-right)); bottom:calc(30px + env(safe-area-inset-bottom)); display:flex; gap:10px; }
.action { height:54px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 20px; border:1px solid #ffffff40; border-radius:16px; box-shadow:0 5px 20px #163e3530; text-decoration:none; font-size:1rem; font-weight:650; transition:background .15s,transform .15s; }
.action svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.home-action { background:white; color:#164a36; border-color:#d9e4dc; }
.home-action:hover { background:#f2f7f3; }
.reset-action { background:white; color:#164a36; border-color:#d9e4dc; }
.reset-action:hover { background:#f2f7f3; }
.layer-action { background:#164a36; color:white; }
.layer-action:hover,.layer-action[aria-expanded="true"] { background:#236246; }
.badge { padding:4px 7px; background:#ffffff20; border-radius:7px; font-size:.875rem; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #e59c26; outline-offset:3px; }
.layer-panel { position:fixed; z-index:1000; right:max(20px,env(safe-area-inset-right)); bottom:calc(96px + env(safe-area-inset-bottom)); width:380px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 118px); display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid #d6e2d8; border-radius:22px; box-shadow:0 12px 50px #183d3433; }
.panel-header { display:flex; justify-content:space-between; align-items:center; padding:22px 20px 12px; }
.eyebrow { margin:0 0 6px; font-size:.75rem; font-weight:700; letter-spacing:.11em; color:#537261; }
h1 { margin:0; font-size:1.5rem; line-height:1.2; font-weight:750; }
.close-button { width:38px; height:38px; border:0; border-radius:50%; background:#eff4f0; color:#305441; font-size:1.75rem; line-height:1; }
.panel-summary { margin:0; padding:0 20px 16px; color:#66756b; font-size:.875rem; }
.layer-list { overflow-y:auto; overscroll-behavior:contain; padding:0 10px 12px; }
.layer-row { display:flex; align-items:center; gap:12px; min-height:70px; padding:11px 10px; border-radius:12px; cursor:pointer; transition:background .15s; }
.layer-row:hover { background:#f4f8f4; }
.layer-row:has(input:checked) { background:#f4f8f4; }
.layer-row + .layer-row { margin-top:3px; }
.category-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; flex:none; color:var(--color); background:var(--tint); }
.category-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.layer-copy { flex:1; min-width:0; }
.layer-name { display:block; font-size:1rem; line-height:1.25; font-weight:600; }
.layer-count { display:block; color:#6c7970; font-size:.875rem; line-height:1.4; margin-top:4px; }
.switch { appearance:none; width:42px; height:24px; flex:none; margin:0; border:0; border-radius:14px; background:#ced7d0; position:relative; cursor:pointer; transition:background .15s; }
.switch::after { content:""; position:absolute; width:18px; height:18px; top:3px; left:3px; border-radius:50%; background:white; box-shadow:0 1px 3px #0002; transition:transform .15s; }
.switch:checked { background:var(--color); }
.switch:checked::after { transform:translateX(18px); }
.location-marker { display:grid; place-items:center; width:32px !important; height:32px !important; border:2px solid white; border-radius:12px 12px 12px 3px; background:var(--color); box-shadow:0 2px 6px #1238; color:white; }
.location-marker svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.popup-title { font:700 1rem/1.3 system-ui,sans-serif; margin:0 0 5px; color:#173f2d; }
.popup-category { font:500 .875rem/1.4 system-ui,sans-serif; margin:0 0 10px; color:#687a6d; }
.popup-description { white-space:pre-wrap; font:400 .9375rem/1.5 system-ui,sans-serif; max-height:200px; overflow:auto; }
.popup-description a { color:#196244; overflow-wrap:anywhere; }
#status { position:fixed; z-index:1100; top:16px; left:50%; transform:translateX(-50%); margin:0; max-width:calc(100vw - 32px); padding:10px 16px; border-radius:12px; background:white; box-shadow:0 3px 15px #0002; font-size:.875rem; }
.leaflet-control-attribution { font-size:12px !important; }
.leaflet-control-zoom { margin-bottom:28px !important; }
@media(max-width:600px) { .floating-actions { right:16px; bottom:calc(28px + env(safe-area-inset-bottom)); gap:8px; } .action { height:50px; padding:0 15px; border-radius:14px; } .layer-panel { right:16px; bottom:calc(90px + env(safe-area-inset-bottom)); max-height:calc(100dvh - 106px); } .panel-header { padding-top:18px; } }
@media(prefers-reduced-motion:reduce) { *,*::after { transition:none !important; } }
/* Generous touch targets for the public directory kiosk. */
.action { height:64px; min-width:120px; font-size:1.125rem; padding:0 24px; }
.action svg { width:24px; height:24px; }
.layer-panel { bottom:calc(108px + env(safe-area-inset-bottom)); width:440px; max-height:calc(100dvh - 130px); }
.close-button { width:48px; height:48px; }
.layer-row { min-height:78px; }
.layer-name { font-size:1.125rem; }
.category-icon { width:44px; height:44px; }
.switch { width:50px; height:30px; }
.switch::after { width:24px; height:24px; }
.switch:checked::after { transform:translateX(20px); }
.location-marker { width:40px !important; height:40px !important; }
.location-marker svg { width:23px; height:23px; }
.leaflet-control-zoom a { width:48px !important; height:48px !important; line-height:48px !important; font-size:28px !important; }
.leaflet-popup-close-button { width:40px !important; height:40px !important; line-height:40px !important; font-size:26px !important; }
.leaflet-popup-content { margin:20px 28px 20px 20px; }
.popup-title { font-size:1.125rem; padding-right:10px; }
.popup-description { font-size:1rem; }
.popup-photos { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 0 14px; width:300px; max-width:calc(100vw - 100px); border-radius:12px; }
.popup-photos img { display:block; flex:0 0 100%; width:100%; height:200px; object-fit:cover; scroll-snap-align:start; border-radius:12px; background:#eff4f0; }
@media(min-width:900px) and (min-height:800px) {
  .layer-panel { width:480px; }
  .layer-name { font-size:1.25rem; }
  .layer-count,.panel-summary { font-size:1rem; }
  .layer-row { min-height:80px; }
  .action { height:70px; font-size:1.25rem; }
  .layer-panel { bottom:calc(114px + env(safe-area-inset-bottom)); max-height:calc(100dvh - 136px); }
}
@media(max-width:600px) {
  .action { height:56px; min-width:auto; padding:0 16px; font-size:1rem; }
  .layer-panel { bottom:calc(96px + env(safe-area-inset-bottom)); max-height:calc(100dvh - 112px); }
  .layer-name { font-size:1rem; }
  .layer-row { min-height:72px; }
}
.reset-action { min-width:64px; width:64px; padding:0; }
@media(max-width:600px) { .reset-action { min-width:56px; width:56px; } }
@media(max-width:380px) {
  .action { padding:0 12px; gap:8px; }
  .reset-action { min-width:48px; width:48px; padding:0; }
}

.geographic-label{pointer-events:none!important;white-space:nowrap;}
.base-label{position:absolute;display:block;white-space:nowrap;font-size:15px;line-height:20px;color:#4c5149;font-weight:600;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 0 4px #fff;}
.road-label{font-size:13px;font-weight:500;color:#68645c;}

.building-action{background:white;color:#164a36;border-color:#d9e4dc;padding:0 14px;}
.building-action[aria-pressed="true"]{background:#164a36;color:white;}
.building-extrusions{position:absolute;pointer-events:none;overflow:visible;}
@media(max-width:480px){.floating-actions{gap:6px;right:10px}.action{padding:0 12px}.building-action{padding:0 10px}.building-action svg{display:none}.reset-action{padding:0 12px}}

.building-action:disabled{opacity:.5;cursor:default;}
@media(max-width:600px){
 .floating-actions{max-width:calc(100vw - 32px);flex-wrap:wrap;justify-content:flex-end;}
 .layer-panel{bottom:calc(160px + env(safe-area-inset-bottom));max-height:calc(100dvh - 176px);}
}

.google-action{background:white;color:#164a36;border-color:#d9e4dc;}
.google-api-map{position:fixed;inset:0;z-index:940;background:#f6f3ed;}
.yclas-link{display:block;margin-top:12px;padding:14px 16px;background:#164a36;color:white;border-radius:12px;text-align:center;text-decoration:none;font-weight:650;}
.popup-video{display:block;width:300px;max-width:calc(100vw - 100px);height:180px;border:0;border-radius:12px;margin:12px 0;}
.place-photo{margin:0;flex:0 0 100%;width:100%;scroll-snap-align:start;}
.place-photo figcaption{font-size:12px;padding:5px 8px;background:#f4f8f4;}
.place-photo figcaption a{color:#305441;}
.photo-note{font-size:14px;color:#66756b;}
.view-action,.fullscreen-action{background:white;color:#164a36;border-color:#d9e4dc;}
.view-action[aria-pressed="true"]{background:#164a36;color:white;}
.floating-actions{max-width:calc(100vw - 40px);flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:8px;background:#ffffffbb;backdrop-filter:blur(16px);border:1px solid #ffffffaa;border-radius:24px;box-shadow:0 10px 32px #163e3526;}
.floating-actions .action{box-shadow:none;}
.photo-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin:-4px 0 12px;}
.photo-controls button{width:48px;height:44px;border:0;border-radius:12px;background:#eff4f0;color:#164a36;font-size:28px;}
.photo-controls span{font-size:14px;font-weight:600;color:#537261;}
@media(max-width:600px){.floating-actions{max-width:calc(100vw - 24px);right:12px;padding:6px;border-radius:20px}.fullscreen-action svg,.view-action svg{display:none}.floating-actions .action{padding:0 12px}}
.google-action[aria-pressed="true"]{background:#164a36;color:white;}
.google-mode #status{display:none;}
@media(max-width:900px){
 .floating-actions{max-width:calc(100vw - 32px);flex-wrap:wrap;justify-content:flex-end;}
 .layer-panel{bottom:calc(160px + env(safe-area-inset-bottom));max-height:calc(100dvh - 176px);}
}
@media(max-width:480px){.google-action svg{display:none;}}

#google-api-map{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;pointer-events:auto;touch-action:none;}
.action[aria-busy="true"]{opacity:.7;}

.selected-place-label{text-shadow:0 1px 3px #102a20,1px 0 3px #102a20,-1px 0 3px #102a20;white-space:nowrap;}

.photo-retry{padding:10px 16px;border:0;border-radius:10px;background:#184c39;color:white;font:inherit;margin-top:8px;cursor:pointer;}
.google-photo-status details{margin-top:8px;overflow-wrap:anywhere;}

.tenant-image-link{display:block;color:inherit;text-decoration:none;}
.tenant-photo figcaption{font-size:15px;font-weight:600;padding:10px;}
.tenant-link-hint{display:block;font-size:13px;font-weight:400;margin-top:4px;}
.tenant-video-link{display:block;padding:12px;background:#edf4ef;color:#164a36;text-align:center;border-radius:10px;margin-bottom:12px;text-decoration:none;}
.leaflet-popup-content .yclas-link{color:#fff;}

/* Kiosk interaction targets and return flow. */
.location-marker{width:48px!important;height:48px!important;}
.leaflet-popup-close-button{width:48px!important;height:48px!important;line-height:48px!important;}
.leaflet-popup-content{margin-right:36px;}
#google-api-map .gm-ui-hover-effect{min-width:48px!important;min-height:48px!important;}
.popup-return{display:block;width:100%;min-height:48px;margin-top:12px;padding:12px 16px;border:1px solid #cadbd0;border-radius:12px;background:#eff4f0;color:#164a36;font-weight:650;touch-action:manipulation;}
.directory-note{font-size:13px;line-height:1.5;color:#66756b;margin:8px 0 0;}
.photo-retry,.tenant-video-link,.yclas-link{min-height:48px;}

/* Read one article beside the map, with each pane occupying half the display. */
.blog-panel{position:fixed;inset:0 0 0 50%;z-index:1050;display:flex;flex-direction:column;background:#fff;box-shadow:-6px 0 30px #173f2d15;}
.blog-top{padding:18px 24px;border-bottom:1px solid #edf2ee;flex:none;}
.blog-back{min-height:48px;padding:10px 18px;background:#fff;border:1px solid #d4e0d8;border-radius:14px;color:#164a36;font-weight:650;}
.blog-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 30px 32px;scrollbar-gutter:stable;}
.blog-category{margin:0 0 12px;color:#607767;font-size:16px;font-weight:600;}
.blog-scroll h1{font-size:clamp(26px,2.4vw,42px);line-height:1.18;overflow-wrap:anywhere;margin-bottom:22px;color:#164a36;}
.blog-hero img{width:100%;max-height:310px;object-fit:cover;display:block;border-radius:16px;}
.blog-hero:has(img){margin-bottom:22px;}
.blog-tabs{display:flex;gap:6px;border-bottom:1px solid #d6e2d8;margin-bottom:24px;}
.blog-tabs button{min-height:52px;flex:1;border:0;border-bottom:3px solid transparent;background:white;color:#53665a;font-size:18px;}
.blog-tabs button[aria-pressed="true"]{border-bottom-color:#164a36;color:#164a36;font-weight:700;}
.blog-story p{font-size:20px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 22px;}
.blog-story .blog-empty{color:#697a6e;}
.blog-panel .popup-photos{width:100%;max-width:100%;margin-bottom:18px;}
.blog-panel .popup-photos img{height:300px;}
.blog-panel .popup-video{width:100%;max-width:100%;height:auto;aspect-ratio:16/9;}
.blog-panel .place-photo figcaption{font-size:15px;line-height:1.5;}
.blog-pagination{margin-top:30px;padding-top:22px;border-top:1px solid #dbe5dd;display:flex;flex-wrap:wrap;gap:8px;}
.blog-pagination p{flex-basis:100%;font-size:15px;margin-bottom:8px;}
.blog-pagination button{width:48px;min-height:48px;border:1px solid #cadbce;background:white;color:#164a36;border-radius:10px;font-size:18px;}
.blog-pagination button[aria-current="page"]{background:#164a36;color:#fff;}
.blog-footer{display:flex;gap:12px;padding:16px 24px;border-top:1px solid #d6e2d8;background:#fff;flex:none;}
.blog-footer a{flex:1;min-height:54px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;border-radius:12px;border:1px solid #164a36;color:#164a36;text-decoration:none;font-size:18px;font-weight:650;}
.blog-footer .blog-contact{background:#164a36;color:#fff;}
.blog-open #map{right:50%;}
.blog-open #google-api-map{right:50%!important;width:50vw!important;}
.blog-open .floating-actions{right:calc(50% + 16px);max-width:calc(50vw - 32px);}
.blog-open .floating-actions .action{min-width:48px;padding:0 12px;height:56px;font-size:15px;gap:6px;}
.blog-open .floating-actions .action svg{width:20px;height:20px;}
.blog-open .layer-panel{right:calc(50% + 16px);max-width:calc(50vw - 32px);bottom:calc(var(--actions-height,150px) + 50px);max-height:calc(100dvh - var(--actions-height,150px) - 70px);}
.blog-open #status{left:25%;max-width:calc(50vw - 32px);}
@media(max-width:760px){
 .blog-panel{left:0;}
 .blog-scroll{padding:20px;}
 .blog-story p{font-size:18px;}
 .blog-top{padding:12px 20px;}
 .blog-footer{padding:12px 20px;flex-wrap:wrap;}
 .blog-footer a{font-size:16px;}
 .blog-open .floating-actions,.blog-open .layer-panel{visibility:hidden;}
 .blog-open #map{right:0;}
 .blog-open #google-api-map{width:100vw!important;right:0!important;}
}

.blog-photo-caption{padding:8px 10px;font-size:13px;line-height:1.5;color:#596d5f;background:#f4f8f4;border-radius:0 0 12px 12px;}
