/* District Map page (Oct 26, 2026 preview). Journey: choose or enter a place → recognize it → see its Council
   district(s) → see the representative → explore or act. Desktop: map left, result panel right. Phone: selector,
   map, result in one column. Brand: paper, ink, navy, body, slate, link, line, soft; red only as the selection/focus accent. */
:root{--paper:#f8f8f2;--ink:#092c46;--navy:#003563;--body:#33434f;--slate:#53636a;--link:#0759b5;--line:#cbd0cb;--soft:#e9ece5;--red:#c70043;
  --sel-tint:rgba(0,53,99,.14);--sel-tint-strong:rgba(0,53,99,.12);--sel-panel:#eef2f6}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--body);font-family:"Atkinson Hyperlegible Next","Helvetica Neue",Arial,sans-serif}
/* Header rules carried over unchanged from the previous sheet (the header itself is not part of this preview). */
header{height:94px;display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid #e2e8ed;gap:20px}header>a{text-decoration:none;font-size:14px}.brand{display:flex;gap:14px;align-items:center;font-weight:700;font-size:23px}.brand small{display:block;font-size:10px;letter-spacing:2px;margin-top:5px}
@media(max-width:700px){header{height:80px;padding:10px 16px}.brand{font-size:18px;gap:8px}.brand img{width:44px;height:44px}.brand small{font-size:8px}header>a:last-child{font-size:12px;max-width:105px}}
a{color:var(--link)}
button,select,input{font:inherit}
a,button,select,summary{-webkit-tap-highlight-color:transparent}
main a:focus-visible,main button:focus-visible,main select:focus-visible,main input:focus-visible,main summary:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.skip{position:absolute;top:-100px;z-index:2000;background:#fff;padding:12px}.skip:focus{top:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Layout */
.dm-main{display:grid;grid-template-columns:minmax(0,1fr) 440px;grid-template-areas:"intro intro" "map pick" "map result";gap:0 28px;align-items:start;max-width:1600px;margin:0 auto;padding:14px 5% 48px}
.dm-intro{grid-area:intro;margin-bottom:12px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"eyebrow eyebrow" "h1 lead";column-gap:28px;align-items:baseline}
.dm-intro .eyebrow{grid-area:eyebrow}.dm-intro h1{grid-area:h1}.dm-lead{grid-area:lead}
.nb-pick{grid-area:pick}
.map-wrap{grid-area:map;position:sticky;top:12px;height:calc(100dvh - 24px);min-height:540px;max-height:960px}
.dm-result{grid-area:result;margin-top:18px}

/* Intro */
main .eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:700;color:var(--slate);margin:0 0 4px}
main h1{font-size:27px;line-height:1.12;letter-spacing:-.5px;margin:0;color:var(--ink);font-weight:650}
main h1 br{display:none}
main p{font-size:14px;line-height:1.6;color:var(--body)}
.dm-lead{margin:0;max-width:62ch;font-size:14px}

/* Place picker */
.nb-pick{margin:0;padding:18px 20px 14px;background:#fff;border:1px solid var(--line);border-radius:14px}
.nb-pick h2{margin:0 0 10px;font-size:17px;line-height:1.3;color:var(--ink);font-weight:650}
.nb-search-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.nb-combo{position:relative;flex:1 1 200px;min-width:0}
.nb-combo label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:0 0 6px}
.nb-pick input[type=search]{display:block;width:100%;margin:0;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:15px;transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none}
.nb-pick input[type=search]:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--sel-tint)}
.nb-suggest{position:absolute;z-index:1200;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(9,44,70,.12);max-height:320px;overflow:auto}
.nb-suggest[hidden]{display:none}
.nb-suggest li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;min-height:44px;border-radius:8px;cursor:pointer}
.nb-suggest li:hover,.nb-suggest li[aria-selected=true]{background:var(--sel-tint)}
.nb-suggest li[aria-selected=true]{box-shadow:inset 3px 0 0 var(--red)}
.nb-opt-name{font-size:15px;font-weight:600;color:var(--ink)}
.nb-opt-meta{font-size:12px;color:var(--slate)}
.nb-locate{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;white-space:nowrap;border:1px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;margin:0;transition:background-color .15s ease}
.nb-locate:hover{background:var(--soft)}
.nb-locate:disabled{opacity:.45;cursor:progress}
.nb-group{margin:14px 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
.nb-note{margin:0 0 8px;font-size:12.5px;color:var(--slate)}
.nb-chips{display:flex;flex-wrap:wrap;gap:8px}
.nb-chip{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;margin:0;transition:border-color .15s ease,background-color .15s ease}
.nb-chip:hover{border-color:var(--navy)}
/* Selected: the same navy tint as the map fill and the result panel, a red accent dot as the selection mark. */
.nb-chip[aria-pressed=true]{background:var(--sel-tint);border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);padding-left:26px;position:relative}
.nb-chip[aria-pressed=true]::before{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--red)}
/* Oct 28, 2026 (owner): every place is shown, no disclosure and no scroll box, so a chip's focus ring is never clipped. */
.nb-rest{margin-top:12px;padding-top:4px;border-top:1px solid var(--soft)}
#nb-empty,.nb-status{font-size:13px;color:var(--slate);margin:10px 0 0}
.nb-status:empty{display:none}

