/* v114-map.css — Local map (night build). Tokens only. */
/* The Local map (pages/llocal.js "THE LOCAL MAP"): Leaflet 1.9.4 on OpenStreetMap's tiles, dressed in the app's tokens. Leaflet's own sheet
   (leaflet.css, loaded with the library, after this one) lays out the panes and tiles; everything you see on top — the dots, the pins, the
   controls, the scale and the attribution — is drawn here, with one more class in the selector so it wins over Leaflet's defaults.
   The box is its own stacking context, so Leaflet's panes (z-index 400–1000) never rise over the top bar, a menu or a sheet. */

/* ---------- the box ---------- */
.lm-box,.lm-legend{--lm-pack:var(--c-green);--lm-near:var(--c-orange);--lm-out:var(--c-red)}
.lm-box{--lm-d:28px;--lm-hit:40px;--lm-ink:#1d1d1f;position:relative;isolation:isolate;height:420px;border:1px solid var(--line);border-radius:var(--r-12);overflow:hidden;background:var(--bg-2)}
.lm-map{position:absolute;inset:0;z-index:0}
/* the map itself takes focus (arrow keys move it, + and − zoom): its ring is drawn inside the box, over the tiles, since the box clips its edge */
.lm-box .leaflet-container:focus-visible::after{content:"";position:absolute;inset:0;z-index:1001;border-radius:var(--r-12);box-shadow:inset 0 0 0 2px var(--ring),inset 0 0 0 4px var(--bg);pointer-events:none}
.lm-box .leaflet-container{background:var(--bg-2);font-family:var(--font);font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--fg)}
/* the tiles are drawn 1 px larger than their step (pages/llocal.js), so they overlap and never leave a hairline; Leaflet's own seam fix (plus-lighter)
   would brighten that overlap into white lines, so it is turned off here */
.lm-box .leaflet-container img.leaflet-tile{mix-blend-mode:normal}
/* dark: the tiles alone are turned down to a dark map; the dots, pins and words on top keep their full contrast */
:root[data-theme="dark"] .lm-box .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.88) saturate(.4)}

/* while the library and the first tiles load: the box keeps its size (nothing moves when the map lands); the words show after half a second */
.lm-load{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--bg-2);color:var(--fg-2);font-size:var(--t-co);line-height:var(--lh-co)}
.lm-load span{opacity:0;animation:lm-late 0s linear .5s forwards}
@keyframes lm-late{to{opacity:1}}

/* "Use ⌘ + scroll to zoom the map" / "Use two fingers to move the map" — shown for a moment when the page scrolls over the map */
.lm-hint{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.lm-hint span{padding:8px 14px;border-radius:var(--r-full);background:var(--inv);color:var(--inv-fg);font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);box-shadow:var(--sh-med)}
.lm-hint.is-on{opacity:1}

/* ---------- the markers (a zero-size anchor; the dot or pin is centred on it) ---------- */
.lm-box .leaflet-marker-icon.lm-mk{background:none;border:0}
.lm-mk > *{pointer-events:auto}

/* a check: coloured by rank, its number inside, a ring of the page colour so it reads on any tile */
.lm-pt{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:var(--lm-d);height:var(--lm-d);padding:0;transform:translate(-50%,-50%);border:0;border-radius:50%;
  font:inherit;font-size:calc(var(--lm-d) * .4);line-height:1;font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;color:var(--lm-ink);cursor:pointer;
  box-shadow:0 0 0 2px var(--bg),var(--sh-low);transition:filter var(--dur-1) var(--ease-out)}
.lm-pt::after{content:"";position:absolute;left:50%;top:50%;width:var(--lm-hit);height:var(--lm-hit);transform:translate(-50%,-50%);border-radius:50%}
.lm-pt.is-pack{background:var(--lm-pack)}
.lm-pt.is-near{background:var(--lm-near)}
.lm-pt.is-far{background:color-mix(in srgb,var(--fg) 64%,var(--bg));color:var(--bg)}   /* an opaque grey (the quaternary label is see-through in dark): ≥ 5:1 for its number in both themes */
.lm-pt.is-out{background:var(--lm-out);font-size:calc(var(--lm-d) * .32)}
.lm-pt.is-home{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--fg),var(--sh-low)}
.lm-pt.is-sel{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--c-blue),var(--sh-low)}
.lm-box.is-tight .lm-pt span{display:none}
/* P6 V15: rank is never told by colour alone (WCAG 1.4.1) — zoomed out, where the number no longer fits, each group keeps a shape: the map pack a
   filled dot, 4–10 a ring, 11–20 a small dot, not in the first 20 a cross. Both legends show the same shapes. */
