/* V122.5 — stop departure board matches vehicle popup. Scoped to stopPanel only. */
#stopPanel .depRow.boardRow.stopVehicleStyle{
  display:grid!important;
  grid-template-columns:58px 48px minmax(0,1fr) minmax(58px,auto)!important;
  align-items:center!important;
  column-gap:8px!important;
  min-height:69px!important;
  padding:9px 12px!important;
  line-height:1.25!important;
}
#stopPanel .stopVehicleStyle .depTime{
  width:58px!important;min-width:0!important;align-items:flex-start!important;
  justify-content:center!important;text-align:left!important;
  font-size:15px!important;font-weight:760!important;line-height:1.12!important;
  color:var(--text-primary)!important;gap:2px!important;
}
#stopPanel .stopVehicleStyle .depTimeMain{font-size:inherit!important;font-weight:inherit!important;color:var(--text-primary)!important}
#stopPanel .stopVehicleStyle .depDelayInline{
  display:block!important;margin:0!important;padding:0!important;
  font-size:11px!important;font-weight:760!important;line-height:1.05!important;
  white-space:nowrap!important;background:none!important;
}
#stopPanel .stopVehicleStyle .depDelayInline.late{color:#c16b00!important}
#stopPanel .stopVehicleStyle .depDelayInline.early{color:#7c8791!important}
#stopPanel .stopVehicleStyle .ux-dep-planned{font-size:9px!important;white-space:nowrap!important;color:var(--text-muted)!important}
#stopPanel .stopVehicleStyle .departure-line.depCarrierLine{
  display:inline-flex!important;justify-content:center!important;align-items:center!important;
  min-width:42px!important;max-width:66px!important;min-height:28px!important;
  padding:5px 7px!important;border-radius:7px!important;
  background:var(--dep-carrier-color,#1d6f42)!important;
  color:var(--dep-carrier-text,#ffffff)!important;
  font-size:12px!important;font-weight:790!important;line-height:1!important;
  white-space:nowrap!important;
}
#stopPanel .stopVehicleStyle .depMain{min-width:0!important;overflow:visible!important}
#stopPanel .stopVehicleStyle .depMain>b{
  min-width:0!important;margin:0!important;font-size:13px!important;font-weight:760!important;
  line-height:1.25!important;white-space:nowrap!important;overflow:hidden!important;
  text-overflow:ellipsis!important;color:var(--text-primary)!important;
}
#stopPanel .stopVehicleStyle .depTripMeta{
  display:flex!important;align-items:center!important;flex-wrap:wrap!important;
  min-width:0!important;gap:2px 7px!important;margin-top:3px!important;
  font-size:10px!important;font-weight:450!important;line-height:1.25!important;
  color:var(--text-muted)!important;
}
#stopPanel .stopVehicleStyle .depStatusCol{min-width:0!important;align-items:flex-end!important;gap:0!important}
#stopPanel .stopVehicleStyle .depStatus{
  display:inline-flex!important;gap:4px!important;align-items:center!important;
  min-height:24px!important;max-width:100%!important;padding:4px 7px!important;
  border-radius:999px!important;font-size:10px!important;font-weight:690!important;
  line-height:1.1!important;white-space:nowrap!important;
}
#stopPanel .stopVehicleStyle .depStatus i{
  display:inline-block!important;width:6px!important;height:6px!important;min-width:6px!important;
  border-radius:50%!important;background:currentColor!important;
}
#stopPanel .stopVehicleStyle .depStatus.success{background:#e1f4e8!important;color:#106b39!important}
#stopPanel .stopVehicleStyle .depStatus.warning{background:#fff0d8!important;color:#a85a00!important}
#stopPanel .stopVehicleStyle .depStatus.neutral{background:#eaf0f4!important;color:#566675!important}
#stopPanel .stopVehicleStyle .depFollowAction{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:5px!important;min-width:44px!important;min-height:44px!important;
  padding:9px 7px!important;margin:-9px 0!important;
  border:0!important;border-radius:8px!important;
  color:#1272bd!important;background:transparent!important;
  font-size:10px!important;font-weight:700!important;cursor:pointer!important;
}
#stopPanel .stopVehicleStyle .depFollowAction svg{width:14px!important;height:14px!important}
#stopPanel .depRow.boardRow.stopVehicleStyle.depClickable{min-height:69px!important}
/* Only interactive controls require 44px touch targets, not information-only badges. */
#stopPanel>header>button,#stopPanel>.sheet-handle,
#stopPanel .stopTabs button,#stopPanel .stopLineChip,
#stopPanel .ux-stop-lines>summary,#stopPanel [data-more-departures],
#stopPanel [data-stop-reset],#stopPanel [data-stop-retry],#stopPanel [data-ux-retry-stop]{
  min-width:44px!important;min-height:44px!important;
}
#stopPanel>header{grid-template-columns:minmax(0,1fr) 44px 44px!important;align-items:center!important}
#stopPanel>header>button{width:44px!important;height:44px!important;padding:8px!important}
#stopPanel .stopTabs button,#stopPanel .stopLineChip{padding:10px 12px!important}
#stopPanel .ux-stop-lines>summary{display:flex!important;align-items:center!important}
#stopPanel .stopVehicleStyle .depFollowAction:focus-visible,
#stopPanel .stopTabs button:focus-visible,#stopPanel>header>button:focus-visible{
  outline:2px solid var(--accent,#1d6f42)!important;outline-offset:2px!important;
}
body.theme-night #stopPanel .stopVehicleStyle .depDelayInline.late{color:#ffbd68!important}
body.theme-night #stopPanel .stopVehicleStyle .depDelayInline.early{color:#aab7c1!important}
body.theme-night #stopPanel .stopVehicleStyle .depStatus.success{background:#143e2b!important;color:#8bf1aa!important}
body.theme-night #stopPanel .stopVehicleStyle .depStatus.warning{background:#493016!important;color:#ffcc80!important}
body.theme-night #stopPanel .stopVehicleStyle .depStatus.neutral{background:#27343e!important;color:#c3cdd5!important}
body.theme-night #stopPanel .stopVehicleStyle .depFollowAction{color:#7dbfff!important}
@media(max-width:760px){
 #stopPanel .depRow.boardRow.stopVehicleStyle{
  grid-template-columns:49px 43px minmax(0,1fr) 61px!important;
  column-gap:6px!important;min-height:69px!important;padding:8px 10px!important;
 }
 #stopPanel .stopVehicleStyle .depTime{width:49px!important;font-size:14px!important}
 #stopPanel .stopVehicleStyle .departure-line.depCarrierLine{min-width:40px!important;padding:5px 5px!important;font-size:11px!important}
 #stopPanel .stopVehicleStyle .depMain>b{font-size:12px!important}
 #stopPanel .stopVehicleStyle .depTripMeta{font-size:9px!important;gap:1px 4px!important}
 #stopPanel .stopVehicleStyle .depStatus{font-size:9px!important;padding:4px 5px!important}
 #stopPanel .stopVehicleStyle .depDelayInline{font-size:11px!important}
 #stopPanel .stopVehicleStyle .ux-dep-planned{font-size:8px!important}
}
@media(max-width:390px){
 #stopPanel .depRow.boardRow.stopVehicleStyle{grid-template-columns:47px 41px minmax(0,1fr) 57px!important;column-gap:5px!important;padding:8px!important}
 #stopPanel .stopVehicleStyle .depStatus{font-size:8.5px!important}
}

