* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: #1d2430; }
body { display: flex; flex-direction: column; }

header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding: 12px 18px; border-bottom: 1px solid #dde2ea; background: #fff; flex-wrap: wrap; }
h1 { font-size: 18px; margin: 0; }
.tag { font-size: 11px; background: #e8eefc; color: #2f55c7; padding: 2px 6px; border-radius: 4px; vertical-align: middle; }
.sub { margin: 2px 0 0; color: #5b6576; font-size: 12.5px; }
nav button { border: 1px solid #ccd3df; background: #fff; padding: 6px 12px; border-radius: 6px; cursor: pointer; font: inherit; }
nav button.active { background: #1d2430; color: #fff; border-color: #1d2430; }

main { flex: 1; display: flex; min-height: 0; position: relative; }
#panel { width: 400px; flex: none; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid #dde2ea; background: #fafbfc; container-type: inline-size; }
#map { flex: 1; }

.tab { display: none; padding: 12px 14px; }
.tab.active { display: block; }
.controls { display: flex; gap: 14px; margin-bottom: 8px; color: #5b6576; }
.controls select { font: inherit; margin-left: 4px; }
.note { color: #5b6576; font-size: 13px; }

#list { list-style: none; margin: 0; padding: 0; }
#list li { border: 1px solid #e3e7ee; border-radius: 8px; background: #fff; margin-bottom: 7px; }
#list li:hover, #list li.selected { border-color: #2f55c7; box-shadow: 0 0 0 1px #2f55c7; }
#list li.empty { padding: 12px; color: #5b6576; }
#list .card { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 10px; font: inherit; color: inherit; cursor: pointer; border-radius: 8px; }
#list .card:focus-visible { outline: 2px solid #2f55c7; outline-offset: 1px; }

.sdotrow { display: block; margin: 5px 0 0 34px; font-size: 11.5px; color: #3d2f9e; }
.sdot-mark { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; background: #ece9fb; color: #3d2f9e; padding: 0 4px; border-radius: 3px; }
.row1 { display: flex; gap: 8px; align-items: baseline; }
.rank { font-weight: 700; color: #5b6576; min-width: 26px; }
.loc { font-weight: 600; flex: 1; }
.score { font-variant-numeric: tabular-nums; color: #3a4456; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.score small { font-weight: 400; color: #5b6576; font-size: 11px; }
.chips { margin: 5px 0 0 34px; display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 11.5px; padding: 1px 7px; border-radius: 10px; background: #eef1f6; color: #3a4456; }
.chip.fatal { background: #fde3e3; color: #a3181a; }
.chip.serious { background: #fdecdc; color: #a14b06; }
.chip.ped { background: #e7f0fd; color: #1f4fa8; }
.chip.cond { background: #eaf6ee; color: #1f6b3a; }
.chip.conf { background: #f4f1e6; color: #6b5a1f; border: 1px dashed #c9b98a; }
.chip.sdot { background: #ece9fb; color: #3d2f9e; }
.chip.still { background: #fff1c2; color: #6b4a00; }
.chip.state { background: #eef1f6; color: #3a4456; border: 1px solid #c9d0dc; }
table.kv td { text-align: left; padding: 3px 6px; }
table.kv td:first-child { color: #52514e; white-space: nowrap; width: 1%; }
.formula { font-size: 12.5px; margin: 6px 0 2px; padding: 6px 8px; background: #f6f8fb; border-radius: 6px; color: #1d2430; }
#about ol li { margin-bottom: 8px; }

#detail { position: absolute; right: 16px; top: 12px; width: 440px; max-height: calc(100% - 24px);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #dde2ea; border-radius: 10px; box-shadow: 0 6px 24px rgba(20,30,50,.15);
  z-index: 1100; }
#detail[hidden] { display: none; }
#detailBody { overflow-y: auto; padding: 4px 16px 14px; container-type: inline-size; }
.dtop { display: flex; align-items: flex-start; gap: 8px; padding: 10px 8px 8px 16px; border-bottom: 1px solid #e3e7ee; background: #fff; border-radius: 10px 10px 0 0; }
#detailBody { border-radius: 0 0 10px 10px; flex: 1; min-height: 0; }
#detail.split .dtop, #detail.split #detailBody { border-radius: 0; }
.dbtns { display: flex; gap: 2px; margin-left: auto; flex: none; }
#sheetDetail { display: none; }
.dbtns button { border: 0; background: none; font-size: 18px; line-height: 1; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; color: #5b6576; }
.dbtns button:hover { background: #eef1f6; color: #1d2430; }
#resizeHandle { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 3; }
#resizeHandle:hover, body.resizing #resizeHandle { background: rgba(47,85,199,.18); }
body.resizing { user-select: none; cursor: ew-resize; }

/* ---- top 10 markers: glow + pulsing ring ---- */
/* (no position override on .top-mark: Leaflet positions marker icons absolutely) */
.top-mark .core { position: absolute; left: 7px; top: 7px; width: 26px; height: 26px; border-radius: 50%;
  background: #b3141b; color: #fff; font: 700 12px/26px system-ui, sans-serif; text-align: center;
  box-shadow: 0 0 0 2px #fff, 0 0 14px 5px rgba(179, 20, 27, .55); }
.top-mark .pulse { position: absolute; left: 7px; top: 7px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(179, 20, 27, .5); animation: top-pulse 2.2s ease-out infinite; pointer-events: none; }
@keyframes top-pulse {
  0%   { transform: scale(1);   opacity: .75; }
  70%  { transform: scale(2.7); opacity: 0; }
  100% { transform: scale(2.7); opacity: 0; }
}
.top-mark:hover .core { box-shadow: 0 0 0 2px #fff, 0 0 18px 8px rgba(179, 20, 27, .7); }
.top-mark.faded .pulse { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .top-mark .pulse { animation: none; transform: scale(1.7); opacity: .3; }
}

/* top 10 in the list */
#list li.top10 { border-left: 4px solid #b3141b; padding-left: 7px; }
#list li.top10 .rank { color: #b3141b; }

/* map legend */
.map-legend { background: rgba(255,255,255,.94); border-radius: 8px; padding: 7px 10px; font-size: 12px; color: #1d2430;
  box-shadow: 0 1px 4px rgba(0,0,0,.2); display: flex; flex-direction: column; gap: 4px; }
.map-legend div { display: flex; align-items: center; gap: 7px; }
.map-legend i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0,0,0,.08); }
.map-legend .lg-top .core { display: block; width: 16px; height: 16px; border-radius: 50%; background: #b3141b; color: #fff;
  font: 700 9px/16px system-ui, sans-serif; text-align: center; box-shadow: 0 0 6px 2px rgba(179,20,27,.5); }


/* collapsible sections */
.dsec-h { user-select: none; }
.dsec-h::before { content: '▾'; display: inline-block; width: 14px; transition: transform .15s; }
.dsec.collapsed .dsec-h::before { transform: rotate(-90deg); }
.dsec.collapsed .dsec-b { display: none; }
.dsec-h:hover { color: #1d2430; }
.dsec-h:focus-visible { outline: 2px solid #2f55c7; outline-offset: 2px; border-radius: 3px; }

/* wide panel: two columns once there's room (works for expand and for drag-resize) */
@container (min-width: 760px) {
  .dcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0 28px; align-items: start; }
  .dhead .stat-grid { max-width: 620px; }
}
#detail h2 { font-size: 15px; margin: 4px 0 0; flex: 1; min-width: 0; }
#detail h2:focus { outline: none; }
#detail h2:focus-visible { outline: 2px solid #2f55c7; outline-offset: 2px; }
.drank { color: #b3141b; margin-right: 2px; }
.verdict { font-size: 14px; margin: 10px 0 4px; }
.verdict2 { margin: 0 0 4px; color: #3a4456; }
.dchips { margin: 10px 0 0; }
.callout { background: #fff8dd; border-left: 3px solid #c99a00; padding: 6px 9px; margin: 4px 0 8px; border-radius: 0 6px 6px 0; }
.dsec h3 { margin: 14px 0 4px; }
.dsec-h { all: unset; cursor: pointer; display: block; width: 100%; }
.dsec h3 .dsec-h { font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; }
#detail h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: #5b6576; margin: 14px 0 4px; }
#detail ul { margin: 4px 0; padding-left: 18px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.stat { background: #f4f6f9; border-radius: 6px; padding: 6px 8px; }
.stat b { display: block; font-size: 17px; }
.stat span { font-size: 11.5px; color: #5b6576; }

/* ---- drill-down ---- */
.stat-grid { grid-template-columns: repeat(4, 1fr); }
ul.tight { margin-top: 8px; font-size: 12.5px; color: #52514e; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #52514e; margin: 2px 0 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.legend i.sq { border-radius: 2px; }
.legend i.ring { background: rgba(27,175,122,.12); border: 2px dashed #1d2430; width: 12px; height: 12px; }

.cols { display: flex; align-items: flex-end; gap: 6px; padding: 0 2px; border-bottom: 1px solid #c3c2b7; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; cursor: default; }
.col:hover { background: #f4f6f9; }
.col .stack { width: 22px; display: flex; flex-direction: column; justify-content: flex-end; }
.col .cap { font-size: 11.5px; color: #0b0b0b; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.col .yr { position: absolute; bottom: -18px; font-size: 11px; color: #5b6576; }
.capsev { display: block; color: #1c5cab; font-weight: 700; text-align: center; }
.cols + .note, .cols { margin-bottom: 20px; }

.hbars { display: flex; flex-direction: column; gap: 5px; margin: 4px 0; }
.hbar { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: center; font-size: 12px; }
.hbar:hover { background: #f4f6f9; }
.hlabel { color: #52514e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htrack { display: flex; align-items: center; gap: 6px; }
.hfill { height: 12px; border-radius: 0 4px 4px 0; }
.htrack span { font-variant-numeric: tabular-nums; color: #0b0b0b; font-size: 11.5px; }

.fbar { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.fbtn { border: 1px solid #ccd3df; background: #fff; border-radius: 14px; padding: 2px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.fbtn.on { background: #1d2430; color: #fff; border-color: #1d2430; }
.fbtn small { opacity: .7; }
.fbar select { font: inherit; font-size: 12.5px; max-width: 100%; }
.dtable td { text-align: left; vertical-align: top; }
.dtable th { text-align: left; }
.nowrap { white-space: nowrap; }
.sev { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.sub2 { font-size: 11.5px; color: #52514e; }
.muted { color: #5b6576; }
.flag { font-size: 10.5px; background: #fdecdc; color: #8a3d05; padding: 0 5px; border-radius: 3px; }
.linkbtn { border: 0; background: none; color: #2f55c7; cursor: pointer; padding: 0; font: inherit; font-size: 12.5px; margin-bottom: 8px; }
.reqmark span { display: flex; align-items: center; justify-content: center; border-radius: 3px; box-shadow: 0 0 0 2px #fff;
  font-size: 10px; font-weight: 700; color: #0b0b0b; }
.tip { position: fixed; z-index: 2000; background: #0b0b0b; color: #f0efec; font-size: 12px; padding: 6px 8px;
  border-radius: 6px; pointer-events: none; max-width: 260px; }

table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 14px; }
th, td { padding: 4px 6px; border-bottom: 1px solid #e3e7ee; text-align: right; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; }
th { color: #5b6576; font-weight: 600; }
tr.total td { font-weight: 700; }
td.planned, th.planned { background: #f6f8ff; }
details summary { cursor: pointer; font-weight: 600; margin: 6px 0; }

@media (max-width: 760px) {
  main { flex-direction: column-reverse; }
  #panel { width: 100%; max-width: none; height: 50%; }
  #detail { left: 8px; right: 8px; width: auto !important; top: 70px; }
  #resizeHandle, #expandDetail, #expandPanel { display: none; }
}

/* ---- search ---- */
.searchbox { position: relative; margin-bottom: 10px; }
#search { width: 100%; font: inherit; padding: 7px 10px; border: 1px solid #ccd3df; border-radius: 8px; }
#search:focus-visible { outline: 2px solid #2f55c7; outline-offset: 1px; }
#searchResults { position: absolute; left: 0; right: 0; top: 100%; z-index: 1200; list-style: none; margin: 2px 0 0; padding: 4px;
  background: #fff; border: 1px solid #ccd3df; border-radius: 8px; box-shadow: 0 6px 18px rgba(20,30,50,.15); }
#searchResults li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
#searchResults li small { color: #5b6576; white-space: nowrap; }
#searchResults li:hover, #searchResults li.active { background: #eef3fd; }
#searchResults li.none { cursor: default; color: #5b6576; }
.hint { margin: -2px 0 10px; font-size: 12.5px; color: #3a4456; }
label.check { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.controls { flex-wrap: wrap; }
.provenance { font-size: 11.5px; margin-top: 12px; }
.sub-not { color: #3a4456; font-weight: 600; }

/* ---- validation and budget tables ---- */
.vtable td:not(:first-child), .vtable th:not(:first-child) { text-align: right; }
.example { background: #f6f8fb; border-radius: 8px; padding: 2px 12px 6px; margin: 10px 0; }
.steps { padding-left: 20px; }
.tablewrap { overflow-x: auto; }
/* the budget has no locations, so its tab takes the whole width and the map steps aside */

/* ---- map: highlight from the list, pause control ---- */
.top-mark.hl .core { box-shadow: 0 0 0 3px #1d2430, 0 0 18px 8px rgba(179, 20, 27, .7); }
body.paused .top-mark .pulse { animation: none; transform: scale(1.7); opacity: .3; }
.pausebtn { margin-top: 3px; font: inherit; font-size: 11.5px; border: 1px solid #ccd3df; background: #fff; border-radius: 5px; padding: 2px 6px; cursor: pointer; }

/* ---- phone: bottom sheet that never covers the header, peek or full height ---- */
@media (max-width: 760px) {
  header { padding: 8px 12px; }
  h1 { font-size: 16px; }
  .sub { font-size: 12px; }
  nav button { padding: 5px 9px; font-size: 13px; }
  /* exactly the list's half of the screen, so the details replace the list completely (no strip of it showing) */
  #detail { left: 0; right: 0; top: auto; bottom: 0; width: auto !important; height: 50%; max-height: none; border-radius: 12px 12px 0 0; }
  #detail.full { height: 92%; }
  #sheetDetail { display: inline-block; }
  .map-legend { margin-bottom: 22px !important; }
}
@container (max-width: 430px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* repeated deaths: always listed, below the ranked spots */
#list li.extra-head { border: 0; background: none; padding: 10px 2px 4px; font-size: 12.5px; color: #3a4456; }
#list li.extra { border-left: 4px solid #7a0c10; }

/* label on the request search circle */
.radius-label { white-space: nowrap; }
.radius-label span { display: inline-block; transform: translate(-50%, -100%); margin-top: -4px; background: #1d2430; color: #fff;
  font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }

/* ---- left panel: edge with widen button + drag handle ---- */
main { --panel-w: 400px; }
#panelEdge { position: absolute; top: 0; bottom: 0; left: calc(var(--panel-w) - 6px); width: 12px; z-index: 1150; pointer-events: none; }
#panelHandle { position: absolute; inset: 0; cursor: ew-resize; pointer-events: auto; }
#panelHandle:hover, body.resizing #panelHandle { background: rgba(47,85,199,.18); }
/* the same edge tab on both panels: solid blue, centered on the panel's inner edge */
.edgebtn { position: absolute; top: 50%; transform: translateY(-50%); width: 26px; height: 56px; padding: 0;
  border: 2px solid #fff; border-radius: 8px; background: #2f55c7; color: #fff; font: 700 20px/1 system-ui, sans-serif;
  cursor: pointer; box-shadow: 0 2px 8px rgba(20,30,50,.35); pointer-events: auto; z-index: 5; }
.edgebtn:hover { background: #1f3f9e; }
.edgebtn:focus-visible { outline: 3px solid #f0a020; outline-offset: 1px; }
#expandPanel { left: -7px; }
#expandDetail { left: -13px; }
/* both expanded: the two tabs share one edge, so stack them */
main.split #expandPanel { transform: translateY(calc(-50% - 34px)); }
main.split #expandDetail { transform: translateY(calc(-50% + 34px)); }

/* both expanded: the detail panel fills the rest of the screen, edge to edge with the list */
#detail.split { right: 0; top: 0; bottom: 0; max-height: none; border-radius: 0; border-width: 0 0 0 1px; box-shadow: none; }
#detail.split #resizeHandle { display: none; }

/* a wide list uses its room: cards in columns */
@container (min-width: 640px) {
  #list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 7px; align-items: start; }
  #list li { margin-bottom: 0; }
  #list li.extra-head, #list li.empty { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  #panelEdge { display: none; }
}
.map-legend .lg-line { display: inline-block; width: 14px; height: 0; border-top: 3px solid #3a4456; }

/* Neighborhood names on the map: 20 big areas when zoomed out, 94 neighborhoods when zoomed in. */
.hood-label { background: none; border: 0; pointer-events: none; }
.hood-label span {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  color: #3f4a5c; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff;
}
.hood-label.lvl1 span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hood-label.lvl2 span { font-size: 12px; font-style: italic; color: #4d586b; }
.hood-label.lvl2 { display: none; }
.zoomed-in .hood-label.lvl2 { display: block; }
.zoomed-in .hood-label.lvl1 { display: none; }
/* Where each spot is, under its name in the list, search results and details. */
.loc .hood, #searchResults .hood { display: block; white-space: normal; font-size: 12px; font-weight: 400; color: #5b6576; margin-top: 1px; }
.where { color: #3f4a5c; font-size: 14px; margin: 0 0 4px; }
.zoomed-out .hood-label.lvl1 span { font-size: 10.5px; letter-spacing: .03em; }
.hood-label.clash { visibility: hidden; }

/* the graphs area in the detail panel */
.graphs { border-top: 1px solid #e4e2db; padding: 12px 16px 4px; scroll-margin-top: 8px; }
.graphs .gh { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #3f4a5c; margin: 4px 0 6px; }
.graphs .gcol + .gcol { margin-top: 18px; }
.tc-wrap { overflow-x: auto; }
.tchart { display: block; }
.tchart .tc-ax { font-size: 11px; fill: #5b6576; }
.tchart .tc-t { font-size: 12px; font-weight: 600; fill: #3f4a5c; }
.tchart .tc-fix { font-size: 12px; font-weight: 700; fill: #1d2430; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.tchart .tc-hit { fill: transparent; }
.tchart .tc-hit:hover { fill: rgba(47,85,199,.07); }
.legend i.dash { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed #1d2430; vertical-align: 3px; }
.tc-ba { font-size: 13px; background: #f6f5f1; border-radius: 8px; padding: 8px 10px; margin: 8px 0; }


/* ================= Look & feel ================= */
:root { --navy: #101b33; --navy2: #1d3461; --amber: #f2b632; --ink: #1d2430; --muted: #5b6576; --bg: #f2f4f8; --card: #fff;
  --lift: 0 1px 2px rgba(16,27,51,.06), 0 2px 10px rgba(16,27,51,.05); --lift2: 0 4px 10px rgba(16,27,51,.08), 0 10px 28px rgba(16,27,51,.10); }
html, body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); }

/* header: deep navy with an amber road-line underneath */
header { background: linear-gradient(120deg, var(--navy) 0%, var(--navy2) 100%); border-bottom: 0; position: relative; padding: 14px 20px 16px; }
header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--amber) 0 28px, transparent 28px 44px); opacity: .9; }
h1 { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.tag { background: var(--amber); color: var(--navy); font-weight: 700; }
.sub { color: #b9c5dc; }
.sub-not { color: #ffd479; font-weight: 600; }
nav { display: flex; gap: 4px; background: rgba(255,255,255,.08); padding: 4px; border-radius: 10px; }
nav button { border: 0; background: none; color: #d6deee; border-radius: 7px; font-weight: 600; transition: background .15s, color .15s; }
nav button:hover { background: rgba(255,255,255,.1); color: #fff; }
nav button.active { background: #fff; color: var(--navy); border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.25); }

/* list panel */
#panel { background: var(--bg); border-right: 1px solid #e1e5ec; }
.searchbox input { border-radius: 10px !important; border: 1px solid #d6dce6 !important; box-shadow: var(--lift); transition: box-shadow .15s, border-color .15s; }
.searchbox input:focus { border-color: #2f55c7 !important; box-shadow: 0 0 0 3px rgba(47,85,199,.18); outline: none; }

/* citywide summary */
.city-summary { background: linear-gradient(135deg, var(--navy) 0%, #24407a 100%); color: #fff; border-radius: 14px; padding: 12px 14px 11px;
  margin-bottom: 12px; box-shadow: var(--lift2); position: relative; overflow: hidden; }
.city-summary::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,182,50,.28), transparent 70%); pointer-events: none; }
.cs-head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #aebcd8; font-weight: 600; }
.cs-nums { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; margin: 6px 0 6px; }
.cs-nums b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cs-nums div:first-child b { color: #ff8a80; }
.cs-nums div:nth-child(3) b { color: var(--amber); }
.cs-nums span { font-size: 11.5px; color: #c9d3e6; line-height: 1.3; display: block; margin-top: 2px; }
.cs-foot { font-size: 12px; color: #dfe6f3; border-top: 1px solid rgba(255,255,255,.12); padding-top: 7px; }

/* cards */
#list li { border: 0; border-radius: 12px; box-shadow: var(--lift); margin-bottom: 9px; transition: transform .15s ease, box-shadow .15s ease;
  animation: cardIn .35s ease both; animation-delay: calc(var(--i, 0) * 30ms); }
#list li:hover { transform: translateY(-2px); box-shadow: var(--lift2); border-color: transparent; }
#list li.selected { box-shadow: 0 0 0 2px #2f55c7, var(--lift2); }
#list li.top10 { border-left: 0; padding-left: 0; background: linear-gradient(90deg, #fff4f3 0%, #fff 40%); }
#list .card { padding: 11px 12px; border-radius: 12px; }
@keyframes cardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rank { min-width: 0; display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 7px; border-radius: 12px;
  font-size: 12px; font-weight: 800; background: #e7eaf0; color: #3a4456; flex: none; font-variant-numeric: tabular-nums; }
#list li.t0 .rank { background: #b3141b; color: #fff; box-shadow: 0 0 0 3px rgba(179,20,27,.15); }
#list li.t1 .rank { background: #e0561f; color: #fff; }
#list li.t2 .rank { background: #f0a020; color: #3b2600; }
.row1 { align-items: center; }
.chips, .sdotrow { margin-left: 0; }
.chip { border-radius: 999px; font-weight: 500; }

/* detail panel */
#detail { border: 0; border-radius: 14px; box-shadow: 0 12px 40px rgba(16,27,51,.22), 0 2px 6px rgba(16,27,51,.08); animation: detailIn .25s ease both; }
@keyframes detailIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.dtop { border-radius: 14px 14px 0 0; background: linear-gradient(180deg, #f7f9fc, #fff); }
#detailBody { border-radius: 0 0 14px 14px; }
.drank { display: inline-flex; align-items: center; justify-content: center; background: #b3141b; color: #fff; border-radius: 10px;
  padding: 0 7px; height: 22px; font-size: 13px; margin-right: 6px; vertical-align: 1px; }
.stat { border-radius: 10px; padding: 9px 10px; background: #f3f5f9; transition: transform .15s; }
.stat b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.stat:nth-child(2) { background: #fff0ef; } .stat:nth-child(2) b { color: #b3141b; }
.stat:nth-child(3) { background: #eef4fe; } .stat:nth-child(3) b { color: #1f4fa8; }
.stat:nth-child(4) { background: #ebf8f2; } .stat:nth-child(4) b { color: #147a55; }
.callout { border-radius: 0 10px 10px 0; }

/* map chrome */
.map-legend { background: rgba(255,255,255,.88); backdrop-filter: blur(6px); border-radius: 12px; box-shadow: var(--lift2); padding: 9px 12px; }
.leaflet-bar { border: 0 !important; box-shadow: var(--lift2) !important; border-radius: 10px !important; overflow: hidden; }
.leaflet-control-layers { border: 0 !important; border-radius: 10px !important; box-shadow: var(--lift2) !important; }

@media (prefers-reduced-motion: reduce) {
  #list li, #detail { animation: none; }
  #list li:hover { transform: none; }
}
@media (max-width: 760px) {
  .cs-nums b { font-size: 20px; }
  header { padding: 10px 14px 13px; }
}
.controls select, #reqType { appearance: none; -webkit-appearance: none; border: 1px solid #d6dce6; border-radius: 8px; background: #fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b6576' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 9px center;
  padding: 4px 26px 4px 9px; color: var(--ink); font-weight: 500; cursor: pointer; box-shadow: var(--lift); }
.controls select:focus-visible, #reqType:focus-visible { outline: 0; border-color: #2f55c7; box-shadow: 0 0 0 3px rgba(47,85,199,.18); }
.check input { accent-color: #2f55c7; }
.cs-nums { grid-template-columns: 1fr 1fr; }
.cs-nums b { font-size: 28px; }
.cs-foot { font-size: 12.5px; line-height: 1.45; }
.cs-hi { color: var(--amber); }
.stale { background: #fff4d6; border: 1px solid #f2c94c; color: #5c4300; border-radius: 10px; padding: 8px 11px; margin: 0 0 10px; font-size: 12.5px; }

/* ---- Traffic view ---- */
body.traffic-view .lg-safety, body.traffic-view .pausebtn { display: none; }
body:not(.traffic-view) .lg-traffic { display: none; }
.lg-tline { display: inline-block; width: 22px; border-radius: 3px; flex: none; }
.tlist { list-style: none; margin: 0; padding: 0; }
.tlist li { border-radius: 12px; background: #fff; box-shadow: var(--lift); margin-bottom: 9px; transition: transform .15s ease, box-shadow .15s ease;
  animation: cardIn .35s ease both; animation-delay: calc(var(--i, 0) * 30ms); }
.tlist li:hover { transform: translateY(-2px); box-shadow: var(--lift2); }
.tlist li.selected { box-shadow: 0 0 0 2px #2f55c7, var(--lift2); }
.tlist li.top10 { background: linear-gradient(90deg, #fff4f3 0%, #fff 40%); }
.tlist .card { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 11px 12px; font: inherit; color: inherit; cursor: pointer; border-radius: 12px; }
.tlist .card:focus-visible { outline: 2px solid #2f55c7; outline-offset: 1px; }
.tlist li.t0 .rank { background: #b3141b; color: #fff; box-shadow: 0 0 0 3px rgba(179,20,27,.15); }
.tlist li.t1 .rank { background: #e0561f; color: #fff; }
.tlist li.t2 .rank { background: #f0a020; color: #3b2600; }
.tlist .hood { display: block; font-size: 12px; font-weight: 400; color: #5b6576; margin-top: 1px; }
@media (prefers-reduced-motion: reduce) { .tlist li { animation: none; } .tlist li:hover { transform: none; } }
.th-street { margin: 8px 0 2px; font-size: 13px; } .th-street svg { margin-top: 4px; }

/* ---- Reporting problems: always one click away ---- */
.report-head { margin-left: auto; align-self: center; background: #1baf7a; color: #fff; text-decoration: none; font-weight: 700; font-size: 13.5px;
  padding: 8px 14px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.25); white-space: nowrap; transition: background .15s, transform .15s; }
.report-head:hover { background: #148f63; transform: translateY(-1px); }
.report-head:focus-visible, .report-btn:focus-visible { outline: 3px solid #f2b632; outline-offset: 2px; }
header nav { margin-left: 0; }
.report { margin: 12px 0 4px; padding: 10px 12px; border-radius: 12px; background: #e9f8f1; border: 1px solid #b7e6d1; font-size: 13px; color: #1f3d33; }
.report-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.report-btn { display: inline-block; background: #1baf7a; color: #fff; text-decoration: none; font-weight: 700; padding: 7px 14px; border-radius: 9px;
  box-shadow: 0 1px 4px rgba(20,90,60,.3); transition: background .15s; }
.report-btn:hover { background: #148f63; }
@media (max-width: 760px) { .report-head { order: 3; width: 100%; text-align: center; } }

/* ---- address pin ---- */
.addr-pin { background: none; border: 0; }
.addr-pin span { position: absolute; left: 3px; top: 0; width: 24px; height: 24px; background: #101b33; border: 3px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.addr-pin span::after { content: ''; position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #f2b632; }
.pin-pop { font: 13px/1.45 Inter, system-ui, sans-serif; }
.pin-title { font-weight: 700; font-size: 14px; }
.pin-head { margin-bottom: 6px; }
.pin-addr { color: #5b6b66; font-size: 12px; margin: 1px 0 0 22px; }
.pin-rename-form label { display: block; font-weight: 700; margin-bottom: 4px; }
.pin-rename-form input { width: 100%; box-sizing: border-box; font: inherit; padding: 6px 8px; border: 1px solid #9fb0aa; border-radius: 6px; }
.pin-rename-form input:focus { outline: 2px solid #0f7a54; outline-offset: 1px; }
.pin-rename-btns { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.pin-save { font: inherit; font-weight: 700; color: #fff; background: #0f7a54; border: 0; border-radius: 6px; padding: 5px 14px; cursor: pointer; }
.pin-near ul { margin: 4px 0 8px; padding-left: 16px; }
.pin-actions { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.pin-pop .report-btn { color: #fff; }
#searchResults li.addr-opt { color: #101b33; }
#searchResults li.addr-opt b { font-weight: 700; }

/* ---- where to report ---- */
.res-list { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 5px; }
.res-list li { display: flex; flex-direction: column; background: #fff; border: 1px solid #cfeadd; border-radius: 9px; padding: 6px 10px; }
.res-list a { font-weight: 700; color: #0f7a54; text-decoration: none; }
.res-list a:hover { text-decoration: underline; }
.res-list span { font-size: 12px; color: #5b6b66; }
.res-more { font-size: 12.5px; margin: 8px 0 0; line-height: 1.5; }
.res-tip { font-size: 12px; color: #5b6b66; margin: 6px 0 0; }
#resources { border: 0; border-radius: 16px; padding: 18px 20px; max-width: 460px; width: calc(100% - 32px); max-height: 85vh;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); font: 14px/1.45 Inter, system-ui, sans-serif; color: #17202e; }
#resources::backdrop { background: rgba(16,27,51,.55); }
#resources .res-top { display: flex; justify-content: space-between; align-items: center; }
#resources h2 { margin: 0; font-size: 18px; }
#resources p { margin: 6px 0; }
#resClose { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #5b6b66; }
.pin-res summary { cursor: pointer; font-weight: 700; color: #0f7a54; margin: 6px 0; }
.pin-res .res-list li { padding: 4px 8px; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 3000;
  background: #101b33; color: #fff; padding: 10px 16px; border-radius: 10px; font: 600 13.5px/1.4 Inter, system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- collapsible map key ---- */
.lg-toggle { display: flex !important; width: 100%; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: none;
  font: 700 12px/1.2 Inter, system-ui, sans-serif; color: #1d2430; padding: 2px 0 4px; cursor: pointer; }
.lg-toggle::after { content: '▾'; font-size: 11px; transition: transform .15s; }
.map-legend.collapsed .lg-toggle { padding: 2px 0; }
.map-legend.collapsed .lg-toggle::after { transform: rotate(-90deg); }
.map-legend .lg-body { display: block; }
.map-legend.collapsed .lg-body { display: none; }
.lg-toggle:focus-visible { outline: 2px solid #f2b632; outline-offset: 2px; }

/* ---- tester round 2: phone + accessibility ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 5000; background: #f2b632; color: #101b33; font-weight: 700; padding: 8px 14px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 8px; }
.pin-privacy { display: block; color: #5b6b66; font-size: 11.5px; margin-top: 2px; }
.pin-near p { margin: 0 0 6px; }
.res-fold summary { cursor: pointer; font-weight: 700; color: #0f7a54; margin: 6px 0 2px; font-size: 13px; }
.hlabel { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.tab-short { display: none; }
@media (max-width: 760px) {
  header .sub { display: none; }
  .tab-long { display: none; }
  .tab-short { display: inline; }
  nav[role=tablist] button { white-space: nowrap; }
  .dbtns button { min-width: 44px; height: 44px; font-size: 14px; font-weight: 700; }
  #closeDetail { font-size: 24px; }
  .lg-toggle { min-height: 32px; }
}
.pin-near ul { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 4px; }
.pin-near li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pin-near li .linkbtn { text-align: left; display: inline; width: auto; padding: 0; }
.pin-near li .muted { white-space: nowrap; flex: none; }

.city-summary .cs-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.14); font-size: 11.5px; color: #b9c5dc; line-height: 1.45; }

.chip.fixable { background: #e8f1ff; color: #1d3f8f; border: 1px dashed #8fb0e8; }
.not-live { margin: 0 0 10px; padding: 7px 10px; background: #eef4f2; border-left: 3px solid #0f7a54; border-radius: 4px; font-size: 12.5px; color: #33443f; }
/* the bus tab's full name only where the header has room for it on one row */
@media (max-width: 1500px) { .tab-wide { display: none; } .tab-mid { display: inline; } }
/* the title block gives way first (subtitle wraps) so the tabs stay on one row */
header > div:first-child { flex: 1 1 300px; min-width: 0; }
header nav { flex: none; }
@media (max-width: 760px) { header nav { flex: 1 1 100%; } }
/* ---- SDOT's published project maps ---- */
.chip.proj { background: #efeafd; color: #4a2fb8; border: 1px dashed #8d76e6; }
.proj-h { margin: 12px 0 4px; font-size: 13px; }
.proj-list { margin: 4px 0 6px; padding-left: 18px; }
.proj-list li { margin-bottom: 4px; }
.proj-callout { background: #f3f0fe; border-left: 3px solid #5b3fd1; padding: 6px 10px; border-radius: 4px; font-size: 13px; }
.proj-pop { font: 13px/1.45 Inter, system-ui, sans-serif; }
.proj-src { font-size: 11.5px; margin-top: 6px; }
.map-legend .lg-proj { display: none; }
body.proj-on .map-legend .lg-proj { display: flex; }
.lg-pline { display: inline-block; width: 22px; height: 0; border-top: 3px dashed #5b3fd1; vertical-align: middle; margin-right: 6px; }
.lg-pline.done { border-top-style: solid; opacity: .5; }
.lg-ppt { display: inline-block; width: 9px; height: 9px; border: 2px solid #5b3fd1; border-radius: 50%; background: #fff; vertical-align: middle; margin: 0 9px 0 4px; }
/* ---- "My pins" list (map control, shown once there's a pin) ---- */
.pinlist[hidden] { display: none; }
.pinlist { background: #fff; }
.pinlist-btn { font: 600 12.5px/1 Inter, system-ui, sans-serif; color: #1d2430; background: #fff; border: 0; border-radius: 4px;
  padding: 8px 9px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.pinlist-btn:hover { background: #f4f4f4; }
.pinlist-btn small { background: #101b33; color: #fff; border-radius: 9px; padding: 2px 6px; font-size: 11px; }
.pinlist-panel { width: 260px; max-height: 300px; overflow-y: auto; border-top: 1px solid #ccc; padding: 6px 8px 8px; font: 13px/1.4 Inter, system-ui, sans-serif; }
.pinlist-panel ul { list-style: none; margin: 0; padding: 0; }
.pinlist-panel li { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid #eef0f4; }
.pinlist-go { flex: 1; min-width: 0; text-align: left; color: #1d2430 !important; text-decoration: none !important; }
.pinlist-go b, .pinlist-go small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinlist-go small { color: #5b6576; font-weight: 400; font-size: 11.5px; }
.pinlist-go:hover b { text-decoration: underline; }
.pinlist-acts { display: flex; gap: 8px; flex: none; font-size: 12px; }
.pinlist-x { color: #8a1c1c !important; }
.pinlist-note { margin: 6px 0 0; color: #5b6576; font-size: 11.5px; }
.pinlist-panel .linkbtn { margin: 0; }

/* ---- Detail sections: each in its own tinted box with a colored edge and heading, so they're easy to scan ---- */
.dsec { --c: #5b6576; --bg: #f6f7f9; background: var(--bg); border: 1px solid color-mix(in srgb, var(--c) 18%, transparent);
  border-left: 4px solid var(--c); border-radius: 12px; padding: 4px 14px 10px; margin: 14px 0; }
.dsec.collapsed { padding-bottom: 4px; }
#detail .dsec > h3 { margin: 6px 0 6px; font-size: 14.5px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--c); }
.dsec > h3 .dsec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.dsec > h3 .dsec-h::before { content: none; }
.dsec > h3 .dsec-h::after { content: '▾'; font-size: 13px; color: var(--c); opacity: .8; transition: transform .15s; }
.dsec.collapsed > h3 .dsec-h::after { transform: rotate(-90deg); }
.dsec > h3 .dsec-h:hover { color: var(--c); filter: brightness(.8); }
.dsec .dsec-b { color: #1d2430; }
.dsec .dsec-b > :first-child { margin-top: 0; }
.dsec .dsec-b table, .dsec .kv, .dsec .dtable { background: #fff; border-radius: 8px; }
.dsec-done     { --c: #5b3fd1; --bg: #f6f3ff; }   /* what SDOT has done: purple, like the SDOT project lines */
.dsec-street   { --c: #2f55c7; --bg: #f2f6fe; }
.dsec-traffic  { --c: #0e7c86; --bg: #eef8f9; }
.dsec-walk     { --c: #2e7d32; --bg: #f1f8f1; }
.dsec-types    { --c: #b3141b; --bg: #fdf3f3; }
.dsec-crashes  { --c: #b3141b; --bg: #fdf3f3; }
.dsec-reqtypes { --c: #a35f00; --bg: #fdf6ea; }
.dsec-reqs     { --c: #a35f00; --bg: #fdf6ea; }
.dsec-math     { --c: #5b6576; --bg: #f4f5f7; }
/* the two charts get the same box treatment */
.graphs { border-top: 0; padding: 0; }
.graphs .gcol { --c: #1f4fa8; background: #f3f7fd; border: 1px solid color-mix(in srgb, var(--c) 18%, transparent);
  border-left: 4px solid var(--c); border-radius: 12px; padding: 8px 14px 10px; margin: 14px 0; }
.graphs .gcol + .gcol { margin-top: 14px; }
#detail .graphs .gh { font-size: 14.5px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--c); margin: 4px 0 6px; }
/* a searched address that isn't saved yet: same pin shape, hollow and dashed */
.addr-pin.preview span { background: #fff; border-style: dashed; border-color: #101b33; }
.addr-pin.preview span::after { background: #101b33; }
.pin-actions .pin-add { border: 0; font: inherit; font-weight: 700; cursor: pointer; padding: 6px 12px; }
.pin-actions { flex-wrap: wrap; }
/* right-click menu */
.ctx-pop .leaflet-popup-content { margin: 6px; }
.ctx-pop .leaflet-popup-content-wrapper { border-radius: 10px; padding: 0; }
.ctx-add { border: 0; background: #fff; font: 600 13.5px Inter, system-ui, sans-serif; color: #101b33; padding: 8px 12px;
  border-radius: 7px; cursor: pointer; white-space: nowrap; }
.ctx-add:hover, .ctx-add:focus-visible { background: #eef2fb; outline: 2px solid #2f55c7; outline-offset: 0; }
.ctx-add:disabled { color: #5b6576; cursor: progress; }

/* ---- budget: a sheet that slides up over the map (desktop keeps the list and the details panel beside it) ---- */
.sheet { position: absolute; top: 0; bottom: 0; left: var(--panel-w, 400px); right: 0; z-index: 1050;
  display: flex; flex-direction: column; background: #f6f7fa; border-radius: 14px 14px 0 0;
  box-shadow: 0 -10px 30px rgba(20,30,50,.18); padding-right: calc(var(--detail-w, 0px) + 32px);
  transform: translateY(100%); transition: transform .34s cubic-bezier(.2,.8,.2,1); }
.sheet[hidden] { display: none; }
.sheet.open { transform: none; }
main.split .sheet { z-index: 1200; padding-right: 0; }
.bs-top { display: flex; align-items: center; gap: 12px; padding: 14px 24px 12px; border-bottom: 1px solid #e1e5ec; }
.bs-top h2 { margin: 0; font-size: 18px; outline: none; }
.bs-close { margin-left: auto; border: 1px solid #c9d3ee; background: #fff; color: #24408f; border-radius: 999px;
  padding: 6px 14px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.bs-close:hover { background: #eef2fc; }
.bs-close:focus-visible { outline: 2px solid #2f55c7; outline-offset: 2px; }
.bs-body { flex: 1; overflow-y: auto; padding: 16px 24px 32px; container-type: inline-size; }
#budget, #about { max-width: 1100px; margin: 0 auto; }
#about { max-width: 820px; }
@media (max-width: 760px) {
  .sheet { left: 0; padding-right: 0; z-index: 1300; border-radius: 0; }
  .bs-top { padding: 10px 14px; }
  .bs-body { padding: 12px 14px 24px; }
}
@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } }

/* ---- Zoom out: top right of the map, left of the details panel on desktop ---- */
.leaflet-control.zoomout-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  margin-right: calc(var(--detail-w, 0px) + 28px); background: #fff; color: #1d2430; border: 0; border-radius: 999px;
  padding: 8px 14px 8px 12px; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 10px rgba(20,30,50,.25); }
.leaflet-control.zoomout-btn:hover { background: #eef2fc; color: #24408f; }
.leaflet-control.zoomout-btn:focus-visible { outline: 2px solid #2f55c7; outline-offset: 2px; }
@media (max-width: 760px) { .leaflet-control.zoomout-btn { margin-right: 10px; margin-top: 10px; } }

/* ---- desktop: the details panel stays open (no close button); the overview shows when nothing is picked ---- */
@media (min-width: 761px) { #closeDetail { display: none; } }
.home-wrap { padding: 4px 0 8px; }
.home-lead { margin: 0 0 12px; padding: 10px 12px; background: #f3f6fd; border: 1px solid #dbe3f5; border-radius: 10px; color: #24304a; }
.hsec { --c: #7a8597; border: 1px solid #e3e7ee; border-left: 4px solid var(--c); border-radius: 10px; background: #fff;
  padding: 10px 12px 12px; margin-bottom: 12px; }
.hsec h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #5b6576; }
.hsec-top { --c: #b3141b; } .hsec-common { --c: #2f55c7; } .hsec-where { --c: #3a4f86; }
.hsec-pins { --c: #d0457a; } .hsec-tips { --c: #1baf7a; }
.home-top, .home-pins, .home-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.home-card, .home-pin { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit;
  background: #fafbfc; border: 1px solid #e3e7ee; border-radius: 10px; padding: 8px 10px; cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s; }
.home-card:hover, .home-pin:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20,30,50,.1); }
.home-card:focus-visible, .home-pin:focus-visible { outline: 2px solid #2f55c7; outline-offset: 1px; }
.hc-rank { flex: none; min-width: 36px; height: 26px; padding: 0 6px; border-radius: 13px; color: #fff; font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; }
.hc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hc-name { font-weight: 600; line-height: 1.3; }
.hc-sub, .hp-sub { font-size: 12px; color: #5b6576; }
.hc-val { flex: none; max-width: 120px; text-align: right; font-size: 11.5px; line-height: 1.25; color: #5b6576; }
.hc-val b { display: block; font-size: 18px; color: #1d2430; }
.home-pin { justify-content: space-between; }
.hp-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-sub { flex: none; }
.home-stats { grid-template-columns: repeat(3, 1fr) !important; margin-top: 0; }
.home-stats .stat b { font-size: 16px; }
.hbars { display: grid; gap: 6px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 150px) 1fr 24px; align-items: center; gap: 8px; font-size: 12.5px; }
.hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-t { height: 12px; background: #eef1f6; border-radius: 6px; overflow: hidden; }
.hb-t i { display: block; height: 100%; background: #3a4f86; border-radius: 0 4px 4px 0; }
.hb-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-tips li { font-size: 13px; line-height: 1.45; }
.home-tips .linkbtn { margin: 0; font-size: inherit; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .home-card, .home-pin { transition: none; } .home-card:hover, .home-pin:hover { transform: none; } }
body.sheet-open #expandPanel, body.sheet-open #expandDetail, body.sheet-open #panelHandle, body.sheet-open #resizeHandle { display: none; }
/* desktop: the details panel always runs the full height, whatever its width or content */
@media (min-width: 761px) { #detail:not(.split) { height: calc(100% - 24px); } }
/* crash list filters: on/off tags in one row */
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 12px; padding: 8px 10px 10px;
  border: 1px solid #d6dce6; border-radius: 10px; background: #fff; }
.tags .tag { background: #f4f6f9; border-color: #e1e5ec; }
.tags .tag:hover { background: #eef2fc; border-color: #9fb1e3; }
.tags .tag:has(input:checked) { background: #1d2430; border-color: #1d2430; color: #fff; }
.tags-l { flex-basis: 100%; color: #5b6576; font-size: 12.5px; margin-bottom: -1px; }
.tag { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1px solid #d6dce6; border-radius: 999px;
  background: #fff; color: #33405a; font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; user-select: none; transition: background .12s, border-color .12s, color .12s; }
.tag input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tag:hover { border-color: #9fb1e3; background: #f5f7fd; }
.tag:has(input:checked) { background: #1d2430; border-color: #1d2430; color: #fff; }
.tag:has(input:checked)::before { content: "\2713"; font-weight: 700; }
.tag:has(input:focus-visible) { outline: 2px solid #2f55c7; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tag { transition: none; } }

/* phones: the tab row scrolls on its own instead of widening the page */
@media (max-width: 760px) {
  header nav { flex: 1 1 100%; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  header nav::-webkit-scrollbar { display: none; }
}
/* overview pins: long text wraps instead of widening the panel */
.home-pin { flex-wrap: wrap; }
.hp-name { flex: 1 1 160px; }
.hp-sub { flex: 0 1 auto; white-space: normal; }
/* address search: the privacy note wraps */
#searchResults li.addr-opt span { min-width: 0; white-space: normal; }
#searchResults .pin-privacy { white-space: normal; overflow-wrap: anywhere; }

/* desktop pin pop-up is short; the summary lives in the right panel */
/* a pin in the right panel: its buttons sit under the title */
.place-head:empty { display: none; }
.place-head { margin: 0 0 6px; }
.place-acts .pin-actions { margin: 0 0 10px; }
.place-acts .report-btn { color: #fff; }

/* who to contact (council member), equity index note, print button */
.civic { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid #d9dce6; border-radius: 10px; background: #f7f8fb; font-size: 13.5px; line-height: 1.5; }
.civic .note { margin-top: 6px; }
.civic .print-btn { margin-top: 6px; }
.ba-list li { margin-bottom: 6px; }
.cols.tod .col .yr { font-size: 10.5px; }

/* Print or save a spot's summary: just the details panel, every section open */
@media print {
  html, body, main { height: auto !important; overflow: visible !important; position: static !important; display: block !important; }
  body * { visibility: hidden !important; }
  #detail, #detail * { visibility: visible !important; }
  main > *:not(#detail) { display: none !important; }
  body > *:not(main) { display: none !important; }
  #detail { position: static !important; width: 100% !important; height: auto !important;
            max-height: none !important; overflow: visible !important; box-shadow: none !important; border: 0 !important; transform: none !important; }
  #detailBody { overflow: visible !important; height: auto !important; max-height: none !important; }
  .dsec.collapsed .dsec-b { display: block !important; }
  .print-btn, #closeDetail, #expandDetail, .res-fold, .fbar, [data-more] { display: none !important; }
  .civic a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; word-break: break-all; }
}

/* ---------- since last month (list), rank over the years (details), "Is it getting fixed?" sheet ---------- */
.score .mv { display: block; text-align: right; margin-top: 2px; }
.mv { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv.up { color: #b3141b; }
.mv.down { color: #2d6a3e; }
.mv.new { color: #3a4456; background: #eef0f4; border-radius: 4px; padding: 0 4px; font-weight: 600; display: inline-block; }
.rh-legend { margin: 0 0 6px; }
.rh-legend i { border-radius: 3px; }
.rh-t0 { background: #b3141b; } .rh-t1 { background: #e0561f; } .rh-t2 { background: #f0a020; } .rh-t3 { background: #d9dde5; }
.rank-hist { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 3px; padding: 0; margin: 2px 0 8px; }
.rank-hist li { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 4px 1px 3px; border-radius: 6px;
  background: #d9dde5; color: #1d2430; font-variant-numeric: tabular-nums; }
.rank-hist li b { font-size: 12px; white-space: nowrap; }
.rank-hist li span[aria-hidden] { font-size: 10px; white-space: nowrap; }
.rank-hist li.t0 { background: #b3141b; color: #fff; }
.rank-hist li.t1 { background: #e0561f; color: #fff; }
.rank-hist li.t2 { background: #f0a020; color: #2a1b00; }
.rank-hist li.low { background: #eef0f4; color: #3a4456; }
.rank-hist li.none { background: #f6f7f9; color: #4f5a6b; }
.rank-hist li:last-child { outline: 2px solid #1d2430; outline-offset: 1px; }
@container (max-width: 420px) { .rank-hist li b { font-size: 10.5px; } .rank-hist li span[aria-hidden] { font-size: 9px; } }
#progress { max-width: 1100px; margin: 0 auto; }
.pg-sec { border-top: 1px solid #e3e7ee; padding-top: 14px; margin-top: 18px; }
.pg-sec h3 { font-size: 18px; margin: 0 0 6px; }
.pg-sec h4 { font-size: 14px; margin: 14px 0 4px; }
.pg-sec .lead { margin: 4px 0 10px; }
.pg-short { font-weight: 600; margin: 4px 0 10px; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 18px; }
.pg-group h4 { margin-top: 8px; }
.pg-list { list-style: none; padding: 0; margin: 0 0 6px; }
.pg-list li { padding: 4px 0; border-bottom: 1px solid #f0f2f5; font-size: 13px; }
.pg-l1 { display: block; }
.pg-l2 { display: block; font-size: 12px; color: #5b6576; margin-top: 1px; }
.pg-list li.pg-more, tr.pg-more td { border-bottom: 0; padding-top: 6px; text-align: left; }
.pg-rk { display: inline-block; min-width: 38px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-pick { display: block; font-weight: 600; margin: 6px 0; }
.pg-pick select { margin-left: 4px; font: inherit; }
.pg-stats { grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; }
@container (max-width: 560px) { .pg-stats { grid-template-columns: 1fr 1fr; } }
.pg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 6px; font-size: 13px; }
.pg-table th { vertical-align: bottom; }
.pg-table td, .pg-table th[scope=row] { vertical-align: top; }
.pg-table th[scope=row] { text-align: left; font-weight: 400; color: inherit; }
.pg-table tr.ref th, .pg-table tr.ref td { color: #3f4a5c; font-style: italic; }
.pg-table tr.total th { font-weight: 700; }
.pg-places td:nth-child(5), .pg-places th:nth-child(5) { text-align: left; }
.pg-state { color: #6b4e00; }
.pg-need tr.on { background: #f3f7fd; }
.pg-open { background: #f3f7fd; border-radius: 8px; padding: 6px 12px; margin: 4px 0 10px; }
.pg-open h4 { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.pg-open h4 .pg-link { font-weight: 400; }
.pg-dim { display: flex; gap: 6px; margin: 6px 0 8px; flex-wrap: wrap; }
.seg-btn { font: inherit; font-size: 13px; padding: 5px 10px; border: 1px solid #c9cfd9; border-radius: 999px; background: #fff; cursor: pointer; }
.seg-btn.on { background: #1d2430; color: #fff; border-color: #1d2430; }
.nowrap { white-space: nowrap; }
.tablewrap:focus-visible { outline: 2px solid #2f55c7; outline-offset: 2px; }
/* a sheet too narrow between the list and the details covers the details panel */
main.sheet-over .sheet { z-index: 1200; padding-right: 0; }
#detailTitle:focus:not(:focus-visible) { outline: none; }
/* phone: hint that the tab row scrolls sideways */
@media (max-width: 760px) {
  header nav.more-right { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
.pg-table .linkbtn { text-align: left; }
/* the list looks like the details panel: a floating rounded card (desktop), a rounded sheet with the same title bar (phone) */
/* the list's title bar (both layouts): what the list shows right now; Search on wide screens, More on phones */
.ptop { display: flex; flex: none; }
.ptop h2 { font-size: 15px; margin: 4px 0 0; flex: 1; min-width: 0; }
#panelSearch { width: auto; padding: 0 10px; font-size: 13.5px; font-weight: 600; color: #24408f; }
#panelSearch[hidden] { display: none; }
@media (min-width: 761px) { #panelMore { display: none; } }
@media (max-width: 760px) { #panelSearch { display: none; } }
/* only the body scrolls (like the details panel), so the scrollbar stays inside the rounded corners */
#panelBody { flex: 1; min-height: 0; overflow-y: auto; }
@media (min-width: 761px) {
  #panel { position: absolute; left: 16px; top: 12px; bottom: 12px; z-index: 1100; border: 0; border-radius: 14px;
    box-shadow: 0 12px 40px rgba(16,27,51,.22), 0 2px 6px rgba(16,27,51,.08); }
  #map { position: absolute; inset: 0; }
  #map .leaflet-left { left: var(--panel-w, 416px); }
  #panelEdge { top: 12px; bottom: 12px; left: calc(var(--panel-w) - 22px); }
  .sheet { left: calc(var(--panel-w, 416px) + 12px); }
  #detail.split { right: 16px; top: 12px; bottom: 12px; max-height: none; border-radius: 14px;
    box-shadow: 0 12px 40px rgba(16,27,51,.22), 0 2px 6px rgba(16,27,51,.08); }
  #detail.split .dtop { border-radius: 14px 14px 0 0; }
  #detail.split #detailBody { border-radius: 0 0 14px 14px; }
}
@media (max-width: 760px) {
  #panel { position: relative; z-index: 1001; margin-top: -12px; border: 0; border-radius: 12px 12px 0 0;
    box-shadow: 0 -6px 24px rgba(16,27,51,.18); }
  .ptop { border-radius: 12px 12px 0 0; }
  /* "More": the list or the details replace the map completely */
  main.list-full #panel { position: absolute; inset: 0; height: auto; margin: 0; }
  #detail.full, main.list-full #detail { height: 100%; }
}
/* narrow phones: six tabs don't fit in one row, so they sit in two rows of three, all visible (no sideways scroll) */
@media (max-width: 600px) {
  header nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; overflow: visible; }
  header nav.more-right { -webkit-mask-image: none; mask-image: none; }
  header nav button { padding: 7px 4px; text-align: center; }
}
/* nothing inside the map area (a closed sheet waiting below, a panel's shadow) may scroll the page itself */
main { overflow: hidden; overflow: clip; }
/* header: the project name, then the place in a lighter weight */
.h1-place { font-weight: 600; color: #c9d4ea; }