/* Map */
.map-wrap{min-height:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--soft);display:flex;flex-direction:column}
#district-map{flex:1 1 auto;min-height:0;width:100%;background:var(--soft);position:relative}
/* The supporting note sits under the map, not on it (owner, Nov 6, 2026: the legend was doing too much work inside the map). */
.map-note{flex:none;margin:0;padding:8px 12px;font-size:12px;line-height:1.45;color:var(--slate);background:#fff;border-top:1px solid var(--line)}
/* Oct 28, 2026 (owner): the legend sits in the lower-left corner, clear of the map's subject; zoom stays top-left, attribution bottom-right. */
.map-legend{position:absolute;z-index:500;left:12px;bottom:40px;max-width:230px;padding:8px 10px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:10px;font-size:12px;line-height:1.4;color:var(--body);display:flex;flex-direction:column;gap:4px;pointer-events:none}
.map-legend .lg{display:flex;align-items:center;gap:8px}
.map-legend .lg i{flex:none;width:18px;height:12px;border-radius:2px}
.map-legend .lg-line i{border:1.5px solid var(--navy);background:rgba(0,53,99,.05)}
.map-legend .lg-sel i{border:2px solid var(--red);background:var(--sel-tint-strong)}
.map-legend .lg-pin i{width:18px;height:14px;border:0;border-radius:0;background:none;position:relative}
.map-legend .lg-pin i::before{content:"";position:absolute;left:5px;top:1px;width:9px;height:9px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--navy);border:1.5px solid #fff;box-shadow:0 0 0 1px var(--navy)}
.map-legend .lg-pin[hidden]{display:none}
/* District numbers on the map, where space permits (owner, Nov 6, 2026): a small navy chip at an interior point of each district; the script hides any that would overlap at the current zoom. */
.dm-district-label{pointer-events:none}
.dm-district-label span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:inline-block;min-width:22px;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.93);border:1px solid var(--navy);color:var(--navy);font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;line-height:16px;font-weight:700;text-align:center;letter-spacing:.02em;white-space:nowrap}
.dm-district-label.is-active span{border-color:var(--red);color:var(--red)}
.dm-district-label[hidden]{display:none}
/* Back to the overview from the map itself (owner, Nov 6, 2026). */
.dm-show-all{margin:0;padding:0 14px;min-height:40px;border:1px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 1px 4px rgba(9,44,70,.15)}
.dm-show-all:hover{background:var(--soft)}
.leaflet-control.dm-show-all-control{margin-top:10px;margin-right:10px}
.leaflet-control.dm-show-all-control[hidden]{display:none}
/* Place marker: a navy pin with the place name beside it. A point with a name, never an outline, so it cannot be read
   as a neighborhood boundary (the district boundary is the line). The pin's tip sits on the point. */
