/* Compact overview cards leave the map as the main view. */
html body #app #layer-summary{position:absolute;bottom:calc(82px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:min(460px,calc(100% - 24px));z-index:72;max-width:calc(100% - 24px);background:var(--map-surface,#fffdf6);color:var(--map-ink,#254b43)}
html body #app #layer-summary[hidden]{display:none!important}
html body #app #layer-summary .layer-overview-head{display:block!important;margin:0 0 5px!important;padding:0!important;min-height:0!important}
#layer-summary .layer-overview-title{display:flex;align-items:center;gap:8px;padding-right:0}
html body #app #layer-summary .layer-overview-title h2{flex:1;min-width:0;margin:0!important;font-size:20px!important;line-height:1.2!important}
html body #app #layer-summary .layer-overview-title button{display:grid;place-items:center;flex:0 0 40px;min-width:40px;width:40px;min-height:44px;padding:0!important;margin:0!important;background:transparent;color:inherit;border:0;font-size:22px}
html body #app #layer-summary [data-layer-filters]:empty{display:none}
html body #app #layer-summary [data-layer-filters] select{width:100%;min-height:36px;padding:4px 8px;font-size:16px;color:inherit;background:var(--map-surface,#fffdf6);border:1px solid var(--map-border,#b6c6b8);border-radius:10px}
html body #app #layer-summary [data-layer-legend]{font-size:13px;line-height:1.2;margin:4px 0}
html body #app #layer-summary [data-layer-deck] h3{margin:0 0 8px;font:600 14px/1.25 system-ui}
html body #app #layer-summary dl{margin:0;padding:0}
html body #app #layer-summary .layer-stat-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px;box-sizing:border-box;height:2.5rem;min-height:2.5rem;border-top:1px solid var(--map-border,#b6c6b8);padding:3px 0}
html body #app #layer-summary :is(dt,dd){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;font:400 .875rem/1.1 system-ui;overflow-wrap:anywhere}
html body #app #layer-summary dd{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
html body #app #layer-summary .layer-overview-note{display:block;margin:5px 0 0;padding:0!important;border:0!important}
html body #app #layer-summary [data-layer-note]{margin:0;font-size:12px;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
html body #app.layer-overview-mode :is(.ward-radial,.city-hall-radial,.news-map-pin,.civic-place-marker,.community-post-pin,.mobile-map-menu){display:none!important}
html body #app #layer-summary .loom-stack-pages{flex-basis:44px;margin-top:5px}
html body #app #layer-summary .loom-stack-progress small{display:none}
html body #app #layer-summary .loom-stack-head{padding-top:2px}
/* On short screens, dedicate the card to its title and measured rows. */
@media(max-height:600px){
 html body #app #layer-summary::before{display:none!important}
 html body #app #layer-summary>.loom-stack-close{top:10px;right:8px}
 html body #app #layer-summary .layer-overview-title{padding-right:36px}
 html body #app #layer-summary [data-layer-legend]{display:none}
}

/* One header and content-sized cards; the map gets the space we don't need. */
html body #app #layer-summary::before{display:none!important}
html body #app #layer-summary>.loom-stack-close{top:12px;right:10px}
html body #app #layer-summary .layer-overview-title{padding-right:36px}
html body #app #layer-summary>.loom-stack-viewport{flex:0 1 auto!important;height:auto!important;min-height:44px}
html body #app #layer-summary .loom-stack-flow{height:auto!important;columns:auto!important}
html body #app #layer-summary .layer-stat-row{width:100%;height:44px;min-height:44px;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) 12px;gap:6px;margin:0;border:0;border-top:1px solid var(--map-border,#b6c6b8);border-radius:0;background:transparent;color:inherit;text-align:left;cursor:pointer;padding:4px 0;font:400 14px/1.15 system-ui}
html body #app #layer-summary .layer-stat-row :is(span,strong){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
html body #app #layer-summary .layer-stat-row strong{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
html body #app #layer-summary .layer-stat-row:focus-visible{outline:2px solid #b38b43;outline-offset:-2px}
html body #app #layer-summary .layer-stat-row:hover{background:var(--map-active,#e4efe2)}
html body #app #layer-summary .layer-detail-copy{margin:8px 0;font:400 15px/1.4 system-ui}
html body #app #layer-summary .layer-source-link{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-size:14px}
html body #app #layer-summary [hidden]{display:none!important}

/* Crime is a citywide time comparison, never fabricated neighborhood hotspots. */
html body #app #layer-summary.crime-layer{bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}
html body #app #layer-summary.crime-layer-visual .loom-stack-pages{display:none!important}
html body #app #layer-summary.crime-layer [data-layer-legend]{display:block;font-size:12px}
.crime-year-chart{display:flex;gap:12px;height:76px;margin:6px 0}
html body #app #layer-summary .crime-year-chart button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:44px;padding:3px 6px;border:1px solid transparent;border-radius:7px;background:transparent;color:inherit;font:500 14px/1.1 system-ui;cursor:pointer}
html body #app #layer-summary .crime-year-chart button[aria-pressed=true]{border-color:#a34f31;background:#d69b591a}
.crime-bar-track{height:44px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.crime-bar-track i{display:block;width:70%;background:#a34f31;border-radius:3px 3px 0 0}
.crime-summary-line{display:flex;gap:8px;align-items:center;justify-content:space-between;font:500 14px/1.2 system-ui}
html body #app #layer-summary .crime-summary-line button{min-height:44px;padding:6px 12px;border:1px solid var(--map-border,#b6c6b8);border-radius:8px;color:inherit;background:transparent;font:inherit;cursor:pointer}
html body #app #layer-summary.crime-layer [data-layer-note]{display:block;-webkit-line-clamp:unset;font-size:12px}

/* Utilities share the compact card deck and leave the map available. */
html body #app #layer-summary .layer-stat-row{position:relative}
.utility-share-bar{position:absolute;bottom:2px;left:0;height:3px;border-radius:3px;pointer-events:none}
.utility-learning-pin{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;color:#234e46;cursor:pointer;padding:4px;min-width:44px;min-height:44px}
.utility-learning-pin>span{display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--utility-color);border-radius:50%;background:#fffdf3;font:600 24px/1 system-ui;box-shadow:0 2px 6px #17382b30}
.utility-learning-pin small{max-width:120px;padding:3px 6px;border-radius:5px;background:#fffdf3;font:600 12px/1.15 system-ui;box-shadow:0 1px 3px #17382b20}
.utility-learning-pin:focus-visible{outline:3px solid #ae7433;outline-offset:2px;border-radius:8px}

html body #app #layer-summary .layer-growth-button{display:block;width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--map-border,#b6c6b8);border-radius:10px;background:var(--map-active,#e4efe2);color:inherit;font:600 14px/1.3 system-ui;cursor:pointer}
html body #app #layer-summary .layer-growth-button:focus-visible{outline:2px solid #b38b43;outline-offset:2px}
html body #app #layer-summary .layer-helpful{break-inside:avoid;page-break-inside:avoid;margin-top:8px}