/* Aerial view occupies the scene, with the snow document frame around it. */
.city-landscape{position:relative;width:100%;aspect-ratio:1000/660;overflow:hidden;background:#647455;isolation:isolate}
.hos-places .city-landscape canvas{display:block;width:100%;height:100%;object-fit:fill}
.city-landscape-key{position:absolute;inset:auto 14px 12px;display:flex;justify-content:space-between;gap:10px;pointer-events:none;color:#f0eddb;text-shadow:0 1px 3px #092b24;font:10px 'IBM Plex Mono',monospace;letter-spacing:1px}
.city-landscape-marker{position:absolute;transform:translate(-50%,-100%);z-index:2}
.hos-places .va-city-model-wrap{min-height:0;background:#647455}
.hos-places .va-city-plate--model .va-scene-top{background:linear-gradient(#0e252ae0,#0e252a00);color:#f0efe5;padding-bottom:40px;pointer-events:none}
.hos-places .va-city-plate--model .va-scene-top button{pointer-events:auto;background:#e7ecedf0;color:#11232c}
.hos-places .va-city-plate--model .va-map-pin{max-width:165px;background:#ecf0edeb;box-shadow:0 2px 8px #001e2535}
.hos-places .va-mini .city-landscape{height:100%;aspect-ratio:auto}
@media(max-width:600px){.hos-places .va-city-plate--model .va-map-pin{max-width:110px;font-size:10px}.city-landscape-key{font-size:8px}}
.city-landscape-views{position:absolute;left:14px;bottom:35px;display:flex;gap:4px;z-index:5}
.hos-places .city-landscape-views button{border:1px solid #a6b8ae;background:#edf0e9e8;color:#193b40;border-radius:3px;padding:7px 10px;font:11px Archivo,Arial,sans-serif;cursor:pointer;box-shadow:0 1px 4px #08271e33}
.hos-places .city-landscape-views button[aria-pressed=true]{background:#143f48;color:#f4f1df;border-color:#d2c7a3}
.hos-places .city-landscape-views button:focus-visible{outline:3px solid #b8494d;outline-offset:2px}
.hos-places .va-city-plate--model .va-scene-record{position:relative;inset:auto;padding:16px 20px}
.hos-places .va-city-plate--model .va-map-pin{transform:translate(-50%,-100%)}
.hos-places .city-landscape canvas{min-height:0}
/* The old image was absolutely positioned. The aerial canvas must establish its
   own height so the live record follows it instead of covering the scene. */
.hos-places .va-city-plate--model:not(.va-mini){height:auto;min-height:0;overflow:hidden}
.hos-places .va-city-plate--model:not(.va-mini) .va-city-model-wrap{position:relative;inset:auto;display:block;width:100%;height:auto}
.hos-places .va-city-plate--model:not(.va-mini) .va-scene-record{position:relative;inset:auto;display:block;height:auto}
.hos-places .va-city-plate--model .va-scene-top{height:auto;min-height:0;padding:10px 14px;background:linear-gradient(#0e252ab0,#0e252a00);border:0}
.hos-places .va-city-plate--model .va-scene-top>span{color:#f0efe2;text-shadow:0 1px 3px #08222c}
.hos-places .va-city-plate--model .va-scene-top button{background:#edf0e9f0;color:#193b40;opacity:1}
.hos-places .va-mini .va-city-model-wrap{inset:0;height:100%;display:block}
.hos-places .hc-next>small{color:#425963}

/* Instrument layer toggles (top-left) — same vocabulary as the region map's layer list */
.city-landscape-layers{position:absolute;left:14px;top:14px;display:flex;flex-wrap:wrap;gap:4px;z-index:6;max-width:60%}
.hos-places .city-landscape-layers button{border:1px solid #9fb3ab;background:#edf0e9e6;color:#193b40;border-radius:3px;padding:5px 9px;font:11px Archivo,Arial,sans-serif;cursor:pointer;box-shadow:0 1px 4px #08271e30}
.hos-places .city-landscape-layers button[aria-pressed=true]{background:#143f48;color:#f4f1df;border-color:#d2c7a3}
.hos-places .city-landscape-layers button:focus-visible{outline:3px solid #b8494d;outline-offset:2px}
/* Honest readout for the active instrument layer (top-right): the real city-level value */
.city-landscape-legend{position:absolute;right:14px;top:14px;z-index:6;display:grid;gap:3px;width:180px;padding:9px 11px;background:#0c2129e8;color:#eef1e6;border:1px solid #38545c;border-radius:4px;font:11px Archivo,Arial,sans-serif;box-shadow:0 2px 10px #04161c66}
.city-landscape-legend .cll-name{font-weight:700;letter-spacing:.3px}
.city-landscape-legend .cll-read{font:13px 'IBM Plex Mono',monospace;color:#fff}
.city-landscape-legend .cll-bar{position:relative;height:7px;border-radius:4px;margin:2px 0}
.city-landscape-legend .cll-bar i{position:absolute;top:-2px;width:3px;height:11px;background:#fff;border-radius:2px;box-shadow:0 0 3px #000a}
.city-landscape-legend .cll-ends{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.5px;color:#aebcbc;text-transform:uppercase}
@media(max-width:600px){.city-landscape-legend{width:140px;font-size:10px}.hos-places .city-landscape-layers button{padding:4px 7px;font-size:10px}}

.far-city-studies{margin-top:18px;border-top:1px solid #91a9ac;padding-top:14px;color:#dce7e8}
.far-city-studies summary{cursor:pointer;font-weight:600}.far-city-studies p{font-size:13px;line-height:1.5}.far-city-studies label{display:grid;gap:5px;margin:12px 0}.far-city-studies select{padding:8px;color:#132e38;background:#e7eced;border:1px solid #849a9d}.far-city-studies .city-landscape{margin-top:10px}.far-city-studies .city-landscape-key{font-size:8px}