.lm-box.is-tight .lm-pt.is-near{background:var(--bg);border:calc(var(--lm-d) * .3) solid var(--lm-near)}
.lm-box.is-tight .lm-pt.is-far{transform:translate(-50%,-50%) scale(.62)}
.lm-box.is-tight .lm-pt.is-out::before{content:"×";font-size:var(--lm-d);line-height:1;font-weight:var(--w-semibold);color:var(--bg);transform:translateY(-.06em)}
@media (hover:hover){.lm-pt:hover{filter:brightness(1.08) saturate(1.05)}}

/* a location: a dot at its address and its name beside it (to the left when another pin or the edge is in the way) */
.lm-box a.lm-pin,.lm-pin{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;transform:translate(-7px,-50%);white-space:nowrap;color:var(--fg);text-decoration:none;border-radius:var(--r-full)}
.lm-pin::after{content:"";position:absolute;inset:-10px -4px}
.lm-box a.lm-pin.is-left,.lm-pin.is-left{flex-direction:row-reverse;transform:translate(calc(-100% + 7px),-50%)}   /* the a.lm-pin rule above out-ranked .is-left, so the flip never moved the label (Fort Worth covered Dallas) */
.lm-pin.is-up .lm-pin-l{transform:translateY(-15px)}
.lm-pin.is-down .lm-pin-l{transform:translateY(15px)}
/* fix round 1 (Oct 8): no room beside the dot — the name centred under (or over) it; the dot stays on the address */
.lm-box a.lm-pin.is-below,.lm-pin.is-below{flex-direction:column;gap:4px;transform:translate(-50%,-7px)}
.lm-box a.lm-pin.is-above,.lm-pin.is-above{flex-direction:column-reverse;gap:4px;transform:translate(-50%,calc(-100% + 7px))}
.lm-pin.is-quiet .lm-pin-l{display:none}
.lm-pin.is-quiet:hover .lm-pin-l,.lm-pin.is-quiet:focus-visible .lm-pin-l{display:inline-flex;position:relative;z-index:2}
.lm-pin-d{flex:none;width:14px;height:14px;border-radius:50%;background:var(--fg);box-shadow:0 0 0 3px var(--bg),var(--sh-low)}
.lm-pin-l{display:inline-flex;align-items:baseline;gap:6px;min-height:24px;padding:3px 10px;border-radius:var(--r-full);background:var(--bg);box-shadow:0 0 0 1px var(--line),var(--sh-low);font-size:var(--t-meta);line-height:var(--lh-meta)}
.lm-pin-l b{font-weight:var(--w-semibold);color:var(--fg)}
.lm-pin-l span{color:var(--fg-2);font-variant-numeric:tabular-nums}
@media (hover:hover){.lm-pin:hover .lm-pin-l{background:var(--hover-solid)}}

/* ---------- the controls: zoom in, zoom out, fit — one row, the app's buttons ---------- */
.lm-box .leaflet-control.lm-ctl{display:flex;margin:10px 0 0 10px;border-radius:var(--r-ctl);background:var(--bg);box-shadow:0 0 0 1px var(--line),var(--sh-low)}
.lm-ctl button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:0;background:none;color:var(--fg);cursor:pointer}
.lm-ctl button:first-child{border-radius:var(--r-ctl) 0 0 var(--r-ctl)}
.lm-ctl button:last-child{border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.lm-ctl button + button{box-shadow:inset 1px 0 0 var(--line)}
@media (hover:hover){.lm-ctl button:hover{background:var(--hover)}}
.lm-box .leaflet-bottom .leaflet-control-scale{margin:0 0 8px 10px}
.lm-box .leaflet-container .leaflet-control-scale-line{padding:0 6px;border:2px solid var(--fg-3);border-top:0;background:var(--bg);color:var(--fg-2);font-size:var(--t-sh);line-height:var(--lh-sh);text-shadow:none}
.lm-box .leaflet-container .leaflet-control-attribution{padding:2px 8px;border-radius:var(--r-6) 0 0 0;background:var(--bg);color:var(--fg-2);font-size:var(--t-sh);line-height:var(--lh-sh)}
.lm-box .leaflet-container .leaflet-control-attribution a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}