/* R2 visual QA: override the older approved-map layout and its 32px targets.
   That sheet uses body[data-approved-map-ux], so simple #stopPanel rules
   above were insufficient despite the later CSS load order. */
body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle{
 display:grid!important;
 grid-template-columns:58px 48px minmax(0,1fr) 66px!important;
 grid-template-areas:"time line destination status"!important;
 column-gap:8px!important;row-gap:0!important;
 align-items:center!important;
 min-height:72px!important;padding:10px 12px!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle>.depTime{
 grid-area:time!important;width:58px!important;min-width:0!important;
 align-items:flex-start!important;justify-content:center!important;text-align:left!important;
 font-size:15px!important;line-height:1.12!important;font-weight:760!important;
 overflow:visible!important;white-space:nowrap!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle>.depTime .depTimeMain{
 font-size:15px!important;color:var(--text-primary)!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle>.departure-line.depCarrierLine{
 grid-area:line!important;align-self:center!important;
 width:48px!important;min-width:0!important;max-width:48px!important;
 min-height:30px!important;
 background:var(--dep-carrier-color,#1d6f42)!important;
 color:var(--dep-carrier-text,#ffffff)!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle>.depMain{
 grid-area:destination!important;align-self:center!important;
 min-width:0!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle .depMain>b{
 font-size:13px!important;line-height:1.25!important;font-weight:760!important;
 white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle .depMain>small{
 font-size:10px!important;line-height:1.25!important;margin-top:3px!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle>.depStatusCol{
 grid-area:status!important;justify-content:flex-end!important;
 align-items:flex-end!important;align-self:center!important;
 flex-direction:column!important;min-width:0!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle .depStatus{
 min-height:24px!important;font-size:10px!important;font-weight:700!important;
 padding:4px 7px!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle .depFollowAction{
 min-width:44px!important;min-height:44px!important;
 padding:10px 8px!important;display:inline-flex!important;align-items:center!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody .stopTabs button,
body[data-approved-map-ux] #stopPanel #stopPanelBody .stopLineChip,
body[data-approved-map-ux] #stopPanel #stopPanelBody [data-more-departures],
body[data-approved-map-ux] #stopPanel #stopPanelBody .ux-stop-lines>summary{
 min-height:44px!important;padding-top:11px!important;padding-bottom:11px!important;
}
@media(max-width:760px){
 body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle{
  grid-template-columns:49px 43px minmax(0,1fr) 61px!important;
  grid-template-areas:"time line destination status"!important;
  column-gap:6px!important;min-height:70px!important;padding:9px 10px!important;
 }
 body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle>.depTime{width:49px!important;font-size:14px!important}
 body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle>.depTime .depTimeMain{font-size:14px!important}
 body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle>.departure-line.depCarrierLine{width:43px!important;max-width:43px!important}
 body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle .depMain>b{font-size:12px!important}
 body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle .depStatus{font-size:9px!important;padding:4px 5px!important}
}
@media(max-width:390px){
 body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle{
  grid-template-columns:47px 41px minmax(0,1fr) 57px!important;
  column-gap:5px!important;padding:9px 8px!important;
 }
 body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle>.depTime{width:47px!important}
 body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle>.departure-line.depCarrierLine{width:41px!important;max-width:41px!important}
}

/* V122.9 compact stop board: filter directly after modal tabs.
 * Keep 44px touch targets, exact route colors and dark-mode source chips. */
body[data-approved-map-ux] #stopPanel #stopPanelBody>.stopFilterBar{
  padding:6px 12px!important;margin:0!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody>.stopFilterBar .stopTabs{
  margin:0!important;gap:7px!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody>.stopFilterBar .stopTabs button{
  min-height:44px!important;padding:9px 13px!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody>.ux-stop-lines{
  margin:0!important;padding:0 12px!important;
  min-height:44px!important;border-bottom:1px solid var(--border,#dae5df)!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody>.ux-stop-lines>summary{
  list-style:none!important;display:flex!important;align-items:center!important;
  min-height:44px!important;min-width:44px!important;cursor:pointer!important;
  font-size:12px!important;color:var(--muted,#526c65)!important;
  padding:0!important;margin:0!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody>.ux-stop-lines>summary::-webkit-details-marker{display:none!important}
body[data-approved-map-ux] #stopPanel #stopPanelBody>.ux-stop-lines>summary::after{
  content:'⌄';margin-left:auto;font-size:15px;color:inherit;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody>.ux-stop-lines[open]>summary::after{transform:rotate(180deg)}
body[data-approved-map-ux] #stopPanel #stopPanelBody>.ux-departure-heading{
  padding:7px 12px 5px!important;margin:0!important;min-height:31px!important;
  align-items:center!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody>.ux-departure-heading h2{
  font-size:13px!important;line-height:1.3!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody>.ux-departure-heading small{
  font-size:10px!important;white-space:nowrap!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle{
  min-height:72px!important;padding-top:5px!important;padding-bottom:5px!important;
}
body[data-approved-map-ux] #stopPanel #stopPanelBody .stopLineChip,
body[data-approved-map-ux] #stopPanel #stopPanelBody .ux-stop-lines button{
  min-height:44px!important;
}
body.theme-night[data-approved-map-ux] #stopPanel #stopPanelBody>.ux-stop-lines{
  border-bottom-color:var(--border,#456175)!important;
}
@media(max-width:760px){
 body[data-approved-map-ux] #stopPanel #stopPanelBody>.stopFilterBar{padding:5px 10px!important}
 body[data-approved-map-ux] #stopPanel #stopPanelBody>.ux-stop-lines{padding:0 10px!important}
 body[data-approved-map-ux] #stopPanel #stopPanelBody>.ux-departure-heading{padding:6px 10px 5px!important}
 body[data-approved-map-ux] #stopPanel #stopPanelBody .depRow.boardRow.stopVehicleStyle{
  padding-top:5px!important;padding-bottom:5px!important;
 }
}