/* d.css: map layers (open-enrollment areas, precinct choropleths). Worker D. */
:root { --oe: #0b6e5f; }
.oe-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 4px 0 10px; font-size: .8125rem; color: var(--ink-2); }
.oe-bar .oe-info { display: inline-flex; margin-left: -8px; }
.oe-bar .oe-count { color: var(--muted, #595959); }
.oe-fit { margin-left: auto; }
.lg-oe { display: inline-block; width: 16px; height: 12px; border: 2px solid var(--oe); background: color-mix(in srgb, var(--oe) 10%, #fff); vertical-align: middle; }
.lg-oe.new { background: color-mix(in srgb, var(--oe) 32%, #fff); }
.pr-row { display: flex; align-items: center; gap: 6px; }
.pr-row select { min-height: 36px; max-width: min(260px, 100%); }
.pr-sum { margin-top: 20px; }
.pr-sum h3 { margin: 0 0 6px; }
.pr-src { font-size: .75rem; color: var(--muted, #595959); margin-top: 4px; }
.lg-gray { display: inline-block; width: 18px; height: 12px; background: #e3e3e3; border: 1px solid rgba(0,0,0,.2); }

/* ---- Where students live: control band, layers menu, map labels, phone map ---- */
.wh-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; margin-bottom: 12px; }
.wh-toolwrap .icon-btn { position: relative; }
.wh-bar .field { display: flex; flex-direction: column; gap: 4px; }
.wh-bar .field > span:first-child { font: 600 .75rem var(--font); color: var(--muted, #595959); }
.wh-show select { min-height: 36px; min-width: 240px; max-width: 100%; }
.wh-toolwrap { margin-left: auto; display: flex; align-items: center; min-height: 36px; }
.wh-layers { position: relative; }
.wh-layers > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; padding: 0 12px; }
.wh-layers > summary::-webkit-details-marker { display: none; }
.wh-layers > summary::after { content: "\25BE"; font-size: .75rem; }
.wh-layers[open] > summary { background: var(--surface-2); }
.wh-panel { position: absolute; z-index: 1200; top: calc(100% + 6px); right: 0; width: min(320px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--card-rule, #ddd); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.wh-panel .wh-oe-host { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.wh-panel .wh-oe-host .oe-count { flex-basis: 100%; margin: -4px 0 4px 42px; font-size: .75rem; }
.wh-opt { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: .8125rem; color: var(--ink-2); }
.wh-opt .seg { width: 100%; } .wh-opt .seg button { flex: 1 1 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mlab-wrap { background: none; border: 0; pointer-events: none; }
.mlab { display: block; font: 600 11px/14px var(--font); color: var(--ink); white-space: nowrap; text-shadow: 1.5px 0 #fff, -1.5px 0 #fff, 0 1.5px #fff, 0 -1.5px #fff, 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff; }
.mlab .rl { font: 700 10px/14px var(--font); color: var(--maroon, #940804); }
.map-legend .lg-note { color: var(--ink-2); font-weight: 500; margin-top: 4px; max-width: 260px; }
.map-legend .lg-dots { display: flex; align-items: flex-end; gap: 10px; margin-top: 4px; }
.map-legend .lg-dotk { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: .6875rem; }
.map-legend .lg-dotk i { display: block; border-radius: 50%; background: rgba(34,34,34,.62); border: 1px solid #fff; }
.lg-sw.line { border-radius: 0; border: 0; border-top: 2px solid #666; height: 0; vertical-align: middle; }
.map-yrpill { background: #fff; border: 1px solid var(--card-rule, #ddd); border-radius: 999px; padding: 4px 12px; font: 600 .75rem/1.4 var(--font); box-shadow: 0 2px 8px rgba(0,0,0,.12); max-width: calc(100vw - 100px); }
.map-selcard { display: none; background: rgba(255,255,255,.96); border: 1px solid var(--card-rule, #ddd); border-radius: 6px; padding: 5px 10px; font: 500 .75rem/1.35 var(--font); box-shadow: 0 2px 8px rgba(0,0,0,.14); margin: 0 10px 10px 0 !important; max-width: 45vw; }
.births-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.births-fig { margin: 0; } .births-fig figcaption { font: 600 .8125rem var(--font); margin-bottom: 2px; }
.births-svg { width: 100%; height: auto; display: block; }
@media (max-width: 760px) {
  .map-selcard:not([hidden]) { display: block; }
  .wh-show { flex: 1 1 100%; } .wh-show select { width: 100%; min-width: 0; }
  .wh-toolwrap { margin-left: 0; }
}
.wh-panel .oe-fit-in { margin: 4px 0 0 42px; font-size: .75rem; }

/* ---- fix round 2: base layer, compact key, open-enrollment table, phone lock ---- */
#leaflet.leaflet-container, #wmap.leaflet-container { background: #f2f3f0; }
.mp-basef { display: flex; align-items: flex-end; }
.wh-caption { margin: 0 0 8px; font: 500 .8125rem/1.4 var(--font); color: var(--ink-2); }
.map-legend { max-width: 230px; }
.map-legend .lg-r2 { margin-top: 5px; display: flex; flex-direction: column; gap: 2px; }
.map-legend .lg-t { font-weight: 600; }
.map-legend .lg-strip { width: 190px; }
.map-legend .lg-cells { display: flex; border: 1px solid rgba(0,0,0,.18); }
.map-legend .lg-cell { flex: 1 1 0; height: 12px; }
.map-legend .lg-ticks { display: flex; font-size: .6875rem; color: var(--ink-2); margin-top: 1px; }
.map-legend .lg-ticks span { flex: 1 1 0; }
.map-legend .lg-grad { display: inline-flex; align-items: center; gap: 6px; }
.map-legend .lg-na { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; }
.map-legend .lg-sw2 { display: inline-block; width: 18px; height: 11px; border: 1px solid rgba(0,0,0,.2); }
.map-legend .lg-sw2.none { background: #f2f3f0; border-style: solid; }
.map-legend .lg-plan { display: inline-block; width: 24px; height: 0; border-top: 3px dashed #767676; }
.leaflet-tooltip.ct > div { white-space: nowrap; }
.oe-bar { position: relative; }
.oe-info-btn { vertical-align: middle; }
.oe-panel { position: absolute; z-index: 1300; top: calc(100% + 4px); left: 0; width: min(560px, 100%); max-height: 380px; overflow: auto; background: #fff; border: 1px solid var(--card-rule, #ddd); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 10px 14px; font-size: .8125rem; }
.oe-panel[hidden] { display: none; }
.oe-panel.in-menu { position: static; width: auto; max-height: 260px; box-shadow: none; flex-basis: 100%; margin-top: 6px; }
.oe-panel p { margin: 0 0 6px; }
.oe-panel dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0 0 6px; }
.oe-panel dd { margin: 0; font-weight: 600; text-align: right; }
.oe-table { width: 100%; border-collapse: collapse; }
.oe-table th, .oe-table td { padding: 3px 8px 3px 0; text-align: left; border-bottom: 1px solid var(--card-rule, #e6e6e6); white-space: nowrap; }
.oe-table td:first-child { white-space: normal; }
.oe-table .num { text-align: right; }
.oe-sort { background: none; border: 0; padding: 0; font: 600 .75rem var(--font); color: var(--ink); cursor: pointer; min-height: 24px; }
.map-lock { position: absolute !important; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; float: none; margin: 0 !important; background: #fff; border: 1px solid rgba(0,0,0,.25); border-radius: 999px; padding: 6px 14px; font: 600 .8125rem var(--font); min-height: 36px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.map-lock[aria-pressed=true] { background: #111; color: #fff; }
.mapbox.map-locked { touch-action: auto; }
.leaflet-tooltip.ct b { display: inline; }
.leaflet-tooltip.ct > div > b:only-child { display: inline; }
.map-legend .lg-util { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; } .map-legend .lg-util .lg-na { margin-right: 0; }
.leaflet-control.tt-under { opacity: 0 !important; pointer-events: none !important; transition: opacity .08s; }

/* ======================================================================
   Phone pass (M3): maps, control bar + bottom sheets, selection card, events strip.
   Everything below is inert above 640px: desktop layout is unchanged.
   ====================================================================== */
.mbar, .mapfoot, .msheet, .msheet-back, .ev-chips, .imp-cards, .side-bar, .ev-s, .ev-seemap { display: none; }
.msheet[hidden], .msheet-back[hidden] { display: none !important; }
@media (max-width: 640px) {
  /* 1. taller, full-bleed maps; 44px zoom buttons and lock chip */
  #map .mapwrap, #where .mapwrap { margin: 0 -16px; }
  #map .mapgrid, #where .mapgrid { gap: 10px; }
  #leaflet.mapbox, #wmap.mapbox { height: 68vh; height: 68dvh; min-height: 420px; border-left: 0; border-right: 0; border-radius: 0; scroll-margin-top: calc(var(--bar-h, 96px) + 8px); }
  #leaflet .leaflet-bar a, #wmap .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 24px; }
  #leaflet .leaflet-control-zoom, #wmap .leaflet-control-zoom { margin: 12px 0 0 12px; }
  .mapbox .map-lock { top: auto; bottom: 46px; left: 12px; transform: none; min-height: 44px; padding: 0 18px; }
  .mapbox .leaflet-control-scale { margin-bottom: 10px; }
  .map-legend:empty { display: none; }
  .map-selcard, .map-selcard:not([hidden]) { display: none !important; }
  .leaflet-tooltip.ct:not(.oe-tip) { display: none !important; }
  .map-yrpill { max-width: calc(100vw - 32px); font-size: .8125rem; margin: 12px 12px 0 0 !important; }

  /* 2. compact control bar -> bottom sheets */
  #where .wh-bar, #map .controls.mbar-moved.no-ev { display: none; }
  #map .controls.mbar-moved { margin-bottom: 10px; }
  .mbar { display: flex; gap: 8px; margin: 0 0 10px; }
  .mbar-btn { flex: 1 1 0; min-width: 0; min-height: 48px; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 4px 26px 4px 12px; border: 1px solid #b5b5b5; border-radius: var(--r, 6px); background: #fff; color: var(--ink); font: 600 .8125rem/1.25 var(--font); text-align: left; cursor: pointer; }
  .mbar-btn::after { content: "\25BE"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--muted, #595959); }
  .mbar-btn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--ink); }
  .mb-k { font: 600 .6875rem/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #595959); }
  .mb-v { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; overflow: hidden; line-height: 1.2; }
  .mb-v:empty { display: none; }
  .mapfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 0 16px; }
  .map-hint { margin: 0; flex: 1 1 auto; font-size: .8125rem; line-height: 1.35; color: var(--muted, #595959); }
  .mapfoot-tools { display: flex; gap: 6px; flex: none; position: relative; }
  .mapfoot-tools .tools { position: static; margin: 0; }
  .mapfoot .icon-btn { width: 44px; height: 44px; }
  .mapfoot .icon-btn svg { width: 20px; height: 20px; }

  .msheet-back { display: block; position: fixed; inset: 0; z-index: 2700; background: rgba(0,0,0,.4); touch-action: none; }
  .msheet { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2800; max-height: 80vh; max-height: 80dvh; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.25); padding-bottom: env(safe-area-inset-bottom); }
  .msheet:focus { outline: none; }
  .msheet-h { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 16px; border-bottom: 1px solid var(--line, #ddd); }
  .msheet-t { margin: 0; font: 700 1rem/1.3 var(--font); }
  .msheet-x { min-width: 64px; min-height: 44px; border: 0; background: none; font: 600 .9375rem var(--font); color: var(--ink); cursor: pointer; }
  .msheet-b { overflow: auto; overscroll-behavior: contain; padding: 14px 16px 20px; }
  .msheet .field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0 0 16px; }
  .msheet .field > span:first-child:not(.sr-only) { font: 600 .8125rem var(--font); color: var(--muted, #595959); }
  .msheet .seg { display: flex; width: 100%; }
  .msheet .seg button { flex: 1 1 0; min-height: 44px; font-size: .9375rem; padding: 0 6px; }
  .msheet .switch { min-height: 44px; font-size: .9375rem; }
  .msheet select, .msheet .wh-show select { min-height: 44px; width: 100%; min-width: 0; max-width: none; font-size: 1rem; }
  .msheet .pr-row { display: flex; align-items: center; gap: 8px; } .msheet .pr-row select { flex: 1 1 auto; }
  .msheet .icon-btn, .msheet .info-btn { width: 44px; height: 44px; flex: none; }
  .msheet .mp-basef { display: block; margin: 0 0 6px; }
  .msheet .oe-bar { margin: 0; gap: 4px 12px; font-size: .9375rem; }
  .msheet .oe-bar .oe-info { margin-left: 0; }
  .msheet .oe-fit, .msheet .oe-fit-in { margin: 4px 0 0; min-height: 44px; }
  .msheet .oe-panel { position: static; width: auto; max-height: 240px; box-shadow: none; flex-basis: 100%; margin-top: 6px; }
  .msheet .wh-lay { margin: 0; }
  .msheet .wh-layers > summary { display: none; }
  .msheet .wh-panel { position: static; width: auto; border: 0; box-shadow: none; padding: 0; gap: 0; }
  .msheet .wh-opt { margin-top: 14px; font-size: .8125rem; }
  .msheet .wh-panel .wh-oe-host .oe-count { margin-left: 42px; }
  .msheet .wh-panel .oe-fit-in { margin-left: 42px; }
  .msheet .map-legend.in-sheet { position: static; max-width: none; background: none; border: 0; box-shadow: none; padding: 0; margin: 0 !important; font-size: .875rem; line-height: 1.4; }
  .msheet .map-legend summary { display: none; }
  .msheet .map-legend .lg-strip { width: 100%; max-width: 360px; }
  .msheet .map-legend .lg-note { max-width: none; }
  .msheet .map-legend .lg-row { margin-top: 8px; gap: 4px 10px; }
  .msheet .map-legend .lg-r2 { margin-top: 12px; }
  .msheet .map-legend .lg-title { font-weight: 600; margin-bottom: 4px; }
  .msheet .map-legend .lg-ticks, .msheet .map-legend .lg-dotk { font-size: .75rem; }
  .msheet .map-legend .ramp { width: 140px; }

  /* 3. selection: details card under the map (docked while the map is on screen), one target at a time */
  #map .mapside:not(.has-sel), #where .mapside:not(.has-sel) { display: none; }
  .mapside.has-sel { position: sticky; bottom: 8px; z-index: 1100; max-height: 50vh; max-height: 50dvh; overflow: auto; overscroll-behavior: contain; margin: 0; padding: 8px 8px 12px 14px; border-radius: 12px; box-shadow: 0 -2px 18px rgba(0,0,0,.2); }
  .mapside.has-sel:not(.open) { padding-bottom: 8px; overflow: hidden; }
  .mapside.has-sel:not(.open) > :not(.side-bar) { display: none; }
  .mapside.has-sel > :not(.side-bar) { margin-right: 6px; }
  .mapside.has-sel > h3 { display: none; }
  .mapside .side-bar { display: flex; align-items: center; gap: 4px; }
  .side-sum { flex: 1 1 0; min-width: 0; font: 500 .8125rem/1.35 var(--font); color: var(--ink-2); }
  .side-sum b { display: block; font-size: 1rem; color: var(--ink); }
  .side-more, .side-x { flex: none; min-height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; }
  .side-more { padding: 0 10px; font: 600 .8125rem var(--font); text-decoration: underline; text-underline-offset: 3px; }
  .side-x { display: flex; align-items: center; justify-content: center; width: 44px; font: 400 1.75rem/1 var(--font); color: var(--ink-2); }
  .mapside .btn, .mapside .linklike { min-height: 44px; }
  .mapside .linklike { display: inline-flex; align-items: center; }

  /* 4. events: year chips + swipeable cards, impact table as cards */
  .ev-chips { display: flex; gap: 8px; margin: 0 0 8px; overflow-x: auto; }
  .ev-ychip { flex: none; min-width: 72px; min-height: 44px; padding: 0 14px; border: 1px solid #b5b5b5; border-radius: 999px; background: #fff; color: var(--ink-2); font: 600 .875rem var(--font); cursor: pointer; }
  .ev-ychip small { font: 500 .75rem var(--font); color: var(--muted, #595959); }
  .ev-ychip[aria-pressed="true"] { background: var(--ink, #111); border-color: var(--ink, #111); color: #fff; }
  .ev-ychip[aria-pressed="true"] small { color: #ddd; }
  #ev-timeline { display: flex; gap: 10px; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; border: 0; border-radius: 0; background: none; padding: 2px 16px 12px; margin: 0 -16px; scroll-padding-left: 16px; }
  #ev-timeline .ev-col, #ev-timeline .ev-col.is-year { display: contents; }
  #ev-timeline .ev-row { display: contents; }
  #ev-timeline .ev-year { flex: none; display: flex; flex-direction: column; justify-content: center; min-width: 52px; margin: 0; padding: 0 4px; font: 700 1.0625rem/1.2 var(--font); scroll-snap-align: start; }
  #ev-timeline .ev-year span { display: block; font: 500 .6875rem/1.3 var(--font); }
  #ev-timeline .ev-dot { flex: none; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic d" "t t" "s s"; align-content: start; align-items: center; column-gap: 8px; row-gap: 4px; width: 212px; min-height: 96px; padding: 10px 12px; border: 1px solid var(--card-rule, #d8d8d8); border-radius: 10px; background: #fff; text-align: left; scroll-snap-align: start; }
  #ev-timeline .ev-dot.on { border: 2px solid var(--red, #cc0033); padding: 9px 11px; background: var(--red-tint, #fdecee); }
  #ev-timeline .ev-ic { grid-area: ic; display: flex; }
  #ev-timeline .ev-d { grid-area: d; min-width: 0; font: 600 .8125rem var(--font); }
  #ev-timeline .ev-t { grid-area: t; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 500 .875rem/1.3 var(--font); }
  #ev-timeline .ev-s { grid-area: s; display: block; font: 600 .6875rem/1.3 var(--font); color: var(--muted, #595959); }
  .ev-card .btn { min-height: 44px; }
  .ev-card .ev-seemap { display: inline-flex; align-items: center; }
  #map .ev-grid { grid-template-columns: minmax(0, 1fr); }
  .imp-table { display: none; }
  .imp-cards { display: grid; gap: 10px; margin-top: 8px; }
  .imp-c { border: 1px solid var(--card-rule, #d8d8d8); border-radius: 10px; padding: 10px 12px; background: #fff; }
  .imp-c.tot { background: var(--surface-2); }
  .imp-h b { font-size: .9375rem; }
  .imp-h .role-line { margin-top: 2px; }
  .imp-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
  .imp-s span { display: block; font: 500 .6875rem/1.3 var(--font); color: var(--muted, #595959); }
  .imp-s b { display: block; font-size: .9375rem; font-variant-numeric: tabular-nums; }
  .imp-z { margin-top: 8px; font-size: .8125rem; line-height: 1.4; color: var(--ink-2); }
  .imp-z small { color: var(--muted, #595959); }
  .imp-z small { display: block; }
  #map .mbar, #where .mbar { scroll-margin-top: calc(var(--bar-h, 96px) + 8px); }
  /* phone map focus: the Add to comparison row lives in the collapsed docked card; a tap only looks, comparing is explicit */
  .mapside .side-bar { flex-wrap: wrap; }
  .side-bar > .side-add, .side-bar > .side-in { flex: 1 1 100%; order: 5; display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 2px 6px 0 0; font: 600 .875rem var(--font); }
  .side-bar > .side-in { color: var(--ink-2); background: var(--surface-2); border-radius: var(--r, 6px); }
  .mapside .side-prof { display: inline-flex; align-items: center; text-decoration: none; }
  .map-snack { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 1400; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 4px 16px; border-radius: 10px; background: #111; color: #fff; font: 600 .9375rem/1.3 var(--font); box-shadow: 0 4px 18px rgba(0,0,0,.35); }
  .map-snack[hidden] { display: none; }
  .snack-undo { min-height: 44px; min-width: 64px; padding: 0 14px; border: 0; background: none; color: #fff; font: 700 .9375rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  #ev-listwrap > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; border: 1px solid #b5b5b5; border-radius: var(--r, 6px); background: #fff; font-weight: 600; cursor: pointer; list-style: none; }
  #ev-listwrap > summary::-webkit-details-marker { display: none; }
  #ev-listwrap > summary::after { content: "\25BE"; color: var(--muted, #595959); }
  #ev-listwrap[open] > summary::after { content: "\25B4"; }
  #h-where .yr-badge { display: block; width: fit-content; margin: 6px 0 0; }
}