/* ---------- around the map ---------- */
.lm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 12px}
.seg.lm-locs{flex-wrap:wrap;row-gap:4px;box-shadow:none}
.lm-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;padding:0;list-style:none}
.lm-legend li{display:flex;align-items:center;gap:8px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.lm-legend i{flex:none;width:10px;height:10px;border-radius:50%}
.lm-legend i.is-pack{background:var(--lm-pack)}.lm-legend i.is-near{background:var(--lm-near)}.lm-legend i.is-far{background:color-mix(in srgb,var(--fg) 64%,var(--bg))}.lm-legend i.is-out{background:var(--lm-out)}
.lm-legend i.is-home{box-shadow:inset 0 0 0 2px var(--fg)}
/* P6 V15: the legends draw the shapes too — a ring for 4–10, a small dot for 11–20, a cross for not in the first 20 */
.lm-legend > li > i.is-near{background:none;box-shadow:inset 0 0 0 3px var(--lm-near)}
.lc-gstats .lc-legend i.is-near{background:none;box-shadow:inset 0 0 0 3px var(--c-orange)}
.lm-legend > li > i.is-far,.lc-gstats .lc-legend i.is-far{width:6px;height:6px;margin:2px}
.lm-legend > li > i.is-out,.lc-gstats .lc-legend i.is-out{position:relative;width:12px;height:12px;margin:-1px}
.lm-legend > li > i.is-out{background:var(--lm-out)}
.lc-gstats .lc-legend i.is-out{background:var(--c-red)}
.lm-legend > li > i.is-out::before,.lm-legend > li > i.is-out::after,.lc-gstats .lc-legend i.is-out::before,.lc-gstats .lc-legend i.is-out::after{content:"";position:absolute;left:2.5px;top:5.25px;width:7px;height:1.5px;border-radius:1px;background:var(--bg);transform:rotate(45deg)}
.lm-legend > li > i.is-out::after,.lc-gstats .lc-legend i.is-out::after{transform:rotate(-45deg)}
.lm-foot{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:8px;min-width:0;max-width:100%}
.lm-how{margin:0}
.lm-card .lm-foot + .sv-cap{margin-top:6px}

/* the text alternative: every point in a real table, in a fold; the table scrolls inside its own box on a phone */
.lm-alt{align-self:stretch;max-width:100%}
.lm-tw{max-width:100%;max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-8)}
.lm-tbl{width:100%;border-collapse:collapse;font-size:var(--t-co);line-height:var(--lh-co);font-variant-numeric:tabular-nums}
.lm-tbl caption{padding:8px 12px;text-align:left;color:var(--fg-2);caption-side:top}
.lm-tbl th,.lm-tbl td{padding:6px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.lm-tbl thead th{position:sticky;top:0;background:var(--bg);font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-medium);color:var(--fg-2)}
.lm-tbl tbody th{font-weight:var(--w-medium);color:var(--fg);white-space:nowrap}
.lm-tbl td{color:var(--fg-2)}

/* ---------- no map (offline, a blocked CDN): the note, then the same points on the drawn street pattern ---------- */
.lm-box.is-off{height:auto;overflow:visible;isolation:auto;border:0;border-radius:0;background:none}
/* fix round 1 (Oct 8): the icon keeps the first line (the words and the button wrap beside it, never leaving it alone on a phone); the box keeps
   the live map's size, so nothing jumps when the map fails — the locations in a frame of their real proportions centred in it, the grid centred */
.lm-note{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.lm-note > svg{flex:none;margin-top:calc((var(--lh-co) - 14px) / 2);color:var(--fg-3)}
.lm-box.is-off .lc-pt.is-out{color:var(--lm-ink)}
.lm-fbpins{position:relative;height:420px;border:1px solid var(--line);border-radius:var(--r-12);background:var(--bg-2);overflow:hidden}
.lm-fbin{position:absolute;top:16%;left:50%;z-index:1;height:68%;max-width:calc(100% - 48px);transform:translateX(-50%)}
.lm-fbpins .lm-pin{position:absolute;z-index:1}
.lm-box.is-off > .lc-map{display:flex;align-items:center;justify-content:center;width:100%;height:420px}

/* ---------- the Map rankings card: the map takes the wide column, the numbers sit beside it; stacked on a phone ---------- */
.lc-gridwrap.lm-on{grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr)}
.lc-gridwrap.lm-on > .lc-gcol{align-items:stretch}
.lc-gridwrap.lm-on > .lc-gcol > .lm-box.is-off{align-self:stretch}
.lc-gridwrap.lm-on .lc-stamp{margin-top:8px}

@media (max-width:900px){
  .lc-gridwrap.lm-on{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .lm-box{height:auto;aspect-ratio:5 / 6;max-height:520px}
  .lm-box.is-off{aspect-ratio:auto;max-height:none}
  .lm-fbpins,.lm-box.is-off > .lc-map{height:auto;aspect-ratio:5 / 6;max-height:520px}
  .lm-ctl button{width:44px;height:44px}
  .seg.lm-locs > button{height:40px}
}
@media (prefers-reduced-motion:reduce){
  .lm-hint,.lm-pt{transition:none}
}
/* Increase Contrast (light) darkens the system fills; the numbers in the dots are dark ink, so the dots keep the standard fills (≥ 4.5:1) */
@media (prefers-contrast:more){
  :root:not([data-theme="dark"]) .lm-box,:root:not([data-theme="dark"]) .lm-legend{--lm-pack:#34c759;--lm-near:#ff8d28;--lm-out:#ff383c}
}