/* /where-to-play: court map */
.map-page{padding:150px 0 40px}
.map-hero{max-width:900px}
.map-title{font-size:clamp(4.4rem,10vw,9.5rem);margin:22px 0 22px}
.map-lead{font-size:20px;line-height:1.5;max-width:660px}
.map-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:40px 0 14px}
.map-controls .sport-switch{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.locate-button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid var(--orange);background:transparent;color:var(--orange);border-radius:99px;font-size:13px;font-weight:700;cursor:pointer;touch-action:manipulation;transition:background .2s,color .2s}
.locate-button:hover{background:var(--orange);color:#111}
.area-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 18px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.area-chips::-webkit-scrollbar{display:none}
.area-chips button{flex:none;min-height:40px;padding:0 15px;border:1px solid #3d3d37;background:transparent;color:var(--muted);border-radius:99px;font-size:13px;cursor:pointer;touch-action:manipulation;transition:color .2s,border-color .2s}
.area-chips button:hover,.area-chips button[aria-pressed=true]{color:var(--white);border-color:var(--white)}
.sport-switch button{min-height:40px;touch-action:manipulation}

.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:stretch}
.map-stage{position:relative;border:1px solid #41413a;background:#191a17;min-width:0}
#court-map{height:min(680px,72svh);min-height:420px;background:#1a1d1b;z-index:0}
.map-fallback{padding:24px;color:var(--muted)}
.map-status{position:absolute;left:12px;bottom:12px;z-index:500;margin:0;padding:5px 9px;background:#111110e6;border:1px solid #ffffff2e;font-size:11px;letter-spacing:.04em;color:#d6d5cc;max-width:calc(100% - 24px);pointer-events:none}
.map-legend{position:absolute;left:12px;top:12px;z-index:500;display:flex;gap:12px;padding:7px 11px;background:#111110e6;border:1px solid #ffffff2e;font-size:11px;font-weight:600;letter-spacing:.04em;color:#e4e3da;pointer-events:none}
.map-legend span{display:inline-flex;align-items:center;gap:6px}

/* Dark tiles: invert the standard OSM style so it sits in the COURT palette. */
#court-map .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.55)}
#court-map .leaflet-control-attribution{background:#111110d9;color:#aaa9a3;font-size:10px}
#court-map .leaflet-control-attribution a{color:#d6d5cc}
#court-map .leaflet-bar{border:2px solid #111110;border-radius:0;box-shadow:0 2px 10px #0008}
#court-map .leaflet-bar a{width:40px;height:40px;line-height:38px;background:#ff5a1f;color:#111110;border-bottom:2px solid #111110;font:700 24px/38px var(--body);border-radius:0}
#court-map .leaflet-bar a:last-child{border-bottom:0}
#court-map .leaflet-bar a:hover,#court-map .leaflet-bar a:focus{background:#ff7849;color:#111110}

.dot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none}
.dot--bb{background:#ff5a1f}
.dot--pb{background:#d7ef3a}
.dot--both{background:conic-gradient(#ff5a1f 0 50%,#d7ef3a 0 100%);transform:rotate(-45deg)}

.court-pin{display:grid;place-items:center;border-radius:50%;border:2px solid #111110;color:#111110;font:700 12px/1 var(--body);box-shadow:0 2px 8px #0009}
.court-pin--bb{background:#ff5a1f}
.court-pin--pb{background:#d7ef3a}
.court-pin--both{background:conic-gradient(#ff5a1f 0 50%,#d7ef3a 0 100%)}
.court-cluster{background:none;border:0}
.court-cluster-ring{display:grid;place-items:center;width:100%;height:100%;padding:6px;border-radius:50%;box-shadow:0 0 0 2px #111110,0 4px 14px #0009}
.court-cluster-ring b{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#111110;color:var(--white);font:700 14px/1 var(--body)}
.you-dot{border-radius:50%;background:#4aa3ff;border:3px solid #fff;box-shadow:0 0 0 6px #4aa3ff55}

#court-map .leaflet-popup-content-wrapper{background:#111110;color:var(--white);border:1px solid #55554f;border-radius:0;box-shadow:0 14px 34px #000a}
#court-map .leaflet-popup-tip{background:#111110;border:1px solid #55554f}
#court-map .leaflet-popup-content{margin:14px 16px;font:14px/1.45 var(--body)}
#court-map .leaflet-popup-close-button{color:#c9c8c0;width:36px;height:36px;font-size:22px;line-height:36px}
.court-popup-name{display:block;font:30px/1 var(--display);letter-spacing:.01em;padding-right:22px}
.court-popup p{margin:6px 0 0;font-size:13px}
.court-popup-courts{color:#d6d5cc!important}
.court-popup-link{display:inline-block;margin-top:12px;padding:10px 14px;background:var(--orange);color:#111;font-size:13px;font-weight:700}
.court-popup-link:hover{background:#ff7849}

.map-side{border:1px solid #41413a;background:#191a17;display:flex;flex-direction:column;min-width:0}
.map-side-head{padding:20px 20px 12px}
.map-side-head h2{font-size:34px}
.map-side-head p{font-size:12px;margin-top:6px}
.court-list{list-style:none;margin:0;padding:0;flex:1;overflow:auto}
.court-list li{border-top:1px solid var(--line)}
.court-item{display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;row-gap:2px;align-items:center;width:100%;min-height:64px;padding:12px 20px;background:transparent;border:0;color:var(--white);text-align:left;cursor:pointer;touch-action:manipulation;transition:background .15s}
.court-item:hover{background:#23241f}
.court-item .dot{grid-row:1/3}
.court-item-name{font-weight:600;font-size:14px;line-height:1.3}
.court-item-sub{grid-column:2;font-size:12px;color:var(--muted)}
.court-item-dist{grid-column:3;grid-row:1/3;font-size:12px;font-weight:700;color:var(--orange);white-space:nowrap}
.court-empty{padding:20px;color:var(--muted);font-size:13px}
.map-side-foot{padding:14px 20px;border-top:1px solid var(--line);font-size:13px;margin:0}

.map-notes{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;margin-top:80px;padding:60px 0;border-top:1px solid var(--line)}
.map-notes .eyebrow{color:var(--orange)}
.map-notes h2{margin-top:14px;font-size:clamp(3.2rem,5vw,5rem)}
.map-notes p{font-size:16px;line-height:1.6;margin-bottom:16px}
.map-notes .map-attribution{font-size:12px;margin-top:22px;color:#96968d}

@media(max-width:980px){
  .map-layout{grid-template-columns:1fr}
  .map-side{order:2}
  .court-list{overflow:visible}
  .map-notes{grid-template-columns:1fr;gap:20px}
}
@media(max-width:560px){
  .map-page{padding-top:110px}
  .map-lead{font-size:17px}
  .map-controls{margin-top:28px}
  #court-map{height:62svh;min-height:380px}
  .map-legend{font-size:10px;gap:8px;padding:6px 8px}
  .map-notes{margin-top:50px;padding:40px 0}
}
@media(prefers-reduced-motion:reduce){.locate-button,.court-item,.area-chips button{transition:none}}

.map-hint{display:none;position:absolute;right:12px;bottom:12px;z-index:500;margin:0;padding:5px 9px;background:#111110e6;border:1px solid #ffffff2e;font-size:11px;color:#d6d5cc;pointer-events:none}
@media(pointer:coarse){.map-hint{display:block;bottom:34px}}

.court-popup-reviews{color:#a7a79f!important}
.court-popup-reviewlink{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.map-legend .legend-note{color:#a7a79f;font-weight:400}

/* Popup actions and the reviews sheet */
.court-popup-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.court-popup-actions .court-popup-link{margin-top:0}
.court-popup-more{padding:10px 14px;background:transparent;border:1px solid #77776d;color:var(--white);font:700 13px var(--body);cursor:pointer;touch-action:manipulation}
.court-popup-more:hover{border-color:var(--white)}
.court-popup-reviews:empty{display:none}
.park-sheet{width:min(560px,calc(100% - 24px));max-height:calc(100svh - 24px);margin:auto;padding:0;border:1px solid #55554f;background:#141412;color:var(--white);overflow:hidden}
.park-sheet::backdrop{background:#000b}
.sheet-card{position:relative;max-height:calc(100svh - 26px);overflow-y:auto;padding:26px 24px calc(24px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.sheet-close{position:absolute;top:8px;right:8px;width:44px;height:44px;background:transparent;border:0;color:var(--white);font-size:30px;line-height:1;cursor:pointer;touch-action:manipulation}
.sheet-eyebrow{font-size:11px;font-weight:650;letter-spacing:.11em;color:var(--orange)}
.sheet-title{font-size:44px;margin:6px 40px 6px 0}
.sheet-sub{font-size:14px;color:var(--muted)}
.sheet-directions{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--white);text-decoration:underline;text-underline-offset:3px}
.sheet-summary,.sheet-reviews,.sheet-write{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.sheet-h3{font-size:26px;margin-bottom:12px}
.sheet-note{font-size:14px;color:#c9c8c0;line-height:1.55}
.sheet-button{display:inline-block;margin-top:14px;padding:13px 18px;background:var(--orange);color:#111;font-size:14px;font-weight:700}
.sheet-button:hover{background:#ff7849}
.rating-top{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.rating-big{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.rating-big strong{font:68px/1 var(--display)}
.rating-count{font-size:12px;color:var(--muted)}
.stars{display:inline-flex;gap:2px;color:#4a4a42;font-size:18px;line-height:1}
.stars--small{font-size:14px}
.star--on{color:var(--orange)}
.rating-bars{display:flex;flex-direction:column;gap:5px}
.bar-row{display:grid;grid-template-columns:26px 1fr 22px;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.bar-track{height:6px;background:#2d2d28}
.bar-track i{display:block;height:100%;background:var(--orange)}
.bar-n{text-align:right}
.fact-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fact-chip{padding:5px 10px;border:1px solid #55554f;border-radius:99px;font-size:12px;color:#d6d5cc}
.review{padding:14px 0;border-top:1px solid var(--line)}
.review:first-of-type{border-top:0}
.review-top{display:flex;align-items:center;gap:10px}
.review-verified{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#111;background:#d7ef3a;padding:2px 7px}
.review-body{margin-top:8px;font-size:14px;line-height:1.55;color:var(--white);white-space:pre-wrap;overflow-wrap:anywhere}
.review-meta{margin-top:6px;font-size:12px;color:var(--muted)}
@media(max-width:560px){
  .park-sheet{width:100%;max-width:none;margin:auto 0 0;max-height:88svh;border-left:0;border-right:0;border-bottom:0}
  .sheet-card{max-height:88svh}
  .sheet-title{font-size:38px}
  .rating-top{grid-template-columns:1fr;gap:16px}
}
.sheet-reviews:empty{display:none}

/* Park search */
.map-search{position:relative;max-width:420px;margin:0 0 14px}
.map-search-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.map-search input{width:100%;min-height:44px;padding:0 16px;background:#111110;color:var(--white);border:1px solid #55554f;border-radius:99px;font:14px var(--body);color-scheme:dark;-webkit-appearance:none;appearance:none}
.map-search input::placeholder{color:#8d8c85}
.map-search input:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.search-results{position:absolute;z-index:1200;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px 0;list-style:none;background:#111110;border:1px solid #55554f;box-shadow:0 18px 40px #000a;max-height:340px;overflow:auto}
.search-results[hidden]{display:none}
.search-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:52px;padding:10px 16px;background:transparent;border:0;color:var(--white);text-align:left;cursor:pointer;touch-action:manipulation}
.search-item:hover,.search-item:focus-visible{background:#23241f}
.search-item-name{font-weight:600;font-size:14px;line-height:1.3}
.search-item-sub{font-size:12px;color:var(--muted)}
.search-empty{padding:12px 16px;font-size:13px;color:var(--muted)}

/* Access groups: free parks are circles in sport colors; pass-or-permit (army green) and
   paid-or-members (blue) places are squares. A green ring marks a park where a sport needs a town pass. */
.access-switch button{display:inline-flex;align-items:center;gap:8px}
.access-switch .dot{width:10px;height:10px}
.dot--free{background:conic-gradient(#ff5a1f 0 50%,#d7ef3a 0 100%);transform:rotate(-45deg)}
.dot--square{border-radius:2px}
.dot--gov{background:#8fae4f}
.dot--paid{background:#4f8fff}
.dot--pass{box-shadow:0 0 0 2px #191a17,0 0 0 4px #8fae4f}
.court-pin--pass{box-shadow:0 0 0 3px #8fae4f,0 2px 8px #0009}
.venue-pin{border:2px solid #111110;border-radius:3px;box-shadow:0 2px 8px #0009}
.venue-pin--gov{background:#8fae4f}
.venue-pin--paid{background:#4f8fff}
.venue-cluster{background:none;border:0}
.venue-cluster-box{display:grid;place-items:center;width:100%;height:100%;padding:5px;border-radius:5px;box-shadow:0 0 0 2px #111110,0 4px 14px #0009}
.venue-cluster-box b{display:grid;place-items:center;width:100%;height:100%;border-radius:2px;background:#111110;color:var(--white);font:700 13px/1 var(--body)}
.map-legend{flex-wrap:wrap;max-width:calc(100% - 80px)}
.access-tag{display:inline-block;margin-bottom:8px;padding:2px 8px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#111110}
.access-tag--gov{background:#8fae4f}
.access-tag--paid{background:#4f8fff}
.access-tag--free{background:var(--orange)}
.court-popup-access{color:var(--white)!important;line-height:1.45}
.court-popup-access .inline-link{color:var(--orange);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.popup-events{margin-top:12px;padding-top:10px;border-top:1px solid #3d3d37}
.popup-events-head{font-size:11px!important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)!important;margin:0!important}
.popup-events-list{list-style:none;margin:6px 0 0;padding:0}
.popup-event{display:flex;flex-direction:column;padding:7px 0;border-top:1px solid #2a2a26;color:var(--white)}
.popup-events-list li:first-child .popup-event{border-top:0}
.popup-event:hover .popup-event-title{color:var(--orange)}
.popup-event-when{font-size:11px;color:#c9c8c0;letter-spacing:.02em}
.popup-event-title{font-size:13px;font-weight:600;line-height:1.3}
.popup-event-meta{font-size:11px;color:var(--muted)}
.popup-events-more{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:var(--orange)}
@media(max-width:560px){.access-switch{width:100%}.access-switch button{padding:8px 13px}}