/* ================= finder, Pujo Metro: three bands in page flow (controls, the map, the diagram) =================
   Flat: solid tonal steps, 2 px rules, no glass, glow, blur, grain or surface gradients. Shapes: line badges radius 8,
   station dots full circles, buttons pills, nothing else rounded. Phone base (390 px); desktop in one min-width query at the end.
   Nothing sits on the map on phones but the tile credit and the two-finger hint. Only transform, opacity and stroke-dashoffset animate.
   The line badges, the line card, the pins and the route: finder-metro.css. The deck around the card: finder-deck.css. */
#finder{--fs:#3a0a17;--fs2:#4a1020;--fr:#5c1a2b;--fm:rgba(255,244,224,.7);--ground:#1f0309;
  padding-top:56px;padding-bottom:calc(3vh + var(--musicbar-h));clip-path:inset(0 -100vmax)}   /* the page ground shows through (the flowers fall over it); clip-path keeps the finder its own layer */
#finder [hidden]{display:none!important}
html.flock{overflow:hidden}
html.flock .apdock{z-index:140}   /* the 04 dock bar stays over the fullscreen map */
.fvh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#finder :is(.fchip,.fpill,.fgo,.fbig,.fst,.flhb):focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#finder .ph{position:static;inset:auto;display:inline-block;border-radius:0;opacity:1;transition:none;font-size:1.15em;line-height:1}   /* the hero's own .ph (photo slides) must not reach the icons */

/* ---------- the pill: every button in the finder ---------- */
.fpill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--fr);
  background:var(--fs);color:var(--ink);font:inherit;font-size:.92rem;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .15s ease}
.fpill:active{transform:scale(.97)}
.fpill:hover{border-color:var(--gold)}
.fpill-on{border-color:var(--lc,var(--gold));background:var(--lc,var(--gold));color:var(--deep)}

/* ---------- band 1, the controls: label, the field with its bottom rule, near me, the status line ---------- */
.fctl{position:relative;z-index:2;margin-bottom:16px}
.flabel{display:block;margin-bottom:2px;font-size:.82rem;font-weight:600;letter-spacing:0;color:var(--fm)}
.fsearch{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end}
.ffield{flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:8px;height:48px;border-bottom:2px solid var(--fr)}
.ffield:focus-within{border-bottom-color:var(--gold)}
.ffield>.ph{flex:0 0 auto;color:var(--gold);font-size:1.3rem}
#finder .ffield input{flex:1;min-width:0;height:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);font-size:1rem}
.ffield input::placeholder{color:rgba(255,244,224,.42)}
.ffield input::-webkit-search-cancel-button{filter:grayscale(1)}
.fgo{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:999px;background:var(--gold);color:var(--deep);cursor:pointer;
  transition:transform .15s ease}
.fgo:active{transform:scale(.94)}
.fnear{flex:0 0 auto}
.fnear[aria-busy="true"]{opacity:.6}
.fstat{margin-top:10px;padding-left:12px;border-left:2px solid var(--gold);font-size:.88rem;line-height:1.5}
.fstat.bad{border-left-color:#ff6a3d;color:#ffd0c0}

/* ---------- the one oversized type moment: the live count ---------- */
.fline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px 12px;margin-top:14px;min-width:0}
.fcount{flex:0 0 auto;display:flex;align-items:baseline;gap:6px}
.fcount b{font-family:'Hind Siliguri',sans-serif;font-size:clamp(4.5rem,22vw,7rem);font-weight:700;line-height:1;letter-spacing:0;color:var(--gold);
  font-variant-numeric:tabular-nums}
.fcount span{font-size:1.05rem;font-weight:600}
.fscope{flex:1 1 100%;min-width:0;font-size:.9rem;line-height:1.45;color:var(--fm)}

/* ---------- band 2, the map: a viewer, full bleed, 2 px rules top and bottom, flat ground while tiles load ---------- */
.fstage{position:relative;isolation:isolate;height:46dvh;min-height:320px;margin:0 -16px;overflow:hidden;scroll-margin-top:72px;
  border-block:2px solid var(--fr);background:var(--ground)}
#map{position:absolute;inset:0;z-index:0}
#map.leaflet-container{background:var(--ground);font:inherit}
.fstage .leaflet-tile{filter:grayscale(1) brightness(.5) contrast(1.15)}   /* OSM desaturated and darkened, flat: the routes carry the colour */
.fstage .leaflet-control-attribution{margin:0;padding:0 7px;background:var(--ground);color:rgba(255,244,224,.6);font-size:9px;line-height:1.6}
.fstage .leaflet-control-attribution a{color:rgba(255,210,122,.8)}
.leaflet-popup-content{color:#2a0410;font-family:'Hind Siliguri',sans-serif;line-height:1.5}
.leaflet-popup-content a{color:#b3122b;font-weight:600}
.fstage .leaflet-control-zoom{display:none}
.fstage.expanded{position:fixed;inset:0;z-index:130;height:100dvh;min-height:0;margin:0;border:0}
.fstage.expanded .leaflet-control-zoom{display:block}
.fclose{position:absolute;z-index:960;top:calc(14px + env(safe-area-inset-top));right:14px;border-color:var(--gold)}
.fbig{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:4px 0 0;padding:0 12px;border:0;background:none;
  color:var(--gold);font:inherit;font-size:.92rem;font-weight:600;cursor:pointer}

/* ---------- stage messages: the two-finger hint, the map that did not load ---------- */
.fhint{position:absolute;z-index:950;left:50%;top:46%;width:max-content;max-width:86%;padding:8px 16px;border:2px solid var(--gold);background:var(--fs);
  color:var(--ink);font-size:.92rem;font-weight:600;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.96);transition:opacity .25s,transform .25s}
.fhint.on{opacity:1;transform:translate(-50%,-50%)}
.ffail{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:var(--gold);font-weight:600;background:var(--ground)}

/* ---------- band 3 frame: the line deck (finder-deck.css, finder-metro.css) ---------- */
.fplaces{margin-top:20px}
.ffoot{margin-top:6px}

/* ---------- desktop: left 440 px = controls and the line deck; right = the map, sticky under the nav ---------- */
@media (min-width:900px){
  #finder{padding-top:9vh}
  .fwrap{display:grid;grid-template-columns:440px minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"ctl map" "places map";gap:0 28px}
  .fctl{grid-area:ctl}
  .fplaces{grid-area:places;margin-top:0}
  .fcount b{font-size:7rem}
  .fstage{grid-area:map;align-self:start;position:sticky;top:88px;height:calc(100vh - 112px);min-height:0;margin:0;border:2px solid var(--fr)}
  .fbig,.fhint{display:none}
  .fstage .leaflet-control-zoom{display:block}
}