.dm-place-marker{position:relative;width:0;height:0;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(9,44,70,.35))}
.dm-place-marker .dm-pin{position:absolute;left:-9px;top:-22px;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--navy);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--navy)}
.dm-place-marker .dm-pin::after{content:"";position:absolute;left:4px;top:4px;width:6px;height:6px;border-radius:50%;background:#fff}
.dm-place-marker .dm-pin-label{position:absolute;left:12px;top:-24px;white-space:nowrap;padding:3px 8px;border:1.5px solid var(--navy);border-radius:6px;background:rgba(255,255,255,.96);color:var(--navy);font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.01em}
#map-status{position:absolute;z-index:500;left:12px;bottom:28px;max-width:calc(100% - 24px);padding:8px 12px;border-radius:8px;background:#fff;box-shadow:0 2px 8px rgba(9,44,70,.12);font-size:12px;margin:0;pointer-events:none}
#map-status[hidden]{display:none}
.leaflet-container{font-family:inherit;background:var(--soft)}
.leaflet-tooltip{color:var(--ink);font-size:13px;border:1px solid var(--line);box-shadow:0 2px 6px rgba(9,44,70,.1)}
.leaflet-control-attribution{font-size:11px!important}
/* project-credit.css lifts the attribution row 28px for the footer credit; inside the map box that leaves a blank band under it. */
.map-wrap .leaflet-bottom.leaflet-right{bottom:0}
.leaflet-interactive:focus{outline:3px solid var(--red)}
.leaflet-bar a{color:var(--ink)}

/* Result panel */
#district-info{padding:18px 20px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:14px;transition:border-color .15s ease,background-color .15s ease}
.dm-result.is-selected #district-info{background:var(--sel-panel);border-color:var(--navy);border-left-color:var(--red)}
#district-info h2{margin:0 0 6px;font-size:22px;line-height:1.25;color:var(--ink);letter-spacing:-.3px}
#district-info p{margin:0 0 8px}
.result-kind{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);margin:0 0 4px!important}
.official{font-size:13px;color:var(--slate)}
.nc-note{font-size:13px;color:var(--slate);border-left:2px solid var(--line);padding-left:10px}
.juris{font-size:15px;color:var(--ink);margin:10px 0 12px!important}
.juris strong{color:var(--ink);font-weight:650}
.edge-note{font-size:13px;color:var(--slate);margin:10px 0 0!important}
.dm-result{scroll-margin-top:12px}
.rep{display:flex;gap:14px;align-items:flex-start;padding-top:12px;border-top:1px solid var(--line);margin-top:8px}
.rep-portrait{flex:none;border-radius:10px;object-fit:cover;background:var(--soft)}
.rep-body{min-width:0;flex:1}
.rep-seat{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);margin:0 0 2px!important}
#district-info .member{font-size:19px;color:var(--ink);font-weight:650;margin:0 0 4px}
.rep-desc{font-size:13px;color:var(--slate)}
.action{display:inline-block;padding:11px 14px;background:var(--navy);color:#fff;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;margin:8px 0 6px;min-height:44px;line-height:22px}
.action:hover{background:var(--ink)}
.secondary{display:block;font-size:13px;line-height:1.5;margin:4px 0 0}
.split-reps{display:flex;flex-direction:column;gap:4px;margin:4px 0 0}
.rep-compact .member{font-size:17px}
.rep-compact .action{padding:9px 12px;font-size:13.5px;min-height:40px;line-height:20px}
/* Exact-address lookup for split places (the existing lookup; a center point never decides a district). */
.nb-address{margin:14px 0 4px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:10px}
.nb-address label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:0 0 6px}
.nb-address-row{display:flex;gap:8px}
.nb-address input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:14px}
.nb-address input:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--sel-tint)}
.nb-address-go{min-height:44px;padding:0 16px;border:1px solid var(--navy);border-radius:8px;background:var(--navy);color:#fff;font-weight:600;cursor:pointer;margin:0}
.nb-address-go:disabled{opacity:.5;cursor:progress}
.nb-address-status{font-size:13px;color:var(--slate);margin:8px 0 0!important}
.nb-address-status:empty{display:none}
.nb-address-alt{display:inline-block;font-size:13px;margin-top:8px}
.nb-reset{display:inline-flex;align-items:center;min-height:44px;margin:12px 0 0;padding:0 16px;border:1px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
.nb-reset:hover{background:var(--soft)}
.nb-reset[hidden]{display:none}
.dm-by-number{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.dm-by-number label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:0 0 8px}
select{width:100%;padding:10px 12px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;min-height:44px}
.address-link{display:block;font-size:13px;line-height:1.5;margin:14px 0 0}
details{font-size:12px;line-height:1.6;margin-top:18px;color:var(--slate)}
details p{font-size:12px;color:var(--slate)}
summary{cursor:pointer;min-height:34px;color:var(--ink);font-weight:600}

@media (prefers-reduced-motion:reduce){.nb-locate,.nb-chip,.nb-pick input[type=search],#district-info{transition:none}}

/* Phones and narrow windows: one column in reading order: intro, selector, map, result right under it. */
@media (max-width:900px){
  .dm-main{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:14px 16px 40px}
  .dm-intro{margin-bottom:12px;display:block}
  main h1{font-size:26px;margin:0 0 6px}
  .nb-pick{padding:14px 14px 12px}
  .nb-search-row{flex-direction:column;align-items:stretch}
  .nb-locate{justify-content:center}
  .nb-chip{min-height:44px;font-size:14px}
  .map-wrap{position:relative;top:auto;height:62dvh;min-height:420px;max-height:640px;margin-top:14px}
  /* On a phone the two keys sit in a row under the map, so nothing covers the harbor or the attribution. */
  .map-legend{position:static;max-width:none;flex:none;flex-direction:row;flex-wrap:wrap;gap:4px 16px;padding:6px 10px 0;border:0;border-radius:0;background:#fff;font-size:11px}
  .leaflet-control-attribution{font-size:10px}
  .map-note{font-size:11px;padding:6px 10px}
  .leaflet-touch .dm-show-all{min-height:44px}
  .leaflet-touch .leaflet-bar a{width:44px;height:44px;line-height:44px}
  .dm-result{margin-top:12px}
  #district-info{padding:16px}
  .action{display:block;text-align:center}
}

/* Basemap. The vector "Positron" style is already quiet (light grays, no color competing with the navy lines and the
   selected place), so it is drawn as served. Only the raster fallback (OpenStreetMap's colorful standard tiles, used
   when the browser cannot draw vector maps; districts.js adds dm-raster) is desaturated. */
body.dm-raster .leaflet-tile-pane{filter:saturate(.35) contrast(.96)}
/* The vector canvas lives in Leaflet's tile pane; it must sit under the district overlay and never catch the pointer. */
.leaflet-gl-layer{pointer-events:none}
.leaflet-gl-layer .maplibregl-canvas{outline:0}