/* A to B navigation, loaded only when map.navigation is configured */

#map.navigating,
#map.navigating .leaflet-grab,
#map.navigating .leaflet-interactive {
    cursor: crosshair;
}

/* wider than the other buttons, to fit the bicycle, the dotted line and the pin, and as tall as the layers control's toggle */
.leaflet-bar button.easy-button-button.navigation-button {
    width: 60px;
    height: 36px;
    line-height: 36px;
}

.leaflet-touch .leaflet-bar button.easy-button-button.navigation-button {
    height: 44px;
    line-height: 44px;
}

.navigation-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #000;
}

.navigation-icon {
    display: block;
    flex: 0 0 auto;
}

/* specific enough to beat easy-button's light hover background, which would hide the white icon */
.leaflet-bar button.easy-button-button.navigation-active {
    background-color: #0d6efd;
}

.leaflet-bar button.easy-button-button.navigation-active:hover {
    background-color: #0b5ed7;
}

.easy-button-button.navigation-active .navigation-toggle {
    color: #fff;
}

/* the switch for preferring separated routes, small, next to the panel's heading */
.navigation-prefer {
    vertical-align: middle;
    font-size: 0.8rem;
}

.navigation-casing {
    stroke: #fff;
    stroke-width: 9px;
    stroke-opacity: 0.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.navigation-line {
    stroke-width: 5px;
    stroke-opacity: 0.95;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* blue on separated cycle routes and footways, orange wherever the route is in traffic */
.navigation-path {
    stroke: #0d6efd;
}

.navigation-traffic {
    stroke: #fd7e14;
}

/* the step picked in the turn by turn list */
.navigation-step-highlight {
    stroke: #ffc107;
    stroke-width: 12px;
    stroke-opacity: 0.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.navigation-steps {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.navigation-step {
    position: relative;
    display: flex;
    align-items: baseline;
    padding: 0.3rem 0.25rem 0.3rem 1.2rem;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
}

.navigation-step:hover,
.navigation-step.active {
    background-color: #f8f9fa;
}

.navigation-step-icon {
    flex: 0 0 1.6em;
    text-align: center;
    color: #212529;
}

.navigation-step-icon svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/*
    What a step mostly is, as a line down the side of the list, coloured by the legend's class.
    It runs the whole height of the step and over its bottom border, so it joins the next one.
*/
.navigation-step-bar {
    position: absolute;
    top: 0;
    bottom: -1px;
    left: 0.35rem;
    width: 0;
    border-left: 4px solid currentColor;
}

.navigation-step-bar-dotted {
    border-left-style: dotted;
}

/* orange has no entry in the layer's legend; the others only stand in when the legend lacks theirs */
.navigation-swatch-none {
    color: #fd7e14;
}

.navigation-swatch-separated {
    color: #1f78b4;
}

.navigation-swatch-traffic,
.navigation-swatch-recommended {
    color: #33a02c;
}

.navigation-swatch-footway {
    color: #a6cee3;
}

.navigation-swatch-mtb {
    color: #aa5500;
}

.navigation-step-text {
    flex: 1 1 auto;
}

/* how far and how long into the ride, right-aligned; #495057 keeps AAA contrast on the hover background too */
.navigation-step-distance {
    flex: 0 0 auto;
    margin-left: 0.5rem;
    color: #495057;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.navigation-step-length {
    font-size: 0.8em;
}

.navigation-step-length:not(:empty) {
    margin-right: 0.4em;
}

/* as wide as the longest time, so the minutes stand under each other whether a distance is shown or not */
.navigation-step-time {
    display: inline-block;
    min-width: 4.5em;
    text-align: right;
}

/* invisible, wide enough to hover a road stretch of the route for its cross-section */
.navigation-hover {
    stroke: transparent;
    stroke-width: 16px;
    fill: none;
}

/* a gap in the network is orange like a road, and dashed */
.navigation-gap {
    stroke-dasharray: 8 8;
    stroke-linecap: butt;
}

.navigation-access {
    stroke: #6c757d;
    stroke-width: 2px;
    stroke-dasharray: 3 5;
    fill: none;
}

.navigation-marker {
    width: 26px;
    height: 26px;
    line-height: 22px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.navigation-marker.navigation-from {
    background: #198754;
}

.navigation-marker.navigation-to {
    background: #dc3545;
}

/* A and B in the turn by turn list, smaller copies of the markers on the map */
.navigation-step-marker {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    line-height: calc(1.5em - 2px);
    border-width: 1px;
    font-size: 0.75em;
    vertical-align: 0.1em;
    box-shadow: none;
}

/* the route summed up in the panel: the words of the layer's legend, and how much of the route each is */
.navigation-legend-table {
    margin: 0 0 1rem;
}

/*
    Lined up with the turn by turn steps below: the border sits where their bar does (0.35rem in)
    and the words start where theirs do (1.2rem in).
*/
.navigation-legend-row {
    display: flex;
    align-items: baseline;
    margin: 0 0 0.2rem 0.35rem;
    padding: 0.1rem 0.25rem 0.1rem calc(1.2rem - 0.35rem - 4px);
    border-left: 4px solid transparent;
}

/* the colours the route is drawn in: blue on separated routes and footways, orange in traffic */
.navigation-legend-separated,
.navigation-legend-footway {
    border-left-color: #0d6efd;
}

.navigation-legend-traffic {
    border-left-color: #fd7e14;
}

.navigation-legend-label {
    flex: 1 1 auto;
}

.navigation-legend-share {
    flex: 0 0 auto;
    margin-left: 0.5rem;
    white-space: nowrap;
}

/* dots flying over the map while the route is being found, see renderLoading() */
#navigation-loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 800;
    overflow: hidden;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.35);
}

/* sits at the start of a flight, as long as the flight and turned towards its end */
.navigation-flight {
    position: absolute;
    height: 0;
    transform-origin: 0 0;
}

/* as wide as its parent, so moving it by its own width takes the dot to the end */
.navigation-flight-x {
    width: 100%;
    height: 0;
    animation-name: navigation-flight-x;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.navigation-flight-y {
    width: 0;
    height: 0;
    animation-iteration-count: infinite;
}

.navigation-flight-dot {
    position: absolute;
    left: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0d6efd;
    box-shadow: 0 0 0 2px #fff;
    animation-name: navigation-flight-fade;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* placed by renderLoading() in the middle of the flights, centred on that point */
.navigation-loading-label {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 0.6rem 1.5rem;
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    font-size: 1.6rem;
    font-weight: 600;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

@keyframes navigation-flight-x {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* the arc off the straight line: out to its height by half way, back by the end */
.navigation-arc-1 {
    animation-name: navigation-arc-1;
}

.navigation-arc-2 {
    animation-name: navigation-arc-2;
}

.navigation-arc-3 {
    animation-name: navigation-arc-3;
}

.navigation-arc-4 {
    animation-name: navigation-arc-4;
}

@keyframes navigation-arc-1 {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    50% {
        transform: translateY(-40px);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes navigation-arc-2 {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    50% {
        transform: translateY(-16px);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes navigation-arc-3 {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    50% {
        transform: translateY(20px);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes navigation-arc-4 {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    50% {
        transform: translateY(44px);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes navigation-flight-fade {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/*
    Phones, once a route is fitted: the panel takes the bottom half, the route is fitted into the top half,
    and the zoom, location and login buttons are hidden until the map is touched (see update() and init()).
*/
@media (max-width: 767.98px) {
    body.navigation-half #sidebar {
        height: 50vh;
        height: 50dvh;
    }

    body.navigation-half #sidebar[style*="block"] ~ #map .leaflet-bottom {
        bottom: 50vh;
        bottom: 50dvh;
    }

    body.navigation-controls-hidden #sidebar[style*="block"] ~ #map .leaflet-bottom {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navigation-flight {
        display: none;
    }
}

/*
    Following the rider: the panel gives way to a bar over the bottom of the map with the next
    manoeuvre, see startFollowing() in navigation.js.
*/
#navigation-follow {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* above the map's control corners, like the panel on phones */
    z-index: 1002;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
    padding: 1rem 1.25rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    font-size: 1.25rem;
}

/* on a phone the bar is the bottom third of the screen, the map the rest */
@media (max-width: 767.98px) {
    #navigation-follow {
        height: 33.333vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* the instruction and "then" stay together at the top, the footer sits at the bottom */
    #navigation-follow .navigation-follow-footer {
        margin-top: auto;
    }

    #navigation-follow .navigation-follow-then {
        font-size: 1.4rem;
    }

    #navigation-follow .navigation-follow-then svg {
        width: 28px;
        height: 28px;
        vertical-align: -6px;
    }

    /* a third of the screen has room: everything a size up */
    #navigation-follow .navigation-follow-distance {
        font-size: 3.2rem;
    }

    #navigation-follow .navigation-follow-instruction {
        font-size: 1.7rem;
    }

    #navigation-follow .navigation-follow-speed {
        font-size: 1.2rem;
    }

    #navigation-follow .navigation-follow-remaining {
        font-size: 1.45rem;
    }

    #navigation-follow .navigation-follow-footer .btn-sm {
        font-size: 1.35rem;
        padding: 0.55rem 1rem;
    }
}

@media (min-width: 768px) {
    #navigation-follow {
        left: auto;
        right: 1rem;
        bottom: 1rem;
        width: 30rem;
        border-radius: 0.75rem;
    }
}

.navigation-follow-main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-height: 4.5rem;
}

.navigation-follow-icon {
    flex: 0 0 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    min-height: 4.5rem;
    color: #0d6efd;
}

/* the rider's speed, under the turn */
.navigation-follow-speed {
    color: #212529;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
}

.navigation-follow-icon svg {
    width: 64px;
    height: 64px;
}

.navigation-follow-icon .navigation-step-marker {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.6rem;
}

.navigation-follow-warning {
    font-size: 3rem;
    font-weight: bold;
    color: #dc3545;
}

.navigation-follow-waiting {
    font-size: 3rem;
    color: #212529;
    animation: navigation-waiting 1.2s ease-in-out infinite;
}

@keyframes navigation-waiting {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.navigation-follow-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.navigation-follow-distance {
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.1;
}

.navigation-follow-instruction {
    font-size: 1.4rem;
    overflow-wrap: anywhere;
}

/* under the instruction, in the text column */
.navigation-follow-then {
    margin-top: 0.5rem;
    /* dark, the bar has to be read in full sun */
    color: #212529;
    font-size: 1.15rem;
    overflow-wrap: anywhere;
}

.navigation-follow-then svg {
    width: 22px;
    height: 22px;
    vertical-align: -5px;
}

.navigation-follow-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.navigation-follow-footer .btn-sm {
    font-size: 1.1rem;
    padding: 0.4rem 0.9rem;
}

/* readable in the sun: dark on white is over the 7:1 of WCAG AAA (the red buttons are darkened in main.css) */
.navigation-follow-footer .btn-outline-dark {
    color: #212529;
    border-color: #212529;
}

.navigation-follow-footer .btn-outline-dark:hover,
.navigation-follow-footer .btn-outline-dark:focus,
.navigation-follow-footer .btn-outline-dark:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
}


.navigation-follow-remaining {
    flex: 0 0 auto;
    color: #212529;
    white-space: nowrap;
    font-size: 1.2rem;
}

/* the buttons take what is left of the footer, and Stop takes what is left of that */
.navigation-follow-buttons {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    white-space: nowrap;
}

.navigation-follow-buttons .navigation-stop {
    flex: 1 1 auto;
    min-width: 8rem;
}

/* the speaker in the bar's top right corner: a square, filled dark while muted */
#navigation-follow .navigation-mute {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #212529;
    border-radius: 0.375rem;
    color: #212529;
    background: #fff;
}

#navigation-follow .navigation-mute:hover,
#navigation-follow .navigation-mute:focus-visible {
    color: #fff;
    background: #495057;
    border-color: #495057;
}

