/* Map-first layout. Detailed controls are temporary panels, never fixed rails. */
body { height:100dvh; overflow:hidden; }
.topbar { height:40px; min-height:40px; padding:5px 12px; gap:10px; }
.brand { gap:8px; min-width:0; }
.brand svg { display:block; width:23px; height:23px; }
.brand h2 { font-size:16px; letter-spacing:-.2px; white-space:nowrap; }
.brand p { display:none; }
.workspace { display:block; height:calc(100dvh - 40px); min-height:0; }
.map-wrap { width:100%; height:100%; min-height:0; display:flex; flex-direction:column; }
.map-toolbar { position:relative; z-index:1000; padding:6px 12px; gap:7px; min-height:44px; flex-wrap:wrap; }
.map-dropdown > summary { padding:7px 9px; font-size:12px; min-height:31px; }
.map-toolbar > #fit-city { padding:6px 10px; font-size:11px; margin-left:auto; }
.menu-current { max-width:130px; }
.dropdown-panel { max-height:calc(100dvh - 150px); }
.find-dropdown > .dropdown-panel { width:400px; max-width:calc(100vw - 24px); left:auto; right:0; }
.find-dropdown .navigation { padding:4px; border-bottom:1px solid var(--border); }
.find-dropdown .navigation label { font-size:12px; display:block; margin-bottom:5px; font-weight:650; }
.find-dropdown .search-row { margin-bottom:6px; }
.find-dropdown .search-row input { padding:7px; font-size:12px; }
.find-dropdown .search-row button { padding:6px 12px; font-size:12px; }
.find-dropdown #map-status { margin:4px 0 8px; font-size:10px; min-height:0; }
.find-dropdown .address-search { background:#fff; border:0; padding:12px 4px 4px; }
.find-dropdown .address-search > label { flex-basis:100%; }
.find-dropdown #address-results { position:static; flex-basis:100%; padding:3px; box-shadow:none; max-height:32dvh; overflow:auto; }
.layers-dropdown > .dropdown-panel { min-width:270px; width:290px; left:auto; right:0; }
.map-controls.layer-options { position:static; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:3px; margin:0; border:0; border-radius:0; background:#fff; box-shadow:none; max-width:none; font-size:11px; }
.layer-options .opacity-label,.layer-options .numbers-status { grid-column:1/-1; }
.layer-options .opacity-label { margin:5px 0; }
.layer-options .opacity-label input { flex:1; min-width:80px; }
.layer-options .numbers-status { padding-top:7px; font-size:10px; }
.map-toolbar .school-dropdown { position:relative; flex:none; }
.map-toolbar .school-dropdown > summary { font-size:12px; padding:7px 9px; }
.map-toolbar .school-dropdown > .dropdown-panel { left:auto; right:0; top:calc(100% + 6px); max-width:calc(100vw - 24px); max-height:calc(100dvh - 150px); }
.map-group-summary { position:relative; z-index:900; display:flex; align-items:center; flex-wrap:wrap; column-gap:20px; row-gap:4px; min-height:38px; padding:6px 12px!important; font-size:11px; }
.summary-heading { gap:9px; min-width:0; }
.summary-heading strong { font-size:12px; }
.summary-heading > span { font-size:10px; }
.map-group-summary .mini-stats { order:2; gap:5px 15px; margin:0; }
.mini-stats dt { font-size:10px; }
.mini-stats dd { font-size:12px; }
.group-description-menu { order:3; margin-left:auto; }
.group-description-menu > summary { min-height:0; padding:3px 5px; border:0; background:transparent; font-size:10px; color:var(--secondary); }
.group-description-menu > .dropdown-panel { left:auto; right:0; width:330px; font-size:12px; line-height:1.5; }
.group-description-menu p { margin:3px; }
.map-canvas { position:relative; z-index:0; flex:1; height:auto; min-height:0; width:100%; overflow:hidden; }
#map { height:100%; }
.compact-popup .leaflet-popup-content { min-width:0; overflow-wrap:anywhere; }
.compact-popup .leaflet-popup-scrolled { border:0; padding-right:5px; }
.compact-popup .compact-location { font-size:11px; }
/* Tools open as an intentional drawer. Closing it restores an unobstructed map. */
.tools-drawer { padding:0; width:min(360px,94vw); max-width:94vw; height:100dvh; max-height:100dvh; margin:0 0 0 auto; border:0; border-left:1px solid var(--border); border-radius:0; overflow:auto; }
.tools-drawer::backdrop { background:#16344b30; }
.drawer-heading { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 15px; background:#fff; border-bottom:1px solid var(--border); }
.drawer-heading h2 { font-size:14px; margin:0; }
.drawer-heading button { padding:6px 10px; font-size:12px; }
.tools-drawer .sidebar { display:block; border:0; overflow:visible; font-size:12px; }
.tools-drawer .sidebar section { padding:14px 16px; }
.tools-drawer .sidebar .location-panel { padding:10px 14px; }
.tools-drawer .selected-panel h2 { font-size:19px; }
.tools-drawer .selected-panel p { font-size:12px; line-height:1.5; }
.tools-drawer .selected-panel .group-name { font-size:13px; }
.tools-drawer .selected-panel .eyebrow { font-size:10px; }
.tools-drawer .stats-grid { gap:6px; margin:10px 0; }
.tools-drawer .stats-grid dd { font-size:16px; }
@media(max-width:1000px) {
  .map-toolbar { padding:5px 9px; gap:5px; }
  .map-toolbar > #fit-city { margin-left:auto; }
  .menu-current { max-width:80px; }
}
@media(max-width:760px) {
  .topbar { height:36px; min-height:36px; padding:4px 9px; align-items:center; }
  .brand h2 { font-size:14px; }
  .brand svg { width:20px; height:20px; }
  .topbar .brand { max-width:none; }
  .workspace { height:calc(100dvh - 36px); }
  .map-wrap { height:100%; min-height:0; }
  .map-toolbar .map-dropdown { flex:none; }
  .map-toolbar .map-dropdown > summary { justify-content:flex-start; font-size:11px; padding:6px 7px; }
  .map-toolbar .menu-current { display:none; }
  .map-group-summary { min-height:38px; gap:3px 10px; padding:5px 9px!important; }
  .map-group-summary .mini-stats { gap:4px 12px; }
  .map-group-summary .summary-heading strong { font-size:11px; }
  .map-canvas { height:auto; flex:1; min-height:0; }
}
@media(max-width:420px) {
  .brand svg { display:none; }
  .brand h2 { font-size:13px; }
  .map-toolbar > #fit-city { padding:5px 7px; }
  .map-toolbar .school-dropdown > summary { font-size:10px; }
  .summary-heading { flex:1 1 100%; }
  .summary-heading strong { flex:1; }
  .map-group-summary .mini-stats { gap:4px 9px; }
  .mini-stats dt { font-size:9px; }
  .mini-stats dd { font-size:11px; }
}

.city-menu-swatch { display:inline-block; flex:none; width:15px; height:0; border-top:3px dotted #00796b; }
.city-options-note { color:var(--secondary); font-size:10px; margin:4px 2px 8px; line-height:1.4; }
.ta4-result.review{color:#7b4700;background:#fff0cf}.verification-reason{display:block;font-size:11px;line-height:1.3;margin:4px 0;color:#654719}.verification-reason a{font-weight:600;text-decoration:underline}
/* Context layers share the compact toolbar; no permanent map-side panel. */
.city-dropdown > summary > .city-menu-swatch { border:0;background:linear-gradient(135deg,#ff8a00 0 30%,#00b8d9 30% 55%,#a855f7 55% 75%,#00b865 75%); }
.city-area-label span { display:block;transform:translate(-50%,-50%);width:max-content;padding:2px 5px;border:1.5px dotted var(--city-color);border-radius:3px;background:#fffffff0;color:#16344b;font:650 11px/1.3 ui-sans-serif,system-ui,sans-serif;box-shadow:0 0 0 1px #fff; }
.cusd-menu-swatch { display:inline-block;width:15px;height:13px;border:2px dashed #6b6000;background:#ffe600;flex-shrink:0;border-radius:2px; }
.cusd-dropdown .dropdown-panel { width:300px; }
.overlay-menu-heading { display:block;font-size:11px;margin:9px 3px 6px; }
.cusd-key-line { display:inline-block;width:30px;border-top:4px dashed #ffe600;filter:drop-shadow(0 1px #4a4300) drop-shadow(0 -1px #4a4300); }
.cusd-school-dot { display:grid;place-items:center;width:24px;height:24px;border:2px solid #fff;border-radius:7px;background:var(--campus-color);box-shadow:0 0 0 1px #183447,0 2px 4px #0004;cursor:pointer; }
.cusd-school-dot svg { width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.cusd-school-marker:focus-visible { outline:3px solid #111;outline-offset:4px; }
.cusd-school-label { font:600 10px/1.3 ui-sans-serif,system-ui,sans-serif;color:#16344b;background:#fffffff0;border-color:#c6d4df;padding:3px 5px; }
.cusd-dropdown .school-option { font-size:11px!important;padding:6px!important; }
.cusd-section { border-top:1px solid #e3eaf0;margin-top:8px;padding-top:7px; }
.cusd-section > summary { cursor:pointer;font-size:11px;font-weight:650;line-height:1.4; }
.cusd-section > summary > span { display:block;margin-left:12px;font-size:10px;font-weight:400;color:var(--secondary); }
.cusd-area-label span { display:block;transform:translate(-50%,-50%);width:max-content;max-width:150px;text-align:center;padding:3px 5px;background:#fffffff0;border:2px solid var(--area-color);border-radius:4px;color:#16344b;font:650 11px/1.25 ui-sans-serif,system-ui,sans-serif;box-shadow:0 0 0 1px #183447; }
.cusd-area-label small { display:block;font-size:9px;font-weight:400;margin-top:1px; }
.cusd-dropdown > summary #cusd-menu-title { display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis; }
.layer-options .layer-control-wide,.layer-options .layer-help { grid-column:1/-1; }
.layer-options .layer-help { margin:0 2px 4px;color:var(--secondary);font-size:10px;line-height:1.4; }
.map-controls.layer-options .layer-control { white-space:normal;line-height:1.35; }
/* Area names are map annotations, never campus markers or boxed POIs. */
.attendance-area-label span { display:block;transform:translate(-50%,-50%);width:max-content;max-width:210px;text-align:center;color:color-mix(in srgb,var(--area-color) 65%,#16344b);opacity:.50;font:700 16px/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:.15px;background:none;border:0;border-radius:0;box-shadow:none;padding:0;text-shadow:0 1px 1px #ffffffb0;pointer-events:none; }
.attendance-area-label small { display:block;text-transform:uppercase;letter-spacing:1.2px;font-size:9px;font-weight:600;margin-top:2px; }
.high-school-campus .cusd-school-dot { background:#16344b;border-color:var(--campus-color);box-shadow:0 0 0 1px #16344b,0 2px 4px #0004; }

/* One bounded panel policy for every map menu, at every viewport width. */
.map-dropdown { --menu-preferred-width:320; }
.find-dropdown { --menu-preferred-width:360; }
.layers-dropdown { --menu-preferred-width:300; }
.map-toolbar .map-dropdown > .dropdown-panel,
.topbar .map-dropdown > .dropdown-panel,
.group-description-menu > .dropdown-panel {
  position:fixed;
  top:var(--menu-top,120px);
  left:var(--menu-left,auto);
  right:12px;
  width:var(--menu-width,min(320px,82vw));
  min-width:0;
  max-width:82vw;
  max-height:var(--menu-maxHeight,min(560px,65dvh));
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  overflow-wrap:anywhere;
}
.dropdown-panel .school-actions { flex-wrap:wrap; }
.dropdown-panel .school-actions button { flex:1 1 85px; min-width:0; }
.dropdown-panel .school-option { min-width:0; }
.dropdown-panel .school-option input { flex-shrink:0; }
.voter-resources > p { margin:2px 4px 8px; font-size:11px; line-height:1.4; color:var(--secondary); }
.voter-resources > a { display:block; padding:9px 8px; border-radius:5px; font-size:12px; line-height:1.4; text-decoration:underline; text-underline-offset:2px; }
.voter-resources > a:hover,.voter-resources > a:focus-visible { background:#edf4fa; }
.voter-resources > a:focus-visible { outline:2px solid #0878ef; outline-offset:-2px; }
.voter-resources small { display:block; margin-top:3px; color:var(--secondary); font-size:11px; }
.find-dropdown .address-search input { min-width:0; width:100%; flex-basis:100%; }

/* Resident lookup is the default; precinct and campaign tools are opt-in. */
[hidden] { display:none!important; }
body[data-view-mode="resident"] [data-precinct-only],
body[data-view-mode="precinct"] [data-resident-only],
body[data-regional-groups="off"] [data-groups-only] { display:none!important; }
.brand { flex:1 1 auto; }
.brand > div { min-width:0; }
.brand h2 { overflow:hidden; text-overflow:ellipsis; }
.regional-groups-switch { display:flex; align-items:center; gap:5px; font-size:11px; }
.resident-find { position:relative; z-index:1100; }
.resident-find .address-search { padding:7px 12px; gap:6px; background:#fff; }
.resident-find .address-search label { font-size:12px; }
.resident-find .address-search input { flex:1 1 200px; max-width:460px; min-width:0; padding:6px 9px; font-size:12px; }
.resident-find .address-search button { padding:6px 10px; font-size:11px; }
.resident-find .address-search p { flex-basis:auto; font-size:10px; }
.resident-find #address-status { flex:1 1 280px; margin:0; }
.resident-find .address-search > p:has(a) { margin:0; }
.search-map-status { margin:0; padding:3px 12px 5px; background:#fff; border-bottom:1px solid var(--border); color:var(--secondary); font-size:10px; line-height:1.3; }
.resident-find #address-results { width:min(460px,82vw); max-height:40dvh; overflow:auto; right:auto; }
.attendance-area-label span { --label-color:var(--area-color); opacity:1; padding:4px 7px; border-radius:4px; font-size:16px; letter-spacing:0; }
.attendance-area-label small { letter-spacing:.7px; }
.city-area-label span { --label-color:var(--city-color); box-shadow:none; }
.attendance-area-label span,.city-area-label span,.cusd-school-label,.city-hall-label {
  color:color-mix(in srgb,var(--label-color,#38576b) 60%,#102635);
  background:color-mix(in srgb,var(--label-color,#38576b) 24%,transparent);
  text-shadow:0 1px 1px #ffffff70;
}
.cusd-school-label,.city-hall-label { border-color:color-mix(in srgb,var(--label-color,#38576b) 45%,transparent); box-shadow:0 1px 2px #16344b16; font:600 11px/1.3 ui-sans-serif,system-ui,sans-serif; }
.cusd-school-label:before,.city-hall-label:before { border-right-color:color-mix(in srgb,var(--label-color,#38576b) 24%,transparent)!important; }
.city-hall-marker { display:grid; place-items:center; background:color-mix(in srgb,var(--city-color,#38576b) 15%,#fff); border:2px solid var(--city-color,#38576b); border-radius:5px; box-shadow:0 1px 4px #0004; cursor:pointer; }
.city-hall-marker svg { width:18px; height:18px; stroke:color-mix(in srgb,var(--city-color,#38576b) 65%,#16344b); stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:500px) {
  .resident-find .address-search { padding:6px 9px; }
  .resident-find .address-search label { flex-basis:100%; }
  .resident-find .address-search input { flex-basis:160px; }
}

/* Stable menu names, separate selection badges and a persistent top-right menu. */
.topbar { position:relative; z-index:1200; }
.topbar .layers-dropdown { flex:none; }
.topbar .layers-dropdown > summary { padding:6px 8px; min-height:28px; font-size:11px; }
.menu-label { display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
.menu-scope { color:var(--secondary); font-size:9px; font-weight:500; line-height:1.1; }
.menu-status { display:inline-block; flex:none; padding:1px 5px; border-radius:4px; background:#edf2f6; color:#4b6374; font-size:10px; font-weight:500; line-height:1.4; white-space:nowrap; }
.map-toolbar .school-dropdown > summary { gap:6px; }
@media(max-width:500px) {
  .topbar .brand { display:none; }
  .topbar .layers-dropdown { margin-left:auto; }
}

/* Stable information actions stay at the upper right, outside the map toolbar. */
body { display:flex; flex-direction:column; }
.workspace { flex:1; height:auto; }
.topbar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; flex:none; height:auto; min-height:40px; align-items:center; }
.header-actions { display:flex; flex-wrap:nowrap; justify-content:flex-end; align-items:center; gap:6px; min-width:0; }
.header-actions > * { flex:none; }
.header-actions > .map-dropdown > summary,.header-actions #open-tools { padding:6px 8px; min-height:28px; font-size:11px; white-space:nowrap; }
.header-actions #open-tools { margin:0; border:1px solid #9eb2c3; border-radius:7px; font-weight:650; }
.header-actions .map-dropdown { --menu-preferred-width:320; }
.header-actions .layers-dropdown { --menu-preferred-width:300; }
.group-dropdown .regional-groups-switch { padding:6px 3px; font-weight:600; }
.group-dropdown .city-options-note { margin:5px 3px 9px; }
@media(max-width:900px) {
  body[data-view-mode="precinct"] .topbar { grid-template-columns:minmax(0,1fr) auto; }
  body[data-view-mode="precinct"] .topbar .brand { display:flex; max-width:none; }
  body[data-view-mode="precinct"] .brand h2 { font-size:13px; white-space:normal; }
  body[data-view-mode="precinct"] .header-actions { grid-column:1/-1; justify-self:end; }
}
@media(max-width:500px) {
  body[data-view-mode="resident"] .topbar { grid-template-columns:auto minmax(0,1fr); }
  .header-actions { gap:4px; }
  .header-actions > .map-dropdown > summary,.header-actions #open-tools { padding:6px; font-size:10px; }
  .header-actions .layers-dropdown { margin-left:0; }
}

.trial-sharing { grid-column:1/-1; border-top:1px solid var(--border); padding-top:8px; }
.trial-sharing input { width:100%; padding:6px; margin:5px 0; font-size:11px; }
.trial-sharing button { font-size:12px; }
.share-link-label { font-size:10px; color:var(--secondary); }
.school-review { color:#79500b; background:#fff2d6; border-radius:3px; padding:1px 3px; }

/* Site identity/help stays above the app controls, outside the map/search area. */
.site-info { display:flex; flex:none; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:3px 16px; padding:5px 12px; background:#edf5fa; color:#38576b; border-bottom:1px solid #d9e5ed; font-size:11px; line-height:1.4; }
.site-intro { display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; min-width:0; }
.site-intro strong { color:#16344b; white-space:nowrap; }
.site-help { display:flex; flex:none; justify-content:flex-end; flex-wrap:wrap; gap:4px 14px; margin-left:auto; }
.site-help a { color:#075fae; text-underline-offset:2px; white-space:nowrap; }
.site-help a:focus-visible { outline:2px solid #0878ef; outline-offset:3px; }
.resident-find #address-status:empty { display:none; }
@media(max-width:600px) {
  .site-info { padding:4px 9px; font-size:10px; }
  .site-help { gap:4px 12px; }
}

/* Primary workspace choice: native radio semantics, distinct from map menus. */
.view-mode-picker { display:flex; flex:none; align-items:center; gap:8px; margin:0; padding:4px 7px; border:1px solid #b7cddb; border-radius:9px; background:#eaf2f8; white-space:nowrap; }
.mode-caption { color:#38576b; font-size:9px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.mode-choices { display:flex; border:1px solid #a7bfce; border-radius:6px; overflow:hidden; background:#fff; }
.mode-choice { position:relative; display:block; margin:0; cursor:pointer; }
.mode-choice input { position:absolute; width:1px; height:1px; opacity:0; }
.mode-choice span { display:block; padding:6px 11px; color:#38576b; font-size:11px; line-height:1.25; font-weight:650; }
.mode-choice + .mode-choice { border-left:1px solid #a7bfce; }
.mode-choice input:checked + span { background:#16344b; color:#fff; box-shadow:inset 0 -3px 0 #6de4d6; }
.mode-choice input:focus-visible + span { outline:3px solid #0878ef; outline-offset:-3px; }
.mode-choice:hover input:not(:checked) + span { background:#eef5fa; }

/* Shared toolbar sizing: city scope and overlay menus align on both edges. */
.map-toolbar { --toolbar-control-height:44px; align-items:center; justify-content:flex-start; gap:8px; }
.map-toolbar > .map-dropdown { flex:0 0 auto; }
.map-toolbar > .map-dropdown > summary { height:var(--toolbar-control-height); min-height:var(--toolbar-control-height); padding:6px 10px; justify-content:flex-start; font-size:12px; box-sizing:border-box; }
.map-toolbar .menu-label { gap:1px; }
.map-toolbar .menu-label > span { line-height:15px; }
.map-toolbar .menu-scope { font-size:9px; line-height:11px; }
.map-toolbar .city-menu-swatch { width:14px; height:14px; }
.map-toolbar .map-city-picker { position:relative; flex:0 0 300px; width:300px; min-width:0; max-width:100%; height:var(--toolbar-control-height); }
.map-toolbar .map-city-picker label { position:absolute; display:block; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; margin:0; }
.map-toolbar #city-select { display:block; width:100%; height:var(--toolbar-control-height); min-height:0; padding:6px 8px; margin:0; font-size:11px; line-height:normal; }
.map-toolbar .resident-city-picker { display:flex; align-items:center; gap:7px; height:var(--toolbar-control-height); font-size:11px; }
.map-toolbar .resident-city-picker label { white-space:nowrap; }
.map-toolbar .resident-city-picker select { width:145px; height:var(--toolbar-control-height); padding:6px 8px; margin:0; font-size:12px; }
.map-toolbar > #fit-city { height:var(--toolbar-control-height); margin-left:auto; padding:6px 10px; font-size:11px; }
@media(max-width:900px) {
  body[data-view-mode="precinct"] .brand h2 { white-space:nowrap; }
}
@media(max-width:760px) {
  .map-toolbar { gap:6px; }
  .map-toolbar > .map-dropdown > summary { padding:6px 8px; font-size:11px; }
}
@media(max-width:500px) {
  .view-mode-picker { gap:5px; padding:3px 5px; }
  .mode-choice span { padding:6px 9px; font-size:10px; }
}
@media(max-width:420px) {
  .map-toolbar .map-city-picker { flex:0 1 100%; width:300px; }
}