/* Project layer MVP interface: search, project panel, funding picker. Functional styling only;
   the icon and interface design pass comes later. */
:root{--ink:#4A4336;--muted:#857963;--card:#FBF7ECf2;--edge:#B58F6B55;--green:#0E9F6E;--shadow:0 4px 18px #5a402418}
#searchbar{position:absolute;top:14px;left:14px;width:min(340px,calc(100% - 80px));z-index:3}
#search{width:100%;height:46px;border:1px solid var(--edge);border-radius:23px;background:var(--card);padding:0 18px;font:16px Georgia,serif;color:var(--ink);box-shadow:var(--shadow);outline:none}
#search:focus{border-color:#547E80}
#suggest{list-style:none;margin:6px 0 0;padding:4px;border-radius:14px;background:var(--card);box-shadow:var(--shadow)}
#suggest:empty{display:none}
#suggest button{display:block;width:100%;text-align:left;min-height:40px;padding:0 12px;border-radius:10px;font-size:15px}
#suggest button:hover,#suggest button:focus{background:#E9DFC8}
.muted{color:var(--muted)}.small{font-size:12px}
#panel{position:absolute;top:14px;right:14px;bottom:auto;max-height:calc(100% - 28px);width:380px;overflow:auto;z-index:4;background:var(--card);border:1px solid var(--edge);border-radius:18px;box-shadow:var(--shadow);padding:18px 20px 16px}

#panel h2{font-weight:normal;font-size:20px;line-height:1.25;margin:2px 0 0}
.eyebrow{margin:0;font:12px/1.4 'Noto Sans',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--c,var(--muted))}
#panel dl{display:grid;grid-template-columns:76px 1fr;gap:6px 10px;margin:10px 0;font-size:15px}
#panel dt{color:var(--muted);font-size:13px;padding-top:2px}#panel dd{margin:0}
.desc{font-size:14px;line-height:1.45}
.source{font-size:13px;word-break:break-word}.source a{color:#3F7896}
.funded-note{display:inline-block;margin:0 0 4px;padding:3px 10px;border-radius:12px;background:var(--green);color:#fff;font-size:13px}
.plist{padding-left:0;list-style:none;margin:8px 0}.plist button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;min-height:40px;padding:4px 6px;border-radius:8px;font-size:14px;line-height:1.25}
.plist button:hover{background:#EFE6D2}
.dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c)}
.amt{margin-left:auto;padding-left:8px;color:var(--muted);font-size:13px;white-space:nowrap}
.pager{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}.pager button{min-height:36px}
#funding{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;width:min(640px,calc(100% - 24px));background:var(--card);border:1px solid var(--edge);border-radius:22px;box-shadow:var(--shadow);padding:8px}
.carousel{display:flex;align-items:center;gap:2px}
#fund-prev,#fund-next{flex:none;width:36px;min-height:40px;padding:0;font-size:24px;line-height:1;color:var(--muted);border-radius:18px}
#fund-prev:disabled,#fund-next:disabled{opacity:.25;cursor:default}
#fund-picker{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 22%;
 -webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%);mask-image:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%)}
