/* A neighborhood's Google map on the website (web/js/nbmap.js, the platform's static/site/nbmap.js copied
   byte for byte): the pins (buttons an OverlayView places), the MTA line bullets, and the words of a chosen
   pin inside Google's own white info window. Liquid Glass tokens (web/css/lg-core.css). */
.nb-map-note:empty { display: none; }
.nb-map-note { margin: 0; padding: 14px 20px; font-size: var(--lg-t-secondary); color: var(--lg-text-secondary); }
.nb-pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; }
.nb-pin:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 3px; border-radius: 50%; }
.nb-pin > span { display: block; transition: transform var(--lg-dur-slide) var(--lg-spring); }
.nb-pin.is-on > span { transform: scale(1.3); }
.nb-pin--center > span { width: 18px; height: 18px; border-radius: 50%; background: var(--lg-accent); border: 3px solid var(--lg-white); box-shadow: 0 0 0 6px var(--lg-accent-soft), var(--lg-elev-1); }
.nb-pin--school > span { width: 13px; height: 13px; border-radius: var(--lg-r-2xs); background: var(--lg-orange); border: 2px solid var(--lg-white); box-shadow: var(--lg-elev-1); }
.nb-pin--park > span { width: 14px; height: 14px; border-radius: 50%; background: var(--lg-success-fill); border: 2px solid var(--lg-white); box-shadow: var(--lg-elev-1); }
.nb-lines { display: inline-flex; flex-wrap: nowrap; gap: 2px; }
/* MTA route bullets: the official route colours are data (they match the subway's own signs), so they stay
   the MTA's values, passed to the bullet as --c (fill) and --t (label). */
.nb-line { --c: var(--lg-text); --t: var(--lg-bg); display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--lg-r-pill); background: var(--c); color: var(--t); font: 700 var(--lg-t-caption)/1 var(--lg-font); border: 1.5px solid var(--lg-white); box-shadow: var(--lg-elev-1); }
.nb-line--mta { letter-spacing: .04em; }
.nb-line[data-line^="1"], .nb-line[data-line^="2"], .nb-line[data-line^="3"] { --c: #d82233; --t: var(--lg-white); }
.nb-line[data-line^="4"], .nb-line[data-line^="5"], .nb-line[data-line^="6"] { --c: #009952; --t: var(--lg-white); }
.nb-line[data-line^="7"] { --c: #9a38a1; --t: var(--lg-white); }
.nb-line[data-line="A"], .nb-line[data-line="C"], .nb-line[data-line="E"] { --c: #0062cf; --t: var(--lg-white); }
.nb-line[data-line="B"], .nb-line[data-line="D"], .nb-line[data-line="F"], .nb-line[data-line="M"] { --c: #eb6800; --t: var(--lg-white); }
.nb-line[data-line="G"] { --c: #799534; --t: var(--lg-white); }
.nb-line[data-line="J"], .nb-line[data-line="Z"] { --c: #8e5c33; --t: var(--lg-white); }
.nb-line[data-line="L"], .nb-line[data-line="S"], .nb-line[data-line="FS"], .nb-line[data-line="GS"], .nb-line[data-line="H"] { --c: #7c858c; --t: var(--lg-white); }
.nb-line[data-line="N"], .nb-line[data-line="Q"], .nb-line[data-line="R"], .nb-line[data-line="W"] { --c: #f6bc26; --t: var(--lg-black); }
.nb-line[data-line="T"] { --c: #008eb7; --t: var(--lg-white); }
.nb-line[data-line="SIR"], .nb-line[data-line="SI"] { --c: #1a4995; --t: var(--lg-white); }
/* Google's info window is always white: its words are dark in every palette. */
.gm-style .nb-pop strong { display: block; font-weight: 700; color: var(--lg-black); }
.gm-style .nb-pop span { display: block; margin-top: 2px; font-size: var(--lg-t-caption); color: color-mix(in srgb, var(--lg-black) 64%, transparent); }