/* Race-day "where am I on the course" panel (see tracker.js). */

.tracker-panel {
    display: none;
    position: fixed;
    z-index: 1001;
    /* Leaflet's zoom control is top-right: 10px margin + two 30px buttons + borders (about 65px on
       touch devices), so it ends near y=75px. 84px clears it; right: 10px lines up with it. */
    top: 84px;
    right: 10px;
    box-sizing: border-box;
    max-width: 260px;
    padding: 8px 10px;
    background: var(--primary-color);
    color: var(--text-color);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--shadow-color);
    font-family: var(--font-family);
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: left;
    pointer-events: auto;
}

.tracker-panel.open {
    display: block;
}

.tracker-progress {
    overflow-wrap: anywhere;
}

/* The NEXT block is one big tap target that opens that staircase's popup. */
.tracker-next,
.tracker-next:disabled {
    display: block;
    width: 100%;
    margin: 4px 0 0;
    padding: 2px 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tracker-next:disabled {
    cursor: default;
}

.tracker-next:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
}

.tracker-next-name,
.tracker-detail {
    display: block;
    overflow-wrap: anywhere;
}

.tracker-detail[hidden] {
    display: none;
}

.tracker-detail.off {
    color: #f9e243;
    font-weight: bold;
}

/* Portrait phones: the logo sits top-left (about 160px wide plus its 20px margin), so keep clear. */
@media screen and (orientation: portrait) {
    .tracker-panel {
        top: 84px; /* the zoom control is top-right in portrait too, so it is not 60px here */
        right: 10px;
        max-width: calc(100vw - 190px);
    }
}