/* node_modules/.pnpm/maplibre-gl@5.23.0/node_modules/maplibre-gl/dist/maplibre-gl.css */
.maplibregl-map {
font:
12px/20px Helvetica Neue,
Arial,
Helvetica,
sans-serif;
overflow: hidden;
position: relative;
-webkit-tap-highlight-color: rgb(0 0 0/0);
}
.maplibregl-canvas {
left: 0;
position: absolute;
top: 0;
}
.maplibregl-map:fullscreen {
height: 100%;
width: 100%;
}
.maplibregl-ctrl-group button.maplibregl-ctrl-compass {
touch-action: none;
}
.maplibregl-canvas-container.maplibregl-interactive,
.maplibregl-ctrl-group button.maplibregl-ctrl-compass {
cursor: grab;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer {
cursor: pointer;
}
.maplibregl-canvas-container.maplibregl-interactive:active,
.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active {
cursor: grabbing;
}
.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,
.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas {
touch-action: pan-x pan-y;
}
.maplibregl-canvas-container.maplibregl-touch-drag-pan,
.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas {
touch-action: pinch-zoom;
}
.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,
.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas {
touch-action: none;
}
.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures,
.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures .maplibregl-canvas {
touch-action: pan-x pan-y;
}
.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-top-right {
pointer-events: none;
position: absolute;
z-index: 2;
}
.maplibregl-ctrl-top-left {
left: 0;
top: 0;
}
.maplibregl-ctrl-top-right {
right: 0;
top: 0;
}
.maplibregl-ctrl-bottom-left {
bottom: 0;
left: 0;
}
.maplibregl-ctrl-bottom-right {
bottom: 0;
right: 0;
}
.maplibregl-ctrl {
clear: both;
pointer-events: auto;
transform: translate(0);
}
.maplibregl-ctrl-top-left .maplibregl-ctrl {
float: left;
margin: 10px 0 0 10px;
}
.maplibregl-ctrl-top-right .maplibregl-ctrl {
float: right;
margin: 10px 10px 0 0;
}
.maplibregl-ctrl-bottom-left .maplibregl-ctrl {
float: left;
margin: 0 0 10px 10px;
}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl {
float: right;
margin: 0 10px 10px 0;
}
.maplibregl-ctrl-group {
background: #fff;
border-radius: 4px;
}
.maplibregl-ctrl-group:not(:empty) {
box-shadow: 0 0 0 2px rgba(0, 0, 0, .1);
}
@media (forced-colors: active) {
.maplibregl-ctrl-group:not(:empty) {
box-shadow: 0 0 0 2px ButtonText;
}
}
.maplibregl-ctrl-group button {
background-color: transparent;
border: 0;
box-sizing: border-box;
cursor: pointer;
display: block;
height: 29px;
outline: none;
padding: 0;
width: 29px;
}
.maplibregl-ctrl-group button + button {
border-top: 1px solid #ddd;
}
.maplibregl-ctrl button .maplibregl-ctrl-icon {
background-position: 50%;
background-repeat: no-repeat;
display: block;
height: 100%;
width: 100%;
}
@media (forced-colors: active) {
.maplibregl-ctrl-icon {
background-color: transparent;
}
.maplibregl-ctrl-group button + button {
border-top: 1px solid ButtonText;
}
}
.maplibregl-ctrl button::-moz-focus-inner {
border: 0;
padding: 0;
}
.maplibregl-ctrl-attrib-button:focus,
.maplibregl-ctrl-group button:focus {
box-shadow: 0 0 2px 2px #0096ff;
}
.maplibregl-ctrl button:disabled {
cursor: not-allowed;
}
.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon {
opacity: .25;
}
@media (hover: hover) {
.maplibregl-ctrl button:not(:disabled):hover {
background-color: rgba(0, 0, 0, .05);
}
}
.maplibregl-ctrl button:not(:disabled):active {
background-color: rgba(0, 0, 0, .05);
}
.maplibregl-ctrl-group button:focus:focus-visible {
box-shadow: 0 0 2px 2px #0096ff;
}
.maplibregl-ctrl-group button:focus:not(:focus-visible) {
box-shadow: none;
}
.maplibregl-ctrl-group button:focus:first-child {
border-radius: 4px 4px 0 0;
}
.maplibregl-ctrl-group button:focus:last-child {
border-radius: 0 0 4px 4px;
}
.maplibregl-ctrl-group button:focus:only-child {
border-radius: inherit;
}
.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E");
}
@media (forced-colors: active) {
.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E");
}
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E");
}
}
.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E");
}
@media (forced-colors: active) {
.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E");
}
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E");
}
}
.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E");
}
@media (forced-colors: active) {
.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E");
}
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E");
}
}
.maplibregl-ctrl button.maplibregl-ctrl-globe .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%23333' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='8.5'/%3E%3Cpath d='M17.5 11c0 4.819-3.02 8.5-6.5 8.5S4.5 15.819 4.5 11 7.52 2.5 11 2.5s6.5 3.681 6.5 8.5Z'/%3E%3Cpath d='M13.5 11c0 2.447-.331 4.64-.853 6.206-.262.785-.562 1.384-.872 1.777-.314.399-.58.517-.775.517s-.461-.118-.775-.517c-.31-.393-.61-.992-.872-1.777C8.831 15.64 8.5 13.446 8.5 11s.331-4.64.853-6.206c.262-.785.562-1.384.872-1.777.314-.399.58-.517.775-.517s.461.118.775.517c.31.393.61.992.872 1.777.522 1.565.853 3.76.853 6.206Z'/%3E%3Cpath d='M11 7.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138q.07-.058.224-.138c.299-.151.763-.302 1.379-.434C7.378 5.666 9.091 5.5 11 5.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138q-.07.058-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428ZM4.486 6.436ZM11 16.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138 1.3 1.3 0 0 1 .224-.138c.299-.151.763-.302 1.379-.434C7.378 14.666 9.091 14.5 11 14.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138a1.3 1.3 0 0 1-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428Zm-6.514-1.064ZM11 12.5c-2.46 0-4.672-.222-6.255-.574-.796-.177-1.406-.38-1.805-.59a1.5 1.5 0 0 1-.39-.272.3.3 0 0 1-.047-.064.3.3 0 0 1 .048-.064c.066-.073.189-.167.389-.272.399-.21 1.009-.413 1.805-.59C6.328 9.722 8.54 9.5 11 9.5s4.672.222 6.256.574c.795.177 1.405.38 1.804.59.2.105.323.2.39.272a.3.3 0 0 1 .047.064.3.3 0 0 1-.048.064 1.4 1.4 0 0 1-.389.272c-.399.21-1.009.413-1.804.59-1.584.352-3.796.574-6.256.574Zm-8.501-1.51v.002zm0 .018v.002zm17.002.002v-.002zm0-.018v-.002z'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-globe-enabled .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%2333b5e5' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='8.5'/%3E%3Cpath d='M17.5 11c0 4.819-3.02 8.5-6.5 8.5S4.5 15.819 4.5 11 7.52 2.5 11 2.5s6.5 3.681 6.5 8.5Z'/%3E%3Cpath d='M13.5 11c0 2.447-.331 4.64-.853 6.206-.262.785-.562 1.384-.872 1.777-.314.399-.58.517-.775.517s-.461-.118-.775-.517c-.31-.393-.61-.992-.872-1.777C8.831 15.64 8.5 13.446 8.5 11s.331-4.64.853-6.206c.262-.785.562-1.384.872-1.777.314-.399.58-.517.775-.517s.461.118.775.517c.31.393.61.992.872 1.777.522 1.565.853 3.76.853 6.206Z'/%3E%3Cpath d='M11 7.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138q.07-.058.224-.138c.299-.151.763-.302 1.379-.434C7.378 5.666 9.091 5.5 11 5.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138q-.07.058-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428ZM4.486 6.436ZM11 16.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138 1.3 1.3 0 0 1 .224-.138c.299-.151.763-.302 1.379-.434C7.378 14.666 9.091 14.5 11 14.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138a1.3 1.3 0 0 1-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428Zm-6.514-1.064ZM11 12.5c-2.46 0-4.672-.222-6.255-.574-.796-.177-1.406-.38-1.805-.59a1.5 1.5 0 0 1-.39-.272.3.3 0 0 1-.047-.064.3.3 0 0 1 .048-.064c.066-.073.189-.167.389-.272.399-.21 1.009-.413 1.805-.59C6.328 9.722 8.54 9.5 11 9.5s4.672.222 6.256.574c.795.177 1.405.38 1.804.59.2.105.323.2.39.272a.3.3 0 0 1 .047.064.3.3 0 0 1-.048.064 1.4 1.4 0 0 1-.389.272c-.399.21-1.009.413-1.804.59-1.584.352-3.796.574-6.256.574Zm-8.501-1.51v.002zm0 .018v.002zm17.002.002v-.002zm0-.018v-.002z'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-terrain .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%23333' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-terrain-enabled .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%2333b5e5' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23aaa' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon {
animation: maplibregl-spin 2s linear infinite;
}
@media (forced-colors: active) {
.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23999' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E");
}
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23666' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E");
}
}
@keyframes maplibregl-spin {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
a.maplibregl-ctrl-logo {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
cursor: pointer;
display: block;
height: 23px;
margin: 0 0 -4px -4px;
overflow: hidden;
width: 88px;
}
a.maplibregl-ctrl-logo.maplibregl-compact {
width: 14px;
}
@media (forced-colors: active) {
a.maplibregl-ctrl-logo {
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E");
}
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
a.maplibregl-ctrl-logo {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E");
}
}
.maplibregl-ctrl.maplibregl-ctrl-attrib {
background-color: hsla(0, 0%, 100%, .5);
margin: 0;
padding: 0 5px;
}
@media screen {
.maplibregl-ctrl-attrib.maplibregl-compact {
background-color: #fff;
border-radius: 12px;
box-sizing: content-box;
color: #000;
margin: 10px;
min-height: 20px;
padding: 2px 24px 2px 0;
position: relative;
}
.maplibregl-ctrl-attrib.maplibregl-compact-show {
padding: 2px 28px 2px 8px;
visibility: visible;
}
.maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact-show,
.maplibregl-ctrl-top-left > .maplibregl-ctrl-attrib.maplibregl-compact-show {
border-radius: 12px;
padding: 2px 8px 2px 28px;
}
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner {
display: none;
}
.maplibregl-ctrl-attrib-button {
background-color: hsla(0, 0%, 100%, .5);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");
border: 0;
border-radius: 12px;
box-sizing: border-box;
cursor: pointer;
display: none;
height: 24px;
outline: none;
position: absolute;
right: 0;
top: 0;
width: 24px;
}
.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
list-style: none;
}
.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button::-webkit-details-marker {
display: none;
}
.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button,
.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib-button {
left: 0;
}
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button,
.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
display: block;
}
.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
background-color: rgba(0, 0, 0, .05);
}
.maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib.maplibregl-compact:after {
bottom: 0;
right: 0;
}
.maplibregl-ctrl-top-right > .maplibregl-ctrl-attrib.maplibregl-compact:after {
right: 0;
top: 0;
}
.maplibregl-ctrl-top-left > .maplibregl-ctrl-attrib.maplibregl-compact:after {
left: 0;
top: 0;
}
.maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact:after {
bottom: 0;
left: 0;
}
}
@media screen and (forced-colors: active) {
.maplibregl-ctrl-attrib.maplibregl-compact:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");
}
}
@media screen and (forced-colors: active) and (prefers-color-scheme: light) {
.maplibregl-ctrl-attrib.maplibregl-compact:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");
}
}
.maplibregl-ctrl-attrib a {
color: rgba(0, 0, 0, .75);
text-decoration: none;
}
.maplibregl-ctrl-attrib a:hover {
color: inherit;
text-decoration: underline;
}
.maplibregl-attrib-empty {
display: none;
}
.maplibregl-ctrl-scale {
background-color: hsla(0, 0%, 100%, .75);
border: 2px solid #333;
border-top: #333;
box-sizing: border-box;
color: #333;
font-size: 10px;
padding: 0 5px;
white-space: nowrap;
}
.maplibregl-popup {
display: flex;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
will-change: transform;
}
.maplibregl-popup-anchor-top,
.maplibregl-popup-anchor-top-left,
.maplibregl-popup-anchor-top-right {
flex-direction: column;
}
.maplibregl-popup-anchor-bottom,
.maplibregl-popup-anchor-bottom-left,
.maplibregl-popup-anchor-bottom-right {
flex-direction: column-reverse;
}
.maplibregl-popup-anchor-left {
flex-direction: row;
}
.maplibregl-popup-anchor-right {
flex-direction: row-reverse;
}
.maplibregl-popup-tip {
border: 10px solid transparent;
height: 0;
width: 0;
z-index: 1;
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip {
align-self: center;
border-bottom-color: #fff;
border-top: none;
}
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
align-self: flex-start;
border-bottom-color: #fff;
border-left: none;
border-top: none;
}
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
align-self: flex-end;
border-bottom-color: #fff;
border-right: none;
border-top: none;
}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
align-self: center;
border-bottom: none;
border-top-color: #fff;
}
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
align-self: flex-start;
border-bottom: none;
border-left: none;
border-top-color: #fff;
}
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
align-self: flex-end;
border-bottom: none;
border-right: none;
border-top-color: #fff;
}
.maplibregl-popup-anchor-left .maplibregl-popup-tip {
align-self: center;
border-left: none;
border-right-color: #fff;
}
.maplibregl-popup-anchor-right .maplibregl-popup-tip {
align-self: center;
border-left-color: #fff;
border-right: none;
}
[dir=rtl] .maplibregl-popup-anchor-left {
flex-direction: row-reverse;
}
[dir=rtl] .maplibregl-popup-anchor-right {
flex-direction: row;
}
[dir=rtl] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
align-self: flex-end;
}
[dir=rtl] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
align-self: flex-start;
}
[dir=rtl] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
align-self: flex-end;
}
[dir=rtl] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
align-self: flex-start;
}
.maplibregl-popup-close-button {
background-color: transparent;
border: 0;
border-radius: 0 3px 0 0;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
}
.maplibregl-popup-close-button:hover {
background-color: rgba(0, 0, 0, .05);
}
.maplibregl-popup-content {
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
padding: 15px 10px;
pointer-events: auto;
position: relative;
}
.maplibregl-popup-anchor-top-left .maplibregl-popup-content {
border-top-left-radius: 0;
}
.maplibregl-popup-anchor-top-right .maplibregl-popup-content {
border-top-right-radius: 0;
}
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content {
border-bottom-left-radius: 0;
}
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content {
border-bottom-right-radius: 0;
}
.maplibregl-popup-track-pointer {
display: none;
}
.maplibregl-popup-track-pointer * {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.maplibregl-map:hover .maplibregl-popup-track-pointer {
display: flex;
}
.maplibregl-map:active .maplibregl-popup-track-pointer {
display: none;
}
.maplibregl-marker {
left: 0;
position: absolute;
top: 0;
transition: opacity .2s;
will-change: transform;
}
.maplibregl-user-location-dot,
.maplibregl-user-location-dot:before {
background-color: #1da1f2;
border-radius: 50%;
height: 15px;
width: 15px;
}
.maplibregl-user-location-dot:before {
animation: maplibregl-user-location-dot-pulse 2s infinite;
content: "";
position: absolute;
}
.maplibregl-user-location-dot:after {
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 3px rgba(0, 0, 0, .35);
box-sizing: border-box;
content: "";
height: 19px;
left: -2px;
position: absolute;
top: -2px;
width: 19px;
}
@media (prefers-reduced-motion: reduce) {
.maplibregl-user-location-dot:before {
animation: none;
}
}
@keyframes maplibregl-user-location-dot-pulse {
0% {
opacity: 1;
transform: scale(1);
}
70% {
opacity: 0;
transform: scale(3);
}
to {
opacity: 0;
transform: scale(1);
}
}
.maplibregl-user-location-dot-stale {
background-color: #aaa;
}
.maplibregl-user-location-dot-stale:after {
display: none;
}
.maplibregl-user-location-accuracy-circle {
background-color: #1da1f233;
border-radius: 100%;
height: 1px;
width: 1px;
}
.maplibregl-crosshair,
.maplibregl-crosshair .maplibregl-interactive,
.maplibregl-crosshair .maplibregl-interactive:active {
cursor: crosshair;
}
.maplibregl-boxzoom {
background: #fff;
border: 2px dotted #202020;
height: 0;
left: 0;
opacity: .5;
position: absolute;
top: 0;
width: 0;
}
.maplibregl-cooperative-gesture-screen {
align-items: center;
background: rgba(0, 0, 0, .4);
color: #fff;
display: flex;
font-size: 1.4em;
inset: 0;
justify-content: center;
line-height: 1.2;
opacity: 0;
padding: 1rem;
pointer-events: none;
position: absolute;
transition: opacity 1s ease 1s;
z-index: 99999;
}
.maplibregl-cooperative-gesture-screen.maplibregl-show {
opacity: 1;
transition: opacity .05s;
}
.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message {
display: none;
}
@media (hover: none), (pointer: coarse) {
.maplibregl-cooperative-gesture-screen .maplibregl-desktop-message {
display: none;
}
.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message {
display: block;
}
}
.maplibregl-pseudo-fullscreen {
height: 100% !important;
left: 0 !important;
position: fixed !important;
top: 0 !important;
width: 100% !important;
z-index: 99999;
}
/* assets/css/app.css */
:root {
--page: #efe6d8;
--page-deep: #e3d6c2;
--surface: rgba(255, 250, 243, 0.78);
--surface-strong: rgba(255, 252, 247, 0.96);
--surface-muted: rgba(255, 248, 239, 0.58);
--ink: #1f1a16;
--ink-strong: #17120d;
--muted: #64584d;
--line: rgba(43, 35, 27, 0.14);
--line-strong: rgba(43, 35, 27, 0.24);
--accent: #c85e37;
--accent-strong: #8d3519;
--accent-soft: rgba(200, 94, 55, 0.18);
--accent-2: #1e6766;
--accent-2-soft: rgba(30, 103, 102, 0.16);
--success: #1f6b54;
--success-soft: rgba(31, 107, 84, 0.14);
--danger: #a63c2a;
--danger-soft: rgba(166, 60, 42, 0.14);
--shadow-lg: 0 30px 80px rgba(37, 28, 19, 0.16);
--shadow-md: 0 18px 42px rgba(37, 28, 19, 0.11);
--radius-xl: 34px;
--radius-lg: 24px;
--radius-md: 16px;
--radius-sm: 12px;
--shell: min(1180px, calc(100vw - 2rem));
--font-body:
"IBM Plex Sans",
"Avenir Next",
"Segoe UI",
sans-serif;
--font-display:
"Iowan Old Style",
"Palatino Linotype",
"Book Antiqua",
Georgia,
serif;
--font-mono:
"IBM Plex Mono",
"SFMono-Regular",
Consolas,
monospace;
--button-icon-action: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5%2012h14M13%206l6%206-6%206%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--button-icon-secondary: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5%2012h14M13%206l6%206-6%206%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--button-icon-previous: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M19%2012H5M11%206l-6%206%206%206%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--button-icon-check: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M20%206L9%2017l-5-5%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--button-icon-danger: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M18%206L6%2018M6%206l12%2012%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--button-icon-menu: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%207h16M4%2012h16M4%2017h16%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--button-icon-location: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202.8a6.7%206.7%200%200%200-6.7%206.7c0%204.9%206.7%2011.7%206.7%2011.7s6.7-6.8%206.7-11.7A6.7%206.7%200%200%200%2012%202.8Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M12%2011.7a2.2%202.2%200%201%200%200-4.4%202.2%202.2%200%200%200%200%204.4Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--button-icon-target: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%277%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.2%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27M12%202v3M12%2019v3M2%2012h3M19%2012h3%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E);
color-scheme: light;
}
body.auth-shell {
--accent: #b04a2f;
--accent-strong: #7e2f1a;
--accent-soft: rgba(176, 74, 47, 0.16);
--accent-2: #315f67;
--accent-2-soft: rgba(49, 95, 103, 0.16);
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.42),
transparent 36%),
repeating-linear-gradient(
90deg,
color-mix(in srgb, var(--accent) 10%, transparent) 0,
color-mix(in srgb, var(--accent) 10%, transparent) 1px,
transparent 1px,
transparent 96px),
repeating-linear-gradient(
0deg,
color-mix(in srgb, var(--accent-2) 10%, transparent) 0,
color-mix(in srgb, var(--accent-2) 10%, transparent) 1px,
transparent 1px,
transparent 96px),
linear-gradient(
180deg,
color-mix(in srgb, white 58%, var(--page)) 0%,
var(--page) 56%,
var(--page-deep) 100%);
}
body.auth-shell--passenger,
body.console-shell--passenger {
--page: #eaf4ff;
--page-deep: #dbeafe;
--surface: rgba(248, 252, 255, 0.78);
--surface-strong: rgba(252, 254, 255, 0.96);
--surface-muted: rgba(238, 247, 255, 0.62);
--ink: #142033;
--ink-strong: #0f172a;
--muted: #52627a;
--line: rgba(15, 23, 42, 0.13);
--line-strong: rgba(15, 23, 42, 0.22);
--accent: #2563eb;
--accent-strong: #1d4ed8;
--accent-soft: rgba(37, 99, 235, 0.16);
--accent-2: #0891b2;
--accent-2-soft: rgba(8, 145, 178, 0.14);
}
body.console-shell--passenger.passenger-theme--green {
--page: #eef8f1;
--page-deep: #dceee3;
--surface: rgba(248, 255, 250, 0.82);
--surface-strong: rgba(252, 255, 253, 0.97);
--surface-muted: rgba(232, 246, 237, 0.68);
--accent: #15803d;
--accent-strong: #14532d;
--accent-soft: rgba(21, 128, 61, 0.13);
--accent-2: #2563eb;
--accent-2-soft: rgba(37, 99, 235, 0.12);
}
body.console-shell--passenger.passenger-theme--red {
--page: #f7f0f0;
--page-deep: #eadada;
--surface: rgba(255, 250, 250, 0.82);
--surface-strong: rgba(255, 253, 253, 0.97);
--surface-muted: rgba(252, 237, 237, 0.68);
--accent: #b91c1c;
--accent-strong: #7f1d1d;
--accent-soft: rgba(185, 28, 28, 0.12);
--accent-2: #334155;
--accent-2-soft: rgba(51, 65, 85, 0.12);
}
body.console-shell--passenger.passenger-theme--purple {
--page: #f3f0fb;
--page-deep: #e5def6;
--surface: rgba(252, 250, 255, 0.82);
--surface-strong: rgba(254, 253, 255, 0.97);
--surface-muted: rgba(241, 235, 253, 0.68);
--accent: #7c3aed;
--accent-strong: #5b21b6;
--accent-soft: rgba(124, 58, 237, 0.12);
--accent-2: #0f766e;
--accent-2-soft: rgba(15, 118, 110, 0.12);
}
body.auth-shell--driver,
body.console-shell--driver {
--page: #eef2f5;
--page-deep: #d9e1e7;
--surface: rgba(255, 255, 255, 0.94);
--surface-strong: rgba(255, 255, 255, 0.98);
--surface-muted: rgba(241, 245, 249, 0.88);
--ink: #121a22;
--ink-strong: #07111a;
--muted: #45515d;
--line: rgba(18, 26, 34, 0.16);
--line-strong: rgba(18, 26, 34, 0.28);
--accent: #15803d;
--accent-strong: #14532d;
--accent-soft: rgba(21, 128, 61, 0.1);
--accent-2: #b45309;
--accent-2-soft: rgba(180, 83, 9, 0.12);
}
body.console-shell--driver.driver-theme--blue {
--page: #eef4fb;
--page-deep: #dce7f3;
--accent: #2563eb;
--accent-strong: #1d4ed8;
--accent-soft: rgba(37, 99, 235, 0.1);
--accent-2: #0f766e;
--accent-2-soft: rgba(15, 118, 110, 0.12);
}
body.console-shell--driver.driver-theme--red {
--page: #f4f1f1;
--page-deep: #e7dddd;
--accent: #b91c1c;
--accent-strong: #7f1d1d;
--accent-soft: rgba(185, 28, 28, 0.1);
--accent-2: #475569;
--accent-2-soft: rgba(71, 85, 105, 0.12);
}
body.console-shell--driver.driver-theme--purple {
--page: #f2f0f7;
--page-deep: #e3deef;
--accent: #7c3aed;
--accent-strong: #5b21b6;
--accent-soft: rgba(124, 58, 237, 0.1);
--accent-2: #0f766e;
--accent-2-soft: rgba(15, 118, 110, 0.12);
}
body.auth-shell--admin,
body.console-shell--ops {
--page: #edf1f4;
--page-deep: #e4ebf1;
--surface: rgba(255, 255, 255, 0.78);
--surface-strong: rgba(255, 255, 255, 0.95);
--surface-muted: rgba(243, 246, 249, 0.66);
--ink: #17202a;
--ink-strong: #101820;
--muted: #5f6b78;
--line: rgba(23, 32, 42, 0.12);
--line-strong: rgba(23, 32, 42, 0.2);
--accent: #a21d4f;
--accent-strong: #6f1235;
--accent-soft: rgba(162, 29, 79, 0.105);
--accent-2: #475569;
--accent-2-soft: rgba(71, 85, 105, 0.12);
--ops-metric-icon-distance: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M9%2018l-6%203V6l6-3%206%203%206-3v15l-6%203-6-3Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M9%203v15M15%206v15%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--ops-metric-icon-duration: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%207v5l3%202M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--ops-metric-icon-fare: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M7%203h10v18l-2.5-1.6L12%2021l-2.5-1.6L7%2021V3Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M9.5%208h5M9.5%2012h5M9.5%2016h3%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--ops-metric-icon-company: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%2021h16M6%2021V5h8v16M14%209h4v12M9%209h2M9%2013h2M9%2017h2%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--ops-metric-icon-driver: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5%2013h14l-1.4-4.2A2.5%202.5%200%200%200%2015.2%207H8.8a2.5%202.5%200%200%200-2.4%201.8L5%2013Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M6%2013v4h12v-4M7.5%2017v2M16.5%2017v2M8.5%2015.2h.01M15.5%2015.2h.01%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
}
body.driver-workspace-shell {
min-height: 100vh;
background: var(--page);
}
body.driver-workspace-shell::before,
body.driver-workspace-shell::after {
content: none;
}
body.console-shell--ops {
--shadow-lg: 0 24px 60px rgba(15, 23, 31, 0.12);
--shadow-md: 0 14px 30px rgba(15, 23, 31, 0.08);
background:
linear-gradient(
180deg,
#f7f9fb 0%,
var(--page) 56%,
var(--page-deep) 100%);
}
body.console-shell--ops::before,
body.console-shell--ops::after {
content: none;
}
* {
box-sizing: border-box;
}
html {
min-height: 100%;
overflow-x: clip;
background:
radial-gradient(
circle at top left,
rgba(200, 94, 55, 0.22),
transparent 28%),
radial-gradient(
circle at right 12% top 20%,
rgba(30, 103, 102, 0.18),
transparent 24%),
linear-gradient(
180deg,
#f5efe6 0%,
var(--page) 56%,
var(--page-deep) 100%);
}
body {
position: relative;
min-height: 100vh;
margin: 0;
overflow-x: clip;
color: var(--ink);
font-family: var(--font-body);
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.32),
transparent 34%),
repeating-linear-gradient(
90deg,
rgba(64, 48, 33, 0.045) 0,
rgba(64, 48, 33, 0.045) 1px,
transparent 1px,
transparent 96px),
repeating-linear-gradient(
0deg,
rgba(64, 48, 33, 0.045) 0,
rgba(64, 48, 33, 0.045) 1px,
transparent 1px,
transparent 96px);
}
body::before,
body::after {
content: "";
position: fixed;
inset: auto;
pointer-events: none;
z-index: -1;
width: 30rem;
height: 30rem;
border-radius: 999px;
filter: blur(20px);
opacity: 0.65;
}
body::before {
top: 5rem;
right: -10rem;
background:
radial-gradient(
circle,
var(--accent-soft) 0%,
transparent 68%);
}
body::after {
left: -8rem;
bottom: 2rem;
background:
radial-gradient(
circle,
var(--accent-2-soft) 0%,
transparent 70%);
}
::selection {
background: var(--accent-soft);
color: var(--ink);
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
button,
a.button,
input {
font: inherit;
}
button,
input[type=button],
input[type=submit],
input[type=reset] {
cursor: pointer;
}
button:disabled,
input[type=button]:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled {
cursor: not-allowed;
}
code {
padding: 0.15rem 0.45rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.78);
color: #372c24;
font-family: var(--font-mono);
font-size: 0.92em;
}
:focus-visible {
outline: 3px solid color-mix(in srgb, var(--accent) 82%, white);
outline-offset: 3px;
}
:focus:not(:focus-visible) {
outline: none;
}
.skip-link {
position: absolute;
left: 1rem;
top: -5rem;
z-index: 30;
padding: 0.85rem 1.1rem;
border-radius: 999px;
background: var(--accent);
color: white;
text-decoration: none;
box-shadow: var(--shadow-md);
}
.skip-link:focus {
top: 1rem;
}
.site-shell {
width: var(--shell);
margin: 0 auto;
}
.site-header {
position: sticky;
top: 0;
z-index: 20;
padding: 1rem 0 0;
}
.site-shell--header {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr);
align-items: center;
gap: 1rem;
padding: 1rem 1.15rem;
border: 1px solid rgba(43, 35, 27, 0.1);
border-radius: 28px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.74),
rgba(255, 250, 244, 0.9)),
var(--surface-strong);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(22px);
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.95rem;
min-width: 0;
text-decoration: none;
}
.brand__mark {
display: flex;
align-items: center;
justify-content: center;
width: 4.35rem;
height: 3.1rem;
flex: 0 0 4.35rem;
}
.brand__copy {
display: grid;
gap: 0.12rem;
}
.brand__copy strong {
font-size: 1rem;
letter-spacing: 0.02em;
}
.brand__copy span {
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.menu-toggle {
--button-icon: var(--button-icon-menu);
display: none;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 2.9rem;
padding: 0.7rem 1rem;
border: 1px solid rgba(43, 35, 27, 0.12);
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
color: var(--ink);
}
.menu-toggle::before {
content: "";
display: inline-block;
width: 1.05rem;
height: 1.05rem;
flex: 0 0 1.05rem;
background: currentColor;
mask-image: var(--button-icon);
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: var(--button-icon);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
.menu-toggle__meta {
color: var(--muted);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.site-header__panel {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.85rem;
min-width: 0;
}
.site-nav,
.site-utility-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem;
}
.site-nav a,
.site-utility-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0.45rem 0.9rem;
border: 1px solid transparent;
border-radius: 999px;
color: var(--muted);
text-decoration: none;
transition:
background 160ms ease,
border-color 160ms ease,
color 160ms ease,
transform 160ms ease;
}
.site-nav a:hover,
.site-utility-nav a:hover {
border-color: rgba(43, 35, 27, 0.1);
background: rgba(255, 255, 255, 0.7);
color: var(--ink);
transform: translateY(-1px);
}
.site-utility-nav a {
background: rgba(255, 255, 255, 0.68);
border-color: rgba(43, 35, 27, 0.08);
font-size: 0.88rem;
}
.site-main {
padding: 2.25rem 0 4rem;
}
.site-footer {
padding: 0 0 1.5rem;
}
.site-footer__content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.25rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 24px;
background: rgba(255, 250, 243, 0.7);
color: var(--muted);
}
.site-footer__content p {
margin: 0;
max-width: 44rem;
}
.site-footer__links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.site-footer__links a {
display: inline-flex;
align-items: center;
min-height: 2.35rem;
padding: 0.35rem 0.8rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.66);
text-decoration: none;
}
.hero {
padding: 2.5rem 0 1.25rem;
}
.hero__strip {
margin-top: 1rem;
}
.hero__strip .metric-card strong {
font-size: clamp(1.25rem, 2vw, 1.7rem);
}
.foundations {
padding: 1rem 0 0;
}
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.82fr);
gap: 1rem;
align-items: stretch;
}
.hero__copy,
.hero__panel,
.foundation-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(43, 35, 27, 0.1);
border-radius: var(--radius-xl);
background:
linear-gradient(
160deg,
rgba(255, 255, 255, 0.58),
transparent 48%),
var(--surface);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(18px);
}
.hero__copy::before,
.hero__panel::before,
.foundation-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background:
linear-gradient(
90deg,
var(--accent) 0%,
color-mix(in srgb, var(--accent-2) 75%, white) 100%);
opacity: 0.9;
}
.hero__copy {
display: grid;
gap: 1.25rem;
align-content: start;
padding: clamp(1.6rem, 2vw + 1rem, 2.5rem);
}
.hero__copy h1,
.dashboard-title,
.section-heading h2,
.overview-card h1,
.overview-card h2,
.auth-card h1,
.auth-card h2,
.foundation-card h3,
.request-card__title h3 {
margin: 0;
font-family: var(--font-display);
letter-spacing: -0.03em;
}
.hero__copy h1 {
max-width: 13ch;
font-size: clamp(2.4rem, 4.2vw, 4rem);
line-height: 0.98;
}
.eyebrow,
.status-card__label,
.detail__label,
.metric-card span {
letter-spacing: 0.12em;
text-transform: uppercase;
}
.eyebrow {
margin: 0;
color: var(--accent-strong);
font-size: 0.79rem;
font-weight: 800;
}
.hero__lede,
.foundation-card p,
.status-card p,
.dashboard-meta,
.hero__meta,
.status-card__meta,
.surface-note,
.demo-phone {
color: var(--muted);
line-height: 1.68;
}
.hero__lede,
.hero__meta,
.dashboard-meta,
.status-card__meta,
.surface-note,
.demo-phone,
.foundation-card p,
.status-card p {
margin: 0;
}
.hero__actions,
.dashboard-actions,
.action-row,
.request-card__actions,
.demo-phone-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
}
.button {
--button-icon: var(--button-icon-action);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.48rem;
min-height: 3rem;
padding: 0.72rem 1.15rem;
border: 1px solid transparent;
border-radius: 999px;
text-decoration: none;
cursor: pointer;
transition:
transform 160ms ease,
box-shadow 160ms ease,
border-color 160ms ease,
background 160ms ease,
color 160ms ease;
}
.button::before {
content: "";
display: inline-block;
width: 1.05rem;
height: 1.05rem;
flex: 0 0 1.05rem;
background: currentColor;
mask-image: var(--button-icon);
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: var(--button-icon);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
.button__icon,
.passenger-app-nav__icon {
display: none;
}
.button:hover {
transform: translateY(-1px);
}
.button:disabled {
cursor: not-allowed;
opacity: 0.58;
transform: none;
box-shadow: none;
}
.button--primary {
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--accent) 92%, white) 0%,
var(--accent-strong) 100%);
color: white;
box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 24%, transparent);
}
.button--success {
--button-icon: var(--button-icon-check);
background:
linear-gradient(
135deg,
#2f8a5c 0%,
#4bb07c 100%);
color: white;
box-shadow: 0 14px 34px rgba(47, 138, 92, 0.24);
}
.button--secondary {
--button-icon: var(--button-icon-secondary);
border-color: rgba(43, 35, 27, 0.12);
background: rgba(255, 255, 255, 0.74);
color: var(--ink);
}
.button--danger {
--button-icon: var(--button-icon-danger);
border-color: rgba(166, 60, 42, 0.18);
background: rgba(255, 244, 241, 0.94);
color: var(--danger);
}
.button--compact {
min-height: 2.35rem;
padding: 0.38rem 0.78rem;
font-size: 0.9rem;
}
.button--compact::before {
width: 0.95rem;
height: 0.95rem;
flex-basis: 0.95rem;
}
.hero__panel {
padding: 1.3rem;
background:
radial-gradient(
circle at top right,
var(--accent-soft),
transparent 42%),
linear-gradient(
180deg,
rgba(255, 251, 245, 0.94),
rgba(255, 247, 237, 0.86));
}
.status-stack,
.overview-card,
.auth-card,
.stack-grid,
.request-list,
.status-list {
display: grid;
gap: 1rem;
}
.status-card,
.detail,
.metric-card,
.request-card,
.test-note,
.dev-code,
.surface-note {
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.72);
}
.status-card {
display: grid;
gap: 0.65rem;
padding: 1.15rem;
box-shadow: var(--shadow-md);
}
.status-card--live {
background:
linear-gradient(
145deg,
color-mix(in srgb, var(--accent-soft) 86%, white),
rgba(255, 255, 255, 0.76)),
rgba(255, 255, 255, 0.78);
border-color: rgba(43, 35, 27, 0.12);
}
.status-card strong {
display: block;
font-size: 1.12rem;
}
.status-card__label {
color: color-mix(in srgb, var(--accent) 68%, #2e2924);
font-size: 0.76rem;
font-weight: 800;
}
.status-card ul {
display: grid;
gap: 0.55rem;
margin: 0;
padding-left: 1.1rem;
color: var(--muted);
}
.section-heading {
display: grid;
gap: 0.35rem;
margin-bottom: 1.15rem;
}
.section-heading h2 {
font-size: clamp(1.8rem, 3vw, 2.6rem);
line-height: 1;
}
.section-heading p {
margin: 0;
}
.foundation-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
.foundation-card {
display: grid;
gap: 0.95rem;
align-content: start;
padding: 1.3rem;
}
.dashboard-intro {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr);
gap: 1rem;
margin-bottom: 1rem;
}
.dashboard-intro__rail {
display: grid;
gap: 1rem;
}
.overview-card--highlight {
background:
radial-gradient(
circle at top right,
var(--accent-soft),
transparent 44%),
linear-gradient(
180deg,
rgba(255, 252, 246, 0.94),
rgba(255, 246, 237, 0.84)),
var(--surface);
}
.overview-card__header {
display: grid;
gap: 0.35rem;
}
.overview-card__header p {
margin: 0;
}
.dashboard-title {
font-size: clamp(2rem, 3.2vw, 3rem);
line-height: 1;
}
body.passenger-workspace-shell {
--passenger-icon-booking: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5%2013h14l-1.4-4.2A2.5%202.5%200%200%200%2015.2%207H8.8a2.5%202.5%200%200%200-2.4%201.8L5%2013Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M6%2013v4h12v-4M7.5%2017v2M16.5%2017v2M8.5%2015.2h.01M15.5%2015.2h.01M9%207V5h6v2%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--passenger-icon-status: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2021s7-4.7%207-11a7%207%200%201%200-14%200c0%206.3%207%2011%207%2011Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27m8.9%2010.2%202.1%202.1%204.2-4.5%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--passenger-icon-history: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%207v5l3%202M4%2012a8%208%200%201%200%202.3-5.7M4%205v5h5%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--passenger-icon-settings: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2015.2a3.2%203.2%200%201%200%200-6.4%203.2%203.2%200%200%200%200%206.4Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M19.4%2015a1.8%201.8%200%200%200%20.36%201.98l.04.04a2.1%202.1%200%200%201-2.97%202.97l-.04-.04A1.8%201.8%200%200%200%2014.8%2019.6a1.8%201.8%200%200%200-1.08%201.65V21.4a2.1%202.1%200%200%201-4.2%200v-.06A1.8%201.8%200%200%200%208.45%2019.7a1.8%201.8%200%200%200-1.98.36l-.04.04a2.1%202.1%200%200%201-2.97-2.97l.04-.04A1.8%201.8%200%200%200%203.85%2015a1.8%201.8%200%200%200-1.65-1.08H2.1a2.1%202.1%200%200%201%200-4.2h.06a1.8%201.8%200%200%200%201.65-1.08%201.8%201.8%200%200%200-.36-1.98l-.04-.04a2.1%202.1%200%200%201%202.97-2.97l.04.04A1.8%201.8%200%200%200%208.5%204.05a1.8%201.8%200%200%200%201.02-1.62V2.3a2.1%202.1%200%200%201%204.2%200v.06a1.8%201.8%200%200%200%201.08%201.65%201.8%201.8%200%200%200%201.98-.36l.04-.04a2.1%202.1%200%200%201%202.97%202.97l-.04.04a1.8%201.8%200%200%200-.36%201.98%201.8%201.8%200%200%200%201.65%201.08h.1a2.1%202.1%200%200%201%200%204.2h-.06A1.8%201.8%200%200%200%2019.4%2015Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
min-height: 100vh;
background:
linear-gradient(
180deg,
#f0f8ff 0%,
color-mix(in srgb, white 54%, var(--page)) 100%);
}
body.passenger-workspace-shell::before,
body.passenger-workspace-shell::after {
content: none;
}
.passenger-workspace-main {
min-height: 100vh;
padding: 0.5rem 0 calc(6.7rem + max(0.8rem, env(safe-area-inset-bottom)));
}
.passenger-workspace {
width: min(calc(100vw - 1rem), 100%);
max-width: 920px;
margin: 0 auto;
display: grid;
gap: 0.75rem;
}
.passenger-workspace-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.72rem 0.9rem;
border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(43, 35, 27, 0.12));
border-radius: 22px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.94),
color-mix(in srgb, white 82%, var(--accent-soft))),
var(--surface-strong);
box-shadow: var(--shadow-md);
}
.passenger-workspace-brand {
display: inline-flex;
align-items: center;
gap: 0.7rem;
min-width: 0;
text-decoration: none;
}
.passenger-workspace-brand__mark {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 3rem;
flex: 0 0 4rem;
}
.passenger-workspace-brand__copy {
display: grid;
gap: 0;
}
.passenger-workspace-brand__copy strong {
font-size: 0.95rem;
letter-spacing: 0.02em;
}
.passenger-workspace-header__actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
min-width: 0;
}
.passenger-workspace-account {
display: inline-flex;
align-items: center;
min-height: 2.25rem;
padding: 0.45rem 0.7rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
font-size: 0.82rem;
font-weight: 700;
line-height: 1;
}
.passenger-workspace-account code {
padding: 0;
border: 0;
background: transparent;
font-size: 0.82rem;
}
.passenger-workspace-header .button {
width: auto;
}
.passenger-workspace-panel {
display: grid;
gap: 0.85rem;
}
body.console-shell--passenger .passenger-panel-card {
gap: 1rem;
padding: 1rem 1.05rem;
border-radius: 28px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.94),
color-mix(in srgb, white 82%, var(--accent-soft)));
box-shadow: var(--shadow-md);
}
body.console-shell--passenger .passenger-request-flow {
overflow: visible;
}
.passenger-panel-header {
display: grid;
gap: 0.28rem;
}
.passenger-panel-header h2 {
margin: 0;
font-size: clamp(1.18rem, 4vw, 1.5rem);
line-height: 1.1;
}
.passenger-panel-header .surface-note {
margin: 0;
max-width: 40rem;
}
.passenger-panel-header--compact {
gap: 0.18rem;
}
.passenger-home-panel,
.passenger-book-panel,
.passenger-history-panel,
.passenger-track-shell {
display: grid;
gap: 1rem;
}
#passenger-ride-panel-content {
display: grid;
gap: 1rem;
}
.passenger-home-primary,
.passenger-state-card,
.passenger-request-card,
.passenger-track-card,
.passenger-history-card {
display: grid;
gap: 0.85rem;
padding: 1rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 24px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.9),
rgba(255, 248, 241, 0.8));
}
.passenger-home-primary {
align-items: center;
border-color: rgba(37, 99, 235, 0.11);
background:
radial-gradient(
circle at 50% 0%,
rgba(8, 145, 178, 0.12),
transparent 42%),
linear-gradient(
135deg,
rgba(244, 249, 255, 0.96),
rgba(255, 255, 255, 0.92));
}
.passenger-home-primary--minimal {
grid-template-columns: minmax(0, 1fr) auto;
min-height: 0;
text-align: left;
}
.passenger-home-primary__copy,
.passenger-home-primary__actions,
.passenger-state-card__header,
.passenger-request-card__header,
.passenger-submit-bar {
display: grid;
gap: 0.3rem;
}
.passenger-home-primary__copy h2,
.passenger-state-card__header h3,
.passenger-request-card__header h3 {
margin: 0;
line-height: 1.08;
}
.passenger-home-primary__copy h2 {
font-size: clamp(1.32rem, 5vw, 1.75rem);
}
.passenger-home-primary__actions {
gap: 0.65rem;
}
.passenger-home-primary__actions .button,
.passenger-state-card__actions .button,
.passenger-context-actions .button {
width: auto;
}
.passenger-home-primary--minimal .button {
min-width: min(12.5rem, 100%);
}
.passenger-home-primary--minimal .button::before {
content: "";
display: inline-block;
width: 1.15rem;
height: 1.15rem;
flex: 0 0 1.15rem;
background: currentColor;
mask-image: var(--passenger-icon-booking);
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: var(--passenger-icon-booking);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
.passenger-action-button::before {
content: "";
display: inline-block;
width: 1.12rem;
height: 1.12rem;
flex: 0 0 1.12rem;
background: currentColor;
mask-image: var(--passenger-action-icon);
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: var(--passenger-action-icon);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
.passenger-action-button--booking {
--passenger-action-icon: var(--passenger-icon-booking);
}
.passenger-action-button--status {
--passenger-action-icon: var(--passenger-icon-status);
}
.app-settings-card {
display: grid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid rgba(37, 99, 235, 0.1);
border-radius: 22px;
background:
radial-gradient(
circle at 100% 0%,
rgba(8, 145, 178, 0.1),
transparent 36%),
linear-gradient(
135deg,
rgba(247, 251, 255, 0.96),
rgba(255, 255, 255, 0.92));
box-shadow: 0 14px 32px rgba(37, 99, 235, 0.08);
}
body.console-shell--driver .app-settings-card {
border-color: rgba(18, 26, 34, 0.14);
background: #ffffff;
box-shadow: none;
}
body.console-shell--driver .app-settings-card--danger-zone {
border-color: rgba(166, 60, 42, 0.22);
background: #ffffff;
}
body.console-shell--driver .driver-settings-logout-button {
justify-self: center;
width: min(100%, 300px);
border-color: #991b1b;
background: #b91c1c;
color: #ffffff;
box-shadow: 0 12px 26px rgba(185, 28, 28, 0.2);
}
body.console-shell--driver .driver-settings-logout-button:hover {
background: #991b1b;
}
.app-settings-card--danger-zone {
border-color: rgba(166, 60, 42, 0.12);
background:
linear-gradient(
135deg,
rgba(255, 249, 247, 0.96),
rgba(255, 255, 255, 0.92));
}
.app-settings-card__header {
display: grid;
gap: 0.18rem;
}
.app-settings-card__header h3 {
margin: 0;
font-size: 1rem;
line-height: 1.14;
}
.app-settings-list {
display: grid;
gap: 0.56rem;
}
.app-settings-list article {
display: grid;
grid-template-columns: 6rem minmax(0, 1fr);
align-items: baseline;
gap: 0.12rem 0.75rem;
min-width: 0;
padding-top: 0.56rem;
border-top: 1px solid rgba(37, 99, 235, 0.07);
}
body.console-shell--driver .app-settings-list article {
grid-template-columns: minmax(9rem, 0.26fr) minmax(0, 1fr);
}
.app-settings-list article:first-child {
padding-top: 0;
border-top: 0;
}
.app-settings-list span {
color: var(--muted);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.app-settings-list strong {
min-width: 0;
overflow: hidden;
color: var(--ink-strong);
font-size: 0.94rem;
line-height: 1.22;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-settings-list code {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
white-space: nowrap;
}
.driver-theme-settings-card {
gap: 0.9rem;
}
.driver-theme-options {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.65rem;
}
.driver-theme-option {
display: grid;
gap: 0.55rem;
min-width: 0;
padding: 0.82rem;
border: 1px solid rgba(18, 26, 34, 0.12);
border-radius: 16px;
background: #ffffff;
color: var(--ink);
text-decoration: none;
}
.driver-theme-option--active {
border-color: color-mix(in srgb, var(--accent) 54%, rgba(18, 26, 34, 0.12));
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-soft) 86%, white);
}
.driver-theme-preview {
display: grid;
grid-template-columns: 1fr 0.7fr 0.7fr;
gap: 0.28rem;
height: 2.25rem;
}
.driver-theme-preview span {
border-radius: 999px;
}
.driver-theme-preview span:first-child {
background: var(--driver-theme-swatch-accent);
}
.driver-theme-preview span:nth-child(2) {
background: var(--driver-theme-swatch-strong);
}
.driver-theme-preview span:nth-child(3) {
background: var(--driver-theme-swatch-soft);
}
.driver-theme-preview--green {
--driver-theme-swatch-accent: #15803d;
--driver-theme-swatch-strong: #14532d;
--driver-theme-swatch-soft: #dceee3;
}
.driver-theme-preview--blue {
--driver-theme-swatch-accent: #2563eb;
--driver-theme-swatch-strong: #1d4ed8;
--driver-theme-swatch-soft: #dbeafe;
}
.driver-theme-preview--red {
--driver-theme-swatch-accent: #b91c1c;
--driver-theme-swatch-strong: #7f1d1d;
--driver-theme-swatch-soft: #fee2e2;
}
.driver-theme-preview--purple {
--driver-theme-swatch-accent: #7c3aed;
--driver-theme-swatch-strong: #5b21b6;
--driver-theme-swatch-soft: #ede9fe;
}
.driver-theme-option__copy {
display: grid;
gap: 0.18rem;
min-width: 0;
}
.driver-theme-option__copy strong {
color: var(--ink-strong);
font-size: 0.98rem;
}
.driver-theme-option__copy span {
color: var(--muted);
font-size: 0.78rem;
font-weight: 680;
line-height: 1.3;
}
.driver-theme-option__state {
color: var(--accent-strong);
font-size: 0.75rem;
font-weight: 840;
text-transform: uppercase;
}
@media (max-width: 760px) {
.driver-theme-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.passenger-state-card--warm {
background:
linear-gradient(
135deg,
rgba(255, 247, 238, 0.96),
rgba(255, 255, 255, 0.9));
}
.passenger-state-card--live {
background:
linear-gradient(
135deg,
rgba(241, 252, 247, 0.95),
rgba(255, 255, 255, 0.9));
}
.passenger-state-card--muted {
background:
linear-gradient(
135deg,
rgba(247, 248, 250, 0.94),
rgba(255, 255, 255, 0.9));
}
.passenger-state-card__header {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 0.75rem;
}
.passenger-state-card__header > div {
display: grid;
gap: 0.18rem;
}
.passenger-state-card__header p,
.passenger-state-card__meta p,
.passenger-request-card__header p,
.passenger-request-card__selected p,
.passenger-track-card__meta p,
.passenger-location-card p,
.passenger-history-card__meta p {
margin: 0;
}
.passenger-state-card__meta,
.passenger-track-card__meta,
.passenger-history-card__meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
}
.passenger-track-card__meta--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.passenger-state-card__meta article,
.passenger-track-card__meta article,
.passenger-history-card__meta article {
display: grid;
gap: 0.12rem;
padding: 0.72rem 0.8rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 18px;
background: rgba(255, 255, 255, 0.7);
}
.passenger-state-card__meta span,
.passenger-track-card__meta span,
.passenger-history-card__meta span {
color: var(--muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.passenger-state-card__meta strong,
.passenger-track-card__meta strong,
.passenger-history-card__meta strong {
font-size: 0.98rem;
line-height: 1.2;
}
.passenger-state-card__actions,
.passenger-context-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.passenger-request-stack {
gap: 1rem;
}
.passenger-request-stack--address {
gap: 0.62rem;
overflow: visible;
position: relative;
z-index: 1;
}
body.console-shell--passenger .passenger-book-panel .form-section {
border-color: rgba(37, 99, 235, 0.1);
background:
linear-gradient(
180deg,
rgba(248, 252, 255, 0.96),
rgba(238, 247, 255, 0.76));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48);
}
.passenger-request-card__header span,
.passenger-request-card__header p {
max-width: 30rem;
}
.passenger-address-step-form {
gap: 0.62rem;
}
.passenger-address-pair {
display: grid;
gap: 0.58rem;
position: relative;
z-index: 2;
}
.passenger-address-pair__field {
min-width: 0;
position: relative;
}
.passenger-address-pair__field:focus-within {
z-index: 4;
}
.passenger-track-card--arrival {
gap: 0.75rem;
}
.passenger-location-card--focus {
background:
linear-gradient(
135deg,
rgba(255, 249, 243, 0.94),
rgba(255, 255, 255, 0.78));
}
.passenger-location-card--focus strong {
font-size: 1.04rem;
}
.passenger-location-pair {
display: grid;
gap: 0.7rem;
}
.passenger-location-card__eyebrow {
color: var(--muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.passenger-submit-bar .button {
width: 100%;
}
.passenger-submit-bar .form-hint {
margin: 0;
text-align: center;
}
.passenger-submit-bar--compact {
gap: 0;
}
.passenger-submit-bar--compact .button {
min-height: 3.15rem;
}
.passenger-request-summary-panel {
gap: 0.85rem;
}
.passenger-request-summary-list {
display: grid;
gap: 0;
border: 1px solid rgba(43, 35, 27, 0.1);
border-radius: 14px;
overflow: hidden;
background: rgba(255, 255, 255, 0.82);
}
.passenger-request-summary-list > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
padding: 0.98rem 1rem;
border-top: 1px solid rgba(43, 35, 27, 0.08);
}
.passenger-request-summary-list > div:first-child {
border-top: 0;
}
.passenger-request-summary-list span {
color: var(--muted);
font-size: 0.88rem;
font-weight: 820;
line-height: 1.2;
}
.passenger-request-summary-list strong {
color: var(--text);
font-size: 1.06rem;
line-height: 1.1;
text-align: right;
white-space: nowrap;
}
.passenger-request-summary-list__total {
background: color-mix(in srgb, var(--accent) 12%, white);
}
.passenger-request-summary-list__total span {
color: var(--accent-strong);
}
.passenger-request-summary-list__total strong {
color: var(--accent-strong);
font-size: 1.32rem;
font-weight: 900;
}
.passenger-request-route-line {
display: grid;
gap: 0.45rem;
padding: 0.35rem 0;
}
.passenger-request-route-stop {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.7rem;
align-items: start;
padding: 0.75rem 0;
border-top: 1px solid rgba(43, 35, 27, 0.1);
}
.passenger-request-route-stop:last-child {
border-bottom: 1px solid rgba(43, 35, 27, 0.1);
}
.passenger-request-route-stop p {
margin: 0.15rem 0 0;
color: var(--muted);
}
.passenger-request-route-stop__index {
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border: 1px solid color-mix(in srgb, var(--accent) 34%, white);
border-radius: 50%;
background: rgba(255, 255, 255, 0.86);
color: var(--accent-strong);
font-size: 0.78rem;
font-weight: 850;
}
.passenger-request-route-stop__index--end {
border-color: color-mix(in srgb, var(--accent-2) 34%, white);
color: var(--accent-2);
}
.passenger-request-confirm-form,
.passenger-request-summary-actions {
display: grid;
gap: 0.65rem;
}
.passenger-request-summary-actions .button {
width: 100%;
}
.passenger-request-summary-detail {
text-align: left;
}
.passenger-context-disclosure .disclosure__body {
gap: 0.85rem;
}
.passenger-history-list {
gap: 0.85rem;
}
.passenger-history-card {
gap: 0.72rem;
border-color: rgba(37, 99, 235, 0.1);
background:
radial-gradient(
circle at 100% 0%,
rgba(8, 145, 178, 0.1),
transparent 34%),
linear-gradient(
135deg,
rgba(247, 251, 255, 0.96),
rgba(255, 255, 255, 0.92));
box-shadow: 0 14px 32px rgba(37, 99, 235, 0.08);
}
.passenger-history-card__header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
min-width: 0;
}
.passenger-history-card__heading {
display: grid;
gap: 0.22rem;
min-width: 0;
}
.passenger-history-card__heading h3 {
margin: 0;
font-size: 1.02rem;
line-height: 1.15;
}
.passenger-history-card__status {
display: inline-flex;
align-items: center;
justify-self: end;
min-height: 1.9rem;
max-width: 12rem;
padding: 0.38rem 0.64rem;
border: 1px solid rgba(37, 99, 235, 0.11);
border-radius: 999px;
background: rgba(238, 247, 255, 0.76);
color: color-mix(in srgb, var(--ink) 76%, white);
font-size: 0.78rem;
font-weight: 760;
line-height: 1.15;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.passenger-history-card__summary {
border-color: rgba(37, 99, 235, 0.08);
background: rgba(255, 255, 255, 0.7);
}
.passenger-history-card__summary .passenger-active-ride-summary__metrics article,
.passenger-history-card__summary .passenger-active-ride-summary__stop,
.passenger-pending-request-hero .passenger-active-ride-summary__metrics article,
.passenger-pending-request-hero .passenger-active-ride-summary__stop {
grid-template-columns: 7.25rem minmax(0, 1fr);
gap: 0.12rem 0.72rem;
}
.passenger-history-card__summary .passenger-active-ride-summary__metrics span,
.passenger-history-card__summary .passenger-active-ride-summary__stop span,
.passenger-pending-request-hero .passenger-active-ride-summary__metrics span,
.passenger-pending-request-hero .passenger-active-ride-summary__stop span {
letter-spacing: 0.05em;
text-align: right;
white-space: nowrap;
}
.passenger-history-card__actions {
justify-content: flex-end;
}
.passenger-history-pagination {
display: grid;
gap: 0.65rem;
padding-top: 0.8rem;
border-top: 1px solid rgba(37, 99, 235, 0.08);
}
.passenger-history-pagination p {
margin: 0;
color: var(--muted);
font-size: 0.82rem;
font-weight: 720;
}
.passenger-history-pagination__actions {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 0.65rem;
}
.passenger-history-pagination__link {
width: min(100%, 9rem);
}
.passenger-history-pagination__link--previous {
--button-icon: var(--button-icon-previous);
justify-self: start;
}
.passenger-history-pagination__link--next {
--button-icon: var(--button-icon-secondary);
justify-self: end;
}
.passenger-history-card__detail-grid {
display: grid;
gap: 0.52rem;
}
.passenger-settings-logout-button {
width: min(100%, 300px);
justify-self: center;
border-color: #991b1b;
background: #b91c1c;
color: #fff;
box-shadow: 0 14px 34px rgba(185, 28, 28, 0.24);
}
.passenger-settings-logout-button:hover {
background: #991b1b;
}
.passenger-history-card__detail-grid article {
display: grid;
grid-template-columns: 5.15rem minmax(0, 1fr);
align-items: baseline;
gap: 0.12rem 0.75rem;
min-width: 0;
}
.passenger-history-card__detail-grid span {
color: var(--muted);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.passenger-history-card__detail-grid strong {
min-width: 0;
overflow: hidden;
color: var(--ink-strong);
font-size: 0.9rem;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.passenger-home-hero {
display: grid;
grid-template-columns: minmax(0, 1.2fr) auto;
gap: 0.9rem;
align-items: end;
padding: 1rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 24px;
background:
linear-gradient(
135deg,
rgba(255, 247, 238, 0.92),
rgba(255, 255, 255, 0.88));
}
.passenger-home-hero__copy {
display: grid;
gap: 0.35rem;
}
.passenger-home-hero__copy h3 {
margin: 0;
font-size: clamp(1.2rem, 4.2vw, 1.7rem);
line-height: 1.08;
}
.passenger-home-hero__copy .surface-note {
margin: 0;
}
.passenger-home-hero__actions {
display: grid;
gap: 0.65rem;
min-width: min(14rem, 100%);
}
.passenger-quick-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.passenger-quick-link {
display: grid;
gap: 0.28rem;
min-width: 0;
padding: 0.85rem 0.9rem;
border: 1px solid rgba(37, 99, 235, 0.1);
border-radius: 18px;
background: rgba(255, 255, 255, 0.78);
color: var(--ink);
text-decoration: none;
transition: border-color 150ms ease, background 150ms ease;
}
.passenger-quick-link:hover,
.passenger-quick-link:focus-visible {
border-color: color-mix(in srgb, var(--accent) 24%, rgba(15, 23, 42, 0.14));
background: rgba(255, 255, 255, 0.94);
}
.passenger-quick-link span {
color: var(--muted);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.passenger-quick-link strong {
min-width: 0;
overflow: hidden;
color: var(--ink-strong);
font-size: 0.96rem;
line-height: 1.18;
text-overflow: ellipsis;
white-space: nowrap;
}
.passenger-track-stage {
display: grid;
gap: 0.3rem;
padding: 1rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 24px;
background:
linear-gradient(
135deg,
rgba(255, 248, 240, 0.92),
rgba(255, 255, 255, 0.88));
}
.passenger-track-stage--empty {
min-height: 10rem;
align-content: center;
}
.passenger-track-stage__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.passenger-track-stage h2 {
margin: 0;
font-size: clamp(1.28rem, 4.8vw, 1.86rem);
line-height: 1.08;
}
.passenger-active-ride-hero {
gap: 0.72rem;
padding: 0.9rem;
border-color: rgba(14, 111, 131, 0.12);
background:
radial-gradient(
circle at 100% 0%,
rgba(23, 163, 108, 0.14),
transparent 34%),
linear-gradient(
135deg,
rgba(243, 252, 248, 0.96),
rgba(255, 255, 255, 0.92));
}
.passenger-active-ride-hero__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.passenger-active-ride-hero__header h2 {
margin: 0;
font-size: clamp(1.45rem, 5vw, 1.92rem);
line-height: 1.04;
text-align: right;
}
.passenger-active-ride-hero__primary {
display: grid;
gap: 0.55rem;
}
.passenger-active-ride-hero__primary article,
.passenger-active-ride-summary article,
.passenger-active-ride-summary__pickup {
display: grid;
gap: 0.16rem;
min-width: 0;
}
.passenger-active-ride-hero__primary span,
.passenger-active-ride-summary span {
color: var(--muted);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.passenger-active-ride-hero__primary strong {
font-size: 1.18rem;
line-height: 1.12;
}
.passenger-active-ride-hero__metric--lead {
padding: 0.78rem 0.9rem;
border: 1px solid rgba(14, 111, 131, 0.12);
border-radius: 18px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.92),
rgba(235, 248, 242, 0.86));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 14px 32px rgba(8, 27, 34, 0.08);
}
.passenger-active-ride-hero__metric--lead strong {
color: color-mix(in srgb, var(--accent-strong) 72%, var(--ink));
font-size: clamp(1.48rem, 7vw, 2.15rem);
}
.passenger-active-ride-hero__primary p,
.passenger-active-ride-summary p {
margin: 0;
color: color-mix(in srgb, var(--ink) 72%, white);
}
.passenger-active-ride-summary {
display: grid;
gap: 0.64rem;
padding: 0.72rem 0.78rem;
border: 1px solid rgba(43, 35, 27, 0.07);
border-radius: 18px;
background: rgba(255, 255, 255, 0.68);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}
.passenger-active-ride-summary__metrics {
display: grid;
gap: 0.52rem;
}
.passenger-active-ride-summary__metrics article {
display: grid;
grid-template-columns: 5.15rem minmax(0, 1fr);
align-items: baseline;
gap: 0.12rem 0.75rem;
min-height: 1.9rem;
padding-bottom: 0.52rem;
border-bottom: 1px solid rgba(43, 35, 27, 0.06);
}
.passenger-active-ride-summary__metrics article:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.passenger-active-ride-summary__metrics span,
.passenger-active-ride-summary__pickup span,
.passenger-active-ride-summary__stop span {
grid-row: 1 / span 2;
}
.passenger-active-ride-summary__metrics strong,
.passenger-active-ride-summary__metrics p,
.passenger-active-ride-summary__pickup strong,
.passenger-active-ride-summary__pickup p,
.passenger-active-ride-summary__stop strong,
.passenger-active-ride-summary__stop p {
text-align: left;
}
.passenger-active-ride-summary strong {
color: var(--ink-strong);
font-size: 0.94rem;
line-height: 1.2;
overflow-wrap: anywhere;
}
.passenger-active-ride-summary__metrics strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.passenger-active-ride-summary p {
overflow: hidden;
font-size: 0.78rem;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.passenger-active-ride-summary code {
display: inline-block;
max-width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
font-family: inherit;
font-size: inherit;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
white-space: nowrap;
}
.passenger-active-ride-summary__pickup {
grid-template-columns: 5.15rem minmax(0, 1fr);
align-items: baseline;
gap: 0.12rem 0.75rem;
padding-top: 0.02rem;
}
.passenger-active-ride-summary__pickup strong,
.passenger-active-ride-summary__pickup p,
.passenger-active-ride-summary__stop strong,
.passenger-active-ride-summary__stop p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.passenger-active-ride-summary__route {
display: grid;
gap: 0.52rem;
padding-top: 0.02rem;
}
.passenger-active-ride-summary__stop {
display: grid;
grid-template-columns: 5.15rem minmax(0, 1fr);
align-items: baseline;
gap: 0.12rem 0.75rem;
min-width: 0;
}
.passenger-active-ride-summary__stop + .passenger-active-ride-summary__stop {
padding-top: 0.52rem;
border-top: 1px solid rgba(43, 35, 27, 0.06);
}
.passenger-track-actions {
flex-wrap: wrap;
}
.passenger-track-actions--centered {
justify-content: center;
}
.passenger-track-stage--empty + .passenger-track-actions {
justify-content: center;
}
.passenger-history-panel__actions .button,
.passenger-track-actions .button,
.passenger-home-hero__actions .button {
width: auto;
}
.passenger-app-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.55rem;
width: 100%;
padding: 0.7rem calc(0.7rem + max(0rem, env(safe-area-inset-right))) calc(0.7rem + max(0.8rem, env(safe-area-inset-bottom))) calc(0.7rem + max(0rem, env(safe-area-inset-left)));
border: 1px solid rgba(37, 99, 235, 0.12);
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 0;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.98),
rgba(248, 252, 255, 0.98)),
var(--surface-strong);
box-shadow: 0 -10px 26px rgba(37, 99, 235, 0.08);
backdrop-filter: blur(18px);
}
.passenger-app-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.28rem;
min-height: 3.28rem;
padding: 0.46rem 0.5rem;
border: 1px solid rgba(37, 99, 235, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.74);
color: var(--ink);
text-decoration: none;
font-size: 0.9rem;
font-weight: 700;
text-align: center;
transition:
border-color 150ms ease,
background 150ms ease,
color 150ms ease,
transform 150ms ease;
}
.passenger-app-nav a::before {
content: "";
display: inline-block;
width: 1.12rem;
height: 1.12rem;
flex: 0 0 1.12rem;
background: color-mix(in srgb, var(--accent) 72%, var(--ink));
mask-image: var(--passenger-nav-icon);
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: var(--passenger-nav-icon);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
.passenger-app-nav a[href="/"] {
--passenger-nav-icon: var(--passenger-icon-booking);
}
.passenger-app-nav a[href="/ride"] {
--passenger-nav-icon: var(--passenger-icon-status);
}
.passenger-app-nav a[href="/history"] {
--passenger-nav-icon: var(--passenger-icon-history);
}
.passenger-app-nav a[href="/settings"] {
--passenger-nav-icon: var(--passenger-icon-settings);
}
.passenger-app-nav a:hover,
.passenger-app-nav a:focus-visible {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--accent) 24%, rgba(15, 23, 42, 0.14));
background: rgba(255, 255, 255, 0.92);
}
.passenger-app-nav a[aria-current=page] {
border-color: color-mix(in srgb, var(--accent) 24%, transparent);
background:
linear-gradient(
135deg,
rgba(37, 99, 235, 0.1),
rgba(8, 145, 178, 0.08));
color: var(--ink-strong);
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.06);
}
.passenger-app-nav a[aria-current=page]::before {
background: var(--accent-strong);
}
.passenger-inline-update {
display: grid;
gap: 0.35rem;
padding: 0.95rem 1rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: var(--radius-lg);
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.84),
rgba(255, 247, 238, 0.7));
}
.passenger-result-card {
display: grid;
gap: 0.85rem;
justify-items: center;
padding: 1.2rem 1rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 26px;
text-align: center;
}
.passenger-result-card--success {
background:
linear-gradient(
135deg,
rgba(241, 252, 247, 0.98),
rgba(255, 255, 255, 0.94));
}
.passenger-result-card--warning {
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--accent-soft) 70%, white),
rgba(255, 255, 255, 0.94));
}
.passenger-result-card--warning .passenger-result-card__mark {
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--accent) 90%, white),
var(--accent-strong));
box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 22%, transparent);
}
.passenger-result-card--warning .passenger-result-card__actions {
grid-template-columns: minmax(0, 1fr);
}
.passenger-result-card__mark {
display: grid;
place-items: center;
width: 4rem;
height: 4rem;
border-radius: 50%;
background:
linear-gradient(
135deg,
#2f8a5c,
#4bb07c);
color: white;
font-size: 2rem;
font-weight: 800;
box-shadow: 0 16px 34px rgba(47, 138, 92, 0.22);
}
.passenger-result-card h2,
.passenger-result-card__summary {
margin: 0;
}
.passenger-result-card h2 {
font-size: clamp(1.4rem, 5vw, 2rem);
line-height: 1.06;
}
.passenger-result-card__summary {
display: grid;
gap: 0.12rem;
}
.passenger-result-card__summary strong {
font-size: clamp(1.18rem, 4vw, 1.5rem);
line-height: 1.1;
}
.passenger-result-card__summary span {
color: var(--muted);
font-size: 0.92rem;
}
.passenger-result-card__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem;
width: 100%;
}
.passenger-result-card__actions > .button {
width: 100%;
}
.passenger-result-disclosure {
display: grid;
align-content: start;
}
.passenger-result-disclosure[open] {
grid-column: 1 / -1;
}
.passenger-result-disclosure summary {
list-style: none;
width: 100%;
cursor: pointer;
}
.passenger-result-disclosure summary::-webkit-details-marker {
display: none;
}
.passenger-result-disclosure__body {
display: grid;
gap: 0.75rem;
margin-top: 0.75rem;
text-align: left;
}
.dashboard-intro--passenger-home {
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}
.passenger-page-nav {
margin-bottom: 1rem;
}
.dashboard-actions--stack {
display: grid;
gap: 0.75rem;
}
.button--large {
min-height: 3.5rem;
font-size: 1rem;
}
.passenger-request-flow {
gap: 1rem;
}
.passenger-step-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.passenger-flow-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.passenger-flow-step--submit {
gap: 1rem;
}
.passenger-estimate-panel {
display: grid;
gap: 0.85rem;
}
.passenger-route-preview {
min-height: 11rem;
}
.passenger-estimate-panel h3 {
margin: 0;
font-size: 1.05rem;
}
.address-field {
gap: 0.7rem;
}
.passenger-address-pair .address-field {
gap: 0.42rem;
}
.passenger-address-pair .preset-control {
padding: 0.7rem 0.78rem;
border-radius: 18px;
border-color: rgba(37, 99, 235, 0.12);
background:
linear-gradient(
180deg,
rgba(248, 252, 255, 0.96),
rgba(238, 247, 255, 0.72));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.54);
}
.passenger-address-pair .preset-control:focus-within {
border-color: rgba(37, 99, 235, 0.28);
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.98),
rgba(235, 246, 255, 0.82));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 10px 24px rgba(37, 99, 235, 0.1);
}
.address-input-widget {
display: grid;
gap: 0.38rem;
}
.passenger-address-pair .address-input-widget {
gap: 0.26rem;
}
.address-input-widget[data-address-selected=true] .address-field input[type=search] {
border-color: rgba(54, 122, 78, 0.42);
background: rgba(244, 252, 246, 0.98);
box-shadow: 0 0 0 3px rgba(54, 122, 78, 0.12);
}
.address-input-widget__control {
position: relative;
}
.address-input-widget__toolbar {
display: flex;
justify-content: flex-end;
margin-top: 0.55rem;
}
.address-current-location-button {
min-height: 2.5rem;
padding-inline: 0.85rem;
}
.address-current-location-status {
margin: 0.4rem 0 0;
color: var(--muted);
font-size: 0.82rem;
line-height: 1.35;
}
.address-current-location-status[data-status=error] {
color: var(--danger);
}
.address-search-results {
position: absolute;
top: calc(100% + 0.35rem);
left: 0;
right: 0;
z-index: 40;
min-height: 1px;
}
.passenger-address-pair .address-search-results {
top: calc(100% + 0.25rem);
z-index: 90;
}
.address-search-results--portal {
position: fixed;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 2000;
min-height: 0;
}
.address-search-results--portal[hidden] {
display: none;
}
.address-search-results[data-address-results-portaled=true] {
display: none;
}
body.console-shell--ops dialog .address-input-widget__control > .address-search-results:not(.address-search-results--portal) {
display: none;
}
.address-search-results--portal .address-search-results__panel {
max-height: var(--address-results-portal-max-height, min(16rem, 42vh));
}
.address-search-results:empty {
display: none;
}
.address-search-results__panel {
display: grid;
gap: 0.25rem;
max-height: min(20rem, 48vh);
overflow-y: auto;
padding: 0.35rem;
border: 1px solid rgba(43, 35, 27, 0.12);
border-radius: 18px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 24px 42px rgba(20, 16, 12, 0.18);
backdrop-filter: blur(8px);
}
.passenger-address-pair .address-search-results__panel {
max-height: min(16rem, 42vh);
}
.address-search-results__panel--message {
padding: 0.65rem 0.75rem;
}
.address-search-results__list {
display: grid;
gap: 0.1rem;
}
.address-search-result {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.2rem 0.55rem;
justify-items: start;
width: 100%;
padding: 0.82rem 0.85rem;
border: 0;
border-radius: 14px;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
transition:
transform 140ms ease,
border-color 140ms ease,
box-shadow 140ms ease,
background-color 140ms ease;
}
.address-search-result::before {
content: "";
grid-row: 1 / span 3;
align-self: start;
width: 1.05rem;
height: 1.05rem;
margin-top: 0.12rem;
background: color-mix(in srgb, var(--accent) 78%, var(--ink));
mask-image: var(--button-icon-location);
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: var(--button-icon-location);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
.address-search-result:hover {
transform: translateY(-1px);
background: rgba(255, 246, 236, 0.94);
box-shadow: 0 12px 24px rgba(37, 28, 19, 0.08);
}
.address-search-result.is-active,
.address-search-result[aria-selected=true] {
transform: translateY(-1px);
background: rgba(255, 246, 236, 0.94);
box-shadow: 0 12px 24px rgba(37, 28, 19, 0.08);
}
.address-search-result__label {
grid-column: 2;
font-weight: 700;
}
.address-search-result__subtitle {
grid-column: 2;
color: color-mix(in srgb, var(--ink) 72%, white);
font-size: 0.88rem;
line-height: 1.35;
}
.address-search-result__meta {
grid-column: 2;
color: var(--muted);
font-size: 0.74rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.address-search-results__note {
margin: 0;
color: color-mix(in srgb, var(--ink) 78%, white);
font-size: 0.88rem;
line-height: 1.4;
}
.address-selection-inline,
.passenger-request-card__selected,
.passenger-location-card {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.55rem;
min-height: 1.25rem;
}
.address-input-widget[data-address-selected=true] .address-selection-inline:not(.address-selection-inline--empty) {
padding: 0.55rem 0.7rem;
border: 1px solid rgba(54, 122, 78, 0.18);
border-radius: 14px;
background: rgba(244, 252, 246, 0.9);
}
.passenger-address-pair .address-selection-inline--empty {
display: none;
}
.passenger-address-pair .address-input-widget[data-address-selected=true] .address-selection-inline:not(.address-selection-inline--empty) {
padding: 0.45rem 0.62rem;
}
body.console-shell--passenger .passenger-address-pair .address-input-widget[data-address-selected=true] .address-field input[type=search] {
border-color: rgba(37, 99, 235, 0.34);
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.98),
rgba(235, 246, 255, 0.88));
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
body.console-shell--passenger .passenger-address-pair .address-input-widget[data-address-selected=true] .address-selection-inline:not(.address-selection-inline--empty) {
border-color: rgba(37, 99, 235, 0.16);
background:
linear-gradient(
180deg,
rgba(248, 252, 255, 0.96),
rgba(230, 243, 255, 0.78));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}
.address-selection-inline strong,
.passenger-request-card__selected strong,
.passenger-location-card strong {
font-size: 0.88rem;
line-height: 1.3;
}
.address-selection-inline span,
.address-selection-inline strong,
.address-selection-inline .form-hint,
.passenger-request-card__selected p,
.passenger-location-card p {
margin: 0;
}
.address-selection-inline__kicker,
.address-selection-inline__meta {
color: var(--muted);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.address-selection-inline--empty {
color: var(--muted);
}
.route-map-card {
display: grid;
gap: 0.8rem;
padding: 0.9rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.74);
}
.route-map-card__canvas {
position: relative;
overflow: hidden;
border-radius: calc(var(--radius-lg) - 0.1rem);
background:
radial-gradient(
circle at top left,
rgba(214, 176, 110, 0.18),
transparent 42%),
linear-gradient(
180deg,
rgba(255, 255, 255, 0.84),
rgba(246, 239, 227, 0.88));
box-shadow: inset 0 0 0 1px rgba(43, 35, 27, 0.04);
}
.route-map-card__open-link {
position: absolute;
inset: 0 0 1.35rem;
z-index: 2;
border-radius: inherit;
cursor: pointer;
}
.route-map-card__open-link:focus-visible {
outline: 3px solid color-mix(in srgb, var(--accent) 72%, white);
outline-offset: -5px;
}
.route-map-card__map-surface {
min-height: clamp(14rem, 30vw, 18rem);
}
.route-map-card__map-surface,
.route-map-card__map-surface .maplibregl-map,
.route-map-card__map-surface .maplibregl-canvas-container,
.route-map-card__map-surface .maplibregl-canvas {
width: 100%;
height: 100%;
}
.route-map-card__svg {
display: block;
width: 100%;
height: auto;
}
.route-map-card__path {
fill: none;
stroke: color-mix(in srgb, var(--accent) 72%, #2b231b);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 6;
filter: drop-shadow(0 8px 18px rgba(37, 28, 19, 0.12));
}
.route-map-card__path--fallback {
stroke-dasharray: 12 10;
stroke-width: 5;
}
.route-map-card__pin {
stroke: rgba(255, 255, 255, 0.92);
stroke-width: 4;
}
.route-map-card__pin--pickup {
fill: #1d7a5d;
}
.route-map-card__pin--dropoff {
fill: #b04a2e;
}
.route-map-card__pin-label {
fill: #fff;
font-size: 0.75rem;
font-weight: 700;
text-anchor: middle;
dominant-baseline: central;
}
.route-map-card__summary {
display: grid;
gap: 0.45rem;
}
.route-map-card__summary--compact {
display: flex;
justify-content: flex-start;
}
.route-map-card__summary .form-hint {
margin: 0;
}
.route-map-card__summary--actions {
gap: 0.45rem;
justify-items: stretch;
}
.route-map-card__summary--actions .button {
justify-content: center;
width: 100%;
}
.route-map-card__canvas .maplibregl-ctrl-attrib {
font-size: 0.62rem;
line-height: 1.2;
border-radius: 10px 0 0 0;
background: rgba(255, 255, 255, 0.9);
}
.route-map-card--passenger-tracking {
padding: 0.62rem;
border-radius: 26px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.9),
rgba(241, 250, 247, 0.82));
box-shadow: 0 14px 34px rgba(37, 28, 19, 0.08);
}
.route-map-card--passenger-tracking .route-map-card__canvas {
border-radius: 22px;
background:
radial-gradient(
circle at 18% 16%,
rgba(23, 163, 108, 0.18),
transparent 36%),
linear-gradient(
180deg,
rgba(242, 249, 247, 0.98),
rgba(232, 241, 244, 0.92));
}
.route-map-card--passenger-tracking .route-map-card__map-surface {
aspect-ratio: 1 / 1;
height: auto;
min-height: 0;
}
.route-map-card__placeholder {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
place-items: center;
padding: 1.35rem;
background:
radial-gradient(
circle at 30% 22%,
rgba(23, 163, 108, 0.16),
transparent 32%),
linear-gradient(
135deg,
rgba(245, 251, 248, 0.97),
rgba(235, 244, 247, 0.95));
color: #123038;
text-align: center;
}
.route-map-card__placeholder[hidden] {
display: none;
}
.route-map-card__placeholder > * {
max-width: 17rem;
}
.route-map-card__placeholder strong {
display: block;
margin-top: 0.85rem;
font-size: 1rem;
line-height: 1.18;
}
.route-map-card__placeholder span:not(.route-map-card__placeholder-icon) {
display: block;
margin-top: 0.35rem;
color: color-mix(in srgb, #123038 68%, white);
font-size: 0.88rem;
font-weight: 720;
line-height: 1.35;
}
.route-map-card__placeholder-icon {
position: relative;
display: inline-grid;
place-items: center;
width: 3.1rem;
height: 3.1rem;
border: 1px solid rgba(14, 111, 131, 0.18);
border-radius: 17px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.94),
rgba(225, 241, 236, 0.84));
box-shadow: 0 13px 30px rgba(8, 27, 34, 0.13);
}
.route-map-card__placeholder-icon::before {
content: "";
position: absolute;
width: 1.85rem;
height: 1.25rem;
border-bottom: 4px solid #17a36c;
border-left: 4px solid #17a36c;
border-radius: 0 0 0 13px;
transform: rotate(-18deg);
}
.route-map-card__placeholder-icon::after {
content: "";
position: absolute;
right: 0.68rem;
top: 0.64rem;
width: 0.72rem;
height: 0.72rem;
border: 3px solid #0e6f83;
border-radius: 999px 999px 999px 0;
background: #fff;
transform: rotate(-45deg);
}
.route-map-card--ops {
align-self: start;
gap: 0.48rem;
padding: 0.56rem;
border-color: rgba(24, 32, 42, 0.08);
background: rgba(248, 250, 252, 0.94);
}
.route-map-card--ops .route-map-card__canvas {
background:
radial-gradient(
circle at top left,
rgba(44, 106, 120, 0.12),
transparent 40%),
linear-gradient(
180deg,
rgba(255, 255, 255, 0.96),
rgba(236, 241, 245, 0.92));
}
.route-map-card--ops .route-map-card__map-surface {
min-height: clamp(9.5rem, 15vw, 12.5rem);
}
.request-card--compact {
gap: 0.55rem;
}
.passenger-mobile-nav {
display: none;
}
body.driver-workspace-shell {
overflow: hidden;
--driver-icon-shift: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202v10M6.3%205.8A8%208%200%201%200%2017.7%205.8%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-ride: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5%2013h14l-1.4-4.2A2.5%202.5%200%200%200%2015.2%207H8.8a2.5%202.5%200%200%200-2.4%201.8L5%2013Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M6%2013v4h12v-4M7.5%2017v2M16.5%2017v2M8.5%2015.2h.01M15.5%2015.2h.01%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-location: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202.8a6.7%206.7%200%200%200-6.7%206.7c0%204.9%206.7%2011.7%206.7%2011.7s6.7-6.8%206.7-11.7A6.7%206.7%200%200%200%2012%202.8Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M12%2011.7a2.2%202.2%200%201%200%200-4.4%202.2%202.2%200%200%200%200%204.4Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-offers: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M8%205h10M8%2012h10M8%2019h7M4%205h.01M4%2012h.01M4%2019h.01%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.1%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-settings: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2015.2a3.2%203.2%200%201%200%200-6.4%203.2%203.2%200%200%200%200%206.4Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M19.4%2015a1.8%201.8%200%200%200%20.36%201.98l.04.04a2.1%202.1%200%200%201-2.97%202.97l-.04-.04A1.8%201.8%200%200%200%2014.8%2019.6a1.8%201.8%200%200%200-1.08%201.65V21.4a2.1%202.1%200%200%201-4.2%200v-.06A1.8%201.8%200%200%200%208.45%2019.7a1.8%201.8%200%200%200-1.98.36l-.04.04a2.1%202.1%200%200%201-2.97-2.97l.04-.04A1.8%201.8%200%200%200%203.85%2015a1.8%201.8%200%200%200-1.65-1.08H2.1a2.1%202.1%200%200%201%200-4.2h.06a1.8%201.8%200%200%200%201.65-1.08%201.8%201.8%200%200%200-.36-1.98l-.04-.04a2.1%202.1%200%200%201%202.97-2.97l.04.04A1.8%201.8%200%200%200%208.5%204.05a1.8%201.8%200%200%200%201.02-1.62V2.3a2.1%202.1%200%200%201%204.2%200v.06a1.8%201.8%200%200%200%201.08%201.65%201.8%201.8%200%200%200%201.98-.36l.04-.04a2.1%202.1%200%200%201%202.97%202.97l-.04.04a1.8%201.8%200%200%200-.36%201.98%201.8%201.8%200%200%200%201.65%201.08h.1a2.1%202.1%200%200%201%200%204.2h-.06A1.8%201.8%200%200%200%2019.4%2015Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-refresh: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M20%206v5h-5M4%2018v-5h5M18.2%2010A6.2%206.2%200%200%200%207%207.2L4%2010M5.8%2014A6.2%206.2%200%200%200%2017%2016.8L20%2014%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-online: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202v9M7%205.8A7.2%207.2%200%201%200%2017%205.8%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-offline: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202v5M7%205.8A7.2%207.2%200%200%200%2012%2019.2c1.7%200%203.3-.6%204.5-1.6M17%205.8c.8.7%201.4%201.6%201.8%202.6M3%203l18%2018%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-map: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M9%2018l-6%203V6l6-3%206%203%206-3v15l-6%203-6-3Z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M9%203v15M15%206v15%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-accept: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M20%206L9%2017l-5-5%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-details: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M7%207h11M7%2012h11M7%2017h8M4%207h.01M4%2012h.01M4%2017h.01%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-back: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M19%2012H5M11%206l-6%206%206%206%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-reject: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M18%206L6%2018M6%206l12%2012%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-complete: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5%2021V4M5%204h11l-1.2%204L16%2012H5%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-logout: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M9%2021H5V3h4M16%2017l5-5-5-5M21%2012H9%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-alert: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%203l10%2018H2L12%203ZM12%209v5M12%2018h.01%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
--driver-icon-home: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%2011l9-8%209%208M5%2010v10h14V10M9%2020v-6h6v6%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E);
}
.driver-workspace-main {
height: 100dvh;
min-height: 100vh;
padding: 0;
overflow: hidden;
}
.driver-workspace {
--driver-topbar-height: calc(4.85rem + env(safe-area-inset-top, 0px));
--driver-footer-height: calc(2.7rem + env(safe-area-inset-bottom, 0px));
width: 100%;
height: 100dvh;
margin: 0;
display: grid;
grid-template-rows: minmax(0, 1fr);
gap: 0;
padding: var(--driver-topbar-height) 0 var(--driver-footer-height);
overflow: hidden;
}
.driver-workspace-header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 18;
display: grid;
min-height: var(--driver-topbar-height);
padding: calc(0.95rem + env(safe-area-inset-top, 0px)) 1rem 0.95rem;
border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(15, 79, 76, 0.14));
border-width: 0 0 1px;
border-radius: 0;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 8px 24px rgba(16, 24, 20, 0.12);
backdrop-filter: blur(18px);
}
body.driver-workspace-shell .driver-workspace-header {
inset: 0 0 auto;
width: 100vw;
max-width: none;
margin: 0;
border-radius: 0 !important;
}
.driver-workspace-header__row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 2rem;
}
.driver-workspace-header__lead {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
}
.driver-workspace-brand {
display: inline-flex;
align-items: center;
gap: 0.65rem;
min-width: 0;
text-decoration: none;
}
.driver-workspace-brand__mark {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 2.62rem;
flex: 0 0 4rem;
}
.driver-workspace-brand__copy {
display: grid;
gap: 0.08rem;
}
.driver-workspace-brand__copy strong {
font-size: 1rem;
letter-spacing: 0.02em;
white-space: nowrap;
}
.driver-workspace-footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 17;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.75rem;
width: 100%;
min-height: var(--driver-footer-height);
padding: 0.45rem 1rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
border: 1px solid rgba(23, 32, 42, 0.08);
border-width: 1px 0 0;
border-radius: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(14px);
}
body.driver-workspace-shell .driver-workspace-footer {
inset: auto 0 0;
width: 100vw;
max-width: none;
margin: 0;
border-radius: 0 !important;
}
.driver-native-status {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.35rem;
min-width: 0;
}
.driver-native-status[hidden],
.driver-native-status__item[hidden] {
display: none;
}
.driver-native-status__item {
display: inline-flex;
align-items: center;
min-height: 1.75rem;
max-width: 13rem;
padding: 0.3rem 0.55rem;
border: 1px solid rgba(23, 32, 42, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.78);
color: var(--ink);
font-size: 0.78rem;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.driver-native-status__item--pending {
border-color: color-mix(in srgb, var(--accent-2) 26%, white);
background: color-mix(in srgb, white 88%, var(--accent-2-soft));
}
.driver-native-status__item--ok {
border-color: color-mix(in srgb, var(--success) 30%, white);
background: color-mix(in srgb, white 88%, var(--success-soft));
}
.driver-native-status__item--warn {
border-color: color-mix(in srgb, var(--accent-2) 34%, white);
background: color-mix(in srgb, white 88%, var(--accent-2-soft));
}
.driver-native-status__item--error {
border-color: color-mix(in srgb, var(--danger) 30%, white);
background: color-mix(in srgb, white 88%, var(--danger-soft));
}
.driver-footer-availability {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 1.75rem;
min-width: 0;
color: var(--muted);
font-size: 0.8rem;
font-weight: 760;
line-height: 1.2;
white-space: nowrap;
}
.driver-footer-availability strong {
color: var(--ink-strong);
}
.driver-footer-availability__dot {
width: 0.62rem;
height: 0.62rem;
flex: 0 0 auto;
border-radius: 999px;
}
.driver-footer-availability__dot--online {
background: var(--success);
box-shadow: 0 0 0 0.2rem rgba(13, 148, 88, 0.12);
}
.driver-footer-availability__dot--offline {
background: #6b7280;
box-shadow: 0 0 0 0.2rem rgba(107, 114, 128, 0.14);
}
.driver-workspace-nav {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.42rem;
min-width: 0;
}
.driver-workspace-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.34rem;
min-height: 2.42rem;
padding: 0.38rem 0.54rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 14px;
background: rgba(255, 255, 255, 0.74);
color: color-mix(in srgb, var(--ink) 82%, var(--muted));
font-size: 0.86rem;
font-weight: 700;
text-align: center;
text-decoration: none;
transition:
border-color 160ms ease,
background 160ms ease,
color 160ms ease,
transform 160ms ease;
}
.driver-workspace-nav a::before {
content: "";
display: inline-block;
width: 1.08rem;
height: 1.08rem;
flex: 0 0 1.08rem;
background: currentColor;
mask-image: var(--driver-nav-icon);
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
opacity: 0.9;
-webkit-mask-image: var(--driver-nav-icon);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
.driver-workspace-nav a[href="/"] {
--driver-nav-icon: var(--driver-icon-shift);
}
.driver-workspace-nav a[href="/ride"] {
--driver-nav-icon: var(--driver-icon-ride);
}
.driver-workspace-nav a[href="/offers"] {
--driver-nav-icon: var(--driver-icon-offers);
}
.driver-workspace-nav a[href="/settings"] {
--driver-nav-icon: var(--driver-icon-settings);
}
.driver-workspace-nav a:hover,
.driver-workspace-nav a:focus-visible {
border-color: color-mix(in srgb, var(--accent) 24%, rgba(23, 32, 42, 0.12));
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
transform: translateY(-1px);
}
.driver-workspace-nav a[aria-current=page] {
border-color: color-mix(in srgb, var(--accent) 34%, rgba(23, 32, 42, 0.16));
background:
linear-gradient(
135deg,
color-mix(in srgb, white 80%, var(--accent-soft)),
color-mix(in srgb, white 92%, var(--accent-soft)));
color: var(--ink-strong);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, white);
}
.driver-workspace-panel {
display: grid;
align-content: start;
align-items: start;
grid-auto-rows: max-content;
gap: 0.9rem;
width: min(calc(100vw - 1.25rem), 1440px);
min-height: 0;
min-width: 0;
margin: 0 auto;
padding: 0.85rem 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.driver-icon-button::before {
content: "";
display: inline-block;
width: 1.12rem;
height: 1.12rem;
flex: 0 0 1.12rem;
background: currentColor;
mask-image: var(--driver-button-icon);
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: var(--driver-button-icon);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
.button--compact.driver-icon-button::before {
width: 0.96rem;
height: 0.96rem;
flex-basis: 0.96rem;
}
.driver-icon-button--shift {
--driver-button-icon: var(--driver-icon-shift);
}
.driver-icon-button--ride {
--driver-button-icon: var(--driver-icon-ride);
}
.driver-icon-button--location {
--driver-button-icon: var(--driver-icon-location);
}
.driver-icon-button--offers {
--driver-button-icon: var(--driver-icon-offers);
}
.driver-icon-button--map {
--driver-button-icon: var(--driver-icon-map);
}
.driver-icon-button--accept {
--driver-button-icon: var(--driver-icon-accept);
}
.driver-icon-button--details {
--driver-button-icon: var(--driver-icon-details);
}
.driver-icon-button--back {
--driver-button-icon: var(--driver-icon-back);
}
.driver-icon-button--refresh {
--driver-button-icon: var(--driver-icon-refresh);
}
.driver-icon-button--online {
--driver-button-icon: var(--driver-icon-online);
}
.driver-icon-button--offline {
--driver-button-icon: var(--driver-icon-offline);
}
.driver-icon-button--complete {
--driver-button-icon: var(--driver-icon-complete);
}
.driver-icon-button--reject {
--driver-button-icon: var(--driver-icon-reject);
}
.driver-icon-button--logout {
--driver-button-icon: var(--driver-icon-logout);
}
.driver-icon-button--alert {
--driver-button-icon: var(--driver-icon-alert);
}
.driver-icon-button--home {
--driver-button-icon: var(--driver-icon-home);
}
body.console-shell--driver .driver-panel-card {
align-self: start;
gap: 0.9rem;
padding: 1rem 1.1rem;
border-color: rgba(18, 26, 34, 0.14);
border-radius: 28px;
background: #ffffff;
box-shadow: none;
}
body.console-shell--driver .driver-panel-card::before {
background:
linear-gradient(
90deg,
var(--accent) 0%,
#26313a 100%);
}
.driver-empty-state {
align-self: center;
justify-self: center;
display: grid;
justify-items: center;
gap: 0.35rem;
width: min(100%, 34rem);
min-height: min(34rem, calc(100dvh - var(--driver-topbar-height) - var(--driver-footer-height) - 2rem));
align-content: center;
padding: 2rem 1rem;
color: var(--muted);
text-align: center;
}
.driver-empty-state h2 {
max-width: 28rem;
margin: -0.2rem 0 0;
color: var(--ink-strong);
font-size: clamp(1.35rem, 2.4vw, 1.85rem);
line-height: 1.12;
}
.driver-empty-state p {
max-width: 27rem;
margin: 0;
font-size: 0.98rem;
line-height: 1.45;
}
.driver-empty-state__illustration {
position: relative;
display: grid;
place-items: center;
width: 28.8rem;
max-width: 94vw;
height: 19.2rem;
border: 0;
background: transparent;
}
.driver-empty-state__illustration img {
position: relative;
display: block;
width: 21.44rem;
max-width: 90%;
height: auto;
}
.driver-panel-header {
display: grid;
gap: 0.3rem;
}
.driver-panel-header h2 {
margin: 0;
font-size: clamp(1.2rem, 2vw, 1.5rem);
line-height: 1.1;
}
.driver-panel-header .surface-note {
margin: 0;
max-width: 58rem;
}
.driver-panel-header--compact {
gap: 0.18rem;
}
.driver-shift-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: center;
padding: 1rem;
border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(23, 32, 42, 0.1));
border-radius: 22px;
background: rgba(255, 255, 255, 0.72);
}
.driver-shift-card__status {
display: grid;
gap: 0.25rem;
min-width: 0;
}
.driver-shift-card__status strong {
color: var(--ink-strong);
font-size: clamp(1.25rem, 2.5vw, 1.7rem);
line-height: 1.05;
}
.driver-shift-card__status p {
margin: 0;
color: var(--muted);
font-size: 0.92rem;
line-height: 1.45;
}
.driver-shift-status-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
color: var(--muted);
font-size: clamp(1.08rem, 2vw, 1.35rem);
font-weight: 800;
line-height: 1.15;
}
.driver-shift-status-line strong {
color: var(--ink-strong);
font-size: inherit;
line-height: inherit;
}
.driver-shift-status-line__icon {
display: inline-flex;
width: 0.86rem;
height: 0.86rem;
flex: 0 0 auto;
border-radius: 999px;
box-shadow: 0 0 0 0.32rem rgba(13, 148, 88, 0.12);
}
.driver-shift-status-line--online .driver-shift-status-line__icon {
background: var(--success);
}
.driver-shift-status-line--offline .driver-shift-status-line__icon {
background: #6b7280;
box-shadow: 0 0 0 0.32rem rgba(107, 114, 128, 0.14);
}
.driver-shift-card__actions {
display: grid;
gap: 0.55rem;
min-width: 13rem;
}
.driver-shift-card__actions .button {
width: 100%;
}
.driver-shift-state {
display: inline-flex;
width: max-content;
align-items: center;
min-height: 1.8rem;
padding: 0.28rem 0.58rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
color: var(--ink);
font-size: 0.76rem;
font-weight: 800;
line-height: 1;
}
.driver-shift-state--active,
.driver-shift-state--online {
border-color: color-mix(in srgb, var(--success) 28%, white);
background: color-mix(in srgb, white 86%, var(--success-soft));
}
.driver-shift-state--offline {
border-color: color-mix(in srgb, var(--muted) 24%, white);
background: rgba(255, 255, 255, 0.64);
color: var(--muted);
}
.driver-shift-meta {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(6rem, 0.45fr) minmax(0, 1.45fr);
gap: 0.65rem;
}
.driver-shift-meta__item {
display: grid;
gap: 0.22rem;
min-width: 0;
padding: 0.75rem 0.85rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 16px;
background: rgba(255, 255, 255, 0.58);
}
.driver-shift-meta__item span,
.driver-location-current__label {
color: var(--muted);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
line-height: 1.1;
text-transform: uppercase;
}
.driver-shift-meta__item strong {
overflow-wrap: anywhere;
color: var(--ink-strong);
font-size: 0.96rem;
line-height: 1.3;
}
.driver-shift-meta__item small {
color: var(--muted);
font-size: 0.78rem;
line-height: 1.35;
}
.driver-secondary-actions {
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
}
.driver-location-current {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem;
border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(23, 32, 42, 0.1));
border-radius: 22px;
background: rgba(255, 255, 255, 0.72);
}
.driver-location-current--home {
align-items: stretch;
}
.driver-location-current__body {
display: grid;
gap: 0.25rem;
min-width: 0;
}
.driver-location-current__body strong {
overflow-wrap: anywhere;
color: var(--ink-strong);
font-size: clamp(1.2rem, 2.2vw, 1.55rem);
line-height: 1.12;
}
.driver-location-current__body p,
.driver-location-current__body small {
margin: 0;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.4;
}
.driver-location-current__actions {
display: grid;
align-content: center;
gap: 0.55rem;
min-width: 12rem;
}
.driver-location-current__actions .button {
width: 100%;
}
.driver-location-form .form-section {
gap: 0.8rem;
}
.driver-location-dialog {
width: min(42rem, calc(100vw - 2rem));
max-height: min(88vh, 42rem);
margin: auto;
padding: 0;
border: 0;
border-radius: 28px;
background: transparent;
color: var(--ink);
}
.driver-location-dialog::backdrop {
background: rgba(16, 24, 20, 0.42);
backdrop-filter: blur(4px);
}
.driver-location-dialog__panel {
display: grid;
gap: 0.9rem;
max-height: min(88vh, 42rem);
overflow-y: auto;
padding: 1.15rem;
border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(23, 32, 42, 0.08));
border-radius: 28px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 28px 72px rgba(16, 24, 20, 0.28);
}
.driver-location-dialog__header {
display: grid;
gap: 0.2rem;
}
.driver-location-dialog__header h3 {
margin: 0.1rem 0 0;
color: var(--ink-strong);
font-size: 1.2rem;
}
.driver-location-dialog__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
}
.driver-location-dialog__actions .button {
width: 100%;
}
.driver-offers-panel {
gap: 0.75rem;
}
.driver-offers-list {
display: grid;
gap: 0.9rem;
}
.driver-offer-row {
display: grid;
grid-template-columns: minmax(8.5rem, 0.34fr) minmax(0, 1fr) minmax(11rem, 12.5rem);
gap: 1rem;
align-items: start;
padding: 1rem;
border: 1px solid rgba(23, 32, 42, 0.1);
border-radius: 20px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.94),
rgba(248, 251, 249, 0.86)),
rgba(255, 255, 255, 0.84);
box-shadow: 0 12px 34px rgba(23, 32, 42, 0.08);
}
.driver-offer-row__map {
align-self: start;
min-width: 0;
}
.driver-offer-map {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 1;
min-height: 0;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 18px;
background:
radial-gradient(
circle at 22% 18%,
rgba(14, 111, 131, 0.14),
transparent 34%),
linear-gradient(
180deg,
rgba(237, 247, 246, 0.96),
rgba(255, 255, 255, 0.92));
}
.driver-offer-map__surface,
.driver-offer-map__surface .maplibregl-map,
.driver-offer-map__surface .maplibregl-canvas-container,
.driver-offer-map__surface .maplibregl-canvas {
width: 100%;
height: 100%;
min-height: 0;
}
.driver-offer-map__placeholder {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
place-items: center;
gap: 0.45rem;
padding: 1rem;
background:
radial-gradient(
circle at center,
rgba(255, 255, 255, 0.92),
rgba(239, 249, 247, 0.88));
color: var(--ink-strong);
text-align: center;
}
.driver-offer-map__placeholder[hidden] {
display: none;
}
.driver-offer-map__placeholder strong {
font-size: 0.88rem;
line-height: 1.2;
}
.driver-offer-map__badge {
position: absolute;
left: 0.62rem;
bottom: 0.62rem;
z-index: 3;
max-width: calc(100% - 1.24rem);
overflow: hidden;
padding: 0.38rem 0.52rem;
border: 1px solid rgba(255, 255, 255, 0.62);
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
color: var(--ink-strong);
font-size: 0.72rem;
font-weight: 850;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
box-shadow: 0 8px 20px rgba(23, 32, 42, 0.16);
backdrop-filter: blur(12px);
}
.driver-offer-map__fullscreen {
position: absolute;
top: 0.55rem;
right: 0.55rem;
z-index: 5;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border: 1px solid rgba(255, 255, 255, 0.64);
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
color: var(--ink-strong);
box-shadow: 0 8px 20px rgba(23, 32, 42, 0.16);
backdrop-filter: blur(12px);
}
.driver-offer-map__fullscreen span {
display: block;
width: 1rem;
height: 1rem;
background: currentColor;
mask-image: var(--driver-icon-map);
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: var(--driver-icon-map);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
.driver-offer-map__fullscreen:hover,
.driver-offer-map__fullscreen:focus-visible {
background: white;
color: var(--accent-strong);
}
.driver-offer-row__main,
.driver-offer-row__decision,
.driver-offer-route {
display: grid;
gap: 0.72rem;
min-width: 0;
}
.driver-offer-row__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
}
.driver-offer-row__meta {
display: flex;
align-items: center;
gap: 0.45rem;
overflow: hidden;
min-width: 0;
color: var(--muted);
font-size: 0.8rem;
font-weight: 780;
}
.driver-offer-row__meta > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.driver-offer-row__request {
display: inline-flex;
align-items: center;
min-height: 1.8rem;
padding: 0 0.55rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
color: var(--ink-strong);
}
.driver-offer-row__fare {
display: grid;
justify-items: end;
gap: 0.08rem;
text-align: right;
}
.driver-offer-row__fare span {
color: var(--muted);
font-size: 0.72rem;
font-weight: 840;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.driver-offer-row__price {
color: var(--accent-strong);
font-size: clamp(1.18rem, 1.8vw, 1.45rem);
line-height: 1;
white-space: nowrap;
}
.driver-offer-stop {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.62rem;
align-items: start;
padding-top: 0.68rem;
border-top: 1px solid rgba(23, 32, 42, 0.08);
}
.driver-offer-stop:first-child {
padding-top: 0;
border-top: 0;
}
.driver-offer-stop strong {
display: block;
overflow-wrap: anywhere;
color: var(--ink-strong);
font-size: 1.02rem;
line-height: 1.18;
}
.driver-offer-stop p {
margin: 0.15rem 0 0;
color: var(--muted);
font-size: 0.88rem;
line-height: 1.32;
}
.driver-offer-stop__dot {
width: 0.78rem;
height: 0.78rem;
margin-top: 0.28rem;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 72%, white);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.92);
}
.driver-offer-stop__dot--dropoff {
background: var(--accent-strong);
}
.driver-offer-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
}
.driver-offer-metrics > span {
display: grid;
gap: 0.12rem;
padding: 0.62rem 0.65rem;
border: 1px solid rgba(23, 32, 42, 0.07);
border-radius: 14px;
background: rgba(255, 255, 255, 0.76);
min-width: 0;
}
.driver-offer-metrics > span strong {
overflow: hidden;
color: var(--ink-strong);
font-size: 1rem;
line-height: 1.08;
text-overflow: ellipsis;
white-space: nowrap;
}
.driver-offer-metrics > span small {
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
line-height: 1.15;
}
.driver-offer-row__decision {
align-content: stretch;
gap: 0.72rem;
padding: 0.72rem;
border: 1px solid rgba(23, 32, 42, 0.07);
border-radius: 16px;
background: rgba(255, 255, 255, 0.64);
}
.driver-offer-row__decision > .inline-form,
.driver-offer-row__decision > .inline-form .button,
.driver-offer-details,
.driver-offer-details .disclosure__summary {
width: 100%;
}
.driver-offer-details .disclosure__summary {
justify-content: center;
gap: 0.42rem;
min-height: 2.7rem;
}
.driver-offer-details .disclosure__summary::before,
.driver-ride-problem-disclosure .disclosure__summary::before {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
flex: 0 0 1rem;
background: currentColor;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
.driver-offer-details .disclosure__summary::before {
mask-image: var(--driver-icon-details);
-webkit-mask-image: var(--driver-icon-details);
}
.driver-ride-problem-disclosure .disclosure__summary::before {
mask-image: var(--driver-icon-alert);
-webkit-mask-image: var(--driver-icon-alert);
}
.driver-offer-detail-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.55rem;
}
.driver-offer-detail-actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-bottom: 0.55rem;
}
.driver-offer-detail-actions .button {
width: auto;
}
.driver-offer-card {
grid-template-columns: 1fr;
gap: 0.72rem;
}
.driver-offer-card__header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 0.65rem 1rem;
min-width: 0;
}
.driver-offer-card-identity {
display: grid;
gap: 0.14rem;
min-width: 0;
}
.driver-offer-card-identity h3 {
margin: 0;
color: var(--ink-strong);
font-size: 1.08rem;
line-height: 1.1;
}
.driver-offer-card-identity > span:not(.status-card__label) {
color: var(--muted);
font-size: 0.82rem;
font-weight: 780;
}
.driver-offer-card__status {
display: grid;
justify-items: end;
gap: 0.46rem;
min-width: 0;
}
.driver-offer-card__status .chip-row {
justify-content: flex-end;
}
.driver-offer-card__status .inline-form,
.driver-offer-card__status .button {
width: 100%;
}
.driver-offer-card-body {
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
gap: 0.7rem;
min-width: 0;
}
.driver-offer-overview-panel,
.driver-offer-timeline-panel,
.driver-offer-map-card {
display: grid;
align-content: start;
gap: 0.5rem;
min-width: 0;
padding: 0.66rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 16px;
background: rgba(248, 250, 252, 0.74);
}
.driver-offer-contact-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(8.4rem, 0.72fr);
gap: 0.42rem;
min-width: 0;
}
.driver-offer-contact-card {
display: grid;
align-content: start;
gap: 0.12rem;
min-width: 0;
padding: 0.5rem 0.56rem;
border: 1px solid rgba(23, 32, 42, 0.07);
border-radius: 12px;
background: rgba(255, 255, 255, 0.76);
}
.driver-offer-summary-label {
color: var(--muted);
font-size: 0.68rem;
font-weight: 850;
letter-spacing: 0.08em;
line-height: 1.15;
text-transform: uppercase;
}
.driver-offer-contact-card strong,
.driver-offer-location-card strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--ink-strong);
line-height: 1.2;
}
.driver-offer-contact-card__phone {
justify-self: start;
width: fit-content;
max-width: 100%;
padding: 0.16rem 0.42rem;
border: 1px solid rgba(23, 32, 42, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
font-family: var(--font-mono);
font-size: 0.84rem;
}
.driver-offer-contact-card--fare {
justify-items: end;
text-align: right;
}
.driver-offer-location-stack {
gap: 0.42rem;
}
.driver-offer-location-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "label action" "address action" "context action";
align-items: center;
gap: 0.12rem 0.48rem;
min-width: 0;
padding: 0.56rem 0.6rem;
border: 1px solid rgba(23, 32, 42, 0.07);
border-radius: 12px;
background: rgba(255, 255, 255, 0.74);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 28%, transparent);
}
.driver-offer-location-card--dropoff {
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent-2) 34%, transparent);
}
.driver-offer-location-card .driver-offer-summary-label {
grid-area: label;
}
.driver-offer-location-card strong {
grid-area: address;
font-size: 0.94rem;
}
.driver-offer-location-card p {
grid-area: context;
margin: 0;
overflow-wrap: anywhere;
color: var(--muted);
font-size: 0.78rem;
font-weight: 760;
line-height: 1.24;
}
.driver-offer-location-card .button {
grid-area: action;
min-height: 2rem;
padding-inline: 0.6rem;
}
.driver-offer-metrics {
grid-template-columns: 1fr;
}
.driver-offer-overview-panel .driver-offer-metrics {
margin-top: 0.08rem;
}
.driver-offer-metric {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "icon label" "icon value" "icon meta";
align-items: center;
gap: 0.06rem 0.62rem;
min-width: 0;
padding: 0.66rem 0.74rem;
border: 1px solid rgba(23, 32, 42, 0.07);
border-radius: 14px;
background: rgba(255, 255, 255, 0.78);
}
.driver-offer-metric__icon {
grid-area: icon;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.18rem;
height: 2.18rem;
border-radius: 14px;
background: color-mix(in srgb, var(--driver-offer-metric-color, var(--accent)) 13%, white);
}
.driver-offer-metric__icon::before {
content: "";
width: 1.16rem;
height: 1.16rem;
background: var(--driver-offer-metric-color, var(--accent));
mask-image: var(--driver-offer-metric-icon, var(--driver-icon-details));
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: var(--driver-offer-metric-icon, var(--driver-icon-details));
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
.driver-offer-metric > span:not(.driver-offer-metric__icon) {
grid-area: label;
min-width: 0;
color: var(--muted);
font-size: 0.74rem;
font-weight: 850;
line-height: 1.16;
}
.driver-offer-metric strong {
grid-area: value;
min-width: 0;
overflow-wrap: anywhere;
color: var(--ink-strong);
font-size: 1.12rem;
line-height: 1.08;
}
.driver-offer-metric small {
grid-area: meta;
min-width: 0;
overflow-wrap: anywhere;
color: var(--muted);
font-size: 0.72rem;
font-weight: 760;
line-height: 1.18;
}
.driver-offer-metric--approach {
--driver-offer-metric-color: var(--accent);
--driver-offer-metric-icon: var(--driver-icon-location);
}
.driver-offer-metric--distance {
--driver-offer-metric-color: var(--accent-2);
--driver-offer-metric-icon: var(--driver-icon-map);
}
.driver-offer-metric--duration {
--driver-offer-metric-color: #4f46e5;
--driver-offer-metric-icon: var(--driver-icon-details);
}
.driver-offer-flow-card {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.58rem;
min-width: 0;
min-height: 10rem;
padding: 0.68rem 0.72rem;
border: 1px solid rgba(23, 32, 42, 0.07);
border-radius: 14px;
background: rgba(255, 255, 255, 0.78);
}
.driver-offer-flow-card__rail {
position: relative;
width: 1.45rem;
min-height: 100%;
}
.driver-offer-flow-card__rail::before {
content: "";
position: absolute;
top: 0.35rem;
bottom: 0.15rem;
left: 50%;
width: 2px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 22%, var(--line));
transform: translateX(-50%);
}
.driver-offer-flow-card__rail::after {
content: "";
position: absolute;
top: 0.18rem;
left: 50%;
width: 0.78rem;
height: 0.78rem;
border: 3px solid white;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
transform: translateX(-50%);
}
.driver-offer-flow-card__body {
display: grid;
align-content: start;
gap: 0.28rem;
min-width: 0;
}
.driver-offer-flow-card__body strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--ink-strong);
font-size: 1rem;
line-height: 1.15;
}
.driver-offer-flow-card__body p {
margin: 0;
color: var(--muted);
font-size: 0.8rem;
font-weight: 760;
line-height: 1.25;
}
.driver-offer-map-card {
align-self: stretch;
align-content: stretch;
}
.driver-offer-map-card .driver-offer-map {
width: 100%;
aspect-ratio: 4 / 3;
min-height: 18rem;
}
.driver-offer-map__open-link {
position: absolute;
inset: 0;
z-index: 2;
}
.driver-offer-map-card__summary {
display: grid;
gap: 0.35rem;
}
.driver-offer-map-card__summary .button {
width: 100%;
}
body.console-shell--driver .driver-offers-panel {
gap: 0.7rem;
padding: 0;
border-color: transparent;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
body.console-shell--driver .driver-offers-panel::before {
content: none;
}
body.console-shell--driver .driver-offers-panel .driver-panel-header {
gap: 0.08rem;
}
body.console-shell--driver .driver-offers-panel .driver-panel-header h2 {
font-size: 1.04rem;
}
body.console-shell--driver .driver-offers-panel .driver-panel-header .surface-note {
display: none;
}
body.console-shell--driver .driver-offers-list {
gap: 0.72rem;
}
body.console-shell--driver .driver-offer-card {
grid-template-columns: minmax(0, 1fr);
gap: 0.44rem;
padding: 0.66rem;
border: 1px solid rgba(18, 26, 34, 0.18);
border-radius: 16px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.98),
rgba(248, 250, 252, 0.96)),
#ffffff;
box-shadow: none;
}
body.console-shell--driver .driver-offer-card__header {
grid-column: 1 / -1;
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 0.52rem;
}
body.console-shell--driver .driver-offer-pickup-hero {
display: grid;
align-content: center;
gap: 0.05rem;
min-width: 0;
padding: 0.56rem 0.68rem;
border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(23, 32, 42, 0.06));
border-radius: 13px;
background: color-mix(in srgb, var(--accent) 6%, white);
box-shadow: inset 4px 0 0 var(--accent);
text-decoration: none;
}
body.console-shell--driver .driver-offer-card__header .driver-offer-metrics {
grid-column: auto;
}
body.console-shell--driver .driver-offer-pickup-hero:hover,
body.console-shell--driver .driver-offer-pickup-hero:focus-visible {
border-color: color-mix(in srgb, var(--accent) 52%, rgba(23, 32, 42, 0.08));
background: color-mix(in srgb, var(--accent) 9%, white);
}
body.console-shell--driver .driver-offer-pickup-hero h3 {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: var(--ink-strong);
font-size: 1.08rem;
line-height: 1.12;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
body.console-shell--driver .driver-offer-pickup-hero p,
body.console-shell--driver .driver-offer-pickup-hero__meta {
margin: 0;
overflow: hidden;
color: var(--muted);
font-size: 0.7rem;
font-weight: 760;
line-height: 1.14;
text-overflow: ellipsis;
white-space: nowrap;
}
body.console-shell--driver .driver-offer-card__status {
display: grid;
align-items: center;
gap: 0.28rem;
justify-items: stretch;
justify-self: stretch;
width: 100%;
min-width: 0;
}
body.console-shell--driver .driver-offer-card__status .chip-row {
display: none;
}
body.console-shell--driver .driver-offer-card__status .inline-form {
display: grid;
justify-items: stretch;
width: 100%;
}
body.console-shell--driver .driver-offer-card__status .button {
justify-self: stretch;
width: 100%;
max-width: 100%;
height: 100%;
min-height: 2.35rem;
padding: 0.44rem 0.78rem;
border-radius: 12px;
font-size: 0.84rem;
white-space: nowrap;
}
body.console-shell--driver .driver-offer-card-body {
grid-column: 1 / -1;
width: 100%;
gap: 0;
}
body.console-shell--driver .driver-offer-timeline-panel,
body.console-shell--driver .driver-offer-map-card {
display: none;
}
body.console-shell--driver .driver-offer-decision-row {
grid-column: 1 / -1;
display: grid;
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 0.38rem;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.console-shell--driver .driver-offer-location-stack {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.38rem;
min-width: 0;
}
body.console-shell--driver .driver-offer-decision-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.38rem;
min-width: 0;
}
body.console-shell--driver .driver-offer-contact-grid {
grid-template-columns: minmax(0, 1fr);
gap: 0.32rem;
min-width: 0;
}
body.console-shell--driver .driver-offer-contact-card {
gap: 0.02rem;
padding: 0.32rem 0.42rem;
border: 1px solid rgba(18, 26, 34, 0.08);
border-radius: 11px;
background: rgba(241, 245, 249, 0.72);
}
body.console-shell--driver .driver-offer-summary-label {
font-size: 0.6rem;
letter-spacing: 0.06em;
}
body.console-shell--driver .driver-offer-contact-card__phone {
padding: 0;
border: 0;
background: transparent;
font-size: 0.76rem;
}
body.console-shell--driver .driver-offer-row__price {
font-size: 0.96rem;
}
body.console-shell--driver .driver-offer-location-card {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "label" "address" "context";
gap: 0.04rem;
padding: 0.44rem 0.52rem;
border: 1px solid rgba(18, 26, 34, 0.08);
border-radius: 12px;
background: rgba(241, 245, 249, 0.72);
}
body.console-shell--driver .driver-offer-location-card strong {
overflow: hidden;
font-size: 0.82rem;
line-height: 1.12;
overflow-wrap: anywhere;
}
body.console-shell--driver .driver-offer-location-card p {
overflow: hidden;
font-size: 0.68rem;
line-height: 1.14;
overflow-wrap: anywhere;
}
body.console-shell--driver .driver-offer-location-card .button {
display: none;
}
body.console-shell--driver .driver-offer-card__header .driver-offer-metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.32rem;
margin-top: 0;
min-width: 0;
}
body.console-shell--driver .driver-offer-metric {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "label" "value";
gap: 0.02rem;
padding: 0.32rem 0.42rem;
border: 1px solid rgba(18, 26, 34, 0.08);
border-radius: 11px;
background: rgba(241, 245, 249, 0.72);
}
body.console-shell--driver .driver-offer-metric__icon,
body.console-shell--driver .driver-offer-metric small {
display: none;
}
body.console-shell--driver .driver-offer-metric > span:not(.driver-offer-metric__icon) {
font-size: 0.64rem;
}
body.console-shell--driver .driver-offer-metric strong {
overflow: hidden;
font-size: 0.88rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.driver-control-summary {
grid-template-columns: minmax(0, 1.35fr) minmax(120px, 0.65fr);
}
.driver-tablet-nav {
position: sticky;
top: 6.1rem;
z-index: 14;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.65rem;
margin: 0 0 1rem;
padding: 0.75rem;
border: 1px solid rgba(43, 35, 27, 0.1);
border-radius: 24px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.84),
rgba(255, 249, 241, 0.92)),
var(--surface-strong);
box-shadow: var(--shadow-md);
backdrop-filter: blur(18px);
}
.driver-tablet-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.8rem;
padding: 0.55rem 0.7rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.76);
color: var(--ink);
text-decoration: none;
font-size: 0.92rem;
font-weight: 700;
text-align: center;
}
.driver-tablet-nav a[aria-current=page],
.passenger-mobile-nav a[aria-current=page] {
border-color: rgba(169, 94, 25, 0.22);
background:
linear-gradient(
135deg,
rgba(169, 94, 25, 0.16),
rgba(214, 176, 112, 0.26));
color: var(--ink-strong);
box-shadow: inset 0 0 0 1px rgba(169, 94, 25, 0.1);
}
.ops-app {
padding: 0;
}
.ops-page {
padding: 0;
}
.ops-dashboard-shell {
position: relative;
display: grid;
grid-template-columns: 19.5rem minmax(0, 1fr);
align-items: start;
width: 100%;
min-height: 100vh;
gap: 0;
transition: grid-template-columns 220ms ease;
}
.ops-sidebar-toggle {
display: none;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 2.8rem;
height: 2.8rem;
padding: 0;
border-radius: 999px;
border: 1px solid rgba(23, 32, 42, 0.12);
background: rgba(247, 249, 251, 0.92);
color: var(--ink-strong);
box-shadow: 0 8px 18px rgba(15, 23, 31, 0.06);
}
.ops-sidebar-toggle:hover,
.ops-sidebar-toggle:focus-visible {
border-color: rgba(23, 32, 42, 0.22);
background: #fff;
outline: none;
}
.ops-sidebar-toggle svg,
.ops-dashboard-sidebar__collapse svg,
.ops-dashboard-sidebar__close svg,
.ops-sidebar-link__icon svg {
width: 1.2rem;
height: 1.2rem;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.ops-sidebar-overlay {
position: fixed;
inset: 0;
z-index: 20;
display: none;
padding: 0;
border: 0;
background: rgba(19, 18, 16, 0.46);
}
.ops-dashboard-sidebar {
position: sticky;
top: 0;
isolation: isolate;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
gap: 0.9rem;
height: 100vh;
min-height: 100vh;
padding: 0.95rem 0.8rem 0.8rem;
border-right: 1px solid rgba(226, 232, 239, 0.08);
background:
linear-gradient(
180deg,
#1b242d 0%,
#17202a 52%,
#121a23 100%);
box-shadow: 20px 0 44px rgba(8, 10, 14, 0.22);
overflow: hidden;
}
.ops-dashboard-sidebar::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.025),
transparent 14%,
transparent 84%,
rgba(255, 255, 255, 0.01)),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.012),
transparent 18%);
pointer-events: none;
}
.ops-dashboard-sidebar__header,
.ops-dashboard-sidebar__footer {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.ops-dashboard-sidebar__header {
align-items: flex-start;
padding: 0.05rem 0.18rem 0.85rem;
border-bottom: 1px solid rgba(226, 232, 239, 0.06);
}
.ops-dashboard-sidebar__footer {
display: flex;
align-items: center;
align-self: end;
justify-content: center;
gap: 0.5rem;
padding-top: 0.55rem;
border-top: 1px solid rgba(226, 232, 239, 0.06);
min-height: 0;
}
.ops-dashboard-sidebar__footer form {
margin: 0;
width: 100%;
min-width: 0;
flex: 0 0 auto;
}
.ops-dashboard-sidebar__header-actions {
display: flex;
align-items: center;
gap: 0.4rem;
}
.ops-dashboard-brand {
display: grid;
align-items: start;
justify-items: center;
gap: 0.38rem;
width: 100%;
min-width: 0;
padding: 0.12rem 0.25rem;
text-align: center;
text-decoration: none;
}
.ops-dashboard-brand__mark,
.ops-sidebar-link__icon {
display: grid;
place-items: center;
flex: 0 0 2.7rem;
width: 2.7rem;
height: 2.7rem;
border-radius: 16px;
}
.ops-dashboard-brand__mark {
width: 14.4rem;
height: 10.8rem;
flex-basis: 14.4rem;
}
.ops-sidebar-link__icon {
border: 1px solid rgba(226, 232, 239, 0.06);
background:
linear-gradient(
180deg,
rgba(226, 232, 239, 0.08),
rgba(226, 232, 239, 0.03)),
rgba(226, 232, 239, 0.03);
color: rgba(237, 242, 247, 0.92);
}
.ops-dashboard-brand__mark {
border: 0;
border-radius: 0;
}
.brand__mark img,
.passenger-workspace-brand__mark img,
.driver-workspace-brand__mark img,
.ops-dashboard-brand__mark img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.ops-dashboard-brand__copy {
display: grid;
min-width: 0;
gap: 0.12rem;
}
.ops-dashboard-brand__copy strong {
font-size: 1.08rem;
letter-spacing: -0.01em;
color: #f7fbff;
}
.ops-dashboard-brand__copy span {
color: rgba(214, 224, 235, 0.68);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ops-dashboard-sidebar__collapse,
.ops-dashboard-sidebar__close {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 3rem;
height: 3rem;
padding: 0;
border-radius: 16px;
border: 1px solid rgba(226, 232, 239, 0.11);
background:
linear-gradient(
180deg,
rgba(226, 232, 239, 0.08),
rgba(226, 232, 239, 0.025)),
rgba(226, 232, 239, 0.025);
color: #edf2f7;
}
.ops-dashboard-sidebar__collapse {
display: inline-flex;
}
.ops-dashboard-sidebar__close {
display: none;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-sidebar__collapse svg {
transform: rotate(180deg);
}
.ops-dashboard-sidebar__collapse svg {
width: 1.25rem;
height: 1.25rem;
transition: transform 180ms ease;
}
.ops-dashboard-sidebar__collapse:hover,
.ops-dashboard-sidebar__collapse:focus-visible,
.ops-dashboard-sidebar__close:hover,
.ops-dashboard-sidebar__close:focus-visible {
border-color: rgba(226, 232, 239, 0.2);
background: rgba(255, 255, 255, 0.075);
outline: none;
}
.ops-dashboard-sidebar__nav {
position: relative;
z-index: 1;
display: grid;
align-content: start;
gap: 0.75rem;
min-height: 0;
overflow: hidden;
}
.ops-dashboard-sidebar__nav-section {
display: grid;
gap: 0.35rem;
}
.ops-dashboard-sidebar__nav-section--utility {
margin-top: 0.28rem;
padding-top: 0.58rem;
border-top: 1px solid rgba(226, 232, 239, 0.06);
}
.ops-sidebar-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
min-width: 0;
min-height: 2.95rem;
padding: 0.28rem 0.38rem;
border: 1px solid transparent;
border-radius: 16px;
color: rgba(220, 229, 238, 0.76);
font: inherit;
text-align: left;
text-decoration: none;
transition:
background-color 140ms ease,
border-color 140ms ease,
color 140ms ease,
box-shadow 140ms ease;
}
.ops-sidebar-link:hover,
.ops-sidebar-link:focus-visible {
border-color: rgba(226, 232, 239, 0.08);
background: rgba(232, 237, 242, 0.045);
color: #f7fbff;
outline: none;
}
.ops-sidebar-link__label {
flex: 1;
min-width: 0;
overflow: hidden;
font-size: 0.92rem;
font-weight: 600;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.ops-sidebar-link strong {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
min-width: 3.45rem;
min-height: 1.8rem;
padding: 0 0.55rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: rgba(247, 251, 255, 0.84);
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
line-height: 1;
}
.ops-sidebar-link[aria-current=page] {
border-color: rgba(226, 232, 239, 0.16);
background:
linear-gradient(
90deg,
rgba(226, 232, 239, 0.12),
rgba(226, 232, 239, 0.04)),
rgba(232, 237, 242, 0.04);
color: #f7fbff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.028);
}
.ops-sidebar-link[aria-current=page] .ops-sidebar-link__icon {
border-color: rgba(226, 232, 239, 0.14);
background: rgba(226, 232, 239, 0.11);
color: #f7fbff;
}
.ops-sidebar-link[aria-current=page] strong {
background: rgba(226, 232, 239, 0.12);
color: #f7fbff;
}
.ops-sidebar-link--utility {
color: rgba(214, 224, 235, 0.78);
}
.ops-sidebar-link--utility {
width: 100%;
background:
linear-gradient(
180deg,
rgba(226, 232, 239, 0.035),
rgba(226, 232, 239, 0.012)),
rgba(226, 232, 239, 0.012);
border-color: rgba(226, 232, 239, 0.045);
}
@media (min-width: 1101px) {
.ops-dashboard-shell.is-sidebar-collapsed {
grid-template-columns: 5.5rem minmax(0, 1fr);
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-sidebar {
gap: 0.75rem;
padding-left: 0.55rem;
padding-right: 0.55rem;
overflow: visible;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-sidebar__header {
display: grid;
justify-items: center;
justify-content: initial;
align-content: start;
gap: 0.45rem;
overflow: visible;
padding-bottom: 0.65rem;
padding-left: 0;
padding-right: 0;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-sidebar__header-actions {
display: grid;
justify-items: center;
gap: 0.3rem;
width: 100%;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-brand {
width: 100%;
justify-content: center;
padding-left: 0;
padding-right: 0;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-brand__mark {
width: 3.8rem;
height: 2.85rem;
flex-basis: 3.8rem;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-brand__copy,
.ops-dashboard-shell.is-sidebar-collapsed .ops-sidebar-link__label,
.ops-dashboard-shell.is-sidebar-collapsed .ops-sidebar-link strong {
display: none;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-sidebar__nav {
gap: 0.45rem;
overflow: visible;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-sidebar__nav-section {
gap: 0.3rem;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-sidebar-link {
width: 100%;
justify-content: center;
min-height: 2.8rem;
padding: 0.24rem;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-sidebar-link--footer {
width: 2.8rem;
min-width: 2.8rem;
height: 2.8rem;
flex: 0 0 2.8rem;
justify-content: center;
padding: 0.24rem;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-sidebar__footer {
align-items: center;
gap: 0.35rem;
overflow: visible;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-sidebar__footer form {
width: auto;
min-width: 0;
flex: 0 0 auto;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-sidebar__collapse {
margin: 0 auto;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-sidebar-link[aria-current=page] {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-brand,
.ops-dashboard-shell.is-sidebar-collapsed .ops-sidebar-link {
position: relative;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-brand::after,
.ops-dashboard-shell.is-sidebar-collapsed .ops-sidebar-link::after {
content: attr(aria-label);
position: absolute;
top: 50%;
left: calc(100% + 0.8rem);
transform: translateY(-50%) translateX(-0.25rem);
z-index: 6;
min-height: 2.3rem;
display: inline-flex;
align-items: center;
padding: 0.45rem 0.75rem;
border: 1px solid rgba(23, 32, 42, 0.12);
border-radius: 14px;
background: rgba(255, 255, 255, 0.96);
color: var(--ink-strong);
box-shadow: 0 14px 30px rgba(15, 23, 31, 0.14);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.01em;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 140ms ease, transform 140ms ease;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-brand::before,
.ops-dashboard-shell.is-sidebar-collapsed .ops-sidebar-link::before {
content: "";
position: absolute;
top: 50%;
left: calc(100% + 0.35rem);
transform: translateY(-50%) translateX(-0.25rem);
z-index: 6;
width: 0.55rem;
height: 0.55rem;
background: rgba(255, 255, 255, 0.96);
border-left: 1px solid rgba(23, 32, 42, 0.12);
border-top: 1px solid rgba(23, 32, 42, 0.12);
rotate: 135deg;
opacity: 0;
pointer-events: none;
transition: opacity 140ms ease, transform 140ms ease;
}
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-brand:hover::after,
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-brand:hover::before,
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-brand:focus-visible::after,
.ops-dashboard-shell.is-sidebar-collapsed .ops-dashboard-brand:focus-visible::before,
.ops-dashboard-shell.is-sidebar-collapsed .ops-sidebar-link:hover::after,
.ops-dashboard-shell.is-sidebar-collapsed .ops-sidebar-link:hover::before,
.ops-dashboard-shell.is-sidebar-collapsed .ops-sidebar-link:focus-visible::after,
.ops-dashboard-shell.is-sidebar-collapsed .ops-sidebar-link:focus-visible::before {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
}
@media (max-height: 860px) {
.ops-dashboard-sidebar {
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
}
.ops-dashboard-sidebar::-webkit-scrollbar {
width: 0;
height: 0;
}
.ops-dashboard-sidebar__nav {
overflow: visible;
}
}
.ops-dashboard-main {
min-width: 0;
padding: 0.85rem 0.9rem 1.5rem;
}
.ops-dashboard-main--map {
position: relative;
min-height: 100dvh;
padding: 0;
overflow: hidden;
}
.ops-dashboard-main__inner {
display: flex;
flex-direction: column;
min-height: calc(100dvh - 2.35rem);
width: min(1680px, 100%);
margin: 0 auto;
}
.ops-page-results--map {
min-height: 100dvh;
}
.ops-workspace-header {
border: 1px solid var(--line);
border-radius: 28px;
background: rgba(255, 255, 255, 0.92);
box-shadow: var(--shadow-md);
backdrop-filter: blur(14px);
}
.ops-workspace-header {
margin-bottom: 0.85rem;
overflow: hidden;
}
body.console-shell--ops .ops-workspace-header:not(.ops-workspace-header--map) {
position: sticky;
top: 0;
z-index: 24;
margin: -0.85rem -0.9rem 1rem;
border-top: 0;
border-right: 0;
border-left: 0;
border-radius: 0;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 16px 34px rgba(15, 23, 31, 0.14);
overflow: visible;
}
body.console-shell--ops .ops-workspace-header:not(.ops-workspace-header--map) .ops-dashboard-toolbar,
body.console-shell--ops .ops-workspace-header:not(.ops-workspace-header--map) .ops-hero-panel {
padding-right: 0.9rem;
padding-left: 0.9rem;
}
.ops-workspace-header--map {
position: absolute;
top: 1rem;
left: 1rem;
right: 25rem;
z-index: 6;
margin: 0;
border-radius: 22px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 18px 42px rgba(15, 23, 31, 0.16);
backdrop-filter: blur(18px);
}
.ops-workspace-header--driver-map {
right: auto;
width: min(67rem, calc(100% - 26rem));
border: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
overflow: visible;
}
.ops-workspace-header--driver-map .ops-hero-panel {
border: 1px solid var(--line);
border-radius: 22px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 18px 42px rgba(15, 23, 31, 0.16);
backdrop-filter: blur(18px);
}
.ops-dashboard-toolbar {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.85rem;
margin-bottom: 0;
border: 0;
border-bottom: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 0;
background:
linear-gradient(
180deg,
rgba(248, 250, 252, 0.88),
rgba(248, 250, 252, 0.22));
box-shadow: none;
backdrop-filter: none;
}
.ops-dashboard-toolbar__lead {
display: flex;
align-items: center;
min-width: 0;
}
.ops-dashboard-toolbar__nav {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 0.6rem;
}
.ops-dashboard-toolbar__nav a {
display: inline-flex;
align-items: center;
min-height: 2.4rem;
padding: 0 0.85rem;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
color: var(--ink-strong);
font-size: 0.93rem;
font-weight: 700;
text-decoration: none;
transition:
border-color 140ms ease,
background-color 140ms ease,
box-shadow 140ms ease,
transform 140ms ease;
}
.ops-dashboard-toolbar__nav a:hover,
.ops-dashboard-toolbar__nav a:focus-visible {
border-color: rgba(23, 32, 42, 0.16);
background: #fff;
box-shadow: 0 10px 24px rgba(15, 23, 31, 0.08);
transform: translateY(-1px);
outline: none;
}
.ops-dashboard-toolbar__nav a[aria-current=page] {
border-color: color-mix(in srgb, var(--accent) 34%, white);
background: color-mix(in srgb, var(--accent-soft) 84%, white);
color: var(--accent-strong);
}
@media (min-width: 1101px) {
.ops-dashboard-toolbar {
display: none;
}
.ops-sidebar-toggle {
display: none;
}
.ops-dashboard-toolbar__nav {
display: none;
}
}
.ops-toolbar-chip {
display: inline-flex;
align-items: center;
min-height: 2.4rem;
padding: 0 0.8rem;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(247, 249, 251, 0.86);
color: var(--muted);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.ops-toolbar-chip--accent {
border-color: color-mix(in srgb, var(--accent) 22%, white);
background: color-mix(in srgb, var(--accent-soft) 82%, white);
color: var(--accent-strong);
}
.ops-hero-panel {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.62rem;
padding: 0.62rem 0.85rem 0.7rem;
margin-bottom: 0;
align-items: stretch;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.ops-workspace-header--map .ops-hero-panel {
grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.9fr);
gap: 0.7rem;
padding: 0.72rem 0.85rem;
align-items: center;
}
.ops-workspace-header--driver-map .ops-hero-panel {
grid-template-columns: minmax(0, 1fr);
padding: 0.66rem 0.76rem;
}
.ops-workspace-header--driver-map .ops-hero-panel__title-row {
grid-template-columns: minmax(9rem, 1fr) minmax(22rem, 34rem) auto;
column-gap: 0.72rem;
}
.ops-workspace-header--driver-map .ops-hero-panel__title-row--map {
grid-template-columns: minmax(36rem, 42rem) auto;
}
.ops-workspace-header--driver-map .ops-hero-panel__title-row--map > .ops-call-request-open {
grid-column: 2;
}
.ops-workspace-header--map .ops-hero-panel__copy {
gap: 0.18rem;
}
.ops-workspace-header--map .ops-hero-panel__copy h1 {
font-size: 1.34rem;
white-space: normal;
}
.ops-workspace-header--map .ops-hero-panel__copy .hero__lede {
max-width: 46ch;
font-size: 0.8rem;
}
.ops-workspace-header--driver-map .ops-hero-panel__copy .hero__lede {
display: none;
}
.ops-workspace-header--map .ops-summary-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ops-workspace-header--map .ops-summary-card {
padding: 0.48rem 0.55rem;
}
.ops-hero-panel__copy {
display: grid;
align-content: start;
gap: 0.28rem;
justify-items: start;
text-align: left;
min-width: 0;
}
.ops-hero-panel__copy h1 {
margin: 0;
font-size: 1.55rem;
line-height: 1.02;
max-width: none;
white-space: nowrap;
}
.ops-hero-panel__heading {
display: grid;
gap: 0.28rem;
min-width: 0;
}
.ops-hero-panel__title-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: start;
column-gap: 1.25rem;
row-gap: 0.75rem;
width: 100%;
min-width: 0;
}
.ops-hero-panel__title-row:has(.ops-live-refresh-panel--header) {
min-height: 3.1rem;
}
.ops-hero-panel__title-row h1 {
min-width: 0;
}
.ops-hero-panel__title-row > .ops-live-refresh-panel--header {
align-self: center;
justify-self: end;
}
.ops-hero-panel__title-row > .ops-call-request-open {
grid-column: 3;
align-self: center;
justify-self: end;
}
.ops-hero-panel__actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 5rem;
min-width: 0;
flex: 0 0 auto;
}
.ops-call-request-open {
flex: 0 0 auto;
min-height: 2.95rem;
gap: 0.62rem;
padding: 0.72rem 1.12rem;
border-radius: 999px;
font-size: 0.98rem;
font-weight: 850;
box-shadow: 0 16px 36px rgba(31, 107, 84, 0.24);
}
.ops-call-request-open::before {
content: none;
}
.ops-call-request-open svg {
width: 1.22rem;
height: 1.22rem;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.ops-hero-panel__copy .hero__lede {
margin: 0;
max-width: 58ch;
font-size: 0.86rem;
line-height: 1.36;
}
.ops-hero-panel__aside,
.ops-search-panel,
.ops-search-panel__field,
.ops-search-panel__header {
display: grid;
gap: 0.55rem;
}
.ops-hero-panel__aside {
grid-template-columns: minmax(0, 1fr);
gap: 0.55rem;
width: 100%;
justify-self: stretch;
align-items: stretch;
}
.ops-hero-panel__aside--search {
align-self: end;
}
.ops-hero-panel__ride-tools {
display: grid;
grid-template-columns: auto minmax(min(26rem, 100%), 46rem);
gap: 0.8rem;
align-items: end;
justify-content: space-between;
}
.ops-search-panel {
padding: 1rem;
border: 1px solid var(--line);
border-radius: 24px;
background: rgba(246, 248, 251, 0.86);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.ops-search-section {
padding: 0 0.85rem 0.85rem;
}
.ops-search-panel--section {
grid-template-columns: minmax(9.5rem, 0.16fr) minmax(0, 1fr);
width: 100%;
align-items: center;
justify-self: stretch;
align-self: stretch;
gap: 0.5rem;
padding: 0.55rem;
border-color: color-mix(in srgb, var(--accent) 12%, var(--line));
border-radius: 16px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.98),
rgba(245, 248, 251, 0.96));
box-shadow: 0 8px 18px rgba(15, 23, 31, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.68);
}
.ops-search-panel--status {
grid-template-columns: 1fr;
align-items: start;
}
.ops-search-panel--section .ops-search-panel__header {
justify-items: start;
text-align: left;
gap: 0.18rem;
}
.ops-search-panel--section .ops-search-panel__header strong {
font-size: 0.84rem;
}
.ops-search-panel--section .ops-search-panel__header span {
font-size: 0.72rem;
}
.ops-search-panel__body {
display: grid;
gap: 0.8rem;
}
.ops-search-panel--section .request-card__actions {
justify-content: flex-end;
}
.ops-search-panel__header strong {
font-size: 0.92rem;
color: var(--ink-strong);
}
.ops-search-panel__header span {
font-size: 0.8rem;
color: var(--muted);
}
.ops-search-panel input {
width: 100%;
min-height: 2.65rem;
padding: 0.65rem 0.85rem;
border: 1px solid rgba(23, 32, 42, 0.14);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
transition:
border-color 160ms ease,
box-shadow 160ms ease,
background 160ms ease;
}
.ops-search-panel select {
width: 100%;
min-height: 2.65rem;
padding: 0.65rem 2.35rem 0.65rem 0.85rem;
border: 1px solid rgba(23, 32, 42, 0.14);
border-radius: 14px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.96),
rgba(247, 249, 251, 0.94));
color: var(--ink);
font: inherit;
}
.ops-search-panel--section input {
min-height: 2.65rem;
padding: 0.65rem 0.85rem;
border-radius: 14px;
font-size: 0.93rem;
text-align: left;
}
.ops-search-panel input:focus-visible {
border-color: color-mix(in srgb, var(--accent) 72%, white);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 72%, white), 0 12px 24px rgba(37, 28, 19, 0.08);
}
.ops-search-panel select:focus-visible {
border-color: color-mix(in srgb, var(--accent) 72%, white);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 72%, white), 0 12px 24px rgba(37, 28, 19, 0.08);
outline: none;
}
.ops-dispatch-controls,
.ops-rides-controls,
.ops-drivers-controls {
display: grid;
}
.ops-search-panel--dispatch,
.ops-search-panel--rides,
.ops-search-panel--drivers {
grid-template-columns: minmax(9.5rem, 0.18fr) minmax(0, 1fr);
gap: 0.65rem;
align-items: end;
padding: 0.62rem;
border-radius: 18px;
}
.ops-search-panel--rides,
.ops-search-panel--hero-dispatch {
grid-template-columns: minmax(0, 1fr);
}
.ops-search-panel--hero-dispatch {
width: min(100%, 46rem);
justify-self: end;
align-self: end;
padding: 0.58rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 8px 20px rgba(15, 23, 31, 0.05);
}
.ops-dispatch-controls__grid,
.ops-rides-controls__grid,
.ops-drivers-controls__grid {
display: grid;
grid-template-columns: minmax(16rem, 1.5fr) minmax(10rem, 0.72fr) minmax(10rem, 0.72fr) auto;
gap: 0.55rem;
align-items: end;
min-width: 0;
}
.ops-rides-controls__grid,
.ops-drivers-controls__grid {
grid-template-columns: minmax(16rem, 1fr);
}
.ops-dispatch-controls__grid--hero {
grid-template-columns: minmax(16rem, 1fr);
}
.ops-dispatch-control,
.ops-rides-control,
.ops-drivers-control {
display: grid;
gap: 0.28rem;
min-width: 0;
}
.ops-dispatch-control span,
.ops-rides-control span,
.ops-drivers-control span {
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ops-dispatch-controls__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.45rem;
}
.ops-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9.25rem, 1fr));
gap: 0.45rem;
}
.ops-summary-card {
display: grid;
align-content: start;
gap: 0.12rem;
padding: 0.55rem 0.62rem;
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(248, 250, 252, 0.96);
}
.ops-summary-card span {
font-size: 0.7rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.ops-summary-card strong {
min-width: 0;
font-size: 1.08rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
line-height: 1.1;
color: var(--ink-strong);
overflow-wrap: anywhere;
}
.ops-summary-card p {
margin: 0;
color: var(--muted);
font-size: 0.74rem;
line-height: 1.28;
}
.ops-summary-card--attention {
border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--accent-soft) 38%, white),
rgba(248, 250, 252, 0.96));
}
.ops-summary-card--wide {
grid-column: 1 / -1;
}
.ops-summary-card__value--text {
font-size: 0.86rem;
line-height: 1.28;
letter-spacing: 0;
}
.ops-floating-summary-panel {
position: sticky;
bottom: 1rem;
z-index: 16;
display: flex;
justify-content: center;
width: 100%;
margin: auto 0 0.2rem;
padding: 1rem 1rem 0;
pointer-events: none;
}
.ops-floating-summary-panel[hidden] {
display: none;
}
.ops-summary-grid--floating {
grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr));
width: min(100%, 88rem);
padding: 0.5rem;
border: 1px solid rgba(226, 232, 239, 0.12);
border-radius: 18px;
background:
linear-gradient(
180deg,
rgba(36, 45, 54, 0.96) 0%,
rgba(31, 40, 49, 0.96) 52%,
rgba(26, 35, 44, 0.96) 100%);
box-shadow:
0 24px 60px rgba(8, 10, 14, 0.32),
0 6px 18px rgba(8, 10, 14, 0.22),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
backdrop-filter: blur(14px);
pointer-events: auto;
}
.ops-summary-grid--floating .ops-summary-card {
min-height: 5.35rem;
position: relative;
min-width: 0;
border-color: rgba(226, 232, 239, 0.08);
border-radius: 12px;
background:
linear-gradient(
180deg,
rgba(226, 232, 239, 0.08),
rgba(226, 232, 239, 0.03)),
rgba(226, 232, 239, 0.03);
}
.ops-summary-grid--floating .ops-summary-card--attention {
border-color: rgba(226, 232, 239, 0.16);
background:
linear-gradient(
180deg,
rgba(226, 232, 239, 0.12),
rgba(226, 232, 239, 0.04)),
rgba(226, 232, 239, 0.04);
}
.ops-summary-grid--floating .ops-summary-card span {
color: rgba(214, 224, 235, 0.74);
font-size: 0.66rem;
line-height: 1.18;
}
.ops-summary-grid--floating .ops-summary-card strong {
margin-top: 0.38rem;
font-size: 1rem;
color: #fff6fb;
}
.ops-metric-icon {
display: inline-grid;
place-items: center;
width: 1.35rem;
height: 1.35rem;
border: 1px solid rgba(226, 232, 239, 0.08);
border-radius: 10px;
background: rgba(226, 232, 239, 0.055);
color: rgba(237, 242, 247, 0.9);
}
.ops-metric-icon svg {
width: 0.92rem;
height: 0.92rem;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.ops-summary-grid--floating .ops-metric-icon {
position: absolute;
top: 0.62rem;
right: 0.62rem;
width: 1.62rem;
height: 1.62rem;
}
.ops-summary-grid--floating .ops-summary-card span:not(.ops-metric-icon) {
padding-right: 1.9rem;
}
.ops-summary-grid--floating .ops-metric-icon svg {
width: 1.02rem;
height: 1.02rem;
}
.ops-feedback-strip,
.ops-page-stack {
display: grid;
gap: 0.85rem;
}
.ops-list-section {
display: grid;
gap: 1rem;
}
.ops-feedback-card {
padding: 0.95rem 1rem;
border: 1px solid var(--line);
border-radius: 20px;
background: rgba(255, 255, 255, 0.9);
box-shadow: var(--shadow-md);
}
.ops-feedback-card--error {
border-color: rgba(166, 60, 42, 0.16);
background:
linear-gradient(
135deg,
rgba(166, 60, 42, 0.06),
rgba(255, 255, 255, 0.9));
color: var(--danger);
}
.ops-feedback-card--success {
border-color: rgba(31, 107, 84, 0.16);
background:
linear-gradient(
135deg,
rgba(31, 107, 84, 0.06),
rgba(255, 255, 255, 0.9));
color: var(--success);
}
.ops-action-toast-region {
position: fixed;
top: 5.85rem;
right: 1rem;
z-index: 45;
display: grid;
gap: 0.65rem;
width: min(27rem, calc(100vw - 2rem));
pointer-events: none;
}
.ops-action-toast {
padding: 0.95rem 1rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 18px 42px rgba(15, 23, 31, 0.18);
color: var(--ink);
font-size: 0.94rem;
font-weight: 800;
line-height: 1.4;
backdrop-filter: blur(16px);
animation: ops-action-toast-life 5.8s ease forwards;
}
.ops-action-toast--error {
border-color: color-mix(in srgb, var(--danger) 26%, white);
background: color-mix(in srgb, white 88%, var(--danger-soft));
color: var(--danger);
}
.ops-action-toast--success {
border-color: color-mix(in srgb, var(--success) 26%, white);
background: color-mix(in srgb, white 88%, var(--success-soft));
color: var(--success);
}
@keyframes ops-action-toast-life {
0% {
opacity: 0;
transform: translateY(-0.45rem);
}
8%, 82% {
opacity: 1;
transform: translateY(0);
}
100% {
visibility: hidden;
opacity: 0;
transform: translateY(-0.35rem);
}
}
.ops-live-refresh-panel {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
min-width: 0;
}
.ops-live-refresh-panel--header {
flex: 0 1 auto;
}
.ops-topbar-toggle {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.42rem;
min-height: 2.42rem;
padding: 0.35rem 0.56rem;
border: 1px solid rgba(23, 32, 42, 0.12);
border-radius: 999px;
background: rgba(246, 248, 251, 0.88);
color: var(--muted);
cursor: pointer;
font-size: 0.78rem;
font-weight: 850;
line-height: 1;
white-space: nowrap;
transition:
background 140ms ease,
border-color 140ms ease,
box-shadow 140ms ease,
color 140ms ease;
}
.ops-topbar-toggle input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
.ops-topbar-toggle__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.55rem;
height: 1.55rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
color: currentColor;
box-shadow: inset 0 0 0 1px rgba(23, 32, 42, 0.08);
}
.ops-topbar-toggle__icon svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.ops-topbar-toggle:has(input:checked) {
border-color: color-mix(in srgb, var(--accent) 40%, white);
background: color-mix(in srgb, var(--accent-soft) 70%, white);
color: var(--accent-strong);
box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 12%, transparent);
}
.ops-topbar-toggle input:focus-visible + .ops-topbar-toggle__icon {
outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
outline-offset: 2px;
}
.ops-topbar-toggle::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 0.55rem);
right: 0;
z-index: 40;
width: min(19rem, 80vw);
padding: 0.7rem 0.78rem;
border: 1px solid rgba(226, 232, 239, 0.14);
border-radius: 14px;
background: rgba(27, 37, 47, 0.98);
color: #f7fbff;
box-shadow: 0 18px 40px rgba(8, 10, 14, 0.28);
font-size: 0.76rem;
font-weight: 650;
line-height: 1.35;
text-align: left;
white-space: normal;
opacity: 0;
pointer-events: none;
transform: translateY(-0.2rem);
transition: opacity 140ms ease, transform 140ms ease;
}
.ops-topbar-toggle:hover::after,
.ops-topbar-toggle:has(input:focus-visible)::after {
opacity: 1;
transform: translateY(0);
}
.ops-live-refresh-floating {
position: sticky;
bottom: 8rem;
z-index: 18;
display: flex;
justify-content: center;
width: 100%;
margin: auto 0 0;
padding: 1rem 1rem 0;
pointer-events: none;
}
.ops-live-refresh-notice {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
min-height: 2.6rem;
padding: 0.56rem 0.9rem;
border: 1px solid rgba(226, 232, 239, 0.14);
border-radius: 999px;
background:
linear-gradient(
180deg,
rgba(43, 53, 64, 0.98),
rgba(27, 37, 47, 0.98)),
#1f2933;
box-shadow: 0 18px 42px rgba(8, 10, 14, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
color: #f7fbff;
font: inherit;
font-size: 0.88rem;
font-weight: 800;
line-height: 1;
text-align: center;
white-space: nowrap;
cursor: pointer;
pointer-events: auto;
transition:
transform 140ms ease,
border-color 140ms ease,
background-color 140ms ease,
box-shadow 140ms ease;
}
.ops-live-refresh-notice:hover,
.ops-live-refresh-notice:focus-visible {
transform: translateY(-1px);
border-color: rgba(226, 232, 239, 0.28);
box-shadow: 0 20px 48px rgba(8, 10, 14, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
outline: none;
}
.ops-live-refresh-notice svg {
width: 1.05rem;
height: 1.05rem;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.ops-live-refresh-notice[hidden] {
display: none;
}
.ops-live-refresh-toggle {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.45rem;
flex: 0 0 auto;
color: var(--muted);
font-size: 0.78rem;
font-weight: 800;
white-space: nowrap;
}
.ops-live-refresh-toggle input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
.ops-live-refresh-switch {
position: relative;
display: inline-flex;
flex: 0 0 auto;
width: 2.5rem;
height: 1.34rem;
border: 1px solid rgba(23, 32, 42, 0.18);
border-radius: 999px;
background: color-mix(in srgb, var(--surface-muted) 74%, white);
box-shadow: inset 0 1px 2px rgba(15, 23, 31, 0.08);
transition:
background 140ms ease,
border-color 140ms ease,
box-shadow 140ms ease;
}
.ops-live-refresh-switch::before {
content: "";
position: absolute;
top: 0.15rem;
left: 0.16rem;
width: 0.94rem;
height: 0.94rem;
border-radius: 999px;
background: #fff;
box-shadow: 0 2px 6px rgba(15, 23, 31, 0.22);
transition: transform 150ms ease;
}
.ops-live-refresh-toggle input:checked + .ops-live-refresh-switch {
border-color: color-mix(in srgb, var(--accent) 62%, white);
background: var(--accent);
box-shadow: 0 8px 16px color-mix(in srgb, var(--accent) 22%, transparent);
}
.ops-live-refresh-toggle input:checked + .ops-live-refresh-switch::before {
transform: translateX(1.14rem);
}
.ops-live-refresh-toggle input:focus-visible + .ops-live-refresh-switch {
outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
outline-offset: 2px;
}
.ops-live-refresh-toggle__label {
white-space: nowrap;
}
@media (max-width: 900px) {
.ops-hero-panel__title-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.ops-hero-panel__title-row > .ops-live-refresh-panel--header {
justify-self: end;
}
.ops-hero-panel__title-row > .ops-call-request-open {
grid-column: 1 / -1;
justify-self: start;
}
.ops-hero-panel__actions {
gap: 1rem;
}
}
@media (max-width: 640px) {
.ops-hero-panel__actions {
justify-content: stretch;
gap: 0.75rem;
width: 100%;
flex-wrap: wrap;
}
.ops-live-refresh-panel {
justify-content: flex-start;
width: 100%;
}
.ops-live-refresh-floating {
bottom: 7rem;
padding-left: 0;
padding-right: 0;
}
.ops-live-refresh-notice {
max-width: min(100%, 18rem);
white-space: normal;
}
}
.ops-dashboard-surface {
padding: 0.85rem;
}
.ops-map-workspace {
min-height: 100dvh;
height: 100dvh;
}
.ops-map-frame {
position: relative;
min-height: inherit;
height: 100%;
overflow: hidden;
border: 0;
border-radius: 0;
background:
linear-gradient(
135deg,
rgba(43, 99, 111, 0.14),
rgba(248, 250, 252, 0.86)),
#dce8e8;
box-shadow: none;
}
.ops-map-canvas,
.ops-map-canvas .maplibregl-map,
.ops-map-canvas .maplibregl-canvas-container,
.ops-map-canvas .maplibregl-canvas {
width: 100%;
height: 100%;
}
.ops-map-canvas {
position: absolute;
inset: 0;
}
.ops-map-loading {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
background:
linear-gradient(
135deg,
rgba(246, 248, 251, 0.94),
rgba(226, 239, 239, 0.9));
color: var(--muted);
font-size: 0.95rem;
font-weight: 800;
}
.ops-map-loading[hidden] {
display: none;
}
.ops-map-notification-lane {
position: absolute;
top: 1rem;
left: 27.5rem;
right: 25rem;
z-index: 7;
display: flex;
justify-content: flex-end;
min-height: 3.5rem;
pointer-events: none;
}
.ops-map-notification-lane .live-attention-banner {
position: relative;
top: auto;
right: auto;
width: min(21rem, 100%);
padding: 0.74rem 0.82rem;
border-radius: 16px;
box-shadow: 0 14px 32px rgba(15, 23, 31, 0.16);
}
.ops-map-driver-item[hidden],
.ops-driver-map-marker[hidden],
.ops-map-panel[hidden],
.ops-map-controls__group[hidden],
.ops-map-search__clear[hidden],
.ops-map-panel__empty[hidden] {
display: none !important;
}
.ops-map-header-search {
position: relative;
z-index: 2;
width: 100%;
min-width: 0;
}
.ops-map-header-search .address-input-widget,
.ops-map-header-search .address-input-widget__control {
display: block;
}
.ops-map-header-search .preset-control > span,
.ops-map-header-search .address-selection-inline {
display: none;
}
.ops-map-header-search .preset-control,
.ops-map-header-search .address-field {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.ops-map-header-search input[type=search] {
width: 100%;
min-height: 2.7rem;
padding-right: 3rem;
border-radius: 13px;
background: #fff;
}
.ops-map-header-search input[type=search]::-webkit-search-cancel-button {
appearance: none;
-webkit-appearance: none;
}
.ops-map-header-search .address-search-results {
position: absolute;
top: calc(100% + 0.35rem);
right: 0;
left: 0;
z-index: 40;
}
.ops-map-search__clear {
position: absolute;
top: 1.35rem;
right: 0.42rem;
z-index: 3;
display: grid;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--muted);
cursor: pointer;
place-items: center;
transform: translateY(-50%);
}
.ops-map-search__clear:hover,
.ops-map-search__clear:focus-visible {
background: var(--accent-soft);
color: var(--accent-strong);
outline: none;
}
.ops-map-search__clear svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-width: 2.25;
}
.ops-map-controls {
position: absolute;
left: max(1rem, calc((100% - 24rem) / 2));
bottom: 1rem;
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
flex-wrap: wrap;
max-width: min(31rem, calc(100% - 27rem));
transform: translateX(-50%);
}
.ops-map-search-target {
display: block;
width: 2.7rem;
height: 3.25rem;
filter: drop-shadow(0 10px 14px rgba(70, 34, 8, 0.3));
}
.ops-map-search-target::before {
content: "";
position: absolute;
top: 0.05rem;
left: 50%;
width: 2.15rem;
height: 2.15rem;
border: 4px solid #fff;
border-radius: 50% 50% 50% 0;
background: #d87325;
transform: translateX(-50%) rotate(-45deg);
}
.ops-map-search-target::after {
content: "";
position: absolute;
top: 0.72rem;
left: 50%;
width: 0.64rem;
height: 0.64rem;
border: 3px solid #fff;
border-radius: 999px;
transform: translateX(-50%);
}
.ops-map-alias-popup,
.ops-map-search-popup {
display: grid;
gap: 0.28rem;
min-width: 13rem;
max-width: 20rem;
color: var(--ink);
}
.ops-map-alias-popup__category {
color: #6841b7;
font-size: 0.7rem;
font-weight: 850;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.ops-map-alias-popup strong,
.ops-map-search-popup strong {
color: var(--ink-strong);
font-size: 1rem;
}
.ops-map-alias-popup p,
.ops-map-search-popup p {
margin: 0;
line-height: 1.35;
}
.ops-map-alias-popup__target {
padding-top: 0.35rem;
border-top: 1px solid rgba(23, 32, 42, 0.1);
color: #6841b7;
font-size: 0.8rem;
font-weight: 750;
}
.ops-map-alias-tooltip {
color: var(--ink-strong);
font-size: 0.78rem;
white-space: nowrap;
}
.ops-map-controls__group {
display: inline-flex;
flex-wrap: wrap;
gap: 0.35rem;
padding: 0.28rem;
border: 1px solid rgba(23, 32, 42, 0.12);
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 10px 24px rgba(15, 23, 31, 0.12);
backdrop-filter: blur(14px);
}
.ops-map-filter {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.35rem;
border-radius: 999px;
border: 1px solid transparent;
font: inherit;
font-size: 0.82rem;
font-weight: 800;
cursor: pointer;
}
.ops-map-filter {
padding: 0 0.8rem;
background: transparent;
color: var(--muted);
}
.ops-map-filter[aria-pressed=true] {
border-color: color-mix(in srgb, var(--accent) 18%, transparent);
background: color-mix(in srgb, var(--accent-soft) 78%, white);
color: var(--accent-strong);
}
.ops-map-filter:hover,
.ops-map-filter:focus-visible {
outline: none;
border-color: rgba(23, 32, 42, 0.18);
box-shadow: 0 10px 22px rgba(15, 23, 31, 0.12);
}
.ops-map-theme-panel {
position: absolute;
left: 5rem;
right: 25.25rem;
bottom: 1rem;
z-index: 4;
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
padding: 0.48rem;
border: 1px solid rgba(23, 32, 42, 0.12);
border-radius: 18px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 16px 34px rgba(15, 23, 31, 0.16);
backdrop-filter: blur(16px);
}
.ops-map-theme-panel__label {
flex: 0 0 auto;
padding-inline: 0.35rem;
color: var(--muted);
font-size: 0.72rem;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ops-map-theme-list {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
gap: 0.35rem;
min-width: 0;
}
.ops-map-theme {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.38rem;
min-height: 2.15rem;
padding: 0 0.62rem 0 0.45rem;
border: 1px solid transparent;
border-radius: 999px;
background: rgba(248, 250, 252, 0.8);
color: var(--muted);
font: inherit;
font-size: 0.78rem;
font-weight: 820;
cursor: pointer;
}
.ops-map-theme:hover,
.ops-map-theme:focus-visible {
border-color: rgba(23, 32, 42, 0.16);
background: #fff;
color: var(--ink);
outline: none;
}
.ops-map-theme[aria-pressed=true] {
border-color: color-mix(in srgb, var(--accent) 24%, transparent);
background: color-mix(in srgb, var(--accent-soft) 76%, white);
color: var(--accent-strong);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}
.ops-map-theme__swatch {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
border: 1px solid rgba(23, 32, 42, 0.12);
border-radius: 999px;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.ops-map-theme__swatch--raster-standard {
background:
linear-gradient(
135deg,
#79b06d 0 48%,
#e7d8a6 49% 100%);
}
.ops-map-theme__swatch--raster-road-contrast {
background:
linear-gradient(
135deg,
#f7fafc 0 44%,
#c8921f 45% 58%,
#17202a 59% 100%);
}
.ops-map-theme__swatch--raster-driver-day {
background:
linear-gradient(
135deg,
#f8faf8 0 42%,
#e0a62a 43% 58%,
#52616d 59% 100%);
}
.ops-map-theme__swatch--raster-driver-night {
background:
linear-gradient(
135deg,
#081425 0 48%,
#d6a22f 49% 100%);
}
.ops-map-theme__swatch--drive-day {
background:
linear-gradient(
135deg,
#f8fbf4 0 42%,
#f0b53e 43% 58%,
#1f2a30 59% 100%);
}
.ops-map-theme__swatch--drive-focus {
background:
linear-gradient(
135deg,
#fff7df 0 39%,
#c87f18 40% 62%,
#10232b 63% 100%);
}
.ops-map-theme__swatch--drive-night {
background:
linear-gradient(
135deg,
#0b1018 0 42%,
#f1b434 43% 58%,
#eef2f7 59% 100%);
}
.ops-map-theme__swatch--drive-gray {
background:
linear-gradient(
135deg,
#eef2f6 0 42%,
#8b98a5 43% 58%,
#17202a 59% 100%);
}
.ops-map-theme__swatch--ofm-bright {
background:
linear-gradient(
135deg,
#b7d8ee 0 48%,
#f3efe1 49% 100%);
}
.ops-map-theme__swatch--ofm-liberty {
background:
linear-gradient(
135deg,
#75a677 0 48%,
#d7c176 49% 100%);
}
.ops-map-theme__swatch--ofm-positron {
background:
linear-gradient(
135deg,
#f4f6f8 0 48%,
#c8d0d6 49% 100%);
}
.ops-map-theme__swatch--ofm-dark {
background:
linear-gradient(
135deg,
#111827 0 48%,
#334155 49% 100%);
}
.ops-map-theme__swatch--ofm-fiord {
background:
linear-gradient(
135deg,
#253447 0 48%,
#61738a 49% 100%);
}
.ops-map-workspace--tuning .ops-map-theme-panel {
right: 1rem;
}
.ops-map-panel {
position: absolute;
top: 1rem;
right: 1rem;
bottom: 1rem;
z-index: 4;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
gap: 0.62rem;
width: min(23rem, calc(100% - 2rem));
padding: 0.78rem;
border: 1px solid rgba(23, 32, 42, 0.12);
border-radius: 20px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 18px 42px rgba(15, 23, 31, 0.18);
backdrop-filter: blur(18px);
}
.ops-map-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.65rem;
min-width: 0;
}
.ops-map-panel__header h2 {
margin: 0.1rem 0 0;
color: var(--ink-strong);
font-size: 1.22rem;
line-height: 1.1;
}
.ops-map-panel__eyebrow,
.ops-map-panel__provider,
.ops-map-panel__stats span,
.ops-map-driver-item__meta,
.ops-map-driver-item__location,
.ops-map-driver-item__freshness,
.ops-map-driver-item__context small,
.ops-map-driver-item__heartbeat {
color: var(--muted);
font-size: 0.72rem;
}
.ops-map-panel__eyebrow,
.ops-map-panel__provider,
.ops-map-panel__stats span {
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ops-map-panel__provider {
max-width: 9rem;
text-align: right;
line-height: 1.25;
}
.ops-map-panel__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.38rem;
}
.ops-map-panel__stats article {
display: grid;
gap: 0.12rem;
min-width: 0;
padding: 0.48rem 0.52rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 12px;
background: rgba(248, 250, 252, 0.92);
}
.ops-map-panel__stats strong {
color: var(--ink-strong);
font-size: 1.02rem;
}
.ops-map-driver-list {
display: grid;
align-content: start;
gap: 0.42rem;
min-height: 0;
overflow: auto;
padding-right: 0.15rem;
scrollbar-width: thin;
}
.ops-map-driver-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.55rem;
align-items: start;
width: 100%;
min-width: 0;
padding: 0.56rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 14px;
background: rgba(255, 255, 255, 0.86);
color: var(--ink);
text-align: left;
cursor: pointer;
transition:
border-color 140ms ease,
background-color 140ms ease,
box-shadow 140ms ease;
}
.ops-map-driver-item:hover,
.ops-map-driver-item:focus-visible,
.ops-map-driver-item.is-selected {
border-color: color-mix(in srgb, var(--accent) 26%, transparent);
background: #fff;
box-shadow: 0 10px 24px rgba(15, 23, 31, 0.1);
outline: none;
}
.ops-map-driver-item[data-ops-map-driver-located=false] {
border-style: dashed;
background: rgba(248, 250, 252, 0.92);
cursor: default;
}
.ops-map-driver-item__status {
width: 0.7rem;
height: 0.7rem;
margin-top: 0.3rem;
border-radius: 999px;
background: #8da0ad;
box-shadow: 0 0 0 4px rgba(141, 160, 173, 0.14);
}
.ops-map-driver-item__status--available {
background: #2f946c;
box-shadow: 0 0 0 4px rgba(47, 148, 108, 0.14);
}
.ops-map-driver-item__status--on_trip {
background: #365e9d;
box-shadow: 0 0 0 4px rgba(54, 94, 157, 0.14);
}
.ops-map-driver-item__status--stale {
background: #9aa4ad;
box-shadow: 0 0 0 4px rgba(154, 164, 173, 0.16);
}
.ops-map-driver-item__body,
.ops-map-driver-item__topline {
display: grid;
min-width: 0;
}
.ops-map-driver-item__body {
gap: 0.18rem;
}
.ops-map-driver-item__topline {
gap: 0.08rem;
}
.ops-map-driver-item__topline strong {
color: var(--ink-strong);
font-size: 0.94rem;
line-height: 1.18;
overflow-wrap: anywhere;
}
.ops-map-driver-item__topline span,
.ops-map-driver-item__heartbeat {
white-space: nowrap;
}
.ops-map-driver-item__location {
overflow-wrap: anywhere;
}
.ops-map-driver-item__freshness--fresh {
color: #2f6f55;
}
.ops-map-driver-item__freshness--stale,
.ops-map-driver-item__freshness--missing {
color: #7b8790;
}
.ops-map-driver-item__context {
display: grid;
gap: 0.06rem;
margin-top: 0.08rem;
padding: 0.36rem 0.45rem;
border: 1px solid rgba(54, 94, 157, 0.14);
border-radius: 10px;
background: rgba(236, 244, 255, 0.76);
color: #284a7c;
font-size: 0.75rem;
line-height: 1.25;
overflow-wrap: anywhere;
}
.ops-map-driver-item__context--active-ride {
border-color: rgba(54, 94, 157, 0.22);
background:
linear-gradient(
135deg,
rgba(236, 244, 255, 0.92),
rgba(255, 255, 255, 0.72));
color: #244a82;
}
.ops-map-driver-item__context--targeted-offer {
border-color: rgba(194, 126, 24, 0.22);
background:
linear-gradient(
135deg,
rgba(255, 247, 226, 0.94),
rgba(255, 255, 255, 0.72));
color: #765016;
}
.ops-map-driver-item__context-kind {
color: currentColor;
font-size: 0.62rem;
font-weight: 900;
letter-spacing: 0.08em;
line-height: 1.15;
text-transform: uppercase;
}
.ops-map-driver-item__context small {
line-height: 1.25;
}
.ops-map-panel__empty {
margin: 0;
padding: 0.75rem;
border: 1px dashed rgba(23, 32, 42, 0.16);
border-radius: 16px;
color: var(--muted);
font-size: 0.88rem;
text-align: center;
}
.ops-driver-map-marker {
--ops-driver-tone: var(--accent);
--ops-vehicle-heading: 0deg;
display: block;
position: absolute;
width: 2.15rem;
height: 3.2rem;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--ink-strong);
filter: drop-shadow(0 8px 10px rgba(15, 23, 31, 0.28)) drop-shadow(0 0 5px color-mix(in srgb, var(--ops-driver-tone) 42%, transparent));
font-size: 0.64rem;
font-weight: 900;
cursor: pointer;
}
.ops-driver-map-marker::before {
content: "";
position: absolute;
inset: 0;
background: url('data:image/svg+xml,%0A') center / contain no-repeat;
transform: rotate(var(--ops-vehicle-heading));
transform-origin: center;
transition: transform 700ms ease;
}
.ops-driver-map-marker span {
position: absolute;
left: 50%;
bottom: -0.48rem;
z-index: 1;
min-width: 1.6rem;
padding: 0.12rem 0.34rem;
border: 2px solid #fff;
border-radius: 999px;
background: var(--ops-driver-tone);
color: #fff;
box-shadow: 0 5px 12px rgba(15, 23, 31, 0.22);
line-height: 1;
text-align: center;
transform: translateX(-50%);
}
.ops-map-workspace[data-ops-map-marker-density=dense] .ops-driver-map-marker {
width: 1.42rem;
height: 2.12rem;
filter: drop-shadow(0 5px 7px rgba(15, 23, 31, 0.24));
}
.ops-map-workspace[data-ops-map-marker-density=dense] .ops-driver-map-marker span {
display: none;
}
.ops-map-workspace[data-ops-map-marker-density=dense] .ops-driver-map-marker.is-selected,
.ops-map-workspace[data-ops-map-marker-density=dense] .ops-driver-map-marker:focus-visible {
width: 2.15rem;
height: 3.2rem;
font-size: 0.64rem;
}
.ops-map-workspace[data-ops-map-marker-density=dense] .ops-driver-map-marker.is-selected span,
.ops-map-workspace[data-ops-map-marker-density=dense] .ops-driver-map-marker:focus-visible span {
display: block;
}
.ops-driver-map-marker--on_trip {
--ops-driver-tone: #bd6b1f;
}
.ops-map-workspace[data-ops-map-marker-density=dense] .ops-driver-map-marker--on_trip {
filter: drop-shadow(0 5px 7px rgba(15, 23, 31, 0.24));
}
.ops-driver-map-marker--stale {
--ops-driver-tone: #77818a;
opacity: 0.9;
filter: grayscale(0.72) drop-shadow(0 7px 9px rgba(15, 23, 31, 0.24));
}
.ops-map-workspace[data-ops-map-marker-density=dense] .ops-driver-map-marker--stale {
filter: grayscale(0.72) drop-shadow(0 5px 7px rgba(15, 23, 31, 0.22));
}
.ops-driver-map-marker.is-selected,
.ops-driver-map-marker:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.94);
outline-offset: 3px;
filter: drop-shadow(0 10px 14px rgba(15, 23, 31, 0.34)) drop-shadow(0 0 8px color-mix(in srgb, var(--ops-driver-tone) 62%, transparent));
}
.ops-driver-map-popup {
display: grid;
gap: 0.18rem;
min-width: 12rem;
color: var(--ink);
}
.ops-driver-map-popup__heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.65rem;
min-width: 0;
}
.ops-driver-map-popup strong {
color: var(--ink-strong);
font-size: 0.94rem;
}
.ops-driver-map-popup span,
.ops-driver-map-popup p {
margin: 0;
color: var(--muted);
font-size: 0.78rem;
line-height: 1.35;
}
.ops-driver-map-popup__identity {
color: var(--muted);
font-weight: 750;
}
.ops-driver-map-popup__status {
flex: 0 0 auto;
padding: 0.2rem 0.42rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 999px;
background: rgba(248, 250, 252, 0.92);
color: var(--muted);
font-size: 0.68rem;
font-weight: 900;
line-height: 1.1;
}
.ops-driver-map-popup__status--available {
border-color: rgba(47, 148, 108, 0.18);
background: rgba(232, 247, 239, 0.92);
color: #2f6f55;
}
.ops-driver-map-popup__status--on_trip {
border-color: rgba(54, 94, 157, 0.2);
background: rgba(236, 244, 255, 0.92);
color: #284a7c;
}
.ops-driver-map-popup__status--stale {
border-color: rgba(121, 135, 146, 0.18);
background: rgba(242, 245, 247, 0.92);
color: #66747f;
}
.ops-driver-map-popup__freshness--fresh {
color: #2f6f55;
}
.ops-driver-map-popup__freshness--stale,
.ops-driver-map-popup__freshness--missing {
color: #7b8790;
}
.ops-driver-map-popup__context {
display: grid;
gap: 0.05rem;
margin-top: 0.18rem;
padding: 0.42rem 0.48rem;
border: 1px solid rgba(54, 94, 157, 0.14);
border-radius: 10px;
background: rgba(236, 244, 255, 0.82);
color: #284a7c;
font-size: 0.75rem;
line-height: 1.28;
}
.ops-driver-map-popup__context--active-ride {
border-color: rgba(54, 94, 157, 0.22);
background: rgba(236, 244, 255, 0.9);
color: #244a82;
}
.ops-driver-map-popup__context--targeted-offer {
border-color: rgba(194, 126, 24, 0.22);
background: rgba(255, 247, 226, 0.92);
color: #765016;
}
.ops-driver-map-popup__context small {
color: var(--muted);
font-size: 0.72rem;
}
.ops-driver-map-popup__context-kind {
color: currentColor !important;
font-size: 0.62rem !important;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ops-driver-map-popup__actions {
display: flex;
justify-content: flex-end;
margin-top: 0.45rem;
}
.ops-driver-map-popup__actions .button {
width: auto;
min-height: 2rem;
}
.ops-map-canvas .maplibregl-ctrl-group,
.ops-map-canvas .maplibregl-ctrl-attrib {
border: 1px solid rgba(23, 32, 42, 0.1);
border-radius: 12px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 8px 18px rgba(15, 23, 31, 0.12);
}
body.console-shell--ops code {
border-color: rgba(23, 32, 42, 0.08);
background: rgba(247, 249, 251, 0.92);
color: #31404f;
}
body.console-shell--ops .button--primary {
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--accent) 84%, white) 0%,
var(--accent-strong) 100%);
color: #fffdf8;
box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 20%, transparent);
}
body.console-shell--ops .button--secondary {
border-color: var(--line);
background: rgba(255, 255, 255, 0.84);
color: var(--ink-strong);
box-shadow: 0 8px 18px rgba(15, 23, 31, 0.04);
}
body.console-shell--ops .button--secondary:hover,
body.console-shell--ops .button--secondary:focus-visible {
border-color: rgba(23, 32, 42, 0.16);
background: #fff;
}
body.console-shell--ops .button--danger {
border-color: rgba(166, 60, 42, 0.16);
background: rgba(255, 248, 247, 0.96);
}
body.console-shell--ops .ops-dashboard-surface {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
body.console-shell--ops .ops-page-stack > .foundation-card {
gap: 0.75rem;
padding: 0.95rem;
}
body.console-shell--ops .overview-card--highlight {
background: rgba(248, 250, 252, 0.98);
}
body.console-shell--ops .overview-card__header {
gap: 0.28rem;
}
body.console-shell--ops .overview-card__header h2 {
font-size: clamp(1.4rem, 2.2vw, 1.9rem);
line-height: 1.05;
max-width: 18ch;
}
body.console-shell--ops .overview-card__header .hero__lede {
max-width: 72ch;
font-size: 0.95rem;
line-height: 1.6;
}
body.console-shell--ops .ops-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.7rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid rgba(23, 32, 42, 0.08);
}
body.console-shell--ops .ops-section-header__copy {
display: grid;
gap: 0.18rem;
min-width: 0;
}
body.console-shell--ops .ops-section-header__copy h2 {
font-size: 1.24rem;
line-height: 1.08;
}
body.console-shell--ops .ops-section-header__copy p {
max-width: 64ch;
font-size: 0.86rem;
}
body.console-shell--ops .ops-section-header__meta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.05rem;
padding: 0 0.72rem;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(247, 249, 251, 0.9);
color: var(--muted);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.ops-list-counter {
height: 2.45rem;
min-width: max-content;
min-height: 2.45rem;
padding: 0.38rem 0.78rem;
box-sizing: border-box;
}
body.console-shell--ops .request-list,
body.console-shell--ops .ops-grid {
gap: 0.75rem;
}
body.console-shell--ops .request-card {
gap: 0.72rem;
padding: 0.82rem;
border-color: var(--line);
border-radius: 18px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 8px 20px rgba(15, 23, 31, 0.05);
}
body.console-shell--ops .request-card--compact {
gap: 0.62rem;
}
body.console-shell--ops .request-card__title {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 0.5rem 1rem;
}
body.console-shell--ops .request-card__title h3 {
font-size: 1rem;
line-height: 1.15;
}
body.console-shell--ops .ops-ride-card-identity {
display: grid;
gap: 0.14rem;
min-width: 0;
}
body.console-shell--ops .ops-ride-card-identity h3 {
font-size: 1.08rem;
line-height: 1.08;
}
body.console-shell--ops .ops-ride-card-identity > span:not(.status-card__label) {
color: var(--muted);
font-size: 0.82rem;
font-weight: 700;
text-align: left;
white-space: nowrap;
}
body.console-shell--ops #recent-rides > .ops-section-header,
body.console-shell--ops #dispatch-queue > .ops-section-header,
body.console-shell--ops #online-drivers > .ops-section-header {
display: grid;
align-items: end;
gap: 0.85rem;
border-bottom: 0;
}
body.console-shell--ops #dispatch-queue > .ops-section-header {
grid-template-columns: minmax(0, 1fr) minmax(18rem, 34rem) minmax(0, 1fr);
}
body.console-shell--ops #recent-rides > .ops-section-header {
grid-template-columns: minmax(0, 1fr) minmax(18rem, 34rem) minmax(0, 1fr);
}
body.console-shell--ops #online-drivers > .ops-section-header {
grid-template-columns: minmax(0, 1fr) minmax(18rem, 34rem) minmax(0, 1fr);
}
.ops-panel-search,
.ops-rides-panel-search,
.ops-drivers-panel-search {
width: min(100%, 34rem);
min-width: 0;
justify-self: center;
}
.ops-rides-panel-search,
.ops-drivers-panel-search {
width: min(100%, 34rem);
}
body.console-shell--ops #recent-rides > .ops-section-header .ops-section-header__meta,
body.console-shell--ops #dispatch-queue > .ops-section-header .ops-section-header__meta,
body.console-shell--ops #online-drivers > .ops-section-header .ops-section-header__meta {
justify-self: end;
}
.ops-rides-header-actions,
.ops-dispatch-header-actions,
.ops-drivers-header-actions {
grid-column: 3;
grid-row: 1;
display: flex;
align-items: end;
justify-content: flex-end;
gap: 0.65rem;
min-width: 0;
justify-self: end;
}
.ops-rides-header-actions .ops-section-header__meta,
.ops-dispatch-header-actions .ops-section-header__meta,
.ops-drivers-header-actions .ops-section-header__meta {
height: 2.45rem;
min-width: max-content;
min-height: 2.45rem;
padding: 0.38rem 0.78rem;
box-sizing: border-box;
justify-self: auto;
}
.ops-panel-search__field,
.ops-rides-panel-search__field,
.ops-drivers-panel-search__field {
display: grid;
gap: 0.28rem;
min-width: 0;
}
.ops-panel-search__field span,
.ops-rides-panel-search__field span,
.ops-drivers-panel-search__field span {
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ops-panel-search__field input,
.ops-rides-panel-search__field input,
.ops-drivers-panel-search__field input {
width: 100%;
min-height: 2.45rem;
padding: 0.58rem 0.78rem;
border: 1px solid rgba(23, 32, 42, 0.14);
border-radius: 14px;
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
font: inherit;
font-size: 0.92rem;
}
.ops-panel-search__field input:focus-visible,
.ops-rides-panel-search__field input:focus-visible,
.ops-drivers-panel-search__field input:focus-visible {
border-color: color-mix(in srgb, var(--accent) 72%, white);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 72%, white), 0 12px 24px rgba(37, 28, 19, 0.08);
outline: none;
}
.ops-rides-filter-toggle {
min-height: 2.45rem;
flex: 0 0 auto;
gap: 0.45rem;
white-space: nowrap;
}
.ops-rides-filter-toggle__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
}
.ops-rides-filter-toggle__icon svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.ops-rides-filter-panel {
margin: 0.15rem 0 1rem;
padding: 0.9rem;
border: 1px solid rgba(23, 32, 42, 0.1);
border-radius: 16px;
background: rgba(255, 255, 255, 0.68);
box-shadow: 0 1px 0 rgba(23, 32, 42, 0.04);
}
.ops-rides-filter-panel.is-hidden,
.ops-rides-filter-panel[hidden] {
display: none;
}
.ops-rides-filter-grid {
display: grid;
grid-template-columns: repeat(4, minmax(8.5rem, 1fr)) auto;
align-items: end;
gap: 0.55rem;
}
.ops-drivers-filter-grid {
display: grid;
grid-template-columns: repeat(4, minmax(8.5rem, 1fr)) auto;
align-items: end;
gap: 0.55rem;
}
.ops-dispatch-filter-grid {
display: grid;
grid-template-columns: repeat(2, minmax(10rem, 1fr)) auto;
align-items: end;
gap: 0.55rem;
}
.ops-rides-filter-field {
display: grid;
gap: 0.24rem;
min-width: 0;
}
.ops-rides-filter-field span {
color: var(--muted);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ops-rides-filter-field select {
width: 100%;
min-height: 2.3rem;
padding: 0.5rem 0.7rem;
border: 1px solid rgba(23, 32, 42, 0.14);
border-radius: 12px;
background: rgba(255, 255, 255, 0.94);
color: var(--ink);
font: inherit;
font-size: 0.86rem;
}
.ops-rides-filter-field select:focus-visible {
border-color: color-mix(in srgb, var(--accent) 72%, white);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 72%, white);
outline: none;
}
.ops-rides-filter-reset {
min-height: 2.3rem;
align-self: end;
}
.ops-rides-empty-state {
display: grid;
justify-items: center;
gap: 1rem;
padding: 3.1rem 1rem 3.8rem;
color: var(--muted);
text-align: center;
}
.ops-rides-empty-state__illustration {
display: inline-grid;
place-items: center;
width: min(9rem, 46vw);
aspect-ratio: 1;
color: color-mix(in srgb, var(--muted) 72%, var(--ink));
}
.ops-rides-empty-state__illustration svg {
width: 7.4rem;
max-width: 82%;
height: auto;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 3.8;
}
.ops-dispatch-empty-state__logo img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.ops-dispatch-empty-state .ops-rides-empty-state__illustration {
width: clamp(18rem, 42vw, 37rem);
max-width: min(76vw, 37rem);
}
.ops-dispatch-empty-state {
align-content: center;
gap: 0.12rem;
min-height: clamp(24rem, 52vh, 40rem);
padding-top: clamp(1.5rem, 3vh, 3rem);
padding-bottom: clamp(1.5rem, 3vh, 3rem);
}
.ops-dispatch-empty-state p {
max-width: min(42rem, 82vw);
font-size: clamp(1.32rem, 2vw, 1.85rem);
line-height: 1.18;
}
.ops-rides-empty-state__sheet {
opacity: 0.62;
}
.ops-rides-empty-state__sheet-fold,
.ops-rides-empty-state__line,
.ops-rides-empty-state__empty-mark {
opacity: 0.82;
}
.ops-rides-empty-state p {
max-width: 34rem;
margin: 0;
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
}
.ops-tile-detail-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 1rem;
padding: 0.1rem 0 0;
}
.ops-tile-detail-header > .button {
--button-icon: var(--button-icon-previous);
justify-self: start;
}
.ops-tile-detail-header > div {
display: grid;
gap: 0.12rem;
grid-column: 2;
justify-items: center;
min-width: 0;
text-align: center;
}
.ops-tile-detail-header h2 {
margin: 0;
color: var(--ink-strong);
font-size: 1.08rem;
line-height: 1.2;
}
.ops-compact-tile {
display: none;
}
body.console-shell--ops .ops-dashboard-shell[data-ops-tile-density=compact] [data-ops-tile-list] {
gap: 0.48rem;
}
body.console-shell--ops .ops-dashboard-shell[data-ops-tile-density=compact] .ops-full-tile {
display: none;
}
body.console-shell--ops .ops-dashboard-shell[data-ops-tile-density=compact] .ops-compact-tile {
display: grid;
grid-template-columns: minmax(9.5rem, 0.72fr) minmax(18rem, 2.1fr) minmax(10rem, 0.72fr);
align-items: center;
gap: 0.75rem;
min-width: 0;
min-height: 5.4rem;
padding: 0.68rem 0.82rem;
border: 1px solid rgba(23, 32, 42, 0.09);
border-radius: 14px;
background: rgba(255, 255, 255, 0.97);
color: inherit;
text-decoration: none;
box-shadow: 0 6px 16px rgba(15, 23, 31, 0.055);
transition:
border-color 150ms ease,
box-shadow 150ms ease,
transform 150ms ease;
}
body.console-shell--ops .ops-dashboard-shell[data-ops-tile-density=compact] .ops-compact-tile:hover,
body.console-shell--ops .ops-dashboard-shell[data-ops-tile-density=compact] .ops-compact-tile:focus-visible {
border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
box-shadow: 0 10px 22px rgba(15, 23, 31, 0.09);
outline: none;
transform: translateY(-1px);
}
.ops-compact-tile__identity,
.ops-compact-tile__route,
.ops-compact-tile__state {
display: grid;
gap: 0.16rem;
min-width: 0;
}
.ops-compact-tile__identity strong,
.ops-compact-tile__route strong {
min-width: 0;
overflow: hidden;
color: var(--ink-strong);
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.ops-compact-tile__identity strong {
font-family: var(--font-mono);
font-size: 1rem;
}
.ops-compact-tile__route strong {
font-size: 0.92rem;
}
.ops-compact-tile__identity > span:last-child,
.ops-compact-tile__route > span,
.ops-compact-tile__state > span:last-child {
min-width: 0;
overflow: hidden;
color: var(--muted);
font-size: 0.76rem;
font-weight: 720;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.ops-compact-tile__state {
justify-items: end;
text-align: right;
}
.ops-compact-tile__state .chip {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.console-shell--ops .ops-ride-card__status {
display: grid;
justify-items: end;
gap: 0.42rem;
min-width: 0;
}
body.console-shell--ops .ops-dispatch-request-card__timestamp {
align-self: start;
}
body.console-shell--ops .ops-dispatch-request-card__timestamp > span {
color: var(--muted);
font-size: 0.82rem;
font-weight: 700;
line-height: 1.2;
text-align: right;
white-space: nowrap;
}
body.console-shell--ops .request-card__title .chip-row {
justify-content: flex-end;
}
body.console-shell--ops .detail-grid {
gap: 0.65rem;
}
body.console-shell--ops .detail {
gap: 0.22rem;
padding: 0.72rem 0.8rem;
border-color: var(--line);
border-radius: 16px;
background: rgba(248, 250, 252, 0.88);
}
body.console-shell--ops .detail__label {
font-size: 0.72rem;
letter-spacing: 0.1em;
}
body.console-shell--ops .detail__value {
font-size: 0.95rem;
line-height: 1.42;
}
body.console-shell--ops .detail__actions {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 0.3rem;
}
body.console-shell--ops .metric-strip {
gap: 0.65rem;
}
body.console-shell--ops .metric-card {
padding: 0.78rem;
border-color: var(--line);
border-radius: 16px;
background: rgba(248, 250, 252, 0.9);
}
body.console-shell--ops .metric-card strong {
font-size: clamp(1.45rem, 1.8vw, 1.8rem);
}
body.console-shell--ops .ops-ride-result-metrics {
grid-template-columns: repeat(auto-fit, minmax(9.8rem, 1fr));
}
body.console-shell--ops .ops-ride-card-footer > .ops-ride-result-metrics {
grid-template-columns: repeat(auto-fit, minmax(10.2rem, 1fr));
gap: 0.58rem;
}
body.console-shell--ops .ops-ride-result-metric {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.48rem 0.62rem;
min-width: 0;
padding: 0.78rem 0.86rem;
border-radius: 14px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.9),
rgba(248, 250, 252, 0.78));
}
body.console-shell--ops .ops-ride-result-metric__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.08rem;
height: 2.08rem;
border-radius: 14px;
background: color-mix(in srgb, var(--ops-ride-result-metric-color, var(--accent)) 12%, white);
}
body.console-shell--ops .ops-ride-result-metric__icon::before {
content: "";
width: 1.22rem;
height: 1.22rem;
background: var(--ops-ride-result-metric-color, var(--accent));
mask-image: var(--ops-ride-result-metric-icon);
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: var(--ops-ride-result-metric-icon);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
body.console-shell--ops .ops-ride-result-metric__label {
min-width: 0;
color: var(--muted);
font-size: 0.76rem;
font-weight: 800;
line-height: 1.18;
overflow-wrap: anywhere;
}
body.console-shell--ops .ops-ride-result-metric strong {
grid-column: 1 / -1;
min-width: 0;
overflow-wrap: anywhere;
color: var(--ink-strong);
font-family: var(--font-mono);
font-size: clamp(1.18rem, 1.55vw, 1.54rem);
line-height: 1.12;
}
body.console-shell--ops .ops-ride-result-metrics--compact {
grid-template-columns: repeat(auto-fit, minmax(10.2rem, 1fr));
gap: 0.58rem;
}
body.console-shell--ops .ops-ride-result-metrics--compact .ops-ride-result-metric {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "icon label" "icon value";
gap: 0.12rem 0.6rem;
padding: 0.66rem 0.78rem;
border-radius: 14px;
}
body.console-shell--ops .ops-ride-result-metrics--compact .ops-ride-result-metric__icon {
grid-area: icon;
width: 2.12rem;
height: 2.12rem;
border-radius: 14px;
}
body.console-shell--ops .ops-ride-result-metrics--compact .ops-ride-result-metric__icon::before {
width: 1.22rem;
height: 1.22rem;
}
body.console-shell--ops .ops-ride-result-metrics--compact .ops-ride-result-metric__label {
grid-area: label;
font-size: 0.74rem;
}
body.console-shell--ops .ops-ride-result-metrics--compact .ops-ride-result-metric strong {
grid-area: value;
font-size: clamp(1.08rem, 1.3vw, 1.32rem);
line-height: 1.08;
}
body.console-shell--ops .ops-ride-card-footer {
display: grid;
gap: 0.5rem;
min-width: 0;
}
body.console-shell--ops .ops-ride-result-metric--distance {
--ops-ride-result-metric-color: var(--accent-2);
--ops-ride-result-metric-icon: var(--ops-metric-icon-distance);
}
body.console-shell--ops .ops-ride-result-metric--duration {
--ops-ride-result-metric-color: #4f46e5;
--ops-ride-result-metric-icon: var(--ops-metric-icon-duration);
}
body.console-shell--ops .ops-ride-result-metric--fare {
--ops-ride-result-metric-color: var(--accent);
--ops-ride-result-metric-icon: var(--ops-metric-icon-fare);
}
body.console-shell--ops .ops-ride-result-metric--company {
--ops-ride-result-metric-color: #0f766e;
--ops-ride-result-metric-icon: var(--ops-metric-icon-company);
}
body.console-shell--ops .ops-ride-result-metric--driver {
--ops-ride-result-metric-color: #b45309;
--ops-ride-result-metric-icon: var(--ops-metric-icon-driver);
}
body.console-shell--ops .request-card__actions {
padding-top: 0.1rem;
}
body.console-shell--ops .ops-ride-card__primary-actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.38rem;
padding-top: 0;
}
body.console-shell--ops .ops-ride-card__primary-actions:empty {
display: none;
}
body.console-shell--ops .ops-ride-card__primary-actions .button {
min-height: 2rem;
}
body.console-shell--ops .request-card__forms {
gap: 0.65rem;
}
body.console-shell--ops .request-card__forms .auth-form {
padding: 0.8rem;
border-color: var(--line);
background: rgba(255, 255, 255, 0.82);
}
body.console-shell--ops .ops-ride-card-body {
display: grid;
align-items: start;
gap: 0.58rem;
min-width: 0;
}
body.console-shell--ops .ops-ride-overview-panel {
display: grid;
align-content: start;
gap: 0.48rem;
min-width: 0;
padding: 0.62rem 0.68rem;
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(248, 250, 252, 0.76);
}
body.console-shell--ops .ops-ride-contact-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.42rem;
min-width: 0;
}
body.console-shell--ops .ops-ride-contact-card {
display: grid;
align-content: start;
gap: 0.1rem;
min-width: 0;
padding: 0.44rem 0.52rem;
border: 1px solid rgba(23, 32, 42, 0.07);
border-radius: 12px;
background: rgba(255, 255, 255, 0.7);
}
body.console-shell--ops .ops-ride-summary-label {
color: var(--muted);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
body.console-shell--ops .ops-ride-contact-card strong,
body.console-shell--ops .ops-ride-contact-card__line {
min-width: 0;
overflow-wrap: anywhere;
color: var(--ink-strong);
font-family: var(--font-mono);
font-size: 0.82rem;
line-height: 1.24;
}
body.console-shell--ops .ops-ride-contact-card--driver strong {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 850;
}
body.console-shell--ops .ops-ride-contact-card__line {
color: var(--muted-strong);
font-size: 0.78rem;
font-weight: 800;
}
body.console-shell--ops .ops-ride-contact-card__phone,
body.console-shell--ops .ops-ride-contact-card__plate {
justify-self: start;
width: fit-content;
max-width: 100%;
padding: 0.16rem 0.42rem;
border: 1px solid color-mix(in srgb, var(--line-strong) 82%, white);
border-radius: 999px;
background: rgba(255, 255, 255, 0.86);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}
body.console-shell--ops .ops-ride-location-stack {
display: grid;
gap: 0.42rem;
min-width: 0;
}
body.console-shell--ops .ops-ride-location-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "label action" "address action" "context action";
align-items: center;
gap: 0.12rem 0.48rem;
min-width: 0;
padding: 0.52rem 0.58rem;
border: 1px solid rgba(23, 32, 42, 0.07);
border-radius: 12px;
background: rgba(255, 255, 255, 0.72);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 24%, transparent);
}
body.console-shell--ops .ops-ride-location-card--dropoff {
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent-2) 32%, transparent);
}
body.console-shell--ops .ops-ride-location-card .ops-ride-summary-label {
grid-area: label;
}
body.console-shell--ops .ops-ride-location-card p {
grid-area: address;
min-width: 0;
margin: 0;
overflow-wrap: anywhere;
color: var(--ink-strong);
font-size: 0.88rem;
font-weight: 700;
line-height: 1.24;
}
body.console-shell--ops .ops-ride-location-card__contexts {
grid-area: context;
display: grid;
gap: 0.12rem;
min-width: 0;
}
body.console-shell--ops .ops-ride-location-card__context {
min-width: 0;
overflow-wrap: anywhere;
color: var(--muted-strong);
font-size: 0.78rem;
font-weight: 750;
line-height: 1.2;
}
body.console-shell--ops .ops-ride-location-card__context--muted {
color: var(--muted);
font-size: 0.72rem;
font-weight: 700;
}
body.console-shell--ops .ops-ride-location-card .button {
grid-area: action;
min-height: 1.95rem;
padding-inline: 0.6rem;
}
body.console-shell--ops .ops-dispatch-request-card .ops-ride-location-card {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "label" "address" "context";
}
body.console-shell--ops .ops-dispatch-requirements-card {
display: grid;
gap: 0.5rem;
min-width: 0;
padding: 0.68rem 0.72rem;
border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
border-radius: 12px;
background: color-mix(in srgb, var(--accent) 10%, white);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 72%, transparent), 0 10px 22px rgba(16, 24, 40, 0.08);
}
body.console-shell--ops .ops-dispatch-requirement-badges {
display: flex;
flex-wrap: wrap;
gap: 0.42rem;
min-width: 0;
}
body.console-shell--ops .ops-dispatch-requirement-badge {
display: inline-flex;
align-items: center;
gap: 0.36rem;
max-width: 100%;
padding: 0.26rem 0.48rem 0.26rem 0.32rem;
border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
color: var(--ink-strong);
font-size: 0.78rem;
font-weight: 850;
line-height: 1.15;
}
body.console-shell--ops .ops-dispatch-requirement-badge__icon {
display: inline-grid;
place-items: center;
min-width: 1.42rem;
height: 1.42rem;
padding-inline: 0.18rem;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 84%, black);
color: white;
font-family: var(--font-mono);
font-size: 0.62rem;
font-weight: 900;
letter-spacing: 0;
}
body.console-shell--ops .ops-ride-activity-panel,
body.console-shell--ops .ops-ride-context-stack,
body.console-shell--ops .disclosure__body.ops-ride-context-panel {
display: grid;
gap: 0.62rem;
padding-top: 0;
}
body.console-shell--ops .ops-ride-context-block {
display: grid;
gap: 0.55rem;
align-items: start;
min-width: 0;
padding: 0.72rem 0.82rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 14px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.78),
rgba(248, 250, 252, 0.76));
}
body.console-shell--ops .ops-ride-secondary-disclosure {
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 13px;
background: rgba(248, 250, 252, 0.72);
}
body.console-shell--ops .ops-ride-secondary-disclosure > .disclosure__summary {
min-height: 2.15rem;
padding: 0.42rem 0.62rem;
color: var(--ink-strong);
font-size: 0.82rem;
}
body.console-shell--ops .ops-ride-secondary-disclosure[open] > .disclosure__summary {
border-bottom: 1px solid rgba(23, 32, 42, 0.08);
}
body.console-shell--ops .ops-ride-secondary-grid {
padding: 0.54rem;
}
body.console-shell--ops .ops-ride-timeline-card {
gap: 0.5rem;
padding: 0.48rem;
}
body.console-shell--ops .ops-ride-workflow-timeline {
display: grid;
min-width: 0;
}
body.console-shell--ops .ops-ride-workflow-timeline .dw-chart--workflow-timeline {
width: 100%;
min-width: 0;
border-radius: 12px;
}
body.console-shell--ops .ops-ride-workflow-timeline-fallback {
display: grid;
gap: 0.16rem;
padding: 0.72rem 0.82rem;
border: 1px dashed var(--line-strong);
border-radius: 12px;
background: var(--surface-muted);
color: var(--muted);
font-size: 0.86rem;
line-height: 1.35;
}
body.console-shell--ops .ops-ride-workflow-timeline-fallback strong {
color: var(--ink-strong);
font-size: 0.92rem;
}
body.console-shell--ops .ops-dispatch-request-flow-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.58rem;
min-width: 0;
min-height: 10rem;
padding: 0.68rem 0.72rem;
border: 1px solid rgba(23, 32, 42, 0.07);
border-radius: 14px;
background: rgba(255, 255, 255, 0.78);
}
body.console-shell--ops .ops-dispatch-request-flow-card__rail {
position: relative;
width: 1.45rem;
min-height: 100%;
}
body.console-shell--ops .ops-dispatch-request-flow-card__rail::before {
content: "";
position: absolute;
top: 0.35rem;
bottom: 0.15rem;
left: 50%;
width: 2px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 22%, var(--line));
transform: translateX(-50%);
}
body.console-shell--ops .ops-dispatch-request-flow-card__rail::after {
content: "";
position: absolute;
top: 0.18rem;
left: 50%;
width: 0.78rem;
height: 0.78rem;
border: 3px solid white;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
transform: translateX(-50%);
}
body.console-shell--ops .ops-dispatch-request-flow-card__body {
display: grid;
align-content: start;
gap: 0.28rem;
min-width: 0;
}
body.console-shell--ops .ops-dispatch-request-flow-card__body strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--ink-strong);
font-size: 1rem;
line-height: 1.15;
}
body.console-shell--ops .ops-dispatch-request-flow-card__body p {
margin: 0;
color: var(--muted);
font-size: 0.8rem;
font-weight: 760;
line-height: 1.25;
}
body.console-shell--ops .ops-dispatch-request-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
margin-top: 0.75rem;
}
body.console-shell--ops .ops-dispatch-wait-timer {
display: inline-flex;
align-items: center;
gap: 0.58rem;
min-height: 2.55rem;
margin-right: auto;
padding: 0.48rem 0.72rem;
border: 1px solid rgba(107, 114, 128, 0.26);
border-radius: 8px;
background: #f8fafc;
color: #374151;
}
body.console-shell--ops .ops-dispatch-wait-timer.is-warning {
border-color: rgba(217, 119, 6, 0.56);
background: #fff7ed;
color: #9a3412;
box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.12);
}
body.console-shell--ops .ops-dispatch-wait-timer__icon {
width: 1.12rem;
height: 1.12rem;
flex: 0 0 auto;
background: currentColor;
mask: var(--ops-metric-icon-duration) center / contain no-repeat;
}
body.console-shell--ops .ops-dispatch-wait-timer__copy {
display: grid;
gap: 0.05rem;
line-height: 1;
}
body.console-shell--ops .ops-dispatch-wait-timer__label {
color: var(--muted);
font-size: 0.67rem;
font-weight: 820;
letter-spacing: 0;
text-transform: uppercase;
}
body.console-shell--ops .ops-dispatch-wait-timer.is-warning .ops-dispatch-wait-timer__label {
color: inherit;
}
body.console-shell--ops .ops-dispatch-wait-timer strong {
font-size: 0.98rem;
font-variant-numeric: tabular-nums;
line-height: 1.05;
}
body.console-shell--ops .ops-dispatch-request-card__footer .button {
width: auto;
min-height: 2.55rem;
}
@media (max-width: 720px) {
body.console-shell--ops .ops-dispatch-request-card__footer {
align-items: stretch;
flex-wrap: wrap;
}
body.console-shell--ops .ops-dispatch-wait-timer {
flex: 1 1 12rem;
}
body.console-shell--ops .ops-dispatch-request-card__footer .button {
flex: 1 1 12rem;
}
}
body.console-shell--ops #recent-rides,
body.console-shell--ops #dispatch-queue,
body.console-shell--ops #open-ride-problems {
display: grid;
gap: 0.85rem;
overflow: visible;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
body.console-shell--ops #recent-rides::before,
body.console-shell--ops #dispatch-queue::before,
body.console-shell--ops #open-ride-problems::before {
content: none;
}
body.console-shell--ops #recent-rides > .ops-section-header,
body.console-shell--ops #dispatch-queue > .ops-section-header,
body.console-shell--ops #open-ride-problems > .ops-section-header {
padding: 0.1rem 0.9rem 0;
}
body.console-shell--ops #recent-rides > .request-list,
body.console-shell--ops #dispatch-queue > .request-list,
body.console-shell--ops #open-ride-problems > .request-list {
gap: 0.85rem;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
}
body.console-shell--ops #dispatch-queue:has(.ops-dispatch-empty-state--queue-empty) {
min-height: 0;
height: 100%;
overflow: hidden;
grid-template-rows: auto minmax(0, 1fr);
}
body.console-shell--ops:has(.ops-dispatch-empty-state--queue-empty) {
overflow: hidden;
}
body.console-shell--ops:has(.ops-dispatch-empty-state--queue-empty) .ops-dashboard-main {
display: flex;
flex-direction: column;
height: 100dvh;
padding-top: 0;
overflow: hidden;
}
body.console-shell--ops:has(.ops-dispatch-empty-state--queue-empty) .ops-workspace-header:not(.ops-workspace-header--map) {
margin-top: 0;
}
body.console-shell--ops:has(.ops-dispatch-empty-state--queue-empty) .ops-dashboard-main__inner {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
body.console-shell--ops:has(.ops-dispatch-empty-state--queue-empty) #ops-page-results {
display: grid;
min-height: 0;
height: 100%;
overflow: hidden;
}
body.console-shell--ops #dispatch-queue:has(.ops-dispatch-empty-state--queue-empty) > .ops-section-header {
flex: 0 0 auto;
}
body.console-shell--ops #dispatch-queue .ops-dispatch-empty-state--queue-empty {
min-height: 0;
height: 100%;
max-height: 100%;
padding: 0;
overflow: hidden;
align-content: center;
gap: 0;
}
body.console-shell--ops #dispatch-queue .ops-dispatch-empty-state--queue-empty .ops-rides-empty-state__illustration {
width: clamp(18rem, 40vw, 37rem);
max-width: min(74vw, 37rem);
margin-bottom: -0.45rem;
}
body.console-shell--ops #dispatch-queue .ops-dispatch-empty-state--queue-empty p {
font-size: clamp(1.38rem, 2.1vw, 1.95rem);
line-height: 1.14;
}
body.console-shell--ops #recent-rides .ops-ride-card,
body.console-shell--ops #dispatch-queue .ops-ride-card,
body.console-shell--ops #open-ride-problems .ops-ride-card {
gap: 0.74rem;
padding: 0.96rem 1rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 16px;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 10px 24px rgba(15, 23, 31, 0.075);
}
body.console-shell--ops #recent-rides .ops-ride-card:last-child,
body.console-shell--ops #dispatch-queue .ops-ride-card:last-child,
body.console-shell--ops #open-ride-problems .ops-ride-card:last-child {
border-bottom: 1px solid rgba(23, 32, 42, 0.08);
}
body.console-shell--ops #recent-rides .ops-ride-overview-panel,
body.console-shell--ops #dispatch-queue .ops-ride-overview-panel,
body.console-shell--ops #open-ride-problems .ops-ride-overview-panel {
gap: 0.62rem;
padding: 0;
border: 0;
background: transparent;
}
body.console-shell--ops #recent-rides .ops-ride-contact-grid,
body.console-shell--ops #dispatch-queue .ops-ride-contact-grid,
body.console-shell--ops #open-ride-problems .ops-ride-contact-grid {
gap: 0.7rem 1.1rem;
}
body.console-shell--ops #recent-rides .ops-ride-contact-card,
body.console-shell--ops #dispatch-queue .ops-ride-contact-card,
body.console-shell--ops #open-ride-problems .ops-ride-contact-card {
gap: 0.16rem;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
body.console-shell--ops #recent-rides .ops-ride-contact-card__phone,
body.console-shell--ops #recent-rides .ops-ride-contact-card__plate,
body.console-shell--ops #dispatch-queue .ops-ride-contact-card__phone,
body.console-shell--ops #dispatch-queue .ops-ride-contact-card__plate,
body.console-shell--ops #open-ride-problems .ops-ride-contact-card__phone,
body.console-shell--ops #open-ride-problems .ops-ride-contact-card__plate {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.console-shell--ops #recent-rides .ops-ride-location-stack,
body.console-shell--ops #dispatch-queue .ops-ride-location-stack {
gap: 0;
border-top: 1px solid rgba(23, 32, 42, 0.08);
}
body.console-shell--ops #recent-rides .ops-ride-location-card,
body.console-shell--ops #dispatch-queue .ops-ride-location-card {
padding: 0.56rem 0;
border: 0;
border-bottom: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.console-shell--ops #recent-rides .ops-ride-location-card:last-child,
body.console-shell--ops #dispatch-queue .ops-ride-location-card:last-child {
border-bottom: 0;
}
body.console-shell--ops #recent-rides .ops-ride-secondary-disclosure,
body.console-shell--ops #dispatch-queue .ops-ride-secondary-disclosure {
border: 0;
border-radius: 0;
background: transparent;
}
body.console-shell--ops #recent-rides .ops-ride-secondary-disclosure > .disclosure__summary,
body.console-shell--ops #dispatch-queue .ops-ride-secondary-disclosure > .disclosure__summary {
min-height: 1.8rem;
padding: 0;
}
body.console-shell--ops #recent-rides .ops-ride-secondary-disclosure[open] > .disclosure__summary,
body.console-shell--ops #dispatch-queue .ops-ride-secondary-disclosure[open] > .disclosure__summary {
border-bottom: 0;
}
body.console-shell--ops #recent-rides .ops-ride-secondary-grid,
body.console-shell--ops #dispatch-queue .ops-ride-secondary-grid {
padding: 0;
}
body.console-shell--ops #recent-rides .ops-ride-context-block,
body.console-shell--ops #dispatch-queue .ops-ride-context-block {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
body.console-shell--ops #dispatch-queue .ops-dispatch-request-flow-card {
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
body.console-shell--ops #recent-rides .route-map-card--ops,
body.console-shell--ops #dispatch-queue .route-map-card--ops {
border-color: rgba(23, 32, 42, 0.08);
border-radius: 14px;
box-shadow: none;
}
body.console-shell--ops .ops-ride-context-timeline {
display: flex;
flex-wrap: wrap;
gap: 0.55rem 1.1rem;
min-width: 0;
}
body.console-shell--ops .ops-ride-context-time {
position: relative;
display: grid;
gap: 0.08rem;
min-width: 0;
padding-left: 0.86rem;
}
body.console-shell--ops .ops-ride-context-time::before {
content: "";
position: absolute;
top: 0.44rem;
left: 0;
width: 0.42rem;
height: 0.42rem;
border-radius: 999px;
background: color-mix(in srgb, var(--accent-2) 62%, white);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2-soft) 40%, transparent);
}
body.console-shell--ops .ops-ride-context-time span,
body.console-shell--ops .ops-ride-context-location__label,
body.console-shell--ops .ops-ride-context-note span {
color: var(--muted);
font-size: 0.82rem;
font-weight: 700;
}
body.console-shell--ops .ops-ride-context-time strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--ink-strong);
font-family: var(--font-mono);
font-size: 0.92rem;
line-height: 1.35;
}
body.console-shell--ops .ops-ride-context-locations,
body.console-shell--ops .ops-ride-context-location__main,
body.console-shell--ops .ops-ride-context-note {
display: grid;
gap: 0.4rem;
min-width: 0;
}
body.console-shell--ops .ops-ride-card-note {
width: 100%;
justify-items: start;
text-align: left;
}
body.console-shell--ops .ops-ride-card-note .ops-ride-context-note {
width: 100%;
}
body.console-shell--ops .ops-ride-context-locations {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem;
}
body.console-shell--ops .ops-ride-context-location {
display: grid;
gap: 0.22rem;
min-width: 0;
padding-left: 0.72rem;
border-left: 2px solid color-mix(in srgb, var(--accent) 24%, var(--line));
}
body.console-shell--ops .ops-ride-context-location:nth-child(2) {
border-left-color: color-mix(in srgb, var(--accent-2) 38%, var(--line));
}
body.console-shell--ops .ops-ride-context-location__main p,
body.console-shell--ops .ops-ride-context-note p {
margin: 0;
color: var(--ink-strong);
font-size: 0.95rem;
line-height: 1.38;
}
body.console-shell--ops .ops-ride-context-location__main .chip-row {
gap: 0.34rem;
}
body.console-shell--ops .ops-ride-context-note {
position: relative;
padding-left: 0.72rem;
border-left: 2px solid color-mix(in srgb, var(--accent) 32%, var(--line));
}
body.console-shell--ops .ops-ride-context-note p {
font-weight: 700;
}
body.console-shell--ops .ops-ride-context-note__time {
display: inline-flex;
align-items: center;
width: fit-content;
min-width: 0;
padding: 0.18rem 0.48rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
}
@media (max-width: 760px) {
body.console-shell--ops .ops-ride-context-locations {
grid-template-columns: 1fr;
}
body.console-shell--ops .ops-ride-context-block {
padding: 0.68rem 0.72rem;
}
}
@media (max-width: 900px) {
body.console-shell--ops .ops-dashboard-shell[data-ops-tile-density=compact] .ops-compact-tile {
grid-template-columns: minmax(8.5rem, 0.8fr) minmax(0, 1.5fr);
}
body.console-shell--ops .ops-dashboard-shell[data-ops-tile-density=compact] .ops-compact-tile__state {
grid-column: 1 / -1;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
justify-items: start;
text-align: left;
}
}
@media (max-width: 560px) {
.ops-tile-detail-header {
grid-template-columns: 1fr;
justify-items: start;
}
.ops-tile-detail-header > div {
grid-column: auto;
justify-self: stretch;
}
}
body.console-shell--ops .ops-driver-card {
position: relative;
gap: 0.72rem;
overflow: hidden;
border-width: 1px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.98),
rgba(249, 251, 252, 0.96));
}
body.console-shell--ops .ops-driver-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 0.28rem;
background: rgba(23, 32, 42, 0.1);
}
body.console-shell--ops .ops-driver-card--online {
border-color: color-mix(in srgb, var(--accent-2-soft) 60%, var(--line));
box-shadow: 0 14px 28px rgba(40, 111, 86, 0.08);
}
body.console-shell--ops .ops-driver-card--online::before {
background:
linear-gradient(
90deg,
color-mix(in srgb, var(--accent-2) 72%, white),
color-mix(in srgb, var(--accent-2-soft) 88%, white));
}
body.console-shell--ops .ops-driver-card--on-trip {
border-color: color-mix(in srgb, var(--accent-soft) 72%, var(--line));
box-shadow: 0 14px 28px rgba(153, 102, 42, 0.08);
}
body.console-shell--ops .ops-driver-card--on-trip::before {
background:
linear-gradient(
90deg,
color-mix(in srgb, var(--accent) 74%, white),
color-mix(in srgb, var(--accent-soft) 90%, white));
}
body.console-shell--ops .ops-driver-card--offline {
border-color: rgba(23, 32, 42, 0.1);
box-shadow: 0 12px 24px rgba(15, 23, 31, 0.05);
}
body.console-shell--ops .ops-driver-card--offline::before {
background:
linear-gradient(
90deg,
rgba(88, 103, 120, 0.44),
rgba(164, 176, 191, 0.3));
}
body.console-shell--ops .ops-driver-card__hero {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 0.72rem;
}
body.console-shell--ops .ops-driver-card__identity {
display: grid;
gap: 0.52rem;
min-width: 0;
}
body.console-shell--ops .ops-driver-card__header {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 0.72rem;
min-width: 0;
}
body.console-shell--ops .ops-driver-card__portrait-shell {
position: relative;
padding: 0.2rem;
border-radius: 26px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.94),
rgba(242, 246, 250, 0.86));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
body.console-shell--ops .ops-driver-card__portrait {
display: grid;
place-items: center;
width: 4.25rem;
aspect-ratio: 0.82;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
border-radius: 22px;
background:
radial-gradient(
circle at 30% 30%,
rgba(255, 255, 255, 0.88),
transparent 56%),
linear-gradient(
145deg,
color-mix(in srgb, var(--accent-soft) 70%, white),
color-mix(in srgb, var(--accent) 18%, white));
color: var(--ink);
font-size: 0.98rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.console-shell--ops .ops-driver-card--online .ops-driver-card__portrait {
border-color: color-mix(in srgb, var(--accent-2) 18%, white);
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-2-soft) 24%, white);
}
body.console-shell--ops .ops-driver-card--on-trip .ops-driver-card__portrait {
border-color: color-mix(in srgb, var(--accent) 24%, white);
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-soft) 30%, white);
}
body.console-shell--ops .ops-driver-card__portrait img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
body.console-shell--ops .ops-driver-card__portrait-placeholder {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.9),
transparent 34%),
linear-gradient(
145deg,
rgba(226, 232, 240, 0.98),
rgba(203, 213, 225, 0.9));
}
body.console-shell--ops .ops-driver-card__portrait-placeholder::before {
content: "";
position: absolute;
inset: 0.42rem;
border: 1px solid rgba(100, 116, 139, 0.18);
border-radius: 18px;
}
body.console-shell--ops .ops-driver-card__portrait-placeholder::after {
content: "";
position: absolute;
right: 20%;
bottom: 13%;
left: 20%;
height: 0.18rem;
border-radius: 999px;
background: rgba(100, 116, 139, 0.22);
}
body.console-shell--ops .ops-driver-card__portrait-placeholder-head,
body.console-shell--ops .ops-driver-card__portrait-placeholder-body {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: rgba(71, 85, 105, 0.72);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
body.console-shell--ops .ops-driver-card__portrait-placeholder-head {
top: 24%;
width: 31%;
aspect-ratio: 1;
border-radius: 999px;
}
body.console-shell--ops .ops-driver-card__portrait-placeholder-body {
bottom: 23%;
width: 58%;
height: 30%;
border-radius: 999px 999px 16px 16px;
}
body.console-shell--ops .ops-driver-card__title-block {
display: grid;
gap: 0.32rem;
min-width: 0;
}
body.console-shell--ops .ops-driver-card__title-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 0.55rem 0.75rem;
min-width: 0;
padding-bottom: 0.48rem;
border-bottom: 1px solid rgba(23, 32, 42, 0.08);
}
body.console-shell--ops .ops-driver-card__name {
margin: 0;
color: var(--ink);
font-size: 1.12rem;
font-weight: 800;
line-height: 1.08;
}
body.console-shell--ops .ops-driver-card__eyebrow {
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
body.console-shell--ops .ops-driver-card__identity-meta {
display: flex;
flex-wrap: wrap;
gap: 0.38rem;
}
body.console-shell--ops .ops-driver-card__vehicle-summary {
display: grid;
gap: 0.44rem;
min-width: 0;
padding: 0.58rem 0.64rem;
border-radius: 12px;
background: rgba(248, 250, 252, 0.72);
}
body.console-shell--ops .ops-driver-card__vehicle-primary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.65rem;
min-width: 0;
}
body.console-shell--ops .ops-driver-card__vehicle-label {
color: var(--muted);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.console-shell--ops .ops-driver-card__vehicle-primary strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--ink);
font-size: 0.9rem;
line-height: 1.2;
text-align: right;
}
body.console-shell--ops .ops-driver-card__vehicle-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.34rem 0.65rem;
margin: 0;
}
body.console-shell--ops .ops-driver-card__vehicle-details div {
min-width: 0;
}
body.console-shell--ops .ops-driver-card__vehicle-details dt {
color: var(--muted);
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.console-shell--ops .ops-driver-card__vehicle-details dd {
min-width: 0;
margin: 0.12rem 0 0;
overflow-wrap: anywhere;
color: var(--ink);
font-size: 0.84rem;
font-weight: 700;
line-height: 1.2;
}
body.console-shell--ops .ops-driver-card__identity-chip {
display: grid;
gap: 0.2rem;
min-width: 0;
max-width: 100%;
padding: 0.42rem 0.52rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 12px;
background: rgba(248, 250, 252, 0.88);
}
body.console-shell--ops .ops-driver-card__identity-chip--primary {
border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
background: color-mix(in srgb, var(--accent-soft) 18%, white);
}
body.console-shell--ops .ops-driver-card__identity-chip-label {
color: var(--muted);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.console-shell--ops .ops-driver-card__identity-chip code,
body.console-shell--ops .ops-driver-card__identity-chip strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--ink);
font-size: 0.84rem;
line-height: 1.2;
}
body.console-shell--ops .ops-driver-card__identity-chip--missing {
border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
background: color-mix(in srgb, var(--accent-soft) 24%, white);
}
body.console-shell--ops .ops-driver-card__contact-card {
display: grid;
gap: 0.34rem;
min-width: 0;
padding: 0.24rem 0;
}
body.console-shell--ops .ops-driver-card__contact-card--missing-email {
color: var(--muted);
}
body.console-shell--ops .ops-driver-card__contact-title {
color: var(--muted);
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.console-shell--ops .ops-driver-card__contact-row {
display: grid;
grid-template-columns: 4.4rem minmax(0, 1fr);
gap: 0.42rem;
align-items: baseline;
min-width: 0;
}
body.console-shell--ops .ops-driver-card__contact-row span {
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
}
body.console-shell--ops .ops-driver-card__contact-row code,
body.console-shell--ops .ops-driver-card__contact-row strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--ink);
font-size: 0.84rem;
font-weight: 700;
line-height: 1.18;
}
body.console-shell--ops .ops-drivers-toolbar {
display: flex;
justify-content: flex-end;
margin: -0.25rem 0 0.85rem;
}
body.console-shell--ops #ops-drivers-search-tools-region {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
body.console-shell--ops .ops-driver-provision-dialog {
width: min(42rem, calc(100vw - 2rem));
max-width: none;
max-height: min(44rem, calc(100dvh - 2rem));
overflow: visible;
padding: 0;
border: 0;
border-radius: 22px;
background: transparent;
color: var(--ink);
}
body.console-shell--ops .ops-call-request-dialog {
width: min(46rem, calc(100vw - 2rem));
}
body.console-shell--ops .ops-call-request-dialog .ops-driver-provision-dialog__panel {
background: #fff;
}
body.console-shell--ops .ops-call-request-dialog__content {
background: #fff;
}
body.console-shell--ops .ops-driver-provision-dialog::backdrop {
background: rgba(8, 16, 28, 0.52);
backdrop-filter: blur(6px);
}
body.console-shell--ops .ops-driver-provision-dialog__panel {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
max-height: min(44rem, calc(100dvh - 2rem));
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 22px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.98),
rgba(247, 249, 252, 0.97));
box-shadow: 0 28px 70px rgba(15, 23, 42, 0.28);
}
body.console-shell--ops .ops-driver-provision-dialog__header {
display: flex;
align-items: start;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1rem 0.75rem;
border-bottom: 1px solid rgba(23, 32, 42, 0.08);
}
body.console-shell--ops .ops-driver-provision-dialog__header h3 {
margin: 0.12rem 0 0;
color: var(--ink-strong);
font-size: 1.08rem;
line-height: 1.15;
}
body.console-shell--ops .ops-driver-provision-dialog__close {
display: grid;
place-items: center;
width: 2.3rem;
aspect-ratio: 1;
border: 1px solid rgba(23, 32, 42, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
cursor: pointer;
}
body.console-shell--ops .ops-driver-provision-dialog__close svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
body.console-shell--ops .ops-driver-provision-dialog__content {
display: grid;
position: relative;
gap: 0.9rem;
overflow: auto;
padding: 1rem;
}
body.console-shell--ops .ops-driver-provision-dialog__content.is-confirming-discard {
display: block;
overflow: hidden;
}
body.console-shell--ops .ops-driver-provision-edit {
display: grid;
gap: 0.9rem;
}
body.console-shell--ops .ops-driver-provision-form {
gap: 0.9rem;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
body.console-shell--ops .ops-driver-provision-form__section {
gap: 0.75rem;
padding: 0;
border: 0;
background: transparent;
}
body.console-shell--ops .ops-driver-provision-form__section .form-section__header h4 {
margin: 0;
color: var(--ink-strong);
font-size: 0.96rem;
line-height: 1.2;
}
body.console-shell--ops .ops-driver-provision-form__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.console-shell--ops .ops-call-request-modal-form {
gap: 0.9rem;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
body.console-shell--ops .ops-call-request-target {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
padding: 0.62rem 0.7rem;
border: 1px solid rgba(37, 99, 235, 0.18);
border-radius: 10px;
background: rgba(239, 246, 255, 0.78);
color: var(--ink);
font-size: 0.82rem;
}
body.console-shell--ops .ops-call-request-target[hidden] {
display: none;
}
body.console-shell--ops .ops-call-request-target strong {
color: var(--ink-strong);
}
body.console-shell--ops .ops-call-request-target .button {
margin-left: auto;
}
body.console-shell--ops .ops-call-request-modal-form__section {
gap: 0.75rem;
padding: 0;
border: 0;
background: transparent;
}
body.console-shell--ops .ops-call-request-modal-grid {
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
}
body.console-shell--ops .ops-call-request-modal-phone {
grid-column: 1 / -1;
}
body.console-shell--ops .ops-call-request-modal-phone input {
min-height: 2.85rem;
}
body.console-shell--ops .ops-call-request-modal-address {
display: grid;
gap: 0.38rem;
grid-column: 1 / -1;
min-width: 0;
}
body.console-shell--ops .ops-call-request-modal-address .address-input-widget {
gap: 0.38rem;
}
body.console-shell--ops .ops-call-request-modal-address .preset-control.address-field {
gap: 0.42rem;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.console-shell--ops .ops-call-request-modal-address .preset-control.address-field:focus-within {
border-color: transparent;
background: transparent;
box-shadow: none;
}
body.console-shell--ops .ops-call-request-modal-address .address-field input[type=search] {
min-height: 2.85rem;
background: rgba(255, 255, 255, 0.98);
}
body.console-shell--ops .ops-call-request-modal-address .address-selection-inline {
display: none;
}
body.console-shell--ops .ops-call-request-route-actions {
display: flex;
justify-content: flex-start;
}
body.console-shell--ops .ops-call-request-route-list {
display: grid;
gap: 0.45rem;
margin: 0;
padding: 0;
list-style: none;
}
body.console-shell--ops .ops-call-request-route-list:empty {
display: none;
}
body.console-shell--ops .ops-call-request-route-list li {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
align-items: center;
gap: 0.45rem 0.6rem;
min-height: 2.45rem;
padding: 0.5rem 0.55rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 10px;
background: rgba(250, 251, 252, 0.92);
}
body.console-shell--ops .ops-call-request-route-list span,
body.console-shell--ops .ops-call-request-route-list small {
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
}
body.console-shell--ops .ops-call-request-route-list strong {
overflow-wrap: anywhere;
color: var(--ink-strong);
font-size: 0.86rem;
}
body.console-shell--ops .ops-call-request-route-list small {
grid-column: 2 / 3;
margin-top: -0.3rem;
font-weight: 700;
}
body.console-shell--ops .ops-call-request-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
grid-column: 1 / -1;
}
body.console-shell--ops .ops-call-request-option {
display: flex;
align-items: center;
gap: 0.55rem;
min-height: 2.85rem;
padding: 0.68rem 0.78rem;
border: 1px solid rgba(43, 35, 27, 0.1);
border-radius: 12px;
background: rgba(255, 255, 255, 0.96);
color: var(--ink);
font-weight: 700;
font-size: 0.88rem;
}
body.console-shell--ops .ops-call-request-option input {
width: 1rem;
height: 1rem;
accent-color: var(--accent);
}
body.console-shell--ops .ops-call-request-step,
body.console-shell--ops .ops-call-request-review {
display: grid;
gap: 0.9rem;
}
body.console-shell--ops .ops-call-request-step[hidden],
body.console-shell--ops .ops-call-request-review[hidden] {
display: none;
}
body.console-shell--ops .ops-call-request-review__header {
display: grid;
gap: 0.25rem;
}
body.console-shell--ops .ops-call-request-review__header h4 {
margin: 0;
color: var(--ink-strong);
font-size: 1.05rem;
}
body.console-shell--ops .ops-call-request-review-list {
display: grid;
gap: 0.55rem;
margin: 0;
}
body.console-shell--ops .ops-call-request-review-list > div {
display: grid;
gap: 0.22rem;
padding: 0.72rem 0.8rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 12px;
background: rgba(250, 251, 252, 0.9);
}
body.console-shell--ops .ops-call-request-review-list dt {
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
body.console-shell--ops .ops-call-request-review-list dd {
margin: 0;
color: var(--ink-strong);
font-weight: 750;
line-height: 1.35;
}
body.console-shell--ops .ops-call-request-modal-actions [data-call-request-close] {
--button-icon: var(--button-icon-danger);
}
body.console-shell--ops [data-call-request-keep-editing] {
--button-icon: var(--button-icon-previous);
}
body.console-shell--ops [data-call-request-edit-return] {
--button-icon: var(--button-icon-previous);
}
body.console-shell--ops .ops-driver-provision-dialog__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.55rem;
}
body.console-shell--ops .ops-driver-provision-dialog__actions .button {
width: auto;
}
body.console-shell--ops .ops-driver-provision-discard,
body.console-shell--ops .ops-driver-provision-success {
display: grid;
gap: 0.75rem;
align-content: start;
}
body.console-shell--ops .ops-driver-provision-edit[hidden],
body.console-shell--ops .ops-driver-provision-discard[hidden] {
display: none;
}
body.console-shell--ops .ops-driver-provision-discard__copy h4,
body.console-shell--ops .ops-driver-provision-discard__copy p,
body.console-shell--ops .ops-driver-provision-success h4,
body.console-shell--ops .ops-driver-provision-success p {
margin: 0;
}
body.console-shell--ops .ops-driver-provision-discard__copy h4,
body.console-shell--ops .ops-driver-provision-success h4 {
color: var(--ink-strong);
font-size: 1rem;
line-height: 1.2;
}
body.console-shell--ops .ops-driver-provision-discard__copy p,
body.console-shell--ops .ops-driver-provision-success p {
color: var(--muted);
font-size: 0.9rem;
line-height: 1.4;
}
body.console-shell--ops .ops-driver-provision-discard {
box-sizing: border-box;
grid-template-rows: minmax(0, 1fr) auto;
min-height: 0;
padding: 1.1rem 1.1rem 1.35rem;
border: 1px solid rgba(166, 60, 42, 0.14);
border-radius: 18px;
background: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body.console-shell--ops .ops-driver-provision-dialog__content.is-confirming-discard .ops-driver-provision-discard {
position: absolute;
inset: 0;
overflow: hidden;
max-height: 100%;
}
body.console-shell--ops .ops-driver-provision-discard__copy {
display: grid;
align-self: center;
justify-items: center;
gap: 0.38rem;
padding: 1.1rem 0.25rem;
text-align: center;
}
body.console-shell--ops .ops-driver-provision-discard__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-self: end;
gap: 0.65rem;
justify-content: stretch;
padding: 0.8rem 0 0;
border-top: 1px solid rgba(23, 32, 42, 0.08);
}
body.console-shell--ops .ops-driver-provision-discard__actions .button {
width: 100%;
min-height: 2.8rem;
border-radius: 14px;
}
body.console-shell--ops .ops-driver-provision-discard__actions .button--secondary {
border-color: rgba(15, 23, 42, 0.12);
background: #fff;
color: var(--ink-strong);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
body.console-shell--ops .ops-driver-provision-discard__actions .button--danger {
border-color: transparent;
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--danger) 88%, white),
color-mix(in srgb, var(--danger) 88%, black));
color: #fff;
box-shadow: 0 14px 30px color-mix(in srgb, var(--danger) 24%, transparent);
}
body.console-shell--ops .ops-driver-provision-success {
justify-items: center;
text-align: center;
padding: 0.95rem;
}
body.console-shell--ops .ops-driver-provision-success__mark {
display: grid;
place-items: center;
width: 3rem;
aspect-ratio: 1;
border-radius: 999px;
background: color-mix(in srgb, var(--success-soft) 72%, white);
color: var(--success);
}
body.console-shell--ops .ops-driver-provision-success__mark svg {
width: 1.35rem;
height: 1.35rem;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
body.console-shell--ops .ops-driver-provision-success__copy {
display: grid;
gap: 0.32rem;
max-width: 32rem;
}
@media (max-width: 640px) {
body.console-shell--ops .ops-drivers-toolbar {
justify-content: stretch;
}
body.console-shell--ops .ops-drivers-toolbar .button,
body.console-shell--ops .ops-driver-provision-dialog__actions .button {
width: 100%;
}
body.console-shell--ops .ops-driver-provision-form__grid,
body.console-shell--ops .ops-call-request-modal-grid {
grid-template-columns: 1fr;
}
body.console-shell--ops .ops-driver-card__title-row {
grid-template-columns: 1fr;
}
body.console-shell--ops .ops-driver-card__contact-row {
grid-template-columns: 1fr;
gap: 0.12rem;
}
body.console-shell--ops .ops-driver-card__status-stack {
justify-content: flex-start;
}
}
body.console-shell--ops .ops-driver-detail-hero {
gap: 0.85rem;
}
body.console-shell--ops .ops-driver-detail-hero__toolbar {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
justify-content: space-between;
gap: 0.75rem;
}
body.console-shell--ops .ops-driver-detail-hero__toolbar-meta {
display: grid;
justify-items: end;
gap: 0.45rem;
min-width: 0;
}
body.console-shell--ops .ops-driver-detail-hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.38rem;
padding-top: 0;
}
body.console-shell--ops .ops-driver-detail-hero__actions .button {
min-height: 2rem;
}
body.console-shell--ops .ops-driver-detail-hero__main {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 0.82rem;
}
body.console-shell--ops .ops-driver-detail-hero__portrait-shell {
padding: 0.28rem;
border-radius: 30px;
}
body.console-shell--ops .ops-driver-detail-hero__portrait {
width: 5.45rem;
border-radius: 26px;
}
body.console-shell--ops .ops-driver-detail-hero__copy {
display: grid;
gap: 0.8rem;
}
body.console-shell--ops .ops-driver-detail-hero__copy h2 {
margin: 0;
font-size: 1.58rem;
line-height: 1.04;
}
body.console-shell--ops .ops-driver-detail-hero__copy .hero__lede {
max-width: 52rem;
}
body.console-shell--ops .ops-driver-detail-hero__details {
grid-template-columns: repeat(auto-fit, minmax(10.4rem, 1fr));
gap: 0.55rem;
}
body.console-shell--ops .ops-driver-detail-hero__details .detail {
padding: 0.58rem 0.66rem;
}
body.console-shell--ops .ops-driver-detail-hero__location {
margin-top: -0.1rem;
}
body.console-shell--ops .ops-driver-detail-tabs-region,
body.console-shell--ops .ops-driver-detail-tab-content {
display: grid;
gap: 0.85rem;
}
body.console-shell--ops .ops-driver-detail-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.48rem;
padding: 0.5rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 14px;
background: rgba(255, 255, 255, 0.78);
}
body.console-shell--ops .ops-driver-detail-tab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.65rem;
padding: 0.62rem 0.95rem;
border: 1px solid transparent;
border-radius: 10px;
color: var(--muted);
font-size: 0.86rem;
font-weight: 800;
text-decoration: none;
}
body.console-shell--ops .ops-driver-detail-tab__icon {
display: inline-flex;
width: 1.08rem;
height: 1.08rem;
flex: 0 0 auto;
}
body.console-shell--ops .ops-driver-detail-tab__icon svg {
display: block;
width: 100%;
height: 100%;
}
body.console-shell--ops .ops-driver-detail-tab__icon path {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
body.console-shell--ops .ops-driver-detail-tab__label {
min-width: 0;
}
body.console-shell--ops .ops-driver-detail-tab:hover {
border-color: rgba(23, 32, 42, 0.1);
color: var(--ink);
background: rgba(248, 250, 252, 0.9);
}
body.console-shell--ops .ops-driver-detail-tab--active {
border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
color: var(--ink-strong);
background: color-mix(in srgb, var(--accent-soft) 24%, white);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}
body.console-shell--ops .ops-driver-detail-tab-panel {
gap: 0.85rem;
}
body.console-shell--ops .ops-driver-rides-controls {
margin-bottom: 0.85rem;
}
body.console-shell--ops .ops-driver-financial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15.4rem, 1fr));
gap: 0.68rem;
}
body.console-shell--ops .ops-driver-financial-card {
gap: 0.62rem;
}
body.console-shell--ops .ops-driver-financial-card__metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.42rem;
}
body.console-shell--ops .ops-driver-financial-card__metrics article {
display: grid;
gap: 0.18rem;
padding: 0.52rem 0.58rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 12px;
background: rgba(248, 250, 252, 0.84);
}
body.console-shell--ops .ops-driver-financial-card__metrics span {
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.console-shell--ops .ops-driver-history-list {
display: grid;
gap: 0.85rem;
}
body.console-shell--ops .ops-driver-history-card {
gap: 0.8rem;
}
body.console-shell--ops .ops-driver-card__status-stack {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.32rem;
max-width: 20rem;
}
body.console-shell--ops .ops-driver-card__status-pill {
justify-content: center;
min-width: 0;
min-height: 1.72rem;
padding-inline: 0.52rem;
font-size: 0.72rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.console-shell--ops .ops-driver-card__signal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 0.48rem;
}
body.console-shell--ops .ops-driver-card__signal {
display: grid;
gap: 0.24rem;
padding: 0.6rem 0.66rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 14px;
background: rgba(248, 250, 252, 0.86);
}
body.console-shell--ops .ops-driver-card__signal-label {
color: var(--muted);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.console-shell--ops .ops-driver-card__signal strong {
color: var(--ink);
font-size: 0.9rem;
line-height: 1.22;
}
body.console-shell--ops .ops-driver-card__signal-note {
margin: 0;
color: var(--muted);
font-size: 0.78rem;
line-height: 1.35;
}
body.console-shell--ops .ops-driver-card__location {
gap: 0.45rem;
}
body.console-shell--ops .ops-driver-card__location-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
body.console-shell--ops .ops-driver-card__location-state {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: color-mix(in srgb, var(--accent-2) 74%, black);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.console-shell--ops .ops-driver-card__location-state::before {
content: "";
width: 0.45rem;
height: 0.45rem;
border-radius: 999px;
background: currentColor;
}
body.console-shell--ops .ops-driver-card__location-state--muted {
color: var(--muted);
}
body.console-shell--ops .ops-driver-card__location-empty {
margin: 0;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.45;
}
body.console-shell--ops .ops-driver-card .chip-row,
body.console-shell--ops .ops-activity-card .chip-row {
align-items: center;
}
body.console-shell--ops .ops-activity-card {
gap: 0.75rem;
}
body.console-shell--ops .ops-activity-card__reason {
border-color: color-mix(in srgb, var(--accent) 14%, var(--line));
background: color-mix(in srgb, var(--accent-soft) 30%, white);
}
body.console-shell--ops .quick-fill-row {
gap: 0.45rem;
}
body.console-shell--ops .disclosure {
border-color: var(--line);
background: rgba(248, 250, 252, 0.72);
}
body.console-shell--ops .disclosure--danger {
border-color: rgba(166, 60, 42, 0.12);
background: rgba(255, 248, 246, 0.84);
}
body.console-shell--ops .disclosure[open] {
background: rgba(248, 250, 252, 0.92);
}
body.console-shell--ops .disclosure__summary {
padding: 0.82rem 0.9rem;
font-size: 0.9rem;
}
body.console-shell--ops .disclosure__summary::after {
border-color: var(--line);
background: rgba(255, 255, 255, 0.92);
}
body.console-shell--ops .disclosure__body {
gap: 0.65rem;
padding: 0 0.9rem 0.9rem;
}
body.console-shell--ops .ops-action-groups {
display: grid;
gap: 0.55rem;
}
body.console-shell--ops .ops-action-group {
border-color: rgba(23, 32, 42, 0.08);
background: rgba(255, 255, 255, 0.72);
}
body.console-shell--ops .ops-action-group[open] {
background: rgba(255, 255, 255, 0.9);
}
body.console-shell--ops .ops-action-group .disclosure__summary {
padding: 0.75rem 0.82rem;
font-size: 0.88rem;
}
body.console-shell--ops .ops-action-group .disclosure__body {
padding: 0 0.82rem 0.82rem;
}
body.console-shell--ops .ops-action-group--danger {
border-color: rgba(166, 60, 42, 0.14);
background: rgba(255, 249, 247, 0.84);
}
body.console-shell--ops .ops-action-group__hint {
margin: 0;
}
body.console-shell--ops .ops-driver-action-form,
body.console-shell--ops .ops-driver-assign-row,
body.console-shell--ops .ops-intervention-form {
gap: 0.75rem;
}
body.console-shell--ops .ops-driver-action-form__header {
display: flex;
align-items: start;
justify-content: space-between;
gap: 0.75rem;
}
body.console-shell--ops .ops-driver-action-form__identity {
display: grid;
gap: 0.18rem;
}
body.console-shell--ops .ops-driver-action-form__identity strong {
font-size: 0.94rem;
line-height: 1.1;
}
body.console-shell--ops .ops-driver-action-form__identity span {
color: var(--muted);
font-size: 0.82rem;
}
body.console-shell--ops .ops-driver-action-form .chip-row {
justify-content: flex-end;
}
body.console-shell--ops .ops-driver-action-form .form-hint {
margin-top: -0.15rem;
}
body.console-shell--ops .ops-driver-action-form__controls,
body.console-shell--ops .ops-intervention-form__controls {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) auto;
gap: 0.65rem;
align-items: end;
}
body.console-shell--ops .ops-driver-action-form__controls .button,
body.console-shell--ops .ops-intervention-form__controls .button {
min-height: 3.15rem;
align-self: stretch;
}
body.console-shell--ops .ops-driver-assign-row__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
body.console-shell--ops .ops-driver-assign-row__footer .form-hint {
margin: 0;
}
body.console-shell--ops .chip {
border-color: var(--line);
background: rgba(247, 249, 251, 0.88);
color: var(--ink);
}
body.console-shell--ops .chip--live {
border-color: color-mix(in srgb, var(--accent-2-soft) 70%, white);
background: color-mix(in srgb, var(--accent-2-soft) 84%, white);
color: color-mix(in srgb, var(--accent-2) 74%, black);
}
body.console-shell--ops .chip--warm {
border-color: color-mix(in srgb, var(--accent) 22%, white);
background: color-mix(in srgb, var(--accent-soft) 84%, white);
color: var(--accent-strong);
}
body.console-shell--ops .chip--muted {
border-color: rgba(23, 32, 42, 0.08);
background: rgba(23, 32, 42, 0.05);
color: var(--muted);
}
.ops-desktop-nav {
position: sticky;
top: 6.1rem;
z-index: 14;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.65rem;
margin: 0 0 1rem;
padding: 0.75rem;
border: 1px solid rgba(43, 35, 27, 0.1);
border-radius: 24px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.86),
rgba(255, 249, 241, 0.94)),
var(--surface-strong);
box-shadow: var(--shadow-md);
backdrop-filter: blur(18px);
}
.ops-desktop-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.8rem;
padding: 0.55rem 0.7rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.76);
color: var(--ink);
text-decoration: none;
font-size: 0.92rem;
font-weight: 700;
text-align: center;
}
.ops-layout {
display: grid;
grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.ops-sidebar {
position: sticky;
top: 6.1rem;
display: grid;
gap: 1rem;
align-self: start;
}
.ops-sidebar__panel {
gap: 0.85rem;
}
.ops-sidebar__panel .dashboard-title {
font-size: clamp(1.65rem, 2.4vw, 2.35rem);
}
.ops-sidebar__nav {
display: grid;
gap: 0.65rem;
}
.ops-sidebar__nav a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.8rem 0.95rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 18px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.84),
rgba(255, 249, 241, 0.92)),
var(--surface-strong);
color: var(--ink);
text-decoration: none;
font-size: 0.94rem;
font-weight: 700;
}
.ops-sidebar__nav a:hover {
border-color: rgba(124, 77, 31, 0.18);
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.92),
rgba(255, 245, 234, 0.98)),
var(--surface-strong);
}
.ops-sidebar__nav a strong {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
min-height: 2rem;
padding: 0 0.55rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
color: var(--accent-strong);
font-size: 0.82rem;
}
.ops-sidebar__search {
display: grid;
gap: 0.45rem;
}
.ops-sidebar__search input {
min-height: 3rem;
}
.ops-main {
display: grid;
gap: 1rem;
}
.driver-nav-workspace,
.driver-ride-workbench {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
gap: 1rem;
align-items: start;
}
.driver-nav-surface,
.driver-ride-main,
.driver-ride-sidebar,
.driver-ride-actions {
display: grid;
gap: 0.9rem;
}
.driver-nav-stage {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.driver-nav-stage__copy {
display: grid;
gap: 0.22rem;
min-width: 0;
}
.driver-nav-stage__copy h3 {
margin: 0;
font-size: clamp(1.2rem, 2vw, 1.55rem);
line-height: 1.08;
}
.driver-nav-stage__chips {
justify-content: flex-end;
}
.driver-nav-current-leg,
.driver-nav-current-leg__content {
display: grid;
gap: 0.9rem;
}
.driver-nav-map-card {
display: grid;
gap: 0.75rem;
padding: 0.85rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 26px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.9),
rgba(244, 250, 248, 0.84));
box-shadow: var(--shadow-md);
}
.driver-nav-map-card--navigation {
border-color: rgba(14, 111, 131, 0.24);
background:
linear-gradient(
180deg,
rgba(248, 253, 251, 0.96),
rgba(230, 241, 238, 0.9));
box-shadow: 0 18px 40px rgba(8, 27, 34, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.66);
}
.driver-nav-map-card__canvas {
position: relative;
overflow: hidden;
border-radius: 22px;
background:
radial-gradient(
circle at top right,
rgba(0, 123, 148, 0.12),
transparent 34%),
linear-gradient(
180deg,
rgba(236, 244, 247, 0.96),
rgba(251, 253, 252, 0.98));
}
.driver-nav-map-card__canvas--navigation {
background:
linear-gradient(
180deg,
rgba(14, 34, 41, 0.92),
rgba(22, 44, 48, 0.82));
}
.driver-nav-map-card__canvas--loading {
min-height: 23.5rem;
}
.driver-nav-map-card__map-surface {
min-height: 18rem;
}
.driver-nav-map-card--navigation .driver-nav-map-card__map-surface {
min-height: 23.5rem;
}
.driver-nav-map-card__map-surface,
.driver-nav-map-card__map-surface .maplibregl-map,
.driver-nav-map-card__map-surface .maplibregl-canvas-container,
.driver-nav-map-card__map-surface .maplibregl-canvas {
width: 100%;
height: 100%;
}
.driver-nav-map-card__placeholder {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
place-items: center;
padding: 1.5rem;
background:
radial-gradient(
circle at 28% 24%,
rgba(23, 163, 108, 0.16),
transparent 30%),
linear-gradient(
135deg,
rgba(236, 247, 242, 0.96),
rgba(231, 241, 244, 0.94));
color: #123038;
text-align: center;
}
.driver-nav-map-card__placeholder[hidden] {
display: none;
}
.driver-nav-map-card__placeholder--standalone {
position: static;
min-height: 23.5rem;
}
.driver-nav-map-card__placeholder > * {
max-width: 20rem;
}
.driver-nav-map-card__placeholder strong {
display: block;
margin-top: 0.95rem;
font-size: 1.08rem;
line-height: 1.2;
}
.driver-nav-map-card__placeholder span:not(.driver-nav-map-card__placeholder-icon) {
display: block;
margin-top: 0.35rem;
color: color-mix(in srgb, #123038 68%, white);
font-size: 0.9rem;
font-weight: 700;
line-height: 1.35;
}
.driver-nav-map-card__placeholder-icon {
position: relative;
display: inline-grid;
place-items: center;
width: 3.4rem;
height: 3.4rem;
border: 1px solid rgba(14, 111, 131, 0.18);
border-radius: 18px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.92),
rgba(225, 241, 236, 0.82));
box-shadow: 0 14px 34px rgba(8, 27, 34, 0.14);
}
.driver-nav-map-card__placeholder-icon::before {
content: "";
position: absolute;
width: 2rem;
height: 1.35rem;
border-bottom: 4px solid #17a36c;
border-left: 4px solid #17a36c;
border-radius: 0 0 0 14px;
transform: rotate(-18deg);
}
.driver-nav-map-card__placeholder-icon::after {
content: "";
position: absolute;
right: 0.78rem;
top: 0.72rem;
width: 0.78rem;
height: 0.78rem;
border: 3px solid #0e6f83;
border-radius: 999px 999px 999px 0;
background: #fff;
transform: rotate(-45deg);
}
.driver-nav-map {
display: block;
width: 100%;
height: auto;
min-height: 18rem;
}
.driver-nav-map__route {
fill: none;
stroke: color-mix(in srgb, var(--accent) 64%, var(--accent-strong));
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 8;
}
.driver-nav-map__route--fallback {
stroke-dasharray: 12 10;
}
.driver-nav-map__marker {
fill: rgba(255, 255, 255, 0.98);
stroke: color-mix(in srgb, var(--accent) 54%, black);
stroke-width: 4;
}
.driver-nav-map__marker--driver {
stroke: color-mix(in srgb, #0e6f83 76%, black);
}
.driver-nav-map__marker--target {
stroke: color-mix(in srgb, var(--accent-strong) 88%, black);
}
.driver-nav-map-card__badge {
position: absolute;
top: 0.85rem;
left: 0.85rem;
z-index: 2;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
min-height: 2.1rem;
max-width: calc(100% - 8.4rem);
padding: 0.35rem 0.8rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
color: var(--ink-strong);
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0;
gap: 0.5rem;
}
.driver-nav-map-card__badge-mode {
display: inline-flex;
align-items: center;
min-height: 1.35rem;
padding: 0.12rem 0.45rem;
border-radius: 999px;
background: #0e6f83;
color: #fff;
font-size: 0.72rem;
}
.driver-nav-map-card__badge-heading,
.driver-nav-map-card__badge-progress {
color: #0e4e5d;
font-size: 0.74rem;
font-weight: 800;
}
.driver-nav-map-card__badge-progress {
color: color-mix(in srgb, #0e4e5d 78%, #17202a);
}
.driver-nav-map-card__badge-heading[hidden],
.driver-nav-map-card__badge-progress[hidden] {
display: none;
}
.driver-nav-map-card__recenter {
position: absolute;
top: 0.85rem;
right: 0.85rem;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 6.4rem;
min-height: 2.2rem;
padding: 0.35rem 0.8rem;
border: 1px solid rgba(14, 111, 131, 0.24);
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #0e4e5d;
font: inherit;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0;
box-shadow: 0 12px 30px rgba(8, 27, 34, 0.18);
cursor: pointer;
}
.driver-nav-map-card__recenter::before {
content: "";
display: inline-block;
width: 0.95rem;
height: 0.95rem;
flex: 0 0 0.95rem;
margin-right: 0.36rem;
background: currentColor;
mask-image: var(--driver-icon-location);
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: var(--driver-icon-location);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
.driver-nav-map-card__recenter:hover,
.driver-nav-map-card__recenter:focus-visible {
border-color: rgba(14, 111, 131, 0.48);
background: #fff;
}
.driver-nav-map-card__recenter[hidden] {
display: none;
}
.driver-nav-map-card__route-sync {
position: absolute;
right: 0.85rem;
bottom: 0.85rem;
left: 0.85rem;
z-index: 2;
display: inline-flex;
align-items: center;
min-height: 2.25rem;
padding: 0.4rem 0.8rem;
border: 1px solid rgba(162, 92, 14, 0.32);
border-radius: 999px;
background: rgba(255, 250, 238, 0.95);
color: #7a3f08;
font-size: 0.82rem;
font-weight: 850;
letter-spacing: 0;
box-shadow: 0 14px 32px rgba(58, 31, 5, 0.18);
pointer-events: none;
}
.driver-nav-map-card__route-sync[hidden] {
display: none;
}
.driver-nav-map-card__footer {
display: grid;
gap: 0.45rem;
}
.driver-nav-map-card__footer .status-card__meta {
margin: 0;
}
.driver-nav-map-card__legend {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.driver-nav-map-card__legend-item {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--muted);
font-size: 0.86rem;
font-weight: 700;
}
.driver-nav-map-card__dot {
display: block;
width: 0.72rem;
height: 0.72rem;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 60%, white);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.92);
}
.driver-nav-map-card__dot--driver {
background: #0e6f83;
}
.driver-nav-map-card__dot--target {
background: var(--accent-strong);
}
.driver-nav-map-card__canvas .maplibregl-ctrl-attrib {
font-size: 0.62rem;
line-height: 1.2;
border-radius: 10px 0 0 0;
background: rgba(255, 255, 255, 0.9);
}
.direwolf-map-marker {
--map-marker-color: color-mix(in srgb, var(--accent-strong) 88%, black);
display: block;
position: relative;
width: 0.92rem;
height: 0.92rem;
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.96);
background: var(--map-marker-color);
box-shadow: 0 6px 14px rgba(16, 24, 32, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}
.direwolf-map-marker--page {
width: 2.85rem;
height: 3.45rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
filter: drop-shadow(0 14px 20px rgba(16, 24, 32, 0.38));
pointer-events: none;
z-index: 3;
}
.direwolf-map-marker--page::before {
content: "";
position: absolute;
top: 0.08rem;
left: 50%;
width: 2.42rem;
height: 2.42rem;
border: 4px solid #fff;
border-radius: 50% 50% 50% 0;
background: var(--map-marker-color);
box-shadow: 0 0 0 0.32rem rgba(255, 255, 255, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
transform: translateX(-50%) rotate(-45deg);
transform-origin: center;
}
.direwolf-map-marker--page::after {
content: attr(data-map-marker-label);
position: absolute;
top: 0.72rem;
left: 50%;
display: grid;
place-items: center;
width: 1.08rem;
height: 1.08rem;
border-radius: 999px;
background: #fff;
color: #172033;
font-size: 0.75rem;
font-weight: 900;
line-height: 1;
transform: translateX(-50%);
}
.direwolf-map-marker--pickup {
--map-marker-color: #1d7a5d;
}
.direwolf-map-marker--dropoff {
--map-marker-color: #b04a2e;
}
.direwolf-map-marker--driver {
--map-marker-color: #0e6f83;
}
.direwolf-map-marker--target {
--map-marker-color: color-mix(in srgb, var(--accent-strong) 88%, black);
}
.direwolf-map-marker--page {
--map-marker-color: #d92d20;
}
.direwolf-map-marker--navigation {
width: 1.18rem;
height: 1.18rem;
border-width: 3px;
box-shadow: 0 8px 18px rgba(10, 26, 32, 0.24), 0 0 0 0.34rem rgba(255, 255, 255, 0.28);
}
.direwolf-map-marker--driver.direwolf-map-marker--navigation {
width: 1.46rem;
height: 1.46rem;
background: #0e6f83;
border-color: rgba(255, 255, 255, 0.98);
box-shadow:
0 10px 22px rgba(10, 26, 32, 0.28),
0 0 0 0.42rem rgba(14, 111, 131, 0.2),
inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.direwolf-map-marker--driver.direwolf-map-marker--navigation::after {
content: "";
position: absolute;
inset: 0.38rem;
border-radius: 999px;
background: #fff;
}
.direwolf-map-marker--target.direwolf-map-marker--navigation {
background: #b65c20;
}
.direwolf-map-marker--driver,
.direwolf-map-marker--driver.direwolf-map-marker--navigation,
.direwolf-map-marker--driver.direwolf-map-marker--page {
--map-vehicle-heading: 0deg;
width: 1.75rem;
height: 2.62rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
filter: drop-shadow(0 7px 10px rgba(10, 26, 32, 0.3)) drop-shadow(0 0 4px rgba(14, 111, 131, 0.28));
}
.direwolf-map-marker--driver::before,
.direwolf-map-marker--driver.direwolf-map-marker--navigation::before,
.direwolf-map-marker--driver.direwolf-map-marker--page::before {
content: "";
position: absolute;
inset: 0;
width: auto;
height: auto;
border: 0;
border-radius: 0;
background: url('data:image/svg+xml,%0A') center / contain no-repeat;
box-shadow: none;
transform: rotate(var(--map-vehicle-heading));
transform-origin: center;
transition: transform 700ms ease;
}
.direwolf-map-marker--driver::after,
.direwolf-map-marker--driver.direwolf-map-marker--navigation::after,
.direwolf-map-marker--driver.direwolf-map-marker--page::after {
display: none;
}
.direwolf-map-marker--driver.direwolf-map-marker--navigation {
width: 2rem;
height: 3rem;
}
.driver-nav-summary {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.driver-nav-surface__actions {
flex-wrap: wrap;
}
.driver-nav-sidebar {
align-self: stretch;
}
.driver-ride-command-panel {
align-self: start;
gap: 0.72rem;
}
.driver-panel-card--ride-focus {
padding: 0.75rem;
}
.driver-panel-card--ride-focus .driver-nav-workspace {
gap: 0.75rem;
}
.driver-panel-card--ride-focus .driver-nav-current-leg,
.driver-panel-card--ride-focus .driver-nav-current-leg__content,
.driver-panel-card--ride-focus .driver-nav-surface {
gap: 0;
}
.driver-panel-card--ride-focus .driver-nav-map-card {
padding: 0.55rem;
border-radius: 20px;
}
.driver-panel-card--ride-focus .driver-nav-map-card__canvas {
border-radius: 16px;
}
.driver-assigned-ride-page {
display: grid;
gap: 1rem;
padding: 1rem;
border-radius: 24px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.98),
rgba(244, 249, 247, 0.96));
box-shadow: 0 18px 38px rgba(18, 26, 34, 0.08);
}
body.console-shell--driver .driver-assigned-ride-page::before {
content: none;
}
.driver-assigned-ride-page__header {
display: flex;
align-items: start;
justify-content: space-between;
gap: 1rem;
}
.driver-assigned-ride-page__header h2 {
margin: 0;
color: var(--ink);
font-size: clamp(1.55rem, 2.2vw, 2.15rem);
line-height: 1.05;
}
.driver-assigned-ride-timer {
display: grid;
gap: 0.18rem;
min-width: 9rem;
padding: 0.8rem 0.9rem;
border: 1px solid color-mix(in srgb, var(--accent) 18%, white);
border-radius: 18px;
background: color-mix(in srgb, white 84%, var(--accent-soft));
text-align: right;
}
.driver-assigned-ride-timer span {
color: var(--muted);
font-size: 0.74rem;
font-weight: 800;
text-transform: uppercase;
}
.driver-assigned-ride-timer strong {
color: var(--accent-strong);
font-size: 1.5rem;
line-height: 1;
}
.driver-assigned-ride-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.driver-assigned-ride-card {
min-width: 0;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 22px;
background: rgba(255, 255, 255, 0.78);
}
.driver-assigned-ride-card--pickup {
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.9),
rgba(232, 244, 240, 0.8));
}
.driver-assigned-ride-card--dropoff {
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.9),
rgba(239, 242, 248, 0.82));
}
.driver-assigned-ride-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.driver-assigned-ride-actions {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: 0.75rem;
}
.driver-assigned-ride-actions .inline-form,
.driver-assigned-ride-actions .button {
width: 100%;
}
.driver-ride-command-card {
display: grid;
gap: 0.72rem;
padding: 0.85rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 22px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.88),
rgba(238, 248, 244, 0.78));
}
.driver-ride-command-card__header {
display: grid;
gap: 0.18rem;
}
.driver-ride-command-card__header strong {
font-size: clamp(1.16rem, 1.8vw, 1.42rem);
line-height: 1.08;
}
.driver-tariff-control {
display: grid;
gap: 0.55rem;
padding: 0.65rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 16px;
background: rgba(255, 255, 255, 0.64);
}
.driver-tariff-control__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.driver-tariff-control__summary strong {
font-size: 1.02rem;
line-height: 1.1;
text-align: right;
}
.driver-tariff-control__buttons {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.4rem;
}
.driver-tariff-control__buttons .inline-form,
.driver-tariff-control__buttons .button {
width: 100%;
}
.driver-tariff-control .button:disabled {
cursor: default;
opacity: 1;
}
.driver-ride-actions--primary {
gap: 0.55rem;
}
.driver-ride-actions--secondary {
grid-template-columns: 1fr;
gap: 0.45rem;
}
.driver-ride-actions--primary .inline-form,
.driver-ride-actions--primary .button,
.driver-ride-detail-disclosure,
.driver-ride-detail-disclosure .disclosure__summary {
width: 100%;
}
.driver-ride-detail-disclosure .disclosure__summary {
justify-content: center;
min-height: 2.7rem;
}
.driver-ride-detail-stack {
display: grid;
grid-template-columns: 1fr;
gap: 0.62rem;
}
.driver-ride-compact-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
}
.driver-ride-detail-stack > .detail {
min-width: 0;
}
.driver-ride-detail-page {
display: grid;
gap: 1rem;
}
.driver-ride-detail-page__toolbar {
justify-content: flex-start;
}
.driver-ride-detail-page__summary {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.driver-ride-detail-page__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.driver-ride-detail-page__stops {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.driver-ride-detail-page__steps {
margin: 0;
padding: 0.85rem;
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 22px;
background: rgba(255, 255, 255, 0.72);
}
.driver-nav-target-card {
border: 1px solid rgba(23, 32, 42, 0.08);
border-radius: 22px;
}
.driver-nav-target-card--current {
background: rgba(255, 255, 255, 0.72);
}
.driver-nav-target-card--secondary {
background:
linear-gradient(
180deg,
rgba(250, 252, 253, 0.88),
rgba(244, 249, 247, 0.76));
}
.driver-next-step-panel {
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.84),
rgba(240, 248, 244, 0.78));
}
.driver-nav-step-cue {
display: grid;
gap: 0.36rem;
margin-top: 0.28rem;
padding-top: 0.52rem;
border-top: 1px solid rgba(23, 32, 42, 0.08);
}
.driver-nav-step-list {
display: grid;
gap: 0.34rem;
margin: 0;
padding: 0;
list-style: none;
}
.driver-nav-step-list li {
display: grid;
gap: 0.08rem;
min-width: 0;
}
.driver-nav-step-list li + li {
padding-top: 0.34rem;
border-top: 1px solid rgba(23, 32, 42, 0.07);
}
.driver-nav-step-list strong {
min-width: 0;
overflow-wrap: anywhere;
font-size: 0.96rem;
line-height: 1.24;
}
.driver-grid--tablet {
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
}
.detail-grid,
.metric-strip,
.auth-form--coords,
.pricing-grid,
.ops-grid,
.driver-grid,
.auth-grid {
display: grid;
gap: 0.85rem;
}
.detail-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.detail {
display: grid;
gap: 0.28rem;
padding: 0.95rem 1rem;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.8),
rgba(255, 250, 245, 0.66));
}
.detail--full {
grid-column: 1 / -1;
}
.detail__label {
color: var(--muted);
font-size: 0.74rem;
font-weight: 800;
}
.detail__value {
font-size: 0.98rem;
line-height: 1.48;
}
.detail__value--location,
.summary-tile__value--location,
.surface-note--location {
white-space: pre-line;
}
.detail__value--strong {
font-family: var(--font-display);
font-size: 1.45rem;
line-height: 1;
}
.summary-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.summary-strip--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.summary-tile {
display: grid;
gap: 0.28rem;
padding: 0.95rem 1rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: var(--radius-lg);
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.82),
rgba(255, 248, 240, 0.66));
}
.summary-tile--wide {
grid-column: span 2;
}
.summary-tile__label {
color: var(--muted);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.summary-tile strong {
font-size: 1rem;
line-height: 1.45;
}
.summary-tile__value {
display: block;
}
.summary-tile strong code {
font-size: 0.95em;
}
.ops-pagination {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem 1rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(43, 35, 27, 0.08);
}
.ops-pagination__summary {
color: var(--muted);
font-size: 0.84rem;
}
.ops-pagination__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.65rem;
}
.ops-pagination__actions form {
margin: 0;
}
.ops-pagination__page {
color: var(--ink);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.chip {
display: inline-flex;
align-items: center;
min-height: 2.2rem;
padding: 0.38rem 0.82rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.74);
color: var(--ink);
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.chip--live {
background: color-mix(in srgb, var(--accent-2-soft) 92%, white);
color: color-mix(in srgb, var(--accent-2) 78%, black);
}
.chip--warm {
background: color-mix(in srgb, var(--accent-soft) 92%, white);
color: var(--accent-strong);
}
.chip--muted {
background: rgba(43, 35, 27, 0.05);
color: var(--muted);
}
.surface-note {
padding: 0.95rem 1rem;
}
.metric-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.metric-card {
display: grid;
gap: 0.24rem;
padding: 1rem;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.78),
rgba(255, 247, 238, 0.7));
}
.metric-card strong {
font-family: var(--font-display);
font-size: clamp(1.7rem, 2vw, 2.1rem);
line-height: 0.95;
}
.metric-card span {
color: var(--muted);
font-size: 0.74rem;
font-weight: 800;
}
.auth-grid {
grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
}
.auth-grid--single {
grid-template-columns: minmax(0, 760px);
justify-content: center;
}
.auth-card--wide {
align-content: start;
}
body.auth-shell .site-shell--header,
body.auth-shell .site-footer__content,
body.auth-shell .auth-card {
border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.76),
color-mix(in srgb, var(--accent-soft) 42%, transparent) 62%),
var(--surface-strong);
}
body.auth-shell .button--secondary {
border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
background: color-mix(in srgb, white 82%, var(--accent-soft));
}
body.operator-login-shell .site-header,
body.operator-login-shell .site-footer {
display: none;
}
body.operator-login-shell .site-main {
min-height: 100vh;
display: grid;
place-items: center;
}
body.operator-login-shell .foundations {
width: 100%;
padding: 1.25rem;
}
body.operator-login-shell .auth-grid--single {
grid-template-columns: minmax(0, 28rem);
}
body.operator-login-shell .auth-card {
display: grid;
gap: 1rem;
padding: 1.55rem;
}
body.operator-login-shell .auth-card h1 {
margin: 0;
text-align: center;
}
.operator-login-brand {
display: grid;
justify-items: center;
}
.operator-login-brand img {
width: 8.75rem;
height: 8.75rem;
object-fit: contain;
}
.operator-demo-open {
justify-self: center;
}
.operator-demo-dialog {
width: min(32rem, calc(100vw - 2rem));
border: 0;
padding: 0;
background: transparent;
}
.operator-demo-dialog::backdrop {
background: rgba(23, 18, 13, 0.46);
backdrop-filter: blur(6px);
}
.operator-demo-dialog__panel {
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-strong);
box-shadow: var(--shadow-lg);
}
.operator-demo-dialog__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1rem 0.85rem;
border-bottom: 1px solid var(--line);
}
.operator-demo-dialog__header h2 {
margin: 0;
font-size: 1.05rem;
}
.operator-demo-dialog__close {
width: 2.3rem;
height: 2.3rem;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.78);
color: var(--ink);
font: inherit;
font-weight: 900;
cursor: pointer;
}
.operator-demo-dialog__grid {
display: grid;
gap: 0.7rem;
padding: 1rem;
}
.operator-demo-tile {
width: 100%;
display: grid;
gap: 0.25rem;
padding: 0.95rem 1rem;
border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
border-radius: var(--radius-md);
background: color-mix(in srgb, white 88%, var(--surface-strong));
color: var(--ink);
text-align: left;
cursor: pointer;
}
.operator-demo-tile:hover,
.operator-demo-tile:focus-visible {
border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 70%, white);
}
.operator-demo-tile strong,
.operator-demo-tile span {
overflow-wrap: anywhere;
}
.operator-demo-tile span {
color: var(--muted);
font-size: 0.88rem;
font-weight: 700;
}
.driver-activation-page {
min-height: 100vh;
display: grid;
place-items: center;
padding: 1.25rem;
}
.driver-activation-card {
width: min(100%, 520px);
display: grid;
gap: 1.05rem;
justify-items: center;
padding: 1.65rem;
border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
border-radius: 18px;
background: color-mix(in srgb, white 90%, var(--surface-strong));
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
text-align: center;
}
.driver-activation-card__logo {
width: min(52vw, 220px);
height: auto;
}
.driver-activation-card__content {
display: grid;
gap: 0.35rem;
}
.driver-activation-card__content h1 {
margin: 0;
font-size: clamp(2rem, 7vw, 3.1rem);
}
.driver-activation-card__content p {
margin: 0;
}
.driver-activation-card__form {
width: 100%;
}
.driver-activation-card__form .button {
width: 100%;
justify-content: center;
}
.driver-activation-card__error {
width: 100%;
margin: 0;
padding: 0.75rem 0.9rem;
border: 1px solid color-mix(in srgb, var(--danger) 28%, white);
border-radius: var(--radius-md);
background: rgba(255, 248, 246, 0.96);
color: var(--danger);
font-weight: 700;
text-align: left;
}
.auth-form {
display: grid;
gap: 0.9rem;
}
.form-sections {
display: grid;
gap: 0.85rem;
}
.form-helper-grid {
display: grid;
gap: 0.85rem;
}
.quick-fill-row {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.form-section {
display: grid;
gap: 0.85rem;
padding: 1rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: var(--radius-lg);
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.78),
rgba(255, 247, 239, 0.62));
}
.form-section__header {
display: grid;
gap: 0.22rem;
}
.form-section__header h3 {
margin: 0;
font-size: 1rem;
letter-spacing: -0.01em;
}
.form-section__header p {
margin: 0;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.55;
}
.form-section__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.form-section__grid--triple {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.inline-form {
margin: 0;
}
.auth-form label {
display: grid;
gap: 0.48rem;
}
.preset-control {
padding: 0.95rem 1rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: var(--radius-lg);
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.8),
rgba(255, 246, 236, 0.66));
}
.auth-form label > span {
color: var(--muted);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.form-hint {
color: var(--muted);
font-size: 0.78rem;
line-height: 1.45;
}
.auth-form select {
width: 100%;
min-height: 3.15rem;
padding: 0.82rem 0.95rem;
border: 1px solid rgba(43, 35, 27, 0.14);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
font: inherit;
}
.auth-form textarea {
width: 100%;
min-height: 5rem;
resize: vertical;
padding: 0.82rem 0.95rem;
border: 1px solid rgba(43, 35, 27, 0.14);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
font: inherit;
line-height: 1.45;
transition:
border-color 160ms ease,
box-shadow 160ms ease,
background 160ms ease;
}
body.auth-shell .auth-form select {
border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
background: color-mix(in srgb, white 86%, var(--surface-strong));
}
body.auth-shell .auth-form textarea {
border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
background: color-mix(in srgb, white 86%, var(--surface-strong));
}
.auth-form select:focus-visible,
.auth-form textarea:focus-visible {
border-color: color-mix(in srgb, var(--accent) 72%, white);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 72%, white), 0 12px 24px rgba(37, 28, 19, 0.08);
}
.auth-form input {
width: 100%;
min-height: 3.15rem;
padding: 0.82rem 0.95rem;
border: 1px solid rgba(43, 35, 27, 0.14);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
transition:
border-color 160ms ease,
box-shadow 160ms ease,
background 160ms ease;
}
body.auth-shell .auth-form input {
border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
background: color-mix(in srgb, white 86%, var(--surface-strong));
}
.auth-form input:focus-visible {
border-color: color-mix(in srgb, var(--accent) 72%, white);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 72%, white), 0 12px 24px rgba(37, 28, 19, 0.08);
}
.auth-form input[aria-invalid=true] {
border-color: color-mix(in srgb, var(--danger) 72%, white);
background: rgba(255, 248, 246, 0.96);
}
.auth-form select[aria-invalid=true],
.auth-form textarea[aria-invalid=true] {
border-color: color-mix(in srgb, var(--danger) 72%, white);
background: rgba(255, 248, 246, 0.96);
}
.auth-form input[aria-invalid=true]:focus-visible,
.auth-form select[aria-invalid=true]:focus-visible,
.auth-form textarea[aria-invalid=true]:focus-visible {
border-color: color-mix(in srgb, var(--danger) 76%, white);
box-shadow: 0 0 0 4px rgba(166, 60, 42, 0.12), 0 12px 24px rgba(37, 28, 19, 0.08);
}
.field-error {
margin: -0.08rem 0 0;
color: var(--danger);
font-size: 0.79rem;
font-weight: 700;
line-height: 1.4;
}
body.console-shell--ops .ops-driver-provision-dialog__content[data-driver-provision-state=error] .form-field {
align-content: start;
grid-template-rows: auto 3.15rem minmax(1.15rem, auto);
}
body.console-shell--ops .ops-driver-provision-dialog__content[data-driver-provision-state=error] .form-field input,
body.console-shell--ops .ops-driver-provision-dialog__content[data-driver-provision-state=error] .form-field select {
height: 3.15rem;
min-height: 3.15rem;
}
body.console-shell--ops .ops-driver-provision-form__grid .form-field--wide {
grid-column: 1 / -1;
}
body.console-shell--ops .ops-driver-provision-dialog__content[data-driver-provision-state=error] .form-field--textarea {
grid-template-rows: auto minmax(5rem, auto) minmax(1.15rem, auto);
}
body.console-shell--ops .ops-driver-provision-dialog__content[data-driver-provision-state=error] .form-field .field-error {
margin: 0;
}
body.console-shell--ops .ops-driver-provision-dialog__content[data-driver-provision-state=error] .form-field:not(.form-field--invalid)::after {
min-height: 1.15rem;
content: "";
}
.auth-form--coords {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.auth-form--coords .button,
.pricing-grid .button {
grid-column: 1 / -1;
}
.auth-form--verify {
max-width: 32rem;
}
.pricing-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ops-pricing-panel,
.ops-pricing-summary-region {
display: grid;
gap: 0.95rem;
}
.ops-pricing-summary-card {
gap: 1rem;
}
.ops-pricing-summary-card__actions {
justify-content: flex-end;
}
.ops-pricing-detail-grid {
margin-top: 0.15rem;
}
body.console-shell--ops .ops-pricing-dialog {
width: min(42rem, calc(100vw - 2rem));
}
body.console-shell--ops .ops-pricing-dialog--tariff {
width: min(58rem, calc(100vw - 2rem));
}
body.console-shell--ops .ops-pricing-dialog__content {
overflow: hidden;
padding: 0;
}
body.console-shell--ops .ops-pricing-dialog__content.is-confirming-discard {
padding: 0;
}
body.console-shell--ops .ops-pricing-dialog__content .ops-driver-provision-edit {
min-height: 0;
}
.ops-pricing-modal-form {
gap: 0.9rem;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
body.console-shell--ops .ops-pricing-modal-form {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: 0;
max-height: min(38rem, calc(100dvh - 6.25rem));
min-height: 0;
}
body.console-shell--ops .ops-pricing-modal-form__body {
display: grid;
gap: 0.9rem;
min-height: 0;
overflow: auto;
padding: 1rem;
}
body.console-shell--ops .ops-pricing-modal-form__footer {
padding: 0.8rem 1rem;
border-top: 1px solid rgba(23, 32, 42, 0.08);
background: rgba(255, 255, 255, 0.94);
}
.form-error,
.form-success {
margin: 0;
padding: 0.95rem 1rem;
border-radius: var(--radius-md);
}
.form-error {
border: 1px solid rgba(166, 60, 42, 0.16);
background: rgba(255, 244, 241, 0.92);
color: var(--danger);
}
.form-success {
border: 1px solid rgba(31, 107, 84, 0.16);
background: rgba(241, 251, 247, 0.94);
color: var(--success);
}
.test-note,
.dev-code {
padding: 1rem;
}
.test-note {
background:
linear-gradient(
180deg,
rgba(244, 249, 255, 0.9),
rgba(236, 244, 250, 0.84));
}
body.auth-shell .test-note {
background:
linear-gradient(
180deg,
color-mix(in srgb, white 82%, var(--accent-soft)),
color-mix(in srgb, white 88%, var(--accent-2-soft)));
}
.dev-code {
background:
radial-gradient(
circle at top right,
var(--accent-soft),
transparent 46%),
rgba(255, 252, 247, 0.92);
}
body.auth-shell .dev-code {
background:
linear-gradient(
135deg,
color-mix(in srgb, white 72%, var(--accent-soft)),
color-mix(in srgb, white 88%, var(--accent-2-soft)));
}
.dev-code strong {
font-family: var(--font-mono);
font-size: clamp(2rem, 7vw, 3.4rem);
letter-spacing: 0.22em;
}
.demo-phone-row {
justify-content: space-between;
}
.demo-account-actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
justify-content: flex-end;
}
.demo-account-status {
display: inline-flex;
align-items: center;
min-height: 1.5rem;
margin-left: 0.45rem;
padding: 0.18rem 0.5rem;
border-radius: 999px;
background: color-mix(in srgb, var(--accent-soft) 64%, white);
color: var(--accent-strong);
font-size: 0.76rem;
font-weight: 800;
white-space: nowrap;
}
.demo-account-status--inactive {
background: rgba(43, 35, 27, 0.08);
color: var(--muted);
}
.driver-grid {
grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
}
.ops-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.status-list p,
.request-card p {
margin: 0;
}
.request-card {
display: grid;
gap: 0.75rem;
padding: 1rem;
box-shadow: var(--shadow-md);
}
.request-card--timeline {
position: relative;
padding-left: 1.2rem;
}
.request-card--timeline::after {
content: "";
position: absolute;
left: 0.8rem;
top: 1.1rem;
bottom: 1.1rem;
width: 2px;
border-radius: 999px;
background:
linear-gradient(
180deg,
var(--accent) 0%,
transparent 100%);
}
.request-card__title {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
}
.request-card__title p,
.request-card__title h3 {
margin: 0;
}
.request-card__title h3 {
font-size: 1.1rem;
}
.request-card__forms {
display: grid;
gap: 0.75rem;
}
.request-card__forms .auth-form,
.request-card__forms .inline-form {
margin: 0;
}
.request-card__forms .auth-form {
padding: 1rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.58);
}
.request-card__forms .auth-form label {
gap: 0.42rem;
}
.request-card__forms .auth-form input {
min-height: 2.8rem;
}
.request-card__forms .button {
justify-self: start;
}
.disclosure {
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.5);
}
.disclosure--danger {
border-color: rgba(166, 60, 42, 0.12);
background: rgba(255, 247, 244, 0.56);
}
.disclosure[open] {
background: rgba(255, 255, 255, 0.68);
}
.disclosure__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.9rem 1rem;
cursor: pointer;
font-size: 0.92rem;
font-weight: 700;
list-style: none;
}
.disclosure__summary::-webkit-details-marker {
display: none;
}
.disclosure__summary::after {
content: "+";
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.8);
color: var(--muted);
flex-shrink: 0;
}
.disclosure[open] .disclosure__summary::after {
content: "-";
}
.disclosure__body {
display: grid;
gap: 0.75rem;
padding: 0 1rem 1rem;
}
.logout-confirm-dialog {
position: fixed;
inset: 0;
width: min(34rem, calc(100vw - 2rem));
max-width: none;
margin: auto;
padding: 0;
border: 0;
border-radius: 24px;
background: transparent;
color: var(--ink);
}
.logout-confirm-dialog::backdrop {
background: rgba(8, 16, 28, 0.56);
backdrop-filter: blur(7px);
}
.logout-confirm-dialog__panel {
display: grid;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.14);
border-radius: 24px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.98),
rgba(247, 250, 252, 0.98));
box-shadow: 0 32px 90px rgba(8, 16, 28, 0.34), 0 1px 0 rgba(255, 255, 255, 0.78) inset;
}
body.console-shell--driver .logout-confirm-dialog__panel {
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.98),
rgba(239, 252, 246, 0.98));
}
body.console-shell--ops .logout-confirm-dialog__panel {
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.98),
rgba(247, 249, 252, 0.98));
}
.logout-confirm-dialog__copy {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "icon label" "icon title" "icon body";
gap: 0.22rem 0.85rem;
padding: 1.2rem 1.25rem 1.05rem;
border-bottom: 1px solid rgba(15, 23, 42, 0.09);
}
.logout-confirm-dialog__copy::before {
content: "!";
grid-area: icon;
display: grid;
width: 2.75rem;
height: 2.75rem;
margin-top: 0.08rem;
place-items: center;
border: 1px solid color-mix(in srgb, var(--danger) 30%, white);
border-radius: 999px;
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--danger) 12%, white),
color-mix(in srgb, var(--danger) 18%, white));
color: var(--danger);
font-size: 1.2rem;
font-weight: 900;
line-height: 1;
box-shadow: 0 10px 24px color-mix(in srgb, var(--danger) 14%, transparent);
}
.logout-confirm-dialog__copy .status-card__label {
grid-area: label;
align-self: end;
color: color-mix(in srgb, var(--danger) 78%, var(--ink));
font-size: 0.72rem;
letter-spacing: 0;
}
.logout-confirm-dialog__copy h3,
.logout-confirm-dialog__copy p {
margin: 0;
}
.logout-confirm-dialog__copy h3 {
grid-area: title;
color: var(--ink-strong);
font-size: 1.22rem;
line-height: 1.16;
}
.logout-confirm-dialog__copy p {
grid-area: body;
max-width: 27rem;
color: var(--muted);
font-size: 0.94rem;
line-height: 1.45;
}
.logout-confirm-dialog__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
padding: 1rem 1.25rem 1.25rem;
background: rgba(248, 250, 252, 0.86);
}
.logout-confirm-dialog__actions > .button,
.logout-confirm-dialog__actions > .inline-form,
.logout-confirm-dialog__actions > .inline-form .button {
width: 100%;
}
.logout-confirm-dialog__actions > .inline-form {
display: grid;
margin: 0;
}
.logout-confirm-dialog .logout-confirm-dialog__actions .button {
min-height: 2.8rem;
border-radius: 14px;
justify-content: center;
}
.logout-confirm-dialog .logout-confirm-dialog__actions .button--secondary {
border-color: rgba(15, 23, 42, 0.12);
background: #fff;
color: var(--ink-strong);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.logout-confirm-dialog .logout-confirm-dialog__actions .button--danger {
border-color: transparent;
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--danger) 88%, white),
color-mix(in srgb, var(--danger) 88%, black));
color: #fff;
box-shadow: 0 14px 30px color-mix(in srgb, var(--danger) 24%, transparent);
}
.logout-confirm-dialog .logout-confirm-dialog__actions .button--danger::before {
background: currentColor;
}
.is-menu-open .site-header__panel {
display: grid;
}
#request-ride,
#current-ride,
#ride-history,
#driver-actions,
#active-ride,
#driver-location,
#ride-offers,
#dispatch-queue,
#recent-rides,
#online-drivers,
#pricing,
#event-stream {
scroll-margin-top: 7rem;
}
@media (prefers-reduced-motion: no-preference) {
.hero__copy,
.hero__panel,
.foundation-card {
animation: card-enter 520ms cubic-bezier(0.2, 0.7, 0.16, 1) both;
}
.hero__panel {
animation-delay: 80ms;
}
}
[data-live-refresh-mode=quiet] .foundation-card,
.foundation-card[data-live-refreshed=true] {
animation: none !important;
}
@keyframes card-enter {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (max-width: 1100px) {
.foundation-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.auth-grid,
.driver-grid,
.ops-grid {
grid-template-columns: 1fr;
}
.driver-grid--tablet {
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr);
}
.ops-dashboard-shell {
grid-template-columns: 1fr;
}
.ops-sidebar-toggle {
display: inline-flex;
}
.ops-dashboard-sidebar__collapse {
display: none;
}
.ops-dashboard-sidebar__close {
display: inline-flex;
}
.ops-dashboard-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 25;
width: min(20rem, calc(100vw - 2.5rem));
min-height: 100dvh;
transform: translateX(-100%);
transition: transform 220ms ease;
}
.ops-dashboard-shell.is-sidebar-open .ops-dashboard-sidebar {
transform: translateX(0);
}
.ops-dashboard-shell.is-sidebar-open .ops-sidebar-overlay {
display: block;
}
.ops-dashboard-main {
padding: 1rem 1rem 2rem;
}
.ops-dashboard-main--map {
min-height: 100dvh;
padding: 0;
overflow: auto;
}
.ops-page-results--map,
.ops-map-workspace {
height: auto;
min-height: 100dvh;
}
.ops-workspace-header--map {
top: 0.75rem;
left: 0.75rem;
right: 0.75rem;
border-radius: 20px;
}
.ops-workspace-header--driver-map {
width: auto;
}
.ops-workspace-header--map .ops-dashboard-toolbar {
grid-template-columns: auto;
border-bottom: 0;
}
.ops-workspace-header--map .ops-dashboard-toolbar__nav {
display: none;
}
.ops-workspace-header--map .ops-hero-panel {
grid-template-columns: 1fr;
}
.ops-workspace-header--map .ops-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ops-dashboard-toolbar,
.ops-hero-panel {
grid-template-columns: 1fr;
}
.ops-hero-panel__aside {
grid-template-columns: 1fr;
}
.ops-hero-panel__ride-tools {
grid-template-columns: 1fr;
justify-content: stretch;
}
.ops-floating-summary-panel {
bottom: 0.7rem;
padding: 0;
}
.ops-summary-grid--floating {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.ops-search-panel--section {
grid-template-columns: 1fr;
align-items: stretch;
}
.ops-search-panel--dispatch,
.ops-search-panel--rides,
.ops-search-panel--drivers,
.ops-dispatch-controls__grid,
.ops-rides-controls__grid,
.ops-drivers-controls__grid {
grid-template-columns: 1fr;
align-items: stretch;
}
.ops-dashboard-toolbar__nav {
justify-content: flex-start;
}
.ops-dashboard-toolbar__lead {
align-items: flex-start;
}
.ops-map-frame {
height: auto;
min-height: 0;
display: grid;
grid-template-rows: minmax(25rem, 58dvh) auto;
overflow: visible;
}
.ops-map-canvas {
position: relative;
min-height: 25rem;
}
.ops-map-controls {
top: 10.75rem;
bottom: auto;
left: 0.75rem;
right: 0.75rem;
max-width: none;
transform: none;
}
.ops-map-header-search {
min-width: 0;
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
}
.ops-workspace-header--driver-map .ops-hero-panel__title-row > .ops-call-request-open {
grid-column: 2;
grid-row: 1;
}
.ops-map-notification-lane {
position: fixed;
top: 5rem;
left: 0.75rem;
right: 0.75rem;
z-index: 40;
min-height: 0;
}
.ops-map-notification-lane .live-attention-banner {
width: min(26rem, 100%);
}
.ops-map-theme-panel {
position: relative;
left: auto;
right: auto;
bottom: auto;
align-items: flex-start;
flex-direction: column;
margin: 0.75rem 0.75rem 0;
}
.ops-map-theme-list {
width: 100%;
}
.ops-map-panel {
position: relative;
top: auto;
right: auto;
bottom: auto;
width: auto;
max-height: none;
margin: 0.75rem;
}
.ops-layout {
grid-template-columns: 1fr;
}
.ops-sidebar {
position: static;
}
.site-header__panel {
justify-content: space-between;
}
}
@media (min-width: 761px) and (max-width: 1100px) {
.ops-dashboard-toolbar {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
}
.ops-dashboard-toolbar__nav {
display: grid;
grid-column: 1 / -1;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.55rem;
width: 100%;
}
.ops-dashboard-toolbar__nav a {
justify-content: center;
min-height: 2.85rem;
padding: 0.45rem 0.65rem;
text-align: center;
}
}
@media (min-width: 901px) and (max-width: 1100px) {
.ops-hero-panel {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
}
@media (max-width: 900px) {
.hero__grid,
.dashboard-intro {
grid-template-columns: 1fr;
}
.detail-grid,
.summary-strip,
.metric-strip,
.form-section__grid,
.auth-form--coords,
.pricing-grid {
grid-template-columns: 1fr;
}
.site-footer__content {
flex-direction: column;
align-items: flex-start;
}
.passenger-step-strip,
.passenger-flow-grid,
.driver-nav-workspace,
.driver-offer-row,
.driver-ride-workbench,
.driver-grid--tablet {
grid-template-columns: 1fr;
}
.passenger-home-hero,
.passenger-quick-grid {
grid-template-columns: 1fr;
}
.passenger-track-stage__header {
flex-direction: column;
}
.passenger-workspace-header__top,
.passenger-workspace-header__context {
gap: 0.65rem;
}
.driver-nav-stage {
flex-direction: column;
}
.driver-nav-stage__chips {
justify-content: flex-start;
}
.driver-nav-summary,
.driver-ride-detail-page__summary,
.driver-ride-detail-page__grid,
.driver-ride-detail-page__stops,
.driver-assigned-ride-grid,
.driver-assigned-ride-summary,
.driver-assigned-ride-actions {
grid-template-columns: 1fr;
}
.driver-assigned-ride-page__header {
display: grid;
}
.driver-assigned-ride-timer {
width: 100%;
text-align: left;
}
.ops-hero-panel__copy h1 {
max-width: none;
}
.ops-hero-panel__title-row {
align-items: flex-start;
grid-template-columns: 1fr;
}
.ops-hero-panel__title-row h1 {
white-space: normal;
}
.ops-hero-panel__title-row > .ops-live-refresh-panel--header,
.ops-hero-panel__title-row > .ops-call-request-open {
grid-column: auto;
justify-self: stretch;
}
.ops-topbar-toggle {
flex: 1 1 0;
justify-content: center;
}
body.console-shell--ops .ops-section-header {
align-items: flex-start;
}
body.console-shell--ops #recent-rides > .ops-section-header,
body.console-shell--ops #online-drivers > .ops-section-header {
grid-template-columns: 1fr;
}
.ops-rides-panel-search,
.ops-drivers-panel-search {
width: 100%;
justify-self: stretch;
}
.ops-rides-header-actions,
.ops-dispatch-header-actions,
.ops-drivers-header-actions,
body.console-shell--ops #ops-drivers-search-tools-region {
grid-column: auto;
grid-row: auto;
justify-self: stretch;
}
.ops-rides-header-actions,
.ops-dispatch-header-actions,
.ops-drivers-header-actions {
justify-content: flex-start;
}
.ops-rides-filter-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ops-drivers-filter-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ops-dispatch-filter-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ops-rides-filter-reset {
grid-column: 1 / -1;
justify-content: center;
}
body.console-shell--ops .request-card__title {
grid-template-columns: 1fr;
}
body.console-shell--ops .ops-ride-card__status {
justify-items: start;
}
body.console-shell--ops .request-card__title .chip-row,
body.console-shell--ops .ops-ride-card__primary-actions {
justify-content: flex-start;
}
body.console-shell--ops .ops-ride-contact-grid {
grid-template-columns: 1fr;
}
body.console-shell--ops .ops-ride-card-footer {
grid-template-columns: 1fr;
}
body.console-shell--ops .ops-driver-card__hero {
grid-template-columns: 1fr;
}
body.console-shell--ops .ops-driver-detail-hero__toolbar {
grid-template-columns: 1fr;
align-items: flex-start;
}
body.console-shell--ops .ops-driver-detail-hero__toolbar-meta {
justify-items: start;
}
body.console-shell--ops .ops-driver-detail-hero__actions {
justify-content: flex-start;
}
body.console-shell--ops .ops-driver-detail-hero__main {
grid-template-columns: 1fr;
}
body.console-shell--ops .ops-driver-detail-hero__details {
grid-template-columns: 1fr;
}
body.console-shell--ops .ops-driver-detail-tab {
flex: 1 1 calc(50% - 0.48rem);
}
body.console-shell--ops .ops-driver-financial-grid,
body.console-shell--ops .ops-driver-financial-card__metrics {
grid-template-columns: 1fr;
}
body.console-shell--ops .ops-driver-card__status-stack {
justify-content: flex-start;
}
body.console-shell--ops .ops-driver-card__vehicle-details {
grid-template-columns: 1fr;
}
body.console-shell--ops .ops-driver-card__signal-grid {
grid-template-columns: 1fr;
}
body.console-shell--ops .request-card__title .chip-row {
justify-content: flex-start;
}
body.console-shell--ops .ops-driver-action-form__header {
display: grid;
}
body.console-shell--ops .ops-driver-action-form .chip-row {
justify-content: flex-start;
}
body.console-shell--ops .ops-driver-action-form__controls,
body.console-shell--ops .ops-intervention-form__controls {
grid-template-columns: 1fr;
}
body.console-shell--ops .ops-driver-assign-row__footer {
display: grid;
}
body.console-shell--ops .ops-driver-action-form__controls .button,
body.console-shell--ops .ops-driver-assign-row__footer .button,
body.console-shell--ops .ops-intervention-form__controls .button {
justify-self: stretch;
}
.driver-tablet-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
top: 5.75rem;
}
.driver-workspace-header__row {
grid-template-columns: 1fr;
align-items: stretch;
}
.driver-workspace-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ops-desktop-nav {
grid-template-columns: repeat(3, minmax(0, 1fr));
top: 5.75rem;
}
}
@media (max-width: 760px) {
.site-shell--header {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 0.6rem;
}
.menu-toggle {
display: inline-flex;
min-height: 2.55rem;
padding: 0.58rem 0.72rem;
}
.menu-toggle__meta {
display: none;
}
.site-header__panel {
display: none;
grid-column: 1 / -1;
gap: 0.85rem;
padding-top: 0.5rem;
}
.site-nav,
.site-utility-nav {
display: grid;
justify-items: stretch;
}
.site-nav a,
.site-utility-nav a {
justify-content: flex-start;
min-height: 2.8rem;
}
.brand {
gap: 0.58rem;
}
.brand__mark {
width: 3.35rem;
height: 2.45rem;
flex-basis: 3.35rem;
}
.brand__copy strong {
font-size: 0.95rem;
}
.brand__copy span {
font-size: 0.72rem;
line-height: 1.24;
}
@media (max-width: 560px) {
.brand__copy span {
display: none;
}
.site-shell--header {
padding: 0.82rem 0.9rem;
}
body.auth-shell .site-shell {
width: min(100%, 374px, calc(100dvw - 1rem));
margin-left: 0;
margin-right: auto;
}
}
body.auth-shell .auth-card {
width: 100%;
min-width: 0;
max-width: calc(100dvw - 1rem);
gap: 0.78rem;
padding: 1rem;
}
body.auth-shell .site-shell {
width: min(100%, calc(100dvw - 1rem));
}
body.auth-shell .auth-grid {
grid-template-columns: minmax(0, 1fr);
}
body.auth-shell .auth-card h1,
body.auth-shell .auth-card h2,
body.auth-shell .auth-card p,
body.auth-shell .test-note,
body.auth-shell .demo-phone,
body.auth-shell code {
max-width: 100%;
overflow-wrap: anywhere;
}
body.auth-shell .auth-card h1 {
font-size: clamp(1.48rem, 7vw, 1.9rem);
line-height: 1.08;
}
body.auth-shell .eyebrow,
body.auth-shell .status-card__label,
body.auth-shell .auth-form label > span {
font-size: 0.68rem;
letter-spacing: 0.1em;
}
body.auth-shell .hero__lede,
body.auth-shell .foundation-card p,
body.auth-shell .surface-note,
body.auth-shell .demo-phone {
line-height: 1.42;
}
body.auth-shell .test-note {
padding: 0.82rem 0.9rem;
border-radius: 18px;
}
body.auth-shell .auth-form {
gap: 0.68rem;
}
body.auth-shell .auth-form input {
min-height: 2.9rem;
padding: 0.72rem 0.88rem;
}
body.auth-shell .auth-form .button {
min-height: 3rem;
}
body.auth-shell .demo-phone-row {
justify-content: flex-start;
min-width: 0;
}
body.auth-shell .demo-phone-row > * {
min-width: 0;
}
.hero {
padding-top: 1.5rem;
}
.hero__copy,
.hero__panel,
.foundation-card {
border-radius: 26px;
}
.ops-workspace-header,
.ops-dashboard-surface {
border-radius: 26px;
}
.ops-dashboard-toolbar__nav {
display: none;
}
}
@media (min-width: 980px) {
.driver-offer-card-body {
grid-template-columns: minmax(17rem, 1fr) minmax(15.5rem, 0.86fr) minmax(15rem, 0.78fr);
align-items: stretch;
}
body.console-shell--ops .ops-ride-card-body {
grid-template-columns: minmax(17rem, 1fr) minmax(17.5rem, 1.05fr) minmax(15rem, 0.78fr);
align-items: start;
}
body.console-shell--ops #recent-rides .ops-ride-overview-panel {
margin-top: 0.6rem;
}
body.console-shell--ops #recent-rides .ops-ride-location-card {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "label" "address" "context";
}
body.console-shell--ops .ops-ride-timeline-disclosure > .disclosure__summary {
display: none;
}
body.console-shell--ops .ops-ride-timeline-disclosure {
align-self: stretch;
}
body.console-shell--ops .ops-ride-timeline-disclosure > .ops-ride-secondary-grid {
padding: 0;
}
body.console-shell--ops .ops-ride-timeline-disclosure .ops-ride-timeline-card {
padding: 0;
border: 0;
background: transparent;
}
body.console-shell--ops .route-map-card--ops .route-map-card__map-surface {
height: auto;
min-height: 0;
aspect-ratio: 1.45 / 1;
}
body.console-shell--ops .route-map-card--ops .route-map-card__summary {
gap: 0.35rem;
}
}
@media (min-width: 1360px) {
.driver-offer-card-body {
grid-template-columns: minmax(19rem, 1fr) minmax(17rem, 0.88fr) minmax(16.5rem, 0.78fr);
}
body.console-shell--ops .ops-ride-card-body {
grid-template-columns: minmax(19rem, 1fr) minmax(21rem, 1.06fr) minmax(16.5rem, 0.78fr);
}
}
@media (max-width: 640px) {
:root {
--shell: min(100vw - 1rem, 100%);
}
.ops-rides-filter-grid {
grid-template-columns: 1fr;
}
.ops-drivers-filter-grid {
grid-template-columns: 1fr;
}
.ops-dispatch-filter-grid {
grid-template-columns: 1fr;
}
.ops-map-workspace {
height: auto;
min-height: 100dvh;
}
.ops-workspace-header--map {
top: 0.5rem;
left: 0.5rem;
right: 0.5rem;
border-radius: 18px;
}
.ops-workspace-header--driver-map {
width: auto;
}
.ops-workspace-header--map .ops-hero-panel {
padding: 0.62rem;
}
.ops-workspace-header--map .ops-hero-panel__copy .hero__lede,
.ops-workspace-header--map .ops-hero-panel__aside {
display: none;
}
.ops-map-frame {
grid-template-rows: minmax(31rem, 64dvh) auto;
border-radius: 0;
}
.ops-map-canvas {
min-height: 31rem;
}
.ops-map-controls {
top: 13.65rem;
align-items: stretch;
}
.ops-map-header-search {
min-width: min(20rem, 38vw);
}
.ops-map-controls__group {
width: 100%;
}
.ops-map-controls__group {
justify-content: space-between;
border-radius: 18px;
}
.ops-map-filter {
flex: 1 1 auto;
padding: 0 0.55rem;
}
.ops-map-theme-panel {
margin: 0.55rem 0.55rem 0;
padding: 0.42rem;
border-radius: 16px;
}
.ops-map-theme {
flex: 1 1 calc(50% - 0.35rem);
padding-inline: 0.44rem;
}
.ops-map-panel {
margin: 0.55rem;
padding: 0.62rem;
border-radius: 18px;
}
.ops-map-panel__header {
grid-template-columns: 1fr;
}
.ops-map-panel__header {
display: grid;
}
.ops-map-panel__provider {
max-width: none;
text-align: left;
}
.ops-map-panel__stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.32rem;
}
.ops-map-panel__stats article {
padding: 0.44rem;
}
.ops-map-driver-item {
grid-template-columns: auto minmax(0, 1fr);
gap: 0.46rem;
padding: 0.54rem;
}
.ops-map-driver-item__status {
grid-row: 1 / 3;
}
.ops-map-driver-item__heartbeat {
grid-column: 2;
justify-self: start;
white-space: normal;
}
.ops-driver-map-marker {
width: 1.8rem;
height: 1.8rem;
font-size: 0.58rem;
}
.passenger-workspace-main {
padding: 0 0 calc(6.6rem + max(0.8rem, env(safe-area-inset-bottom)));
}
.passenger-workspace {
width: 100%;
max-width: none;
gap: 0.6rem;
}
.passenger-workspace-panel {
padding: 0 0.4rem;
}
.passenger-workspace-header {
border-top: 0;
border-right: 0;
border-left: 0;
border-radius: 0;
padding: calc(0.72rem + env(safe-area-inset-top)) 0.8rem 0.72rem;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.96),
rgba(238, 247, 255, 0.92)),
var(--surface-strong);
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.1);
}
.passenger-workspace-header {
align-items: flex-start;
flex-direction: column;
}
.passenger-workspace-header__actions {
width: 100%;
justify-content: space-between;
}
body.console-shell--passenger .passenger-panel-card {
padding: 0.95rem;
border-radius: 24px;
}
.passenger-app-nav {
gap: 0.35rem;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.985),
rgba(249, 252, 255, 0.985)),
var(--surface-strong);
}
.passenger-app-nav a {
flex-direction: column;
gap: 0.18rem;
min-height: 3.15rem;
padding: 0.34rem 0.28rem;
border-radius: 16px;
font-size: 0.72rem;
line-height: 1.1;
}
.passenger-app-nav a::before {
width: 1.22rem;
height: 1.22rem;
flex-basis: 1.22rem;
}
.passenger-address-step-form,
.passenger-request-stack--address {
gap: 0.5rem;
}
.passenger-address-pair {
gap: 0.5rem;
}
.passenger-address-pair .preset-control {
padding: 0.62rem 0.68rem;
}
.passenger-address-pair input[type=search] {
min-height: 2.9rem;
padding: 0.72rem 0.8rem;
}
.passenger-address-pair__field:last-child .address-search-results {
top: auto;
bottom: calc(100% + 0.25rem);
}
.passenger-address-pair__field:last-child .address-search-results__panel {
max-height: min(13rem, 36vh);
}
.passenger-home-primary,
.passenger-state-card,
.passenger-request-card,
.passenger-track-card,
.passenger-history-card,
.passenger-result-card {
padding: 0.9rem;
border-radius: 22px;
}
.passenger-home-primary--minimal {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.passenger-quick-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.passenger-state-card__header {
grid-template-columns: 1fr;
}
.passenger-state-card__meta,
.passenger-track-card__meta,
.passenger-track-card__meta--three,
.passenger-history-card__meta {
grid-template-columns: 1fr;
}
.passenger-history-card__header {
display: grid;
gap: 0.48rem;
}
.passenger-history-card__status {
justify-self: start;
max-width: 100%;
}
.passenger-history-card__detail-grid article {
grid-template-columns: 4.9rem minmax(0, 1fr);
gap: 0.12rem 0.62rem;
}
.passenger-history-card__summary .passenger-active-ride-summary__metrics article,
.passenger-history-card__summary .passenger-active-ride-summary__stop,
.passenger-pending-request-hero .passenger-active-ride-summary__metrics article,
.passenger-pending-request-hero .passenger-active-ride-summary__stop {
grid-template-columns: 6.6rem minmax(0, 1fr);
gap: 0.12rem 0.64rem;
}
.passenger-active-ride-hero__header {
display: grid;
justify-content: stretch;
}
.passenger-active-ride-hero__header h2 {
text-align: left;
}
.passenger-active-ride-summary {
padding: 0.68rem 0.72rem;
}
.passenger-active-ride-summary__metrics {
gap: 0.48rem;
}
.passenger-active-ride-summary__metrics article {
grid-template-columns: 4.9rem minmax(0, 1fr);
gap: 0.12rem 0.62rem;
padding-bottom: 0.46rem;
}
.passenger-active-ride-summary strong {
font-size: 0.9rem;
}
.passenger-active-ride-summary__pickup,
.passenger-active-ride-summary__stop {
grid-template-columns: 4.9rem minmax(0, 1fr);
gap: 0.12rem 0.62rem;
}
.route-map-card--passenger-tracking {
margin-inline: -0.95rem;
padding: 0;
border-right: 0;
border-left: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.route-map-card--passenger-tracking .route-map-card__canvas {
border-radius: 0;
}
.route-map-card--passenger-tracking .route-map-card__summary {
padding: 0.75rem 0.95rem 0;
}
.passenger-home-primary__actions .button,
.passenger-state-card__actions .button,
.passenger-context-actions .button,
.passenger-result-card__actions > .button,
.passenger-result-disclosure summary {
width: 100%;
}
.passenger-result-card__actions {
grid-template-columns: 1fr;
}
.passenger-home-hero {
padding: 0.9rem;
border-radius: 22px;
}
.passenger-app-nav {
gap: 0.32rem;
padding: 0.58rem calc(0.58rem + max(0rem, env(safe-area-inset-right))) calc(0.58rem + max(0.85rem, env(safe-area-inset-bottom))) calc(0.58rem + max(0rem, env(safe-area-inset-left)));
}
.passenger-app-nav a {
min-height: 2.8rem;
font-size: 0.72rem;
}
body.console-shell--passenger .site-main {
padding-bottom: 7rem;
}
.site-header {
padding-top: 0.5rem;
}
.site-shell--header,
.site-footer__content {
padding: 0.9rem;
}
.hero__copy,
.hero__panel,
.foundation-card {
padding: 1.05rem;
}
.hero__copy h1 {
max-width: 100%;
font-size: clamp(2.4rem, 13vw, 3.6rem);
}
.dashboard-title {
font-size: clamp(2rem, 10vw, 3rem);
}
.foundation-grid {
grid-template-columns: 1fr;
}
.chip-row,
.hero__actions,
.dashboard-actions,
.action-row,
.request-card__actions,
.demo-phone-row {
align-items: stretch;
}
.button,
.button--compact {
width: 100%;
}
.logout-confirm-dialog {
width: min(22.5rem, calc(100vw - 1rem));
}
.logout-confirm-dialog__copy {
grid-template-columns: 1fr;
grid-template-areas: "icon" "label" "title" "body";
padding: 1rem 1rem 0.9rem;
}
.logout-confirm-dialog__actions {
grid-template-columns: 1fr;
padding: 0.9rem 1rem 1rem;
}
.demo-phone-row .button {
width: auto;
}
.passenger-section-nav {
display: none;
}
.driver-tablet-nav {
position: static;
margin-bottom: 0.85rem;
}
.driver-workspace-header__lead {
width: 100%;
}
body.console-shell--ops .ops-driver-card__header {
align-items: start;
}
body.console-shell--ops .ops-driver-card__portrait {
width: 4.05rem;
}
body.console-shell--ops .ops-driver-detail-hero__portrait {
width: 5.2rem;
}
body.console-shell--ops .ops-driver-card__location-header {
flex-direction: column;
align-items: flex-start;
}
body.console-shell--ops .ops-driver-card__status-stack {
justify-content: flex-start;
}
body.console-shell--ops .ops-driver-card__vehicle-details {
grid-template-columns: 1fr;
}
.driver-workspace-nav a {
min-height: 2.55rem;
padding-inline: 0.55rem;
font-size: 0.86rem;
}
.driver-offer-row {
padding: 0.75rem;
border-radius: 20px;
}
.driver-offer-card__header,
.driver-offer-card-body,
.driver-offer-contact-grid {
grid-template-columns: 1fr;
}
.driver-offer-card__status,
.driver-offer-contact-card--fare {
justify-items: start;
text-align: left;
}
.driver-offer-card__status .chip-row {
justify-content: flex-start;
}
.driver-offer-map {
width: 100%;
}
.driver-offer-row__head {
grid-template-columns: 1fr;
align-items: start;
}
.driver-offer-row__fare {
justify-items: start;
text-align: left;
}
.driver-offer-metrics {
grid-template-columns: 1fr;
}
.driver-ride-compact-meta {
grid-template-columns: 1fr;
}
body.console-shell--driver .driver-panel-card {
padding: 0.95rem;
border-radius: 24px;
}
body.console-shell--driver .driver-offer-card__header,
body.console-shell--driver .driver-offer-overview-panel,
body.console-shell--driver .driver-offer-card__header .driver-offer-metrics {
grid-template-columns: 1fr;
}
body.console-shell--driver .driver-offer-card__header .driver-offer-metrics,
body.console-shell--driver .driver-offer-location-stack,
body.console-shell--driver .driver-offer-contact-grid,
body.console-shell--driver .driver-offer-card__status {
grid-column: auto;
}
.driver-shift-card,
.driver-location-current {
grid-template-columns: 1fr;
align-items: stretch;
}
.driver-location-current {
display: grid;
}
.driver-shift-card__actions {
min-width: 0;
}
.driver-location-current__actions {
min-width: 0;
}
.driver-shift-meta {
grid-template-columns: 1fr;
}
.driver-location-dialog__actions {
grid-template-columns: 1fr;
}
.driver-nav-map-card {
padding: 0.75rem;
border-radius: 22px;
}
.driver-nav-map-card__canvas {
border-radius: 18px;
}
.driver-nav-map-card__map-surface {
min-height: 14.5rem;
}
.driver-nav-map-card__canvas--loading,
.driver-nav-map-card__placeholder--standalone {
min-height: 18.5rem;
}
.driver-nav-map-card--navigation .driver-nav-map-card__map-surface {
min-height: 18.5rem;
}
.driver-nav-map {
min-height: 14.5rem;
}
.ops-dashboard-main {
padding: 0.75rem 0.75rem 1.5rem;
}
.ops-workspace-header,
.ops-dashboard-surface {
border-radius: 24px;
}
.ops-dashboard-toolbar__lead {
width: 100%;
}
.ops-workspace-header {
padding: 0.85rem;
}
body.console-shell--ops .ops-workspace-header:not(.ops-workspace-header--map) {
margin: -0.75rem -0.75rem 0.85rem;
padding: 0;
}
.ops-dashboard-toolbar,
.ops-hero-panel {
padding-left: 0;
padding-right: 0;
}
.ops-search-section {
padding-left: 0;
padding-right: 0;
}
.ops-summary-grid {
grid-template-columns: 1fr;
}
.ops-summary-grid--floating {
grid-template-columns: 1fr;
}
.ops-hero-panel__copy h1 {
font-size: 1.8rem;
white-space: normal;
}
.ops-hero-panel__heading {
width: 100%;
}
.ops-call-request-open {
width: 100%;
}
.ops-desktop-nav {
position: static;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-bottom: 0.85rem;
}
.passenger-mobile-nav {
position: fixed;
left: 0.5rem;
right: 0.5rem;
bottom: 0.6rem;
z-index: 18;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
padding: 0.65rem;
border: 1px solid rgba(43, 35, 27, 0.12);
border-radius: 24px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.88),
rgba(255, 249, 241, 0.94)),
var(--surface-strong);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(18px);
}
.passenger-mobile-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.9rem;
padding: 0.55rem 0.7rem;
border: 1px solid rgba(43, 35, 27, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
color: var(--ink);
text-decoration: none;
font-size: 0.88rem;
font-weight: 700;
text-align: center;
}
}
.live-attention-banner {
--live-attention-accent: var(--accent);
--live-attention-soft: var(--accent-soft);
position: fixed;
top: 6.2rem;
right: 1rem;
z-index: 40;
display: grid;
gap: 0.3rem;
width: min(26rem, calc(100vw - 2rem));
padding: 0.95rem 1rem;
border: 1px solid color-mix(in srgb, var(--live-attention-accent) 34%, white);
border-radius: 20px;
background:
linear-gradient(
135deg,
color-mix(in srgb, white 92%, var(--live-attention-soft)),
color-mix(in srgb, white 80%, var(--live-attention-soft))),
var(--surface-strong);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(18px);
opacity: 0;
transform: translateY(-0.55rem);
transition: opacity 160ms ease, transform 220ms ease;
pointer-events: none;
}
.live-attention-banner--info {
--live-attention-accent: var(--accent-2);
--live-attention-soft: var(--accent-2-soft);
}
.live-attention-banner--success {
--live-attention-accent: var(--success);
--live-attention-soft: var(--success-soft);
}
.live-attention-banner--warning {
--live-attention-accent: var(--accent);
--live-attention-soft: var(--accent-soft);
}
.live-attention-banner--critical {
--live-attention-accent: var(--danger);
--live-attention-soft: var(--danger-soft);
}
.live-attention-banner.is-visible {
opacity: 1;
transform: translateY(0);
}
.live-attention-banner__eyebrow {
color: color-mix(in srgb, var(--live-attention-accent) 78%, var(--ink));
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.live-attention-banner__message {
color: var(--ink);
font-size: 0.96rem;
line-height: 1.45;
}
.live-transport-badge {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 39;
display: inline-flex;
align-items: center;
min-height: 2.65rem;
max-width: min(24rem, calc(100vw - 2rem));
padding: 0.72rem 0.95rem;
border: 1px solid rgba(23, 32, 42, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
box-shadow: var(--shadow-md);
backdrop-filter: blur(14px);
}
body.console-shell--passenger .live-transport-badge {
left: 50%;
right: auto;
bottom: 5.75rem;
transform: translateX(-50%);
}
.live-transport-badge__label {
color: var(--ink);
font-size: 0.83rem;
line-height: 1.3;
}
.live-transport-badge--offline,
.live-transport-badge--error {
border-color: color-mix(in srgb, var(--danger) 28%, white);
background: color-mix(in srgb, white 90%, var(--danger-soft));
}
@media (max-width: 640px) {
.ops-action-toast-region {
top: 5rem;
left: 0.5rem;
right: 0.5rem;
width: auto;
}
.live-attention-banner {
top: 5rem;
left: 0.5rem;
right: 0.5rem;
width: auto;
}
.live-transport-badge {
left: 0.5rem;
right: 0.5rem;
bottom: 0.75rem;
max-width: none;
justify-content: center;
}
body.console-shell--passenger .live-transport-badge {
left: 0.7rem;
right: 0.7rem;
bottom: 5.85rem;
transform: none;
}
}
body.map-screen {
min-height: 100vh;
overflow: hidden;
background:
linear-gradient(
180deg,
color-mix(in srgb, white 82%, var(--page)) 0%,
var(--page) 100%);
overscroll-behavior: none;
}
body.map-screen::before,
body.map-screen::after {
content: none;
}
body.map-screen main {
min-height: 100vh;
}
.app-map-screen {
position: relative;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
min-height: 100vh;
padding: max(0.85rem, env(safe-area-inset-top, 0px)) max(0.85rem, env(safe-area-inset-right, 0px)) max(0.85rem, env(safe-area-inset-bottom, 0px)) max(0.85rem, env(safe-area-inset-left, 0px));
gap: 0.9rem;
}
.app-map-screen__header {
position: relative;
z-index: 2;
display: grid;
gap: 0.9rem;
padding: 1rem 1rem 0;
}
.app-map-screen__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.app-map-screen__heading {
display: grid;
gap: 0.4rem;
max-width: 44rem;
}
.app-map-screen__heading h1 {
margin: 0;
font-size: clamp(1.65rem, 4vw, 2.45rem);
line-height: 1.05;
font-family: var(--font-display);
}
.app-map-screen__heading p {
margin: 0;
max-width: 42rem;
color: var(--muted);
line-height: 1.5;
}
.app-map-screen__map-frame {
position: relative;
height: 100%;
min-height: 22rem;
border: 1px solid color-mix(in srgb, var(--line-strong) 88%, white);
border-radius: 24px;
overflow: hidden;
background:
radial-gradient(
circle at top left,
color-mix(in srgb, var(--accent-soft) 62%, white),
transparent 34%),
linear-gradient(
180deg,
color-mix(in srgb, white 54%, var(--page)) 0%,
color-mix(in srgb, white 14%, var(--page-deep)) 100%);
box-shadow: var(--shadow-lg);
}
.app-map-screen__canvas {
position: relative;
width: 100%;
height: 100%;
min-height: inherit;
}
.app-map-screen__canvas .maplibregl-map,
.app-map-screen__canvas .maplibregl-canvas-container,
.app-map-screen__canvas .maplibregl-canvas {
width: 100%;
height: 100%;
}
.app-map-screen__current-location {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
padding: 0;
border: 1px solid color-mix(in srgb, var(--accent-2) 28%, white);
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
color: var(--accent-strong);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.2);
cursor: pointer;
transition:
background 140ms ease,
border-color 140ms ease,
color 140ms ease,
transform 140ms ease;
}
.app-map-screen__current-location::before {
content: "";
width: 1.25rem;
height: 1.25rem;
background: currentColor;
mask-image: var(--button-icon-target);
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: var(--button-icon-target);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
.app-map-screen__current-location:hover,
.app-map-screen__current-location:focus-visible {
border-color: color-mix(in srgb, var(--accent) 46%, white);
background: #fff;
color: var(--accent);
transform: translateY(-1px);
}
.app-map-screen__current-location:disabled {
cursor: progress;
opacity: 0.74;
transform: none;
}
.app-map-screen__current-location[data-location-state=locating]::before {
animation: app-map-current-location-spin 850ms linear infinite;
}
.direwolf-map-current-location {
position: relative;
display: inline-block;
width: 1.15rem;
height: 1.15rem;
border: 3px solid #fff;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 0 0.42rem color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 22px rgba(15, 23, 42, 0.28);
}
.direwolf-map-current-location::after {
content: "";
position: absolute;
inset: -0.72rem;
border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
border-radius: inherit;
}
@keyframes app-map-current-location-spin {
to {
transform: rotate(360deg);
}
}
.app-map-screen__loading {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
place-items: center;
padding: 1.5rem;
background:
radial-gradient(
circle at 28% 22%,
color-mix(in srgb, var(--accent-soft) 82%, white),
transparent 34%),
linear-gradient(
135deg,
color-mix(in srgb, white 88%, var(--surface-muted)),
color-mix(in srgb, white 72%, var(--page)));
color: var(--ink-strong);
text-align: center;
}
.app-map-screen__loading[hidden] {
display: none;
}
.app-map-screen__loading-panel {
display: grid;
justify-items: center;
gap: 0.42rem;
width: min(100%, 21rem);
padding: 1.2rem 1.35rem;
border: 1px solid color-mix(in srgb, var(--line-strong) 76%, white);
border-radius: 22px;
background: color-mix(in srgb, white 84%, var(--surface));
box-shadow: 0 18px 44px rgba(15, 23, 31, 0.16);
}
.app-map-screen__loading-panel strong {
margin-top: 0.2rem;
font-size: 1.05rem;
line-height: 1.18;
}
.app-map-screen__loading-panel span:not(.app-map-screen__loading-spinner) {
color: var(--muted);
font-size: 0.92rem;
font-weight: 720;
line-height: 1.35;
}
.app-map-screen__loading-spinner {
position: relative;
width: 3.2rem;
height: 3.2rem;
border: 3px solid color-mix(in srgb, var(--accent-soft) 70%, white);
border-top-color: var(--accent);
border-right-color: var(--accent-2);
border-radius: 999px;
animation: app-map-loading-spin 900ms linear infinite;
}
.app-map-screen__loading-spinner::after {
content: "";
position: absolute;
inset: 0.78rem;
border-radius: 999px;
background:
radial-gradient(
circle at 54% 42%,
var(--accent-2) 0 0.18rem,
transparent 0.2rem),
color-mix(in srgb, white 88%, var(--accent-soft));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 74%, white);
}
@keyframes app-map-loading-spin {
to {
transform: rotate(360deg);
}
}
.app-map-screen__sheet,
.app-map-screen__error {
position: absolute;
left: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
z-index: 3;
display: grid;
gap: 0.8rem;
padding: 1rem;
border: 1px solid color-mix(in srgb, var(--line-strong) 88%, white);
border-radius: 24px;
background:
linear-gradient(
180deg,
color-mix(in srgb, white 92%, var(--surface-muted)),
color-mix(in srgb, white 82%, var(--surface))),
var(--surface-strong);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(18px);
}
.app-map-screen__error {
position: relative;
left: auto;
right: auto;
bottom: auto;
margin: 0 1rem 1rem;
}
.app-map-screen__chips {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.app-map-screen__note {
margin: 0;
color: var(--muted);
line-height: 1.45;
}
.app-map-screen__points {
display: grid;
gap: 0.75rem;
}
.app-map-screen__point {
display: grid;
gap: 0.4rem;
padding: 0.9rem 1rem;
border: 1px solid color-mix(in srgb, var(--line) 92%, white);
border-radius: 18px;
background: color-mix(in srgb, white 84%, var(--surface));
}
.app-map-screen__point p,
.app-map-screen__point strong {
margin: 0;
}
.app-map-screen__point-label {
color: var(--muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.app-map-screen .maplibregl-ctrl-group {
border: 1px solid color-mix(in srgb, var(--line-strong) 88%, white);
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.app-map-screen .maplibregl-ctrl-group button {
background: rgba(255, 255, 255, 0.96);
}
.app-map-screen .maplibregl-ctrl-attrib {
border-radius: 14px 0 0 0;
background: rgba(255, 255, 255, 0.92);
}
@media (max-width: 900px) {
.app-map-screen__map-frame {
border-radius: 20px;
}
.app-map-screen__sheet,
.app-map-screen__error {
left: 1rem;
right: 1rem;
bottom: 1rem;
}
}
@media (max-width: 640px) {
.app-map-screen {
gap: 0.75rem;
padding: max(0.55rem, env(safe-area-inset-top, 0px)) max(0.55rem, env(safe-area-inset-right, 0px)) max(0.55rem, env(safe-area-inset-bottom, 0px)) max(0.55rem, env(safe-area-inset-left, 0px));
}
.app-map-screen__header {
padding: 0.7rem 0.35rem 0;
}
.app-map-screen__toolbar {
gap: 0.55rem;
}
.app-map-screen__toolbar .button {
min-height: 2.7rem;
padding-inline: 0.95rem;
}
.app-map-screen__map-frame {
border-radius: 18px;
}
.app-map-screen__sheet,
.app-map-screen__error {
left: 0.7rem;
right: 0.7rem;
bottom: 0.7rem;
gap: 0.7rem;
padding: 0.9rem;
border-radius: 20px;
}
}
@media (min-width: 901px) {
.app-map-screen {
grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
grid-template-rows: auto minmax(0, 1fr);
align-items: stretch;
}
.app-map-screen__header {
grid-column: 1 / -1;
padding: 1.15rem 1.15rem 0;
}
.app-map-screen__toolbar {
justify-content: flex-start;
}
.app-map-screen__heading {
max-width: 52rem;
}
.app-map-screen__map-frame {
min-height: 0;
}
.app-map-screen__sheet,
.app-map-screen__error {
position: relative;
left: auto;
right: auto;
bottom: auto;
align-self: end;
margin: 0;
max-height: calc(100vh - 11.4rem);
overflow: auto;
}
}
.ops-reports-panel {
display: grid;
gap: 1.05rem;
}
.ops-section-header--reports {
align-items: center;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
padding-bottom: 0.95rem;
}
.ops-reports-year-form {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-height: 2.45rem;
}
.ops-reports-year-form label {
color: var(--muted);
font-size: 0.84rem;
font-weight: 700;
}
.ops-reports-year-form select {
min-height: 2.45rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--text);
font: inherit;
font-weight: 700;
padding: 0 2rem 0 0.75rem;
}
.ops-reports-tabs {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
width: fit-content;
max-width: 100%;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px;
background: rgba(255, 255, 255, 0.72);
padding: 0.25rem;
}
.ops-reports-tabs a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2rem;
border-radius: 6px;
color: var(--muted);
font-size: 0.84rem;
font-weight: 800;
line-height: 1;
padding: 0 0.75rem;
text-decoration: none;
transition:
background 160ms ease,
color 160ms ease,
box-shadow 160ms ease;
}
.ops-reports-tabs a:hover {
background: rgba(15, 23, 42, 0.045);
color: var(--text);
}
.ops-reports-tabs a[aria-current=page] {
background: #ffffff;
color: var(--text);
box-shadow: 0 1px 5px rgba(15, 23, 42, 0.1);
}
.ops-reports-overview-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.34fr);
gap: 1rem;
align-items: stretch;
}
.ops-reports-focus-stack {
display: grid;
gap: 0.75rem;
}
.ops-reports-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 0.75rem;
}
.ops-reports-metrics--compact {
grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}
.ops-reports-metrics--finance {
grid-template-columns: minmax(16rem, 1.5fr) repeat(2, minmax(12rem, 1fr));
}
.ops-reports-funnel {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 0.7rem;
}
.ops-reports-funnel__step {
display: grid;
gap: 0.55rem;
min-width: 0;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px;
background: rgba(248, 250, 252, 0.82);
padding: 0.8rem;
}
.ops-reports-funnel__step div {
display: grid;
gap: 0.25rem;
min-width: 0;
}
.ops-reports-funnel__step span {
color: var(--muted);
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
}
.ops-reports-funnel__step strong {
color: var(--text);
font-size: 1.35rem;
line-height: 1;
}
.ops-reports-funnel__step em {
color: var(--muted);
font-size: 0.8rem;
font-style: normal;
}
.ops-report-metric {
display: grid;
gap: 0.3rem;
align-content: start;
min-height: 6.25rem;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px;
background: rgba(255, 255, 255, 0.86);
padding: 0.9rem;
}
.ops-report-metric--hero {
min-height: 10rem;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.94),
rgba(240, 253, 250, 0.9)),
#ffffff;
}
.ops-report-metric--wide {
grid-column: span 2;
}
.ops-report-metric span {
color: var(--muted);
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
}
.ops-report-metric strong {
color: var(--text);
font-size: clamp(1.3rem, 1.05rem + 0.55vw, 1.85rem);
line-height: 1;
}
.ops-report-metric em {
color: var(--muted);
font-size: 0.82rem;
font-style: normal;
}
.ops-reports-section {
display: grid;
gap: 0.75rem;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
padding: 1rem;
}
.ops-reports-section--chart {
gap: 1rem;
min-width: 0;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.96),
rgba(248, 250, 252, 0.88)),
#ffffff;
}
.ops-reports-section__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.ops-reports-section__header h3 {
margin: 0.15rem 0 0;
color: var(--text);
font-size: 1rem;
}
.ops-reports-section__header strong {
color: var(--text);
font-size: 0.95rem;
white-space: nowrap;
}
.ops-reports-chart-shell {
min-width: 0;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: 8px;
background: rgba(255, 255, 255, 0.76);
padding: 0.35rem;
}
.ops-reports-chart-shell svg {
display: block;
width: 100%;
height: auto;
}
.ops-reports-chart-unavailable {
display: grid;
min-height: 15rem;
place-items: center;
color: var(--muted);
font-weight: 700;
}
.ops-reports-monthly-table {
display: grid;
gap: 0.35rem;
overflow-x: auto;
}
.ops-reports-monthly-table__row {
display: grid;
grid-template-columns: 3.5rem minmax(8rem, 1fr) minmax(5rem, 0.65fr) minmax(5rem, 0.65fr) minmax(4.5rem, 0.58fr) minmax(5.8rem, 0.62fr) minmax(7rem, 0.72fr);
align-items: center;
gap: 0.6rem;
min-width: 48rem;
border-radius: 8px;
padding: 0.62rem 0.7rem;
}
.ops-reports-monthly-table__row:nth-child(odd):not(.ops-reports-monthly-table__row--head) {
background: rgba(15, 23, 42, 0.035);
}
.ops-reports-monthly-table__row--head {
color: var(--muted);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
}
.ops-reports-monthly-table__month,
.ops-reports-monthly-table__row strong {
color: var(--text);
font-weight: 800;
}
.ops-reports-monthly-table__status {
display: grid;
gap: 0.25rem;
min-width: 0;
}
.ops-reports-monthly-table__status em {
overflow: hidden;
color: var(--muted);
font-size: 0.76rem;
font-style: normal;
text-overflow: ellipsis;
white-space: nowrap;
}
.ops-report-status {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
max-width: 100%;
min-height: 1.55rem;
border-radius: 999px;
padding: 0 0.55rem;
font-size: 0.74rem;
line-height: 1;
}
.ops-report-status--stable {
background: rgba(5, 150, 105, 0.12);
color: #047857;
}
.ops-report-status--active {
background: rgba(37, 99, 235, 0.12);
color: #1d4ed8;
}
.ops-report-status--warning {
background: rgba(180, 83, 9, 0.13);
color: #92400e;
}
.ops-report-status--exception {
background: rgba(185, 28, 28, 0.12);
color: #991b1b;
}
.ops-report-status--empty {
background: rgba(100, 116, 139, 0.12);
color: #475569;
}
.ops-report-bar {
display: block;
width: 100%;
height: 0.38rem;
overflow: hidden;
border-radius: 999px;
background: rgba(15, 23, 42, 0.08);
margin-top: 0.25rem;
}
.ops-report-bar b {
display: block;
height: 100%;
border-radius: inherit;
background: #2563eb;
}
.ops-report-bar--completed b {
background: #059669;
}
.ops-report-bar--active b {
background: #2563eb;
}
.ops-report-bar--exception b {
background: #b91c1c;
}
.ops-report-bar--revenue b {
background: #0f766e;
}
@media (max-width: 760px) {
.ops-section-header--reports {
align-items: stretch;
}
.ops-reports-overview-grid,
.ops-reports-metrics--finance {
grid-template-columns: 1fr;
}
.ops-reports-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.ops-reports-year-form {
justify-content: space-between;
}
.ops-report-metric--wide {
grid-column: span 1;
}
}