.driver-console{max-width:42rem}
.driver-console h2{margin-top:0}
.driver-console .actions{margin-top:16px}
.driver-state-active{background:#dff3e5;color:#145132}
.live-vehicles,#transport-demo{scroll-margin-top:100px}
.live-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;margin-top:16px}
.live-grid:has(#live-map[hidden]){grid-template-columns:1fr}
.live-grid:has(#live-map[hidden])>div:first-child{display:none}
.live-map{position:relative;min-height:330px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#f2efe6}
.live-map canvas,.live-map #live-pins{position:absolute;inset:0;width:100%;height:100%}
.live-pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:42px;height:42px;border:2px solid #fff;border-radius:50%;background:#07574f;color:white;box-shadow:0 2px 5px #22363355;cursor:pointer}
.live-pin[data-selected=true]{background:#7a411c;z-index:1}
.live-me{position:absolute;transform:translate(-50%,-50%);width:14px;height:14px;border:2px solid white;border-radius:50%;background:#275ad0;box-shadow:0 0 0 2px #275ad0}
#live-list li:focus{outline:2px solid var(--green);outline-offset:2px}
#live-list button,#live-list .button{margin-top:5px}
.taxi-booking{margin-top:16px}
.taxi-booking h3{margin-top:0}
.taxi-booking button{margin-top:8px}
@media(max-width:760px){.live-grid{grid-template-columns:1fr}.live-map{min-height:245px}.driver-console .actions button{width:100%}}