.map-app { grid-template-rows: 72px auto minmax(0,1fr); }
.zones-toolbar { display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--border); background:#fff; z-index:450; }
.zone-actions { display:flex; gap:6px; align-items:center; min-width:0; }
.zone-actions select { width:260px; min-width:0; height:36px; padding:0 8px; border:1px solid var(--border-strong); border-radius:5px; background:#fff; color:var(--foreground); font:inherit; font-size:12px; }
.zone-filters { display:flex; flex-wrap:wrap; gap:8px 18px; min-width:0; font-size:12px; }
.zone-filters label { display:flex; align-items:center; gap:5px; cursor:pointer; }
.zone-filters input { flex:none; margin:0; accent-color:var(--map-accent); }
.zone-filter-count { color:var(--muted); white-space:nowrap; }
.icon-button { display:inline-flex; flex:0 0 36px; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1px solid var(--border-strong); border-radius:5px; background:#fff; color:var(--foreground); cursor:pointer; text-decoration:none; }
.icon-button:hover { background:#eef6f5; border-color:var(--map-accent); }
.icon-button[aria-expanded="false"] { background:var(--selected); border-color:var(--map-accent); color:var(--map-accent); }
.map-workspace.is-panel-hidden { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
.map-workspace.is-panel-hidden .map-stage { grid-column:1; grid-row:1; }
.icon-button:focus-visible, select:focus-visible { outline:3px solid #9acac5; outline-offset:2px; }
.icon-button svg { width:18px; height:18px; }
.zone-toggles { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; }
.zone-toggles label { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; cursor:pointer; }
.zone-toggles input { margin:0; accent-color:var(--map-accent); }
.zone-swatch { width:13px; height:13px; background:#f4d342; border:1px solid #8b6b08; }
.zone-caution { flex-basis:100%; margin:0; color:#7b5905; font-size:11px; line-height:1.35; }
.premises-panel { grid-template-rows:auto auto minmax(0,1fr); }
.panel-search-heading { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.panel-search-heading label { flex:1; min-width:0; margin-bottom:0; }
.map-stage > #toggle-panel { position:absolute; top:12px; left:56px; z-index:800; box-shadow:0 2px 8px rgb(24 33 43 / 18%); }
.list-summary { padding:8px 16px; border-bottom:1px solid var(--border); font-size:12px; color:var(--muted); }
.building-zone { display:flex; align-items:center; gap:6px; margin:7px 0; color:var(--muted); font-size:11px; line-height:1.4; }
.legend-dot { display:inline-block; flex:0 0 9px; width:9px; height:9px; border-radius:50%; background:#92999e; }
.legend-dot.nominal { background:#1d7850; }
.legend-dot.boundary { background:#b86c12; }
.legend-dot.outside { background:#6f7378; }
.legend-dot.uncovered { background:#6c8eb1; }
.map-stage { position:relative; }
.zone-legend { display:flex; flex-wrap:wrap; gap:7px 12px; position:absolute; left:12px; bottom:28px; z-index:700; max-width:calc(100% - 24px); padding:8px 10px; background:rgb(255 255 255 / 95%); border:1px solid var(--border); border-radius:4px; font-size:11px; pointer-events:none; }
.zone-legend span { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.premises-marker { width:30px; height:30px; font-size:11px; border-width:2px; box-shadow:0 2px 5px rgb(24 33 43 / 22%); }
.premises-marker.zone-inside, .premises-marker.zone-nominal { background:#1d7850; }
.premises-marker.zone-boundary { background:#b86c12; }
.premises-marker.zone-outside { background:#6f7378; }
.premises-marker.zone-uncovered { background:#6c8eb1; }
.premises-marker.zone-nominal { border:3px dashed #e8b047; }
.premises-marker.is-selected { box-shadow:0 0 0 3px #17212b; }
.zone-note { margin:8px 0 0; font-size:12px; line-height:1.45; }
.zone-note.caution { color:#8c570c; }
.zone-number { background:transparent; border:0; box-shadow:none; color:#5e4c08; font-size:10px; font-weight:700; }
[hidden] { display:none !important; }
@media(min-width:761px) {
  .building-item { content-visibility:auto; contain-intrinsic-size:auto 140px; }
}
@media(max-width:760px) {
  .map-app { grid-template-rows:auto auto minmax(0,1fr); }
  .map-header { gap:8px; padding:10px 12px; }
  .map-heading { gap:7px; }
  .map-title h1 { font-size:16px; }
  .map-title p { font-size:11px; }
  .map-stats { gap:8px; }
  .map-stat { min-width:38px; }
  .zones-toolbar { padding:8px 12px; gap:8px; }
  .zone-actions { width:100%; }
  .zone-actions select { flex:1 1 auto; width:100px; }
  .zone-filters { width:100%; display:grid; gap:8px; }
  .zone-filters label { justify-content:flex-start; }
  .zone-toggles { gap:10px; font-size:11px; }
  .zone-caution { font-size:10px; }
  .map-workspace { grid-template-rows:minmax(0,1fr) 230px; }
  .panel-search { display:block; padding:8px 12px; }
  .panel-search label { font-size:11px; margin-bottom:0; }
  .panel-search-heading { margin-bottom:4px; }
  .panel-search input { height:34px; }
  .list-summary { padding:5px 12px; font-size:11px; }
  .building-list { grid-template-rows:minmax(0,1fr); }
  .building-item { min-height:0; }
  .building-button { padding:10px 12px; }
  .building-address { font-size:12px; }
  .building-zone { font-size:10px; }
  .zone-legend { left:8px; bottom:24px; max-width:calc(100% - 16px); padding:5px 7px; gap:5px 8px; font-size:10px; }
}
