/* Place autocomplete — the combobox panel behind the origin and destination
   fields (place-autocomplete.js).

   Its own file rather than part of dashboard.css because the widget is used
   on the departure board, and that board renders in TWO layouts: the portal
   chrome for a signed-in rider and the public chrome for a visitor. The
   public layout does not load dashboard.css, so for every guest the panel
   arrived completely unstyled — suggestions painted as bare text over the
   page with no card, no padding and no stacking context.

   Needs four tokens from its host: --primary, --primary-soft, --border and
   --muted. */

/* ========== PLACE AUTOCOMPLETE ==========
   Combobox panel for origin/destination fields (place-autocomplete.js). */
.pac{position:relative;display:block}
/* Raised only while open. A sibling further down the page that carries a
   transform or animation (the live ticker has a fadeUp) creates its own
   stacking context and would paint over this panel no matter how high the
   panel's own z-index is — the wrapper has to win, not the child. Kept
   below the sticky topbar (z-index 50) so it never covers the chrome. */
.pac.is-open{z-index:40}
/* The card holding the field, raised while a panel is open. Set by the script
   only when an ancestor actually traps the panel (an animated card carries a
   transform, which creates a stacking context and scopes the panel's z-index
   inside it). Below the sticky topbar so the chrome stays reachable. */
.pac-host-open{position:relative;z-index:45}
.pac-panel{
    position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:120;
    background:#fff;border:1px solid var(--border);border-radius:12px;
    box-shadow:0 18px 44px rgba(15,23,42,.16);
    max-height:302px;overflow-y:auto;padding:5px;
    /* Allowed to be wider than the field it hangs off. Constrained to the
       field's width, a station like "Toronto Union" lost to the mode icons and
       route count beside it and truncated to "Toronto …" — the one part of the
       row the rider is reading. Capped so it cannot run off a narrow screen. */
    min-width:290px;max-width:min(420px,calc(100vw - 32px));
}
.pac-panel[hidden]{display:none}
.pac-head{
    font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
    color:var(--muted);padding:7px 10px 5px;
}
.pac-opt{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:9px 11px;border-radius:9px;cursor:pointer;font-size:13.5px;
}
/* Hover and keyboard share one visual state — a rider using arrow keys should
   see exactly what a rider using a mouse sees. */
.pac-opt:hover,.pac-opt.is-active{background:var(--primary-soft)}
.pac-opt.is-active .pac-name{color:var(--primary)}
/* The name takes the slack and the meta keeps its intrinsic width, so a long
   station name shortens the gap before it ever shortens itself. */
.pac-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pac-name b{color:var(--primary);font-weight:800}
.pac-meta{display:flex;align-items:center;gap:7px;flex:none;color:var(--muted);font-size:11px}
.pac-meta i{font-size:11px}
.pac-count{white-space:nowrap}
.pac-empty{padding:20px 12px;text-align:center;color:var(--muted);font-size:13px}

/* The panel would otherwise be clipped by the search card on a phone. */
@media(max-width:640px){ .pac-panel{max-height:240px} }