html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- RoadTrip top nav ---- */
.rt-topnav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    padding: 0.5rem 1rem;
    background-image: linear-gradient(90deg, rgb(5, 39, 103) 0%, #3a0647 100%);
    position: sticky;
    top: 0;
    /* Above the planner overlays (rail 1200 / drawer 1100) so the mobile hamburger
       dropdown isn't hidden behind them. */
    z-index: 1300;
}

.rt-brand {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
    margin-right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.rt-brand-mark {
    width: 1.55em;
    height: 1.55em;
    flex-shrink: 0;
    display: block;
}

.rt-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.rt-link {
    color: #d7d7d7;
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.95rem;
}

.rt-link:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.rt-link.active {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Right-anchor the account/sign-in link so it sits opposite the section links
   (it took over the far-right slot the old About link used to hold). */
.rt-nav .rt-link:last-child {
    margin-left: auto;
}

/* Hamburger toggle — hidden on desktop, shown on mobile (see media query below). */
.rt-navtoggle {
    display: none;
    margin-left: auto;
    background: transparent;
    border: 0;
    color: #f6f1e7;
    font-size: 1.5rem;
    line-height: 1;
    padding: 2px 8px;
    cursor: pointer;
}

/* ---- Mobile nav: collapse the links behind a hamburger so the bar stays slim ---- */
@media (max-width: 640px) {
    .rt-topnav {
        flex-wrap: nowrap;
        padding: 0.5rem 0.9rem;
        gap: 0;
    }
    .rt-navtoggle { display: block; }
    /* The links become a full-width dropdown below the bar (absolute, so they don't
       add to the bar's height). Positioned against the sticky topnav. */
    .rt-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 4px 0;
        background: var(--hs-forest-deep, #152c1d);
        border-bottom: 3px solid var(--hs-rust, #c15a26);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
        z-index: 1001;
    }
    .rt-nav.open { display: flex; }
    /* On the planner, start the dropdown at the right edge of the 56px icon rail instead of
       spanning full width, so it doesn't cover the trip menus. Scoped to the planner (the rail
       only exists there); every other page keeps the full-width dropdown. */
    .page:has(.rt-plan) .rt-nav {
        left: 56px;
    }
    .rt-nav .rt-link {
        margin: 0;
        padding: 0.75rem 1.1rem;
        border-radius: 0;
        font-size: 1rem;
    }
    /* The low-value external "About" link is dropped on mobile to keep the bar clean. */
    .rt-about { display: none; }
}

/* ---- RoadTrip map + planner ---- */
#map {
    height: 70vh;
    min-height: 420px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    z-index: 0;
}

.rt-marker span {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.rt-day-marker span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
}

/* Reviews modal. */
.rt-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.rt-modal {
    background: #fff;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    width: 100%;
    max-width: 460px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.rt-review-list {
    max-height: 40vh;
    overflow-y: auto;
}

/* Clickable star rating input. */
.rt-star {
    font-size: 1.5rem;
    line-height: 1;
    color: #d1d5db;
    cursor: pointer;
    user-select: none;
}

.rt-star.on {
    color: #f59e0b;
}

/* Compact rating shown next to a stop in the list. */
.rt-rating {
    color: #f59e0b;
    white-space: nowrap;
}

/* Draggable route-editing handle at each routing waypoint. */
.rt-edit-handle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #111827;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    cursor: grab;
}

.rt-edit-handle:active {
    cursor: grabbing;
}

.rt-legend span.swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.stop-list {
    max-height: 70vh;
    overflow-y: auto;
}

.rt-city-row {
    cursor: pointer;
    user-select: none;
}

.rt-city-row:hover {
    background-color: #e9ecef;
}

.rt-chevron {
    display: inline-block;
    width: 1rem;
}

/* ============ Adventure theme (HighwayScout) ============ */
:root {
    --hs-forest: #2d5a3d;
    --hs-forest-dark: #1e3d2a;
    --hs-forest-deep: #152c1d;
    --hs-rust: #c15a26;
    --hs-rust-dark: #9f461c;
    --hs-sand: #f6f1e7;
    --hs-sand-deep: #e7dcc7;
    --hs-ink: #2c2a25;
}

html, body {
    font-family: 'Cabin', 'Segoe UI', system-ui, sans-serif;
    background-color: var(--hs-sand);
    color: var(--hs-ink);
}

h1, h2, h3, h4, h5, h6, .rt-brand {
    font-family: 'Oswald', 'Cabin', sans-serif;
    letter-spacing: 0.02em;
}

/* Links + primary actions → trail green */
a, .btn-link { color: var(--hs-forest); }
a:hover, .btn-link:hover { color: var(--hs-forest-dark); }

.btn { border-radius: 7px; }

.btn-primary {
    background-color: var(--hs-forest);
    border-color: var(--hs-forest-dark);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--hs-forest-dark) !important;
    border-color: var(--hs-forest-deep) !important;
    color: #fff;
}
.btn-outline-primary { color: var(--hs-forest); border-color: var(--hs-forest); }
.btn-outline-primary:hover, .btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary {
    background-color: var(--hs-forest) !important;
    border-color: var(--hs-forest) !important;
    color: #fff !important;
}

/* Forest focus ring + checked controls instead of Bootstrap blue */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(45, 90, 61, 0.5);
    border-color: var(--hs-forest);
}
.form-check-input:checked { background-color: var(--hs-forest); border-color: var(--hs-forest); }
.badge.bg-primary { background-color: var(--hs-forest) !important; }

