/* Galway Pulse v23: distinct road, bus and insight workspaces. */
.tabs{gap:5px}
.tabs .tab{white-space:nowrap;transition:background-color .18s,color .18s,box-shadow .18s}
.tabs .tab-icon{display:inline-flex;align-items:center;justify-content:center;min-width:19px}
#roadStatusNotice,#roadStatusSource{display:none}
body[data-active-tab="map"] #dataNotice,
body[data-active-tab="map"] #snapshotAge{display:none}
body[data-active-tab="map"] #roadStatusNotice{display:inline}
body[data-active-tab="map"] #roadStatusSource{display:inline;margin-left:auto}
#mapView .bus-mode-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.bus-mode-summary .map-summary-card strong{font-variant-numeric:tabular-nums}
.bus-route-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 14px;
  border:1px solid #d7e2df;border-radius:13px;background:#f7faf8;padding:10px 14px}
.bus-route-key-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;
  font-weight:900;color:#55727c;margin-right:4px}
.bus-route-chip{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:11px;
  padding:6px 9px;border-radius:999px;border:1px solid #d3dedc;background:#fff;color:#244553}
.bus-route-chip i{display:inline-block;width:15px;height:5px;border-radius:4px;background:var(--route-colour)}
.bus-route-chip.selected{border-color:var(--teal);box-shadow:0 0 0 2px #319b891e}
.bus-route-key-help{flex:1 1 240px;font-size:10px;line-height:1.4;color:#52717a}
.map-list-empty{padding:12px 14px;font-size:12px;line-height:1.5;color:#607980}

body[data-map-mode="road"] #mapView .map-summary-card:nth-child(n+3),
body[data-map-mode="road"] #mapView [data-layer="buses"],
body[data-map-mode="road"] #mapView .map-layer-find,
body[data-map-mode="road"] #mapView .map-side{display:none!important}
body[data-map-mode="road"] #mapView .map-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-map-mode="road"] #mapView .map-layout{grid-template-columns:minmax(0,1fr)}

body[data-map-mode="bus"] #mapView [data-layer="flow"],
body[data-map-mode="bus"] #mapView [data-layer="cars"],
body[data-map-mode="bus"] #mapView>.traffic-thermometer,
body[data-map-mode="bus"] #mapView .pulse-brief,
body[data-map-mode="bus"] #mapView .hotspot-overview,
body[data-map-mode="bus"] #mapView .map-pin-coverage{display:none!important}
body[data-map-mode="bus"] #mapView .map-layout{grid-template-columns:minmax(0,1.8fr) minmax(265px,.68fr)}
/* In Bus mode the map's generic flow-key overlaps scheduled route colours.
   The dedicated route key above the map gives the correct route identity. */
body[data-map-mode="bus"] #mapView .map-key{display:none!important}
body[data-map-mode="bus"] #mapView .map-side{display:block}
body[data-map-mode="bus"] #mapView .map-key-note{max-width:360px}
body[data-map-mode="bus"] #mapView .map-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
body[data-map-mode="bus"] #mapView .map-layer-toolbar{border-color:#bfced3}
body[data-map-mode="bus"] #mapView .map-lede-title strong{letter-spacing:.7px}

#aboutView{margin-top:42px;padding-top:22px;border-top:1px solid var(--line)}
#aboutView .about-box{max-width:100%}
#roadsView .car-flow-panel{margin-top:5px}
:root[data-theme="dark"] body[data-map-mode="bus"] #mapView .map-layer-toolbar{border-color:#355965}
:root[data-theme="dark"] .bus-route-key{background:#152d37;border-color:#34505a}
:root[data-theme="dark"] .bus-route-key-title{color:#a7c9cf}
:root[data-theme="dark"] .bus-route-chip{background:#22404b;border-color:#3b5f68;color:#e9f5f2}
:root[data-theme="dark"] .bus-route-key-help,:root[data-theme="dark"] .map-list-empty{color:#b0ccd0}

@media(max-width:990px){
  .toolbar{align-items:flex-start}
  .tabs{max-width:100%}
  body[data-map-mode="bus"] #mapView .map-layout{grid-template-columns:1fr}
}
@media(max-width:650px){
  .tabs{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:3px}
  .tabs .tab{white-space:normal;font-size:11px;line-height:1.2;min-height:49px;padding:9px 5px;gap:5px}
  .tabs .tab-icon{font-size:15px;min-width:16px}
  #mapView .bus-mode-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bus-mode-summary .map-summary-card{padding:10px 8px}
  .bus-mode-summary .map-summary-card small{line-height:1.3}
  #aboutView{margin-top:30px}
}
@media(max-width:385px){
  .tabs .tab{font-size:10px;gap:3px}
  .tabs .tab-icon{font-size:13px;min-width:14px}
}