/* ================= finder: the line deck (one thana card at a time, every width) =================
   Nav row (two 44 px pills around the position), the one-time hint, the card in a view that only pans vertically for the page,
   a row of ticks in the line colours. Flat like the rest: solid tones, no glow. Only transform and opacity animate. */
.fdnav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;margin-bottom:12px}
.fdbtn{width:44px;padding:0}
#finder .fdbtn .ph{font-size:1.3rem;color:var(--gold)}
.fdbtn:disabled{opacity:.4;cursor:default}
.fdpos{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;line-height:1.35}
.fdpos b{font-size:.88rem;font-weight:700;letter-spacing:0;color:var(--gold);font-variant-numeric:tabular-nums}
.fdpos span{max-width:100%;font-size:1.05rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fdhint{display:flex;align-items:center;justify-content:center;gap:8px;margin:-4px 0 12px;font-size:.86rem;line-height:1.4;color:var(--fm);transition:opacity .3s ease}
#finder .fdhint .ph{font-size:1.2rem;color:var(--gold)}
.fdhint.out{opacity:0}

/* the card view: vertical page scroll always belongs to the browser, sideways belongs to the deck */
.fdview{touch-action:pan-y;overflow-x:clip;outline-offset:4px}
.fdview:focus-visible{outline:2px solid var(--ink)}
.fdrag{user-select:none;-webkit-user-select:none}
.fdrag .fln{cursor:grabbing}
.fdview .fln{margin-top:0;border-top-width:4px;will-change:transform}
.fdmap{width:100%}

/* ticks: one per line in the deck, the one in view twice as long; each a 44 px tall target */
.fticks{display:flex;justify-content:center;margin-top:6px}
.ftick{flex:1 1 0;max-width:24px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer}
.ftick span{display:block;width:4px;height:12px;background:var(--lc);opacity:.55;transition:transform .2s ease,opacity .2s ease}
.ftick[aria-current="true"] span{opacity:1;transform:scaleY(2)}
.ftick:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

/* sync: the badge of the card in view wears an outline ring (the filled state stays for a chosen line); other lines' pins dim */
.fchips{padding-block:5px 7px}
.fchip.fcur{outline:2px solid var(--lc,var(--gold));outline-offset:3px}
.fstage .leaflet-marker-icon.fdim:not(.active){opacity:.45}

@media (prefers-reduced-motion:reduce){
  .fdhint,.ftick span{transition:none}
}