/* stops.css: stop card and live stop board. */
#stopCard{position:absolute;z-index:1100;right:64px;top:64px;width:min(320px,calc(100% - 76px));background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:12px;display:grid;gap:8px}
#stopCard b{font:700 18px/1.15 var(--f-display);overflow-wrap:anywhere}
#stopCard .sub{color:var(--mute);font-size:12.5px;overflow-wrap:anywhere}
#stopCard .err{color:var(--warn);font-weight:600}
#stopCard .row{display:flex;gap:8px;flex-wrap:wrap}
#stopCard input{width:100%;min-width:0;min-height:44px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font:16px var(--f-mono)}
#stopCard .live{color:var(--mute);font-size:12.5px;min-height:1em}
#stopCard .live:empty{display:none}
#stopCard{max-height:calc(100% - 76px);overflow:auto}
#stopCard .sboard{display:grid;gap:6px;min-width:0}
#stopCard .sbh{font:700 12.5px var(--f-display);color:var(--mute);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
#stopCard .sbrow{min-height:44px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;text-align:left;width:100%;min-width:0;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
#stopCard .sbrow:hover{background:var(--paper)}
#stopCard .sbrow .rbadge{grid-row:auto}
#stopCard .sbmid{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center;min-width:0;font-size:12.5px}
#stopCard .sbdir{font-weight:600;overflow-wrap:anywhere}
#stopCard .sbdist{color:var(--mute)}
#stopCard .sbeta{display:grid;justify-items:end;text-align:right;font-size:12px;color:var(--mute)}
#stopCard .sbeta b{font:700 16px var(--f-display);color:var(--ink)}
#stopCard .sbeta b.rough{font-style:italic;font-weight:500;color:var(--mute)}
#stopCard .sbmsg{color:var(--mute);font-size:13px}
#stopCard .sbstale{color:var(--warn);font-weight:600;font-size:12.5px}
#stopCard .sbfine{color:var(--mute);font-size:12px}
#stopCard .alertrow{display:flex;flex-wrap:wrap;gap:6px 6px;align-items:center;font-size:12.5px;color:var(--mute);min-width:0}
#stopCard .alertrow select{min-height:44px;font-size:16px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
@media (max-width:820px),(max-height:500px){
  #stopCard{left:8px;right:64px;width:auto;top:60px;max-height:calc(100% - 90px)}
  #stage:has(#banner:not([hidden])) #stopCard,#stage:has(#idleBar:not([hidden])) #stopCard{top:100px;max-height:calc(100% - 128px)}
}
/* The stop card and the vehicle card (372px) do not fit side by side in a map under about 780px wide (a window under about 1180px, with
   the sidebar): the stop pin stays and the card returns when the vehicle card closes. */
@media (max-width:1180px),(max-height:500px){
  #detail:not([hidden]) ~ #stopCard{display:none}
}