* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

button,
a {
    font: inherit;
}

#ahead-drive {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #d9ded8;
}


/* =========================================================
   MAP
   ========================================================= */

#drive-map {
    position: absolute;
    inset: 0;
    z-index: 1;
}


/* =========================================================
   TOP STATUS
   ========================================================= */

.drive-top-bar {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 500;

    display: grid;
grid-template-columns:
    48px
    auto
    auto
    minmax(0, 1fr);

    align-items: center;
    gap: 10px;

    pointer-events: none;
}

.drive-back {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(
            20,
            28,
            23,
            0.88
        );

    color: white;

    font-size: 32px;
    line-height: 1;

    text-decoration: none;

    pointer-events: auto;
}


.drive-brand {
    width: 48px;
    height: 48px;

    border: 0;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(
            20,
            28,
            23,
            0.92
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;

    cursor: pointer;
    pointer-events: auto;
}

.drive-heading {
    min-width: 94px;
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 12px;

    border-radius: 24px;

    background:
        rgba(
            20,
            28,
            23,
            0.88
        );

    color: white;
}

.drive-heading strong {
    font-size: 18px;
}

.drive-heading span {
    font-size: 14px;
    opacity: 0.8;
}

.drive-route-name {
    justify-self: end;

    max-width: 360px;

    border: 0;
    padding: 8px 14px;

    overflow: hidden;

    border-radius: 20px;

    display: flex;
    align-items: center;
    gap: 6px;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    color: #26332b;

    font-size: 13px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;

    cursor: pointer;
    pointer-events: auto;
}

.drive-route-name span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.drive-trip-name {
    font-weight: 850;
}

.drive-route-separator {
    flex: 0 0 auto;
    opacity: 0.45;
}


/* =========================================================
   YOU
   ========================================================= */

.you-indicator {
    position: absolute;

    left: 50%;
    bottom: 28%;

    z-index: 450;

    transform:
        translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    pointer-events: none;
}

.you-arrow {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 4px solid white;
    border-radius: 50%;

    background: #18271f;
    color: white;

    font-size: 30px;
    transition: transform 0.2s ease;
    box-shadow:
        0 2px 8px
        rgba(
            0,
            0,
            0,
            0.35
        );
}

.you-indicator span {
    margin-top: 3px;

    padding: 2px 7px;

    border-radius: 8px;

    background:
        rgba(
            20,
            28,
            23,
            0.85
        );

    color: white;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.1em;
}


/* =========================================================
   CONTROL BAR
   ========================================================= */

.ahead-control-bar {
    position: absolute;

    z-index: 600;

    display: flex;

    background:
        rgba(
            20,
            28,
            23,
            0.92
        );

    transition:
        transform 0.25s ease;
}

.ahead-control {
    position: relative;

    min-width: 86px;
    min-height: 68px;

    border: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: transparent;

    color: white;

    cursor: pointer;
}

.ahead-control:active {
    background:
        rgba(
            255,
            255,
            255,
            0.12
        );
}

.control-icon {
    font-size: 23px;
    line-height: 1;
}

.control-label {
    margin-top: 5px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.08em;
}

.control-status {
    position: absolute;

    top: 8px;
    right: 12px;

    width: 9px;
    height: 9px;

    border: 1px solid
        rgba(
            255,
            255,
            255,
            0.85
        );

    border-radius: 50%;
}

.status-neutral {
    background: #8a918d;
}

.status-good {
    background: #3eb66f;
}

.status-watch {
    background: #e2a62b;
}

.status-alert {
    background: #d64b42;
}


/* =========================================================
   CONTROL HANDLE
   ========================================================= */

.control-handle {
    position: absolute;

    z-index: 610;

    width: 46px;
    height: 46px;

    border: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(
            20,
            28,
            23,
            0.92
        );

    color: white;

    font-size: 28px;

    cursor: pointer;
}


/* =========================================================
   LARGE / WIDE SCREEN
   ========================================================= */

@media (min-width: 700px) {

    .ahead-control-bar {
        left: 50%;
        bottom: 16px;

        transform:
            translateX(-50%);

        border-radius: 16px;

        overflow: hidden;
    }

    .ahead-control-bar.is-hidden {
        transform:
            translateX(-50%)
            translateY(
                calc(
                    100%
                    + 28px
                )
            );
    }

    .control-handle {
        left: 50%;
        bottom: 91px;

        transform:
            translateX(-50%)
            rotate(90deg);

        border-radius:
            18px
            18px
            0
            0;

        transition:
            bottom 0.25s ease,
            transform 0.25s ease;
    }

    .control-handle.controls-hidden {
        bottom: 0;

        transform:
            translateX(-50%)
            rotate(-90deg);
    }
}


/* =========================================================
   NARROW / PHONE SCREEN
   ========================================================= */

@media (max-width: 699px) {

    .ahead-control-bar {
        right: 8px;
        top: 50%;

        flex-direction: column;

        transform:
            translateY(-50%);

        border-radius: 14px;

        overflow: hidden;
    }

    .ahead-control-bar.is-hidden {
        transform:
            translateY(-50%)
            translateX(
                calc(
                    100%
                    + 12px
                )
            );
    }

    .ahead-control {
        min-width: 66px;
        min-height: 65px;
    }

    .control-handle {
        right: 74px;
        top: 50%;

        transform:
            translateY(-50%);

        border-radius:
            14px
            0
            0
            14px;

        transition:
            right 0.25s ease,
            transform 0.25s ease;
    }

    .control-handle.controls-hidden {
        right: 0;

        transform:
            translateY(-50%)
            rotate(180deg);
    }

    .drive-route-name {
        display: none;
    }

    .drive-top-bar {
        grid-template-columns:
            48px
            auto;
    }

    .you-indicator {
        bottom: 28%;
    }
}


/* =========================================================
   INFORMATION CARD
   ========================================================= */

.drive-card {
    position: absolute;

    z-index: 700;

    left: 50%;
    bottom: 18px;

    width:
        min(
            440px,
            calc(
                100% - 28px
            )
        );

    max-height: 55%;

    overflow-y: auto;

    padding: 18px;

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    color: #26332b;

    box-shadow:
        0 5px 22px
        rgba(
            0,
            0,
            0,
            0.3
        );

    transform:
        translate(
            -50%,
            calc(
                100%
                + 40px
            )
        );

    opacity: 0;

    pointer-events: none;

    transition:
        transform 0.25s ease,
        opacity 0.2s ease;
}
.camp-other-matches {
    margin-top: 14px;
}


.camp-other-toggle {
    width: 100%;

    padding:
        10px
        12px;

    border:
        1px solid #d8e0da;

    border-radius: 9px;

    background: #f3f6f3;

    color: #26332b;

    font-weight: 800;

    cursor: pointer;
}


.camp-other-list {
    margin-top: 8px;
}


.camp-alternate-item {
    display: block;

    width: 100%;

    margin-bottom: 7px;

    padding: 10px;

    border:
        1px solid #dde4df;

    border-radius: 9px;

    background: #ffffff;

    text-align: left;

    color: #26332b;

    cursor: pointer;
}


.camp-alternate-item strong,
.camp-alternate-item span,
.camp-alternate-item small {
    display: block;
}


.camp-alternate-item strong {
    font-size: 14px;
}


.camp-alternate-item span {
    margin-top: 3px;

    font-size: 12px;

    color: #68756d;
}


.camp-alternate-item small {
    margin-top: 4px;

    font-size: 12px;

    color: #68756d;
}
.drive-card.is-open {
    transform:
        translate(
            -50%,
            0
        );

    opacity: 1;

    pointer-events: auto;
}

.drive-card-close {
    position: absolute;

    top: 8px;
    right: 8px;

    width: 44px;
    height: 44px;

    border: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eef1ee;

    color: #27352d;

    font-size: 28px;

    cursor: pointer;
}

.card-category {
    margin-bottom: 4px;

    color: #53635a;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 0.14em;
}

.drive-card h2 {
    margin:
        0
        48px
        5px
        0;

    font-size: 22px;
}

.drive-card-subtitle {
    margin:
        0
        0
        10px;

    font-weight: 700;
}

.drive-card-meta,
.drive-card-distance {
    margin:
        6px
        0;

    color: #57665e;

    font-size: 14px;
}

.drive-card-counts {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 8px;

    margin-top: 15px;
}

.drive-card-counts div {
    padding: 10px 5px;

    border-radius: 10px;

    background: #eef1ee;

    text-align: center;
}

.drive-card-counts strong {
    display: block;

    font-size: 20px;
}

.drive-card-counts span {
    display: block;

    margin-top: 2px;

    color: #68766e;

    font-size: 11px;
}

.drive-card-actions {
    margin-top: 15px;
}

.drive-action-primary {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 9px 16px;

    border-radius: 12px;

    background: #263d31;

    color: white;

    font-weight: 800;

    text-decoration: none;
}

.camp-action-full {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.drive-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* =========================================================
   DEVELOPMENT STATUS
   ========================================================= */

.drive-message {
    position: absolute;

    z-index: 500;

    left: 12px;
    bottom: 12px;

    max-width: 260px;

    padding: 6px 10px;

    border-radius: 12px;

    background:
        rgba(
            255,
            255,
            255,
            0.88
        );

    color: #36443c;

    font-size: 11px;
}


@media (min-width: 700px) {

    .drive-message {
        bottom: 100px;
    }
}


@media (max-width: 699px) {

    .drive-card {
        bottom: 12px;

        max-height: 62%;
    }

    .drive-message {
        bottom: 8px;
    }
}
/* =========================================================
   LIVE GPS
   ========================================================= */

.drive-live-button {
    min-height: 46px;
    padding: 7px 13px;

    border: 0;
    border-radius: 23px;

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    color: #33423a;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;

    cursor: pointer;

    pointer-events: auto;
}

.drive-live-button.is-live {
    background: #263d31;
    color: #ffffff;
}

@media (max-width: 699px) {

    .drive-top-bar {
        grid-template-columns:
            48px
            auto
            auto;
    }

    .drive-live-button {
        justify-self: start;

        padding-left: 10px;
        padding-right: 10px;
    }
}
/* =========================================================
   NEEDS
   ========================================================= */

.needs-list {
    margin-top: 14px;
}

.needs-row {
    display: grid;
    grid-template-columns:
        38px
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 10px;

    padding: 11px 0;

    border-bottom:
        1px solid #e3e7e3;
}

.needs-row:last-child {
    border-bottom: 0;
}

.needs-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border-radius: 10px;

    background: #eef1ee;

    font-size: 18px;
}

.needs-info {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.needs-info strong {
    font-size: 14px;
}

.needs-info span {
    margin-top: 2px;

    overflow: hidden;

    color: #68766e;

    font-size: 12px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.needs-distance {
    font-size: 16px;
    white-space: nowrap;
}
/* =========================================================
   CAMP MAP MARKERS
   ========================================================= */

.camp-marker-wrapper {
    background: transparent;
    border: 0;
}

.camp-map-marker {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 3px solid #ffffff;
    border-radius: 50%;

    color: #ffffff;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 2px 7px
        rgba(
            0,
            0,
            0,
            0.35
        );
}
.camp-map-marker.selected {
    width: 46px;
    height: 46px;

    border: 4px solid #ffffff;

    border-radius: 50%;

    background: #1f5f3d;

    font-size: 24px;

    box-shadow:
        0 0 0 4px rgba(31, 95, 61, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.35);

    transform: scale(1.08);
}
.camp-map-marker.established {
    background: #277849;
}

.camp-map-marker.dispersed {
    background: #9a7420;
}

.camp-map-marker.developed {
    background: #50645a;
}

/* =========================================================
   PERSISTENT TRAILAHEAD APPLICATION SHELL
   ========================================================= */

:root {
    --ta-bottom-nav-height: 64px;
    --ta-sheet-radius: 20px;
}


/*
 * The map remains the application background.
 * Application navigation is always available at the bottom.
 */

.app-bottom-nav {
    position: absolute;

    z-index: 900;

    left: 0;
    right: 0;
    bottom: 0;

    height:
        calc(
            var(--ta-bottom-nav-height)
            + env(safe-area-inset-bottom)
        );

    padding:
        4px
        max(
            8px,
            env(safe-area-inset-left)
        )
        env(safe-area-inset-bottom)
        max(
            8px,
            env(safe-area-inset-right)
        );

    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 2px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    background:
        rgba(
            20,
            28,
            23,
            0.96
        );

    box-shadow:
        0 -3px 14px
        rgba(
            0,
            0,
            0,
            0.2
        );

    backdrop-filter:
        blur(10px);
}

.app-nav-button {
    min-width: 0;

    border: 0;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2px;

    background: transparent;
    color:
        rgba(
            255,
            255,
            255,
            0.7
        );

    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.06em;

    cursor: pointer;
}

.app-nav-button.is-active {
    background:
        rgba(
            255,
            255,
            255,
            0.11
        );

    color: #ffffff;
}

.app-nav-icon {
    min-height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    line-height: 1;
}


/* =========================================================
   APPLICATION SHEET
   ========================================================= */

.app-sheet {
    position: absolute;

    z-index: 850;

    left: 50%;
    bottom:
        calc(
            var(--ta-bottom-nav-height)
            + 10px
            + env(safe-area-inset-bottom)
        );

    width:
        min(
            680px,
            calc(
                100% - 24px
            )
        );

    height:
        min(
            72vh,
            720px
        );

    border-radius:
        var(--ta-sheet-radius)
        var(--ta-sheet-radius)
        14px
        14px;

    display: grid;
    grid-template-rows:
        auto
        auto
        minmax(0, 1fr);

    overflow: hidden;

    background:
        rgba(
            255,
            255,
            255,
            0.985
        );

    color: #26332b;

    box-shadow:
        0 8px 32px
        rgba(
            0,
            0,
            0,
            0.32
        );

    transform:
        translate(
            -50%,
            calc(
                100%
                + 100px
            )
        );

    opacity: 0;

    pointer-events: none;

    transition:
        transform 0.26s ease,
        opacity 0.2s ease;
}

.app-sheet.is-open {
    transform:
        translate(
            -50%,
            0
        );

    opacity: 1;
    pointer-events: auto;
}

.app-sheet-grab {
    width: 44px;
    height: 5px;

    margin: 8px auto 2px;

    border-radius: 99px;

    background: #cbd2cd;
}

.app-sheet-header {
    min-height: 62px;

    padding:
        6px
        12px
        10px
        18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    border-bottom:
        1px solid #e6eae7;
}

.app-sheet-kicker {
    margin-bottom: 2px;

    color: #6b7971;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.app-sheet-header h2 {
    margin: 0;

    font-size: 21px;
    line-height: 1.1;
}

.app-sheet-close {
    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    border: 0;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef1ee;
    color: #27352d;

    font-size: 28px;

    cursor: pointer;
}

.app-sheet-native,
.app-sheet-frame {
    display: none;

    min-width: 0;
    min-height: 0;
}

.app-sheet-native.is-visible {
    display: block;

    overflow-y: auto;

    padding: 14px 16px 26px;
}

.app-sheet-frame.is-visible {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    background: #ffffff;
}


/* =========================================================
   MORE / ADMIN MENU
   ========================================================= */

.app-menu-grid {
    display: grid;
    gap: 9px;
}

.app-menu-item {
    width: 100%;

    border:
        1px solid #e0e5e1;
    border-radius: 13px;

    padding: 13px 14px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    background: #f8faf8;
    color: #26332b;

    text-align: left;
    text-decoration: none;

    cursor: pointer;
}

.app-menu-item strong {
    font-size: 14px;
}

.app-menu-item span {
    margin-top: 3px;

    color: #6b7971;

    font-size: 12px;
}

.app-menu-signout {
    background: #ffffff;
}


/* =========================================================
   SHELL POSITION OVERRIDES
   ========================================================= */

/*
 * Intelligence cards sit above application navigation.
 */

.drive-card {
    bottom:
        calc(
            var(--ta-bottom-nav-height)
            + 12px
            + env(safe-area-inset-bottom)
        );
}


/*
 * Development status should not hide behind the bottom nav.
 */

.drive-message {
    bottom:
        calc(
            var(--ta-bottom-nav-height)
            + 8px
            + env(safe-area-inset-bottom)
        );
}


@media (min-width: 700px) {

    /*
     * AHEAD intelligence controls float above the app nav.
     */

    .ahead-control-bar {
        bottom:
            calc(
                var(--ta-bottom-nav-height)
                + 16px
            );
    }

    .control-handle {
        bottom:
            calc(
                var(--ta-bottom-nav-height)
                + 91px
            );
    }

    .control-handle.controls-hidden {
        bottom:
            var(--ta-bottom-nav-height);
    }

    .drive-message {
        bottom:
            calc(
                var(--ta-bottom-nav-height)
                + 100px
            );
    }
}


@media (max-width: 699px) {

    .drive-top-bar {
        left: 8px;
        right: 8px;

        grid-template-columns:
            48px
            auto
            auto;

        gap: 7px;
    }

    .drive-route-name {
        position: absolute;

        top: 56px;
        left: 0;

        max-width:
            min(
                78vw,
                360px
            );

        display: flex;

        font-size: 11px;
    }

    .drive-route-name .drive-route-separator,
    .drive-route-name > span:last-child {
        display: none;
    }

    .app-sheet {
        left: 0;

        bottom:
            calc(
                var(--ta-bottom-nav-height)
                + env(safe-area-inset-bottom)
            );

        width: 100%;

        height:
            min(
                76vh,
                760px
            );

        border-radius:
            20px
            20px
            0
            0;

        transform:
            translateY(
                calc(
                    100%
                    + 80px
                )
            );
    }

    .app-sheet.is-open {
        transform:
            translateY(0);
    }

    .drive-card {
        bottom:
            calc(
                var(--ta-bottom-nav-height)
                + 8px
                + env(safe-area-inset-bottom)
            );

        max-height: 60%;
    }

    .drive-message {
        bottom:
            calc(
                var(--ta-bottom-nav-height)
                + 6px
                + env(safe-area-inset-bottom)
            );
    }
}
.drive-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.drive-card-actions > .drive-action-primary {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

/* =========================================================
   QUICK MARK CAMP
   ========================================================= */

/*
 * Top status now contains:
 * TA | heading | LIVE GPS | MARK CAMP | Trip
 */
.drive-top-bar {
    grid-template-columns:
        48px
        auto
        auto
        auto
        minmax(0, 1fr);
}


#mark-camp-button {
    width: auto;
    min-width: 0;

    justify-self: start;

    padding-left: 13px;
    padding-right: 13px;

    white-space: nowrap;
}


/*
 * Phone layout keeps the four driving controls on the
 * first row. Trip context retains its existing mobile
 * positioning behavior.
 */
@media (max-width: 699px) {

    .drive-top-bar {
        grid-template-columns:
            48px
            auto
            auto
            auto;
    }

    #mark-camp-button {
        justify-self: start;

        padding-left: 9px;
        padding-right: 9px;

        font-size: 10px;
    }
}



/* =========================================================
   COCKPIT LAYOUT CLEANUP
   2026-09-19

   Desktop:
   - Coordinate simulator lives in the top center.

   Phone:
   - Coordinate simulator is hidden.
   - Driving controls remain compact across the first row.
   - Trip context occupies a clean second row.
   - Map status is moved below the driving controls.
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP / TABLET
   --------------------------------------------------------- */

@media (min-width: 700px) {

    /*
     * The coordinate simulator is a development tool.
     * Keep it available on larger screens, but align it
     * with the top cockpit controls instead of below them.
     */
    #coordinate-location-tool {
        top: 12px !important;
        left: 50% !important;

        transform:
            translateX(-50%) !important;

        z-index: 650 !important;
    }
}


/* ---------------------------------------------------------
   PHONE
   --------------------------------------------------------- */

@media (max-width: 699px) {

    /*
     * Do not consume valuable driving-screen space with the
     * developer coordinate simulator.
     */
    #coordinate-location-tool {
        display: none !important;
    }


    /*
     * Compact first-row driving cockpit:
     *
     * TA | HEADING | LIVE GPS | MARK CAMP
     */
    .drive-top-bar {
        top: 8px;
        left: 8px;
        right: 8px;

        grid-template-columns:
            44px
            minmax(78px, auto)
            auto
            auto !important;

        gap: 6px;

        align-items: center;
    }


    .drive-brand {
        width: 44px;
        height: 44px;

        font-size: 12px;
    }


    .drive-heading {
        min-width: 78px;
        min-height: 44px;

        gap: 5px;

        padding:
            5px
            9px;

        box-sizing: border-box;
    }


    .drive-heading strong {
        font-size: 16px;
    }


    .drive-heading span {
        font-size: 12px;
    }


    .drive-live-button {
        min-height: 44px;

        padding:
            6px
            9px;

        font-size: 10px;

        white-space: nowrap;
    }


    #mark-camp-button {
        min-height: 44px;

        padding-left: 9px;
        padding-right: 9px;

        font-size: 10px;
    }


    /*
     * Trip becomes a clean second row instead of competing
     * with first-row controls.
     */
    .drive-route-name {
        position: absolute;

        top: 52px;
        left: 0;

        max-width:
            min(
                58vw,
                280px
            );

        min-height: 34px;

        padding:
            6px
            11px;

        box-sizing: border-box;

        font-size: 10px;
    }


    /*
     * On the phone the trip title alone is enough.
     * The current route can be shown elsewhere when needed.
     */
    .drive-route-name .drive-route-separator,
    .drive-route-name > span:last-child {
        display: none;
    }


    /*
     * Leave the second-row right side for map/network status.
     * This catches the Leaflet top-right status control.
     */
    #drive-map .leaflet-top.leaflet-right {
        top: 54px;
        right: 6px;
    }


    /*
     * Keep the AHEAD category rail away from the header and
     * bottom application navigation.
     */
    .ahead-control-bar {
        top: 52%;

        max-height:
            calc(
                100dvh
                - 190px
            );
    }


    .ahead-control {
        min-width: 64px;
        min-height: 61px;
    }


    .control-icon {
        font-size: 21px;
    }


    .control-label {
        margin-top: 4px;

        font-size: 9px;
    }


    .control-handle {
        right: 72px;
    }
}


/*
 * Extra-small phones need a little more compression.
 */
@media (max-width: 420px) {

    .drive-top-bar {
        grid-template-columns:
            42px
            minmax(70px, auto)
            auto
            auto !important;

        gap: 5px;
    }


    .drive-brand {
        width: 42px;
        height: 42px;
    }


    .drive-heading {
        min-width: 70px;
        min-height: 42px;

        padding-left: 7px;
        padding-right: 7px;
    }


    .drive-heading strong {
        font-size: 15px;
    }


    .drive-heading span {
        font-size: 11px;
    }


    .drive-live-button,
    #mark-camp-button {
        min-height: 42px;

        padding-left: 7px;
        padding-right: 7px;

        font-size: 9px;
    }


    .drive-route-name {
        top: 50px;

        max-width: 56vw;
    }


    #drive-map .leaflet-top.leaflet-right {
        top: 52px;
    }
}