#fund-picker::-webkit-scrollbar{display:none}
/* the selected choice always shows in full; neighbours shrink and fade (easy ease) */
.opt{flex:0 0 auto;min-width:46%;scroll-snap-align:center;min-height:44px;padding:0 14px;font-size:18px;color:var(--ink);white-space:nowrap;opacity:.32;transform:scale(.88);transition:opacity .32s cubic-bezier(.65,0,.35,1),transform .32s cubic-bezier(.65,0,.35,1)}
.opt[aria-selected=true]{opacity:1;transform:none;font-weight:bold}
#fund-body{padding:2px 10px 4px}
.slider{position:relative;padding:4px 0 26px}
#fund-range{width:100%;margin:0;accent-color:var(--green);height:28px;cursor:pointer}
#fund-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--green) var(--p,0%),#E3D8C1 var(--p,0%))}
#fund-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 1px 4px #0004;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s}
#fund-range:active::-webkit-slider-thumb{transform:scale(1.18);box-shadow:0 2px 10px #0003}
#fund-range{-webkit-appearance:none;background:transparent}
#fund-range::-moz-range-track{height:6px;border-radius:3px;background:#E3D8C1}
#fund-range::-moz-range-progress{height:6px;border-radius:3px;background:var(--green)}
#fund-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--green);border:3px solid #fff}
#fund-ticks{position:absolute;left:12px;right:12px;top:30px;height:22px}
#fund-ticks button{position:absolute;transform:translateX(-50%);min-height:22px;padding:0 4px;font-size:12px;color:var(--muted);white-space:nowrap}
#fund-ticks button:first-child{transform:none;left:-12px!important}
#fund-ticks button:last-child{transform:translateX(-100%);left:calc(100% + 12px)!important}
#fund-result{margin:4px 2px 2px;font-size:16px;line-height:1.4;color:var(--ink);font-variant-numeric:tabular-nums;min-height:calc(2.8em + 2.6em)}
#fund-result .incl{display:block;font-size:13px;color:var(--muted);margin-top:2px}
#fund-result .incl:empty::before{content:'\00a0'} /* keep the line so the module never changes height mid-animation */
#fund-result .foot{display:block;font-size:13px;color:var(--muted);margin-top:2px}
#fund-result .q{font-weight:bold}
#fund-why{min-height:0;padding:0;font-size:13px;color:#3F7896;text-decoration:underline;vertical-align:baseline}
.origin{line-height:0;filter:drop-shadow(0 2px 3px #0003)}
nav{display:none}body.dev nav{display:flex}
.maplibregl-ctrl-top-right{top:76px}
@media(max-width:600px),(max-height:500px) and (pointer:coarse),(max-width:900px) and (pointer:coarse){
 #searchbar{top:10px;left:10px;width:calc(100% - 70px)}
 #panel{top:auto;bottom:0;left:0;right:0;width:auto;max-height:62%;border-radius:18px 18px 0 0;z-index:5}
 #funding{bottom:18px;padding:6px}
 .opt{font-size:16px;min-width:56%}
 #fund-picker{padding:0 18%}
 #fund-result{font-size:15px}
 .maplibregl-ctrl-top-right{top:64px}
 /* map credits sit at the top, under the zoom buttons, so they never show through the funding panel */
 .maplibregl-ctrl-bottom-right{top:150px;bottom:auto}
}

/* panel enters with an easy ease; reduced motion skips it */
#panel:not([hidden]){animation:panelIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#fund-picker{scroll-behavior:smooth}
@media(max-width:600px),(max-height:500px) and (pointer:coarse),(max-width:900px) and (pointer:coarse){.desk-only{display:none}#panel:not([hidden]){animation-name:sheetIn}@keyframes sheetIn{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}}
@media(prefers-reduced-motion:reduce){#panel:not([hidden]){animation:none}.opt{transition:none}#fund-picker{scroll-behavior:auto}}

/* back arrow (top left) once you've clicked into a project from a list */

#panel-back:hover{background:#EFE6D2}
#panel .link,#fund-list{min-height:0;padding:0;font-size:inherit;color:#3F7896;text-decoration:underline}
#fund-list{font-size:13px}
/* desktop: when the side panel is open, the funding module recentres in the remaining space */
@media(min-width:900px){body.panel-open #funding{left:calc((100% - 400px)/2)}body.panel-open .maplibregl-ctrl-top-right{right:400px}}
.maplibregl-ctrl-top-right{transition:right .32s cubic-bezier(.65,0,.35,1)}
#funding{transition:left .32s cubic-bezier(.65,0,.35,1)}
/* hidden panel leaves a tab on the right edge to pop it back out */
#panel-tab{position:absolute;right:0;top:192px;z-index:4;min-height:44px;padding:0 14px 0 12px;border:1px solid var(--edge);border-right:0;border-radius:22px 0 0 22px;background:var(--card);box-shadow:var(--shadow);font-size:14px;color:var(--ink);animation:panelIn .28s cubic-bezier(.2,.8,.2,1)}
@media(max-width:600px),(max-height:500px) and (pointer:coarse),(max-width:900px) and (pointer:coarse){#panel-tab{top:auto;bottom:260px}}
/* panel: sticky top bar (back · title · close) over a long scrolling body */
#panel{padding:0!important}
#panel-top{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;gap:4px;padding:10px 8px 10px 14px;background:var(--card);border-bottom:1px solid transparent;transition:border-color .2s}
#panel.scrolled #panel-top{border-bottom-color:var(--edge);box-shadow:0 6px 10px -8px #5a40242e}
#panel-head{flex:1;min-width:0;padding-top:6px}
#panel-back,#panel-close{flex:none;min-height:40px;width:40px;padding:0;border-radius:20px;font-size:20px;color:var(--ink)}
#panel-close{color:var(--muted);font-size:22px}
#panel-back:hover,#panel-close:hover{background:#EFE6D2}
#panel-body{padding:2px 20px 18px}
#panel-body .more{text-align:center;margin:10px 0 0}
/* half-width spacers at both ends, so the first and last choices can sit in the centre too */
#fund-picker{padding:0!important}
#fund-picker::before,#fund-picker::after{content:'';flex:0 0 50%}

/* ===== Print-civic chrome: solid white surfaces, ink rules, newspaper type (Public Sans UI, Newsreader headlines) ===== */
:root{--ink:#1C1B19;--muted:#5B574F;--card:#FFFFFF;--edge:#1C1B19;--rule:#E4E1DA;--link:#2F5F7A;--shadow:0 2px 0 rgba(28,27,25,.18)}
body,button,input{font-family:'Public Sans',system-ui,sans-serif}
#searchbar #search,#panel,#funding,#suggest,#panel-tab,.maplibregl-ctrl-group{background:#FFFFFF;border:1px solid var(--ink);box-shadow:var(--shadow);border-radius:2px;backdrop-filter:none}
#search{font:500 16px/1 'Public Sans',sans-serif;color:var(--ink);height:44px;padding:0 14px}
#suggest{padding:0}#suggest button{border-radius:0;font-size:15px;border-bottom:1px solid var(--rule)}#suggest button:hover,#suggest button:focus{background:#F2F0EB}
#funding{border-top:3px solid var(--ink);padding:10px 14px 12px}
#panel{border-top:3px solid var(--ink)}
#panel-top{background:#FFFFFF;padding:10px 6px 10px 16px}
#panel.scrolled #panel-top{border-bottom-color:var(--rule);box-shadow:none}
#panel h2{font:600 24px/1.2 'Newsreader',Georgia,serif;letter-spacing:-.01em;color:var(--ink)}
.eyebrow{font:600 11px/1.4 'Public Sans',sans-serif;letter-spacing:.08em;color:var(--muted)!important}
#panel-back,#panel-close{border-radius:2px;color:var(--ink)}#panel-back:hover,#panel-close:hover{background:#F2F0EB}
#panel dl{font-size:14px}#panel dt{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.02em}
#panel dd strong{font-weight:700;font-variant-numeric:tabular-nums}
.desc{font-size:14px;line-height:1.5;color:var(--ink)}
.source a,#panel .link,#fund-list,#fund-why{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.plist button{font:400 14px/1.35 'Public Sans',sans-serif;color:var(--ink);border-radius:0;border-bottom:1px solid var(--rule);padding:8px 2px}
.plist button:hover{background:#F7F5F0}
.plist .amt{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.plist .dot{width:8px;height:8px}
/* funding module */
.opt{font:600 16px/1 'Public Sans',sans-serif;letter-spacing:.01em;color:var(--ink);opacity:.3;transform:none}
.opt[aria-selected=true]{opacity:1;font-weight:700}
#fund-prev,#fund-next{border-radius:2px;color:var(--ink);font-size:22px}
#fund-prev:hover,#fund-next:hover{background:#F2F0EB}
#fund-result{font:500 21px/1.3 'Newsreader',Georgia,serif;letter-spacing:-.005em;color:var(--ink);min-height:calc(2.6em + 2.6em)}
#fund-result .num{font:700 1em 'Public Sans',sans-serif;font-variant-numeric:tabular-nums;text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:3px}
#fund-result strong{font-family:'Public Sans',sans-serif;font-weight:700}
#fund-result .incl,#fund-result .foot{font:400 13px/1.45 'Public Sans',sans-serif;color:var(--muted)}
/* slider as a ruler: ink baseline, ticks at stops, green filled bar, slim ink thumb */
.slider{padding:6px 0 24px}
#fund-range::-webkit-slider-runnable-track{height:6px;border-radius:0;background:linear-gradient(90deg,var(--green) var(--p,0%),#E4E1DA var(--p,0%));box-shadow:inset 0 -2px 0 var(--ink)}
#fund-range::-webkit-slider-thumb{width:6px;height:24px;margin-top:-9px;border-radius:1px;background:var(--ink);border:0;box-shadow:none}
#fund-range:active::-webkit-slider-thumb{transform:scaleY(1.15);box-shadow:none}
#fund-range::-moz-range-track{height:6px;border-radius:0;background:#E4E1DA;border-bottom:2px solid var(--ink)}
#fund-range::-moz-range-progress{height:6px;border-radius:0;background:var(--green)}
#fund-range::-moz-range-thumb{width:6px;height:24px;border-radius:1px;background:var(--ink);border:0}
#fund-ticks button{font:500 12px/1 'Public Sans',sans-serif;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:8px}
#fund-ticks button::before{content:'';position:absolute;left:50%;top:-4px;width:1px;height:6px;background:var(--ink)}
#fund-ticks button:first-child::before{left:12px}#fund-ticks button:last-child::before{left:auto;right:12px}
#panel-tab{font:600 14px 'Public Sans',sans-serif;border-right:0}
.maplibregl-ctrl-group button{border-radius:0}
@media(max-width:600px),(max-height:500px) and (pointer:coarse),(max-width:900px) and (pointer:coarse){#fund-result{font-size:18px}#panel{border-radius:0;border-left:0;border-right:0}}
#panel h2.sentence{font:500 20px/1.3 'Newsreader',Georgia,serif;letter-spacing:-.005em}
/* neighbours visible but quiet: natural widths with gaps, soft fade toward the edges */
.opt{flex:0 0 auto!important;min-width:0!important;padding:0 10px!important}
#fund-picker{gap:18px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
#panel-body p a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.plist-head{display:flex;justify-content:flex-end;margin:8px 0 -4px}
#amt-sort{min-height:0;padding:2px 2px 2px 8px;font:600 9px/1 'Public Sans',sans-serif;letter-spacing:-.5px;color:var(--muted);background:none;border:0;cursor:pointer}
#amt-sort:hover{color:var(--ink)}
/* funding name in the result sentence: hover (tap on phones) opens its explainer above the module */
#fund-result .term{all:unset;cursor:help;text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:var(--muted)}
#fund-result .term:hover,#fund-result .term[aria-expanded=true]{text-decoration-style:solid;text-decoration-color:var(--ink)}
#fund-result .term:focus-visible{outline:2px solid var(--link);outline-offset:2px}
#term-pop{position:absolute;left:-1px;right:-1px;bottom:calc(100% + 10px);max-height:min(60vh,420px);overflow:auto;padding:14px 16px 12px;background:#FFFFFF;
 border:1px solid var(--ink);border-top:3px solid var(--ink);border-radius:2px;box-shadow:var(--shadow);font:400 14px/1.5 'Public Sans',sans-serif;color:var(--ink);
 opacity:0;transform:translateY(6px);transition:opacity .2s cubic-bezier(.65,0,.35,1),transform .2s cubic-bezier(.65,0,.35,1)}
#term-pop.on{opacity:1;transform:none}
#term-pop h3{margin:0 0 6px;font:600 19px/1.25 'Newsreader',Georgia,serif}
#term-pop p{margin:0 0 8px}#term-pop p:last-child{margin:0}
#term-pop a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
#term-pop .amt-line{color:var(--muted);font-size:13px}
@media(prefers-reduced-motion:reduce){#term-pop{transition:none}}
/* Ticks line up with the thumb's centre: the thumb travels from thumb/2 to 100% - thumb/2, so inset the tick row by
   half the thumb and draw the green fill to the same point. */
.slider{--thumb:6px}
#fund-ticks{left:calc(var(--thumb) / 2);right:calc(var(--thumb) / 2)}
#fund-ticks button::before{margin-left:-.5px}#fund-ticks button:last-child::before{margin-left:0;margin-right:-.5px}
#fund-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--green) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--f,0)),#E4E1DA 0)}
/* ===== Mobile-first layout (phones): full-width search, docked funding sheet, list opens from the count ===== */
#fund-result .num{all:unset;cursor:pointer;font:700 1em 'Public Sans',sans-serif;font-variant-numeric:tabular-nums;
 text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:3px}
#fund-result .num:focus-visible{outline:2px solid var(--link);outline-offset:2px}
/* Map credits: one small line of text, no (i) button. */
.maplibregl-ctrl-attrib,.maplibregl-ctrl-attrib.maplibregl-compact{background:rgba(255,255,255,.72)!important;font:400 9px/1.3 'Public Sans',sans-serif;color:#6B675E;padding:1px 5px;margin:0!important;border-radius:0;min-height:0}
.maplibregl-ctrl-attrib a{color:#6B675E}
.maplibregl-ctrl-attrib-button{display:none!important}
@media(max-width:600px),(max-height:500px) and (pointer:coarse),(max-width:900px) and (pointer:coarse){
 #searchbar{top:max(10px,env(safe-area-inset-top));left:12px;right:12px;width:auto}
 #search{height:46px;font-size:16px}
 .maplibregl-ctrl-top-right{display:none} /* pinch to zoom */
 #panel-tab{display:none!important} /* the project count opens the list */
 .maplibregl-ctrl-bottom-right{top:calc(max(10px,env(safe-area-inset-top)) + 52px);bottom:auto;left:12px;right:12px}
 .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib{display:inline-block}
 #funding{left:0!important;right:0;bottom:0;transform:none!important;width:100%;max-width:none;border-radius:0!important;
  border-left:0!important;border-right:0!important;border-bottom:0!important;padding:6px 14px calc(10px + env(safe-area-inset-bottom))!important}
 .carousel{min-height:0}
 .opt{font-size:15px!important;min-height:38px!important}
 #fund-prev,#fund-next{width:30px;min-height:38px;font-size:20px}
 .slider{padding:2px 0 20px!important}
 #fund-ticks button{font-size:11px!important}
 #fund-result{font:500 18px/1.3 'Newsreader',Georgia,serif!important;min-height:2.6em!important;margin:2px 0 0}
 #fund-result .incl,#fund-result .foot{display:none}
 #panel{left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100%!important;max-height:72%;border-radius:0!important;
  border-left:0!important;border-right:0!important;border-bottom:0!important;z-index:6;padding-bottom:env(safe-area-inset-bottom)}
 #term-pop{left:8px;right:8px;max-height:46vh}
}
/* Touch: the slider strip takes the finger (see projects.js); the range input only serves mouse and keyboard. */
@media(pointer:coarse){.slider{touch-action:none;padding-top:12px!important;margin-top:-8px}#fund-range{pointer-events:none}#fund-ticks{top:42px}}
/* Peek at the nearest funded project (phones) */
#fund-peek{display:none}
@media(max-width:600px),(max-height:500px) and (pointer:coarse),(max-width:900px) and (pointer:coarse){
 #fund-peek:not([hidden]){display:flex;align-items:center;gap:8px;width:100%;min-height:44px;margin:8px 0 0;padding:8px 10px;border:1px solid var(--rule);border-radius:2px;
  background:#FFFFFF;font:400 14px/1.25 'Public Sans',sans-serif;color:var(--ink);text-align:left;cursor:pointer}
 #fund-peek .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--green)}
 #fund-peek .pk-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #fund-peek .pk-amt{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
 #fund-peek .pk-more{flex:none;font-weight:600;color:var(--green-dark,#0A7A55);font-variant-numeric:tabular-nums}
 #fund-peek .pk-go{flex:none;font-size:18px;color:var(--muted);margin-left:-2px}
 #fund-peek:active{background:#F4F2EE}
 /* grab handle: the sheet can be swiped up */
 #funding::before{content:'';position:absolute;left:50%;top:5px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:#D6D2CA}
 #funding{padding-top:12px!important}
}
/* Phones held sideways: the sheet sits bottom-left and the list on the right, so the map keeps the middle. */
@media(max-height:500px) and (pointer:coarse) and (min-width:601px){
 #funding{width:min(460px,58%)!important;right:auto!important}
 #panel{left:auto!important;top:0!important;width:min(400px,42%)!important;max-height:100%!important}
 #searchbar{right:auto!important;width:min(460px,58%)!important}
 .maplibregl-ctrl-bottom-right{right:auto!important;width:min(460px,58%)}
}
/* Narrow desktop windows: the funding module fits beside the open projects panel instead of running under it. */
@media(min-width:601px) and (max-width:1099px) and (pointer:fine){body.panel-open #funding{left:12px!important;transform:none!important;width:calc(100% - 400px - 36px)!important}}
/* Touch tablets in portrait use the phone layout; keep the sheet and search readable at that width. */
@media(min-width:601px) and (max-width:900px) and (pointer:coarse){#funding{padding-left:24px!important;padding-right:24px!important}#searchbar{right:auto!important;width:min(520px,calc(100% - 24px))!important}}
/* Use-my-location button inside the search field */
#searchbar{position:absolute}
#search{padding-right:48px!important}
#locate{position:absolute;right:1px;top:1px;height:42px;width:44px;min-height:0;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-left:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;border-radius:0}
@media(max-width:600px),(max-height:500px) and (pointer:coarse),(max-width:900px) and (pointer:coarse){#locate{height:44px}}
#locate:hover{background:#F4F2EE}
#locate:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
#locate.busy svg{animation:locPulse 1s ease-in-out infinite}
@keyframes locPulse{50%{opacity:.25}}
#locate.off{color:#B0ABA2}
@media(prefers-reduced-motion:reduce){#locate.busy svg{animation:none;opacity:.5}}
/* ===== Phones: one bottom sheet (funding controls + projects list), dragged by its handle ===== */
#sheet-handle{display:none}
body.sheet-mode #funding{display:flex;flex-direction:column;overflow:visible;transition:height .32s cubic-bezier(.65,0,.35,1)}
body.sheet-mode #funding.dragging{transition:none}
body.sheet-mode #funding::before{display:none}
body.sheet-mode #funding>.carousel,body.sheet-mode #fund-body{flex:none}
body.sheet-mode #sheet-handle{display:block;flex:none;align-self:center;position:relative;width:72px;height:24px;min-height:0;margin:-10px 0 0;padding:0;border:0;background:transparent;cursor:grab;touch-action:none}
body.sheet-mode #sheet-handle::before{content:'';position:absolute;left:18px;right:18px;top:10px;height:4px;border-radius:2px;background:#C9C4BA}
body.sheet-mode #sheet-handle:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
body.sheet-mode #panel{position:relative!important;inset:auto!important;display:block;flex:1 1 auto;min-height:0;width:auto!important;max-height:none!important;
 margin:8px -14px 0;border:0!important;border-top:1px solid var(--rule)!important;box-shadow:none!important;border-radius:0!important;animation:none!important;
 overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding-bottom:0!important}
body.sheet-mode #panel[hidden]{display:none}
body.sheet-mode #funding[data-snap=peek] #panel{overflow:hidden;touch-action:none}
body.sheet-mode #panel.root #panel-top{display:none}
body.sheet-mode #panel-close{display:none}
body.sheet-mode #fund-peek{display:none!important}
body.sheet-mode #panel-body{padding:0 16px 16px}
body.sheet-mode .plist-head{margin:6px 0 -2px}
/* The sheet owns vertical drags; only the choices pan sideways and the open list scrolls. */
body.sheet-mode #funding{touch-action:none}
body.sheet-mode #fund-picker{touch-action:pan-x}
body.sheet-mode #funding:not([data-snap=peek]) #panel{touch-action:pan-y}
/* ===== Critic pass (usability) ===== */
/* Slider: a real round handle, visible at every value; ticks and fill follow its centre (--thumb). */
.slider{--thumb:22px}
html[data-style=editorial] .slider{--thumb:22px}
#fund-range{height:30px}
#fund-range::-webkit-slider-thumb{width:22px!important;height:22px!important;margin-top:-8px!important;border-radius:50%!important;background:#FFFFFF!important;border:2px solid var(--ink)!important;box-shadow:0 1px 3px rgba(28,27,25,.28)!important;transition:transform .15s ease}
html[data-style=editorial] #fund-range::-webkit-slider-thumb{margin-top:-9px!important}
#fund-range:active::-webkit-slider-thumb{transform:scale(1.12)!important}
#fund-range::-moz-range-thumb{width:18px!important;height:18px!important;border-radius:50%!important;background:#FFFFFF!important;border:2px solid var(--ink)!important}
.slider.dragging #fund-range::-webkit-slider-thumb{transform:scale(1.12)}
/* Project rows: title, then category · town */
.plist .ttl{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.plist .meta{font:500 11px/1.3 'Public Sans',sans-serif;letter-spacing:.02em;color:var(--muted);text-transform:none}
.plist button{align-items:center}
/* Desktop panel header: the count, not a repeat of the sentence */
#panel h2.count{font:600 22px/1.2 'Newsreader',Georgia,serif;margin:2px 0 0}
/* Wordmark: small, in the module / sheet corner */
#wordmark{position:absolute;top:9px;left:14px;margin:0;font:600 12px/1 'Newsreader',Georgia,serif;letter-spacing:.01em;color:var(--muted);pointer-events:none;z-index:1}
body.sheet-mode #wordmark{top:12px}
/* Credits: as small as they can be. Desktop: bottom-right corner; phones: riding on the sheet's top edge. */
.maplibregl-ctrl-attrib,.maplibregl-ctrl-attrib.maplibregl-compact{font-size:8px!important;line-height:1.2!important;padding:0 3px!important;background:transparent!important;color:#77736A!important}
.maplibregl-ctrl-attrib a{color:#77736A!important}
body.sheet-mode #funding>.maplibregl-ctrl-attrib{position:absolute;right:4px;bottom:100%;margin:0 0 2px!important;max-width:calc(100% - 8px);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto}
body.sheet-mode .maplibregl-ctrl-bottom-right{display:none}
/* Phones: the breakdown line returns once the sheet is open */
/* Touch targets: bigger hit areas, same look */
#amt-sort{min-height:44px!important;padding:14px 2px 14px 18px!important;margin:-10px 0!important}
@media(pointer:coarse){
 #fund-prev,#fund-next{width:44px!important;min-height:44px!important}
 #fund-ticks button{min-height:34px!important}
 body.sheet-mode #sheet-handle{height:32px;margin:-12px 0 -4px;width:96px}
 body.sheet-mode #sheet-handle::before{left:30px;right:30px;top:12px}
}
/* No stuck hover colours on touch screens */
@media(hover:none){#fund-prev:hover,#fund-next:hover,#locate:hover,#panel-back:hover,#panel-close:hover,.plist button:hover,#suggest button:hover{background:transparent}}
/* Desktop: the wordmark gets its own line above the choices */
body:not(.sheet-mode) #wordmark{top:10px;left:16px}
/* About link: first item of the credit line, a touch darker than the credits */
.maplibregl-ctrl-attrib a.about-link{color:var(--ink)!important;font-weight:600;text-decoration:none}
/* Touch: the tick labels sit lower (bigger hit area), so give the sentence room below them */
@media(pointer:coarse){.slider{padding-bottom:34px!important}#fund-result{margin-top:4px!important}}
/* Category chips above the project list */
.cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:10px -16px 2px;padding:2px 16px 6px;touch-action:pan-x}
.cats::-webkit-scrollbar{display:none}
.cats button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;border:1px solid var(--rule);border-radius:16px;background:#FFFFFF;
 font:500 13px/1 'Public Sans',sans-serif;color:var(--ink);white-space:nowrap;cursor:pointer}
.cats button .n{color:var(--muted);font-variant-numeric:tabular-nums}
.cats button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#FFFFFF}
.cats button[aria-pressed=true] .n{color:#D6D2CA}
.cats .dot{width:8px;height:8px;border-radius:50%;background:var(--c)}
.plist .meta .cat{cursor:pointer;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:2px}
@media(pointer:coarse){.cats button{min-height:36px}}
#panel-body .cats{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
body.sheet-mode #panel-body .cats{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
#amt-sort{display:inline-flex;align-items:center;justify-content:center;color:var(--ink)!important}
#amt-sort svg{display:block}
/* Sort chevrons sit side by side in a short row; the tap area stays large */
.plist-head{height:18px;margin:4px 0 0!important;align-items:center}
#amt-sort{margin:-13px -2px -13px 0!important;padding:13px 2px 13px 18px!important}
/* One bar above the list: category chips scroll under a soft fade, the sort chevrons sit at the right */
.listbar{display:flex;align-items:center;gap:0;margin:8px 0 0;position:relative}
.listbar .cats{flex:1;min-width:0;margin-top:0!important;margin-bottom:0!important;padding-bottom:4px!important;padding-right:24px!important;
 -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.listbar #amt-sort{flex:none;margin:-6px -6px -6px 0!important;padding:14px 6px 14px 10px!important}
.listbar:not(:has(.cats)){justify-content:flex-end;height:18px}
.plist{margin-top:0!important}
/* chips fade out fully before the chevrons */
.listbar .cats{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent calc(100% - 10px))!important;mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent calc(100% - 10px))!important;padding-right:56px!important}
.listbar #amt-sort{margin-left:-6px!important}
/* Sort: a pill at the end of the chip row, same height as the chips. Its own white backing and fade cover the chips
   beneath, so a tap near it sorts instead of landing on a half-hidden chip. */
.listbar .cats{-webkit-mask-image:none!important;mask-image:none!important;padding-right:8px!important}
.listbar #amt-sort{position:relative;z-index:1;flex:none;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;
 min-height:0!important;height:auto;margin:0 0 4px!important;padding:0 12px!important;border:1px solid var(--rule)!important;border-radius:16px;background:#FFFFFF!important;cursor:pointer}
.listbar #amt-sort::before{content:'';position:absolute;top:-2px;bottom:-2px;right:calc(100% + 1px);width:34px;background:linear-gradient(90deg,rgba(255,255,255,0),#FFFFFF 70%)}
.listbar #amt-sort::after{content:'';position:absolute;inset:-6px -8px -6px -36px} /* generous tap area */
@media(pointer:coarse){.listbar #amt-sort{padding:0 14px!important}}
/* Option B: the sort is an icon chip at the start of the chip row (overrides the earlier pill) */
.listbar #amt-sort,.cats #amt-sort{position:static!important;flex:none;align-self:auto!important;display:inline-flex;align-items:center;justify-content:center;
 height:32px;min-height:32px!important;min-width:40px;margin:0!important;padding:0 11px!important;border:1px solid var(--rule)!important;border-radius:16px;
 background:#FFFFFF!important;color:var(--ink)!important;cursor:pointer}
.listbar #amt-sort::before,.listbar #amt-sort::after{display:none!important}
.cats #amt-sort.on{background:var(--ink)!important;border-color:var(--ink)!important;color:#FFFFFF!important}
@media(pointer:coarse){.cats #amt-sort{height:36px;min-height:36px!important;min-width:44px}}
.listbar .cats{padding-right:16px!important}
/* ===== Phone tray, compact (map room): content-sized rest, 48px slider, 17/22 sentence ===== */
body.sheet-mode #funding{padding:4px 16px calc(8px + env(safe-area-inset-bottom))!important}
body.sheet-mode #sheet-handle{height:20px!important;margin:-4px 0 -2px!important}
body.sheet-mode #sheet-handle::before{top:7px!important}
/* slider: a 32px band the finger drags anywhere on, stops as small marks on the track, labels right under it */
body.sheet-mode .slider{padding:0 0 18px!important;margin-top:0!important}
body.sheet-mode #fund-range{height:32px!important}
body.sheet-mode #fund-ticks{top:27px!important;height:18px}
body.sheet-mode #fund-ticks button{min-height:18px!important;padding:0 4px!important;font:500 11px/18px 'Public Sans',sans-serif!important}
body.sheet-mode #fund-ticks button::before{top:-10px!important;height:6px!important}
/* the sentence stays two lines on small phones */
body.sheet-mode #fund-result{font:500 17px/22px 'Newsreader',Georgia,serif!important;margin:4px 0 0!important;min-height:44px!important}
/* list header right under the sentence */
body.sheet-mode #panel{margin-top:6px!important}
body.sheet-mode .listbar{margin-top:4px!important}
body.sheet-mode .cats{padding-top:2px!important;padding-bottom:2px!important}
body.sheet-mode .cats button,body.sheet-mode .cats #amt-sort{height:40px!important;min-height:40px!important}