#navigation-follow .navigation-mute.active,
#navigation-follow .navigation-mute:not(:disabled):active {
    color: #fff;
    background: #212529;
    border-color: #212529;
}

/* muted and hovered: a shade lighter, so the hover shows on the filled button too */
#navigation-follow .navigation-mute.active:hover {
    background: #495057;
    border-color: #495057;
}

/* the instruction stops short of the button */
#navigation-follow .navigation-follow-main {
    padding-right: 3rem;
}

/* the map's bottom corner controls sit above the bar on phones */
@media (max-width: 767.98px) {
    body.navigation-follow #map .leaflet-bottom {
        bottom: 33.333vh;
    }
}

/* the rider: a dot with an arrow turned the way of travel */
.navigation-rider-icon {
    background: none;
    border: none;
}

.navigation-rider {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1a73e8;
    border: 4px solid #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    position: relative;
}

.navigation-rider::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -16px;
    margin-left: -9px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 14px solid #1a73e8;
}

.navigation-rider-off {
    background: #dc3545;
}

.navigation-rider-off::after {
    border-bottom-color: #dc3545;
}

/* the map while following: turned so the way ahead is up, see setupRotation() in navigation.js */
#map.navigation-rotated {
    transform-origin: center center;
    transition: transform 0.9s linear;
    will-change: transform;
}

/* the map's own controls would turn with it; the bar has what is needed */
body.navigation-follow .leaflet-control-container {
    display: none;
}

/* Reverse and Close navigation: each half of the panel's width, or the whole of it alone */
.navigation-panel-buttons {
    display: flex;
    gap: 0.5rem;
}

.navigation-panel-buttons .btn {
    flex: 1 1 0;
}

/* the same target the map's "My location" button shows, in the button's own colour */
.navigation-locate-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    vertical-align: -3px;
    margin-right: 2px;
}
.navigation-locate-icon::before,
.navigation-locate-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
}
.navigation-locate-icon::before {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
}
.navigation-locate-icon::after {
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    background: currentColor;
}