.loading-progress circle:last-child { stroke: var(--hs-forest); }
code { color: var(--hs-rust-dark); }

/* Top nav → national-park signboard */
.rt-topnav {
    background-image: linear-gradient(105deg, var(--hs-forest-deep) 0%, var(--hs-forest) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border-bottom: 3px solid var(--hs-rust);
}
.rt-brand {
    color: #f6f1e7;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.rt-link { color: #e7efe4; }
.rt-link:hover { background-color: rgba(255, 255, 255, 0.14); color: #fff; }
.rt-link.active { background-color: rgba(255, 255, 255, 0.24); color: #fff; }
.rt-about { color: #dbe6d8; }

/* Warm "paper" cards + framed map */
.card {
    border-color: var(--hs-sand-deep);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(44, 42, 37, 0.08);
    background-color: #fffdf8;
}
#map {
    border: 2px solid var(--hs-sand-deep);
    border-radius: 12px;
}
.rt-city-row:hover { background-color: var(--hs-sand-deep); }

/* Hero heading a touch bolder/roomier */
.display-5 { font-weight: 700; letter-spacing: 0.01em; }

/* Styled hover tooltip — shown by js/site.js after ~0.6s of hovering an element with
   [data-tip]. A single floating element on <body> (position:fixed, viewport-clamped),
   so it's always fully visible — never clipped by a scrolling drawer or list. */
.hs-tip {
    position: fixed;
    z-index: 2000;
    background: #24302a;
    color: #f6f1e7;
    padding: 6px 9px;
    border-radius: 6px;
    font-family: 'Cabin', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    width: max-content;
    max-width: 230px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.hs-tip.show { opacity: 1; }

/* Places autocomplete dropdown */
.rt-autocomplete { position: relative; }
.rt-suggestions {
    position: absolute;
    z-index: 1200;
    left: 0; right: 0; top: 100%;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--hs-sand-deep);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    max-height: 240px;
    overflow-y: auto;
}
.rt-suggestions li {
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 1px solid #f1ece0;
}
.rt-suggestions li:last-child { border-bottom: none; }
.rt-suggestions li:hover,
.rt-suggestions li.active { background: var(--hs-sand-deep, #e7dcc7); }
/* ============ Sharing: discover cards, photo gallery, lightbox ============ */
.rt-discover-card {
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.rt-discover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.rt-cover {
    height: 150px;
    background-size: cover;
    background-position: center;
    background-color: var(--hs-sand, #efe7d6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;   /* the map-preview image absolutely fills it */
    overflow: hidden;
}
.rt-cover-emoji { font-size: 3rem; opacity: 0.5; }
/* Mapbox static-map route preview shown over the emoji when a card has no photo (onerror
   removes it, revealing the emoji). */
.rt-cover-map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Trip-section cards on Discover have no photo — give them a distinct forest cover. */
.rt-cover--section {
    background: linear-gradient(135deg, var(--hs-forest, #2d5a3d), var(--hs-forest-deep, #152c1d));
}
.rt-cover--section .rt-cover-emoji { opacity: 0.9; }

/* Small colored category dot next to a stop name. */
.rt-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Trip photo gallery. */
.rt-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}
.rt-gallery-item {
    margin: 0;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    background: #f1ece0;
}
.rt-gallery-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}
.rt-gallery-item figcaption {
    font-size: 0.72rem;
    padding: 2px 5px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rt-lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

/* Thumbnails in the Plan page's photo manager. */
.rt-photo-thumb { position: relative; }
.rt-photo-thumb .rt-photo-del {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 0 6px;
    line-height: 1.3;
}

/* Overnight-town chooser on the Plan page. */
/* Overnight-towns picker laid out as a 2-column table: borders form the grid, each cell a row. */
.rt-overnight-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--hs-sand-deep, #e7dcc7);
    border-radius: 6px;
    overflow: hidden;
    align-items: stretch;
}
.rt-overnight-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 8px;
    min-height: 2.1rem;
    border: 0;
    border-bottom: 1px solid var(--hs-sand-deep, #e7dcc7);
    border-right: 1px solid var(--hs-sand-deep, #e7dcc7);
    border-radius: 0;
    background: #fffdf8;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
}
.rt-overnight-item:nth-child(2n) { border-right: 0; }            /* no divider after the 2nd column */
.rt-overnight-item:has(input:checked) {
    background: var(--hs-forest, #2d5a3d);
    color: #fff;
}
.rt-overnight-item input { cursor: pointer; }
/* Let the town name take the space and truncate; keep the day selector compact so both fit a cell. */
.rt-overnight-item > label { flex: 1 1 auto; min-width: 0; }
.rt-overnight-item > label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-overnight-item select { flex: 0 0 auto; min-width: 5rem !important; max-width: 6.5rem; font-size: 0.8rem; }

/* ============ Plan page: full-screen map + slide-in menus ============ */
/* Break the Plan page out of the padded content column and fill the viewport. */
.page:has(.rt-plan) main { display: flex; }
.content:has(.rt-plan) {
    padding: 0 !important;
    display: flex;
    flex: 1;
    min-height: 0;
}
.rt-plan {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
/* Map fills everything to the right of the rail. */
.rt-plan #map {
    position: absolute;
    inset: 0 0 0 56px;
    width: auto;
    height: auto;
    min-height: 0;
    border: none;
    border-radius: 0;
}

/* Always-visible icon rail. */
.rt-rail {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 56px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 6px;
    background: var(--hs-forest-deep, #152c1d);
}
.rt-rail-btn {
    border: 0;
    background: transparent;
    color: rgba(246, 241, 231, 0.8);
    padding: 9px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    font-size: 0.62rem;
    line-height: 1.05;
}
.rt-rail-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); color: #fff; }
.rt-rail-btn.active { background: var(--hs-rust, #c15a26); color: #fff; }
.rt-rail-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.rt-rail-ico {
    width: 22px;
    height: 22px;
    display: block;
    fill: none;
    stroke: currentColor;      /* inherits the button colour: sand, white when active */
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rt-rail-lbl { letter-spacing: 0.01em; }

/* The slide-in menu panel. */
.rt-drawer {
    position: absolute;
    top: 0; bottom: 0; left: 56px;
    width: min(360px, calc(100vw - 56px));
    z-index: 1100;
    background: #fffdf8;
    box-shadow: 6px 0 26px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    transform: translateX(calc(-100% - 56px));
    transition: transform 0.22s ease;
}
/* NOTE: "none" (not translateX(0)) — a transform, even an identity one, would make the
   drawer the containing block for position:fixed children, which knocks the autocomplete
   dropdown off its input. Transitions treat none as identity, so the slide still animates. */
.rt-drawer.open { transform: none; }
.rt-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--hs-sand-deep, #e7dcc7);
    background: var(--hs-sand, #f6f1e7);
    flex-shrink: 0;
}
.rt-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
}
/* Inside a drawer the whole body scrolls, so let inner lists flow full-length. */
.rt-drawer .stop-list { max-height: none; overflow: visible; }

/* One-tap saved-address chips under the Start/Destination fields (from the user's profile). */
.rt-addr-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.rt-addr-chip {
    border: 1px solid var(--hs-sand-deep, #e7dcc7);
    background: #fffdf8;
    color: var(--hs-forest, #2d5a3d);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.8rem;
    line-height: 1.5;
    cursor: pointer;
}
.rt-addr-chip:hover { background: var(--hs-sand-deep, #e7dcc7); }

/* Segmented sub-tabs pinned at the top of the grouped drawers (Route→Schedule/Directions,
   Info→Summary/Notes). Sits between the fixed head and the scrolling body. */
.rt-subtabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: var(--hs-sand, #f6f1e7);
    border-bottom: 1px solid var(--hs-sand-deep, #e7dcc7);
    flex-shrink: 0;
}
.rt-subtab {
    flex: 1;
    border: 1px solid var(--hs-sand-deep, #e7dcc7);
    background: #fffdf8;
    color: var(--hs-ink, #2c2a25);
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.rt-subtab.active {
    background: var(--hs-forest, #2d5a3d);
    border-color: var(--hs-forest, #2d5a3d);
    color: #fff;
}
.rt-subtab:hover:not(.active) { background: var(--hs-sand-deep, #e7dcc7); }

/* Empty state shown in a menu before a route exists (Stops / Steps / Info). */
.rt-empty {
    text-align: center;
    max-width: 22rem;
    margin: 1.5rem auto;
    padding: 1rem;
}
.rt-empty-ico { font-size: 2.5rem; line-height: 1; margin-bottom: 0.5rem; opacity: 0.85; }

/* The additional-stops list scrolls within the Trip menu. */
.rt-stops-scroll {
    max-height: 34vh;
    overflow-y: auto;
}

/* Compact up/down reorder control on each additional-stop row. */
.rt-reorder {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
}
.rt-reorder .btn {
    padding: 0 5px;
    font-size: 0.6rem;
    line-height: 1.15;
    border-radius: 4px;
}

@media (max-width: 640px) {
    /* The drag handle does nothing on touch (HTML5 drag-and-drop doesn't fire), so hide
       it on phones — the up/down buttons are the reorder control there. */
    .rt-drag-handle { display: none; }
}

/* Admin panel tab bar. */
.rt-admin-tabs { flex-wrap: wrap; gap: 4px; }
.rt-admin-tabs .nav-link { border: 1px solid var(--hs-sand-deep, #e7dcc7); cursor: pointer; }

/* Floating "nights without a hotel" prompt over the map. */
.rt-hotel-banner {
    position: absolute;
    left: 50%;
    bottom: 46px; /* clear the collapsed bottom-timeline bar */
    transform: translateX(-50%);
    z-index: 1150;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--hs-forest-deep, #152c1d);
    color: #f6f1e7;
    font-size: 0.9rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

/* Landing hero (inline SVG art + overlaid title). */
.rt-home { padding: 0.5rem; }
.rt-hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin: 0.25rem 0 1.25rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}
.rt-hero-art { display: block; width: 100%; height: clamp(190px, 32vw, 320px); }
.rt-hero-text {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 1rem 1.4rem 1.2rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.rt-hero-title { font-size: clamp(1.9rem, 5vw, 3.1rem); font-weight: 800; margin: 0;
    display: inline-flex; align-items: center; gap: 0.35em; }
.rt-hero-mark { width: 1em; height: 1em; flex-shrink: 0; display: block; }
.rt-hero-tag { font-size: clamp(1rem, 2.4vw, 1.45rem); margin: 0.25rem 0 0; opacity: 0.96; }
.rt-home-body { padding: 0 0.5rem; }
/* Landing CTA: one dominant "Plan a trip" action, with account as a quiet follow-up line. */
.rt-home-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-top: 0.75rem;
}
.rt-home-secondary { margin-top: 1.25rem; margin-bottom: 0; }

/* Bottom collapsible chronological timeline (overlays the map's bottom edge). */
.rt-timeline {
    position: absolute;
    left: 56px; right: 0; bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    max-height: 42%;
    background: #fffdf8;
    border-top: 1px solid #d1d5db;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    transition: left 0.2s ease; /* slide aside with an opening drawer */
}
/* When a slide-in menu is open, start the timeline just past it instead of behind it. */
.rt-timeline--shifted { left: calc(56px + min(360px, calc(100vw - 56px))); }
.rt-timeline-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: none;
    background: var(--hs-sand-deep, #f3ead9);
    color: #1f2937;
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.rt-timeline-body {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 0.8rem 0.7rem;
    align-items: stretch;
}
.rt-timeline-day {
    flex: 0 0 auto;
    min-width: 160px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    text-align: left;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    padding: 0.4rem 0.55rem;
    cursor: pointer;
    font-size: 0.76rem;
    line-height: 1.3;
}
.rt-timeline-day:hover { border-color: #6b7280; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.rt-tl-head { font-weight: 600; margin-bottom: 0.2rem; flex: 0 0 auto; }
.rt-tl-miles { color: #6b7280; font-weight: 400; }
/* Scrollable stops area so a card shows the full day's plan and scrolls if it's long. */
.rt-tl-stops { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.rt-tl-stop { white-space: normal; overflow-wrap: anywhere; margin-bottom: 0.15rem; }
.rt-tl-waypoint { font-weight: 600; }
.rt-tl-time { color: #6b7280; font-size: 0.85em; }
.rt-tl-more { color: #6b7280; }
.rt-tl-overnight { margin-top: 0.25rem; color: #7c3f00; flex: 0 0 auto; }

/* Per-stop travel/dwell line under each stop in the day-by-day panel. */
.rt-leg { font-size: 0.85em; line-height: 1.4; }
.rt-leg-time { width: 3.6rem; padding: 0 0.25rem; height: 1.4rem; margin: 0 0.15rem; }

/* Per-stop cost breakdown table (Notes page). */
.rt-cost-table td, .rt-cost-table th { padding: 0.25rem 0.35rem; vertical-align: middle; }
.rt-cost-table input { text-align: right; }

/* Compact "move to day" selector on each day-by-day item. */
.rt-day-select { width: auto; min-width: 4.5rem; padding: 0 1.3rem 0 0.35rem; height: 1.5rem; font-size: 0.8rem; }

/* Sticky town headers in the stops list: as you scroll a town's stops, its header (with the
   collapse chevron) pins to the top of the drawer so you can collapse it without scrolling back up. */
.rt-drawer-body .rt-city-row td {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--hs-sand-deep, #e7dcc7);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

/* Turn-by-turn directions list. */
.rt-steps { margin: 0; padding-left: 1.3rem; }
.rt-step { margin-bottom: 0.5rem; line-height: 1.35; }
.rt-step-stop {
    margin-top: 3px;
    padding: 2px 6px;
    background: var(--hs-sand, #f6f1e7);
    border-left: 3px solid var(--hs-forest, #2d5a3d);
    border-radius: 3px;
}