/* The Cities page: the councillors page's compare grid (the live spotlight.css, 346f1916: #cc-spotlight-app and its
   .sp-picker-head and .sp-compare-* rules), four to a row, each card's categories drawn as rows of bars (our own). */
#cc-spotlight-app{--sp-ink:var(--ink);--sp-sub:var(--ink-2);--sp-line:var(--line);--sp-paper:var(--paper);--sp-panel:var(--card);color:var(--sp-ink);font:400 var(--fs-body)/1.5 var(--sans);max-width:calc(var(--maxw) + 2*var(--gutter));margin:auto;padding:22px var(--gutter) 48px;color-scheme:light}
#cc-spotlight-app .sp-picker-head{padding:6px 0;margin-bottom:2px}
#cc-spotlight-app .sp-compare-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
#cc-spotlight-app .sp-compare-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#cc-spotlight-app .sp-compare-card{min-width:0;padding:12px 14px 14px;background:var(--sp-panel);border:1px solid var(--sp-line);border-radius:12px}
#cc-spotlight-app .sp-compare-card h2{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 8px;font-size:18px;line-height:1.25}
#cc-spotlight-app .sp-compare-card h2 a{display:inline-flex;align-items:center;min-height:32px;color:var(--sp-ink);text-decoration:none}
#cc-spotlight-app .sp-compare-card h2 a span{margin-left:6px;font-size:14px;color:var(--sp-sub)}
#cc-spotlight-app .sp-compare-card h2 small{font-size:12px;font-weight:400;color:var(--sp-sub);white-space:nowrap}
#cc-spotlight-app .sp-compare-card h2 a:hover{text-decoration:underline}
@media(max-width:1280px){#cc-spotlight-app .sp-compare-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1080px){#cc-spotlight-app .sp-compare-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){#cc-spotlight-app .sp-compare-grid{grid-template-columns:1fr;gap:12px}#cc-spotlight-app .sp-compare-head{padding-top:0;margin-top:-4px;gap:10px}#cc-spotlight-app .sp-compare-card{padding:12px}}
/* the legend, and the bars: a row per category, the same order on every card; a bar as long as the category's share of
   the city's agenda items (0 to 100% on every card), as dark as its debate (cities.js); the count outside the bar */
#cc-spotlight-app .cc-cities-legend{margin:0 0 12px;font-size:13px;line-height:1.4;color:var(--sp-sub)}
#cc-spotlight-app .cc-city-bars{display:grid;gap:1px}
#cc-spotlight-app .cc-city-row{display:grid;grid-template-columns:8.8em minmax(0,1fr) 2.6em;align-items:center;gap:8px;min-height:19px;margin:0 -4px;padding:0 4px;border-radius:4px;font-size:12px;line-height:1.2;color:var(--sp-ink);text-decoration:none}
#cc-spotlight-app a.cc-city-row:hover{background:var(--wash)}
#cc-spotlight-app a.cc-city-row:focus-visible{outline:2px solid var(--sp-ink);outline-offset:0}
#cc-spotlight-app .cc-city-row[data-empty]{color:var(--sp-sub)}
#cc-spotlight-app .cc-bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cc-spotlight-app .cc-bar-track{height:11px;border-radius:3px;background:var(--sp-paper)}
#cc-spotlight-app .cc-bar{display:block;height:100%;border-radius:3px;box-shadow:inset 0 0 0 1px #191c1a1f}
#cc-spotlight-app .cc-bar-count{text-align:right;font-variant-numeric:tabular-nums;color:var(--sp-sub)}
@media(max-width:700px){#cc-spotlight-app .cc-city-row{min-height:30px;font-size:13px}#cc-spotlight-app .cc-bar-track{height:13px}}