/* ==========================================================================
   Design tokens
   One place for the values the UI repeats: colour, spacing, radius, shadow,
   type scale and stacking order. New UI should reach for these rather than
   inventing another shade of grey or another 17px gap.
   ========================================================================== */
:root {
    /* Surfaces & text */
    --c-surface: #fff;
    --c-surface-muted: #f5f6f7;
    --c-border: #e6e8eb;
    --c-text: #333;
    --c-text-muted: #666;
    --c-text-subtle: #8a8f94;

    /* Accents - one per feature, matching its toggle button */
    --c-primary: #007bff;      /* weather */
    --c-accent: #28a745;       /* measuring */
    --c-info: #17a2b8;         /* snow depth */
    --c-danger: #dc3545;
    --c-warn-bg: #fff8e1;
    --c-warn-text: #8a6100;

    /* Spacing scale (4px base) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;

    /* Radius */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;

    /* Elevation */
    --shadow-1: 0 0 10px 2px rgba(0,0,0,.1);
    --shadow-2: 0 4px 16px rgba(0,0,0,.15);

    /* Type scale */
    --fs-xs: 10px;
    --fs-sm: 11px;
    --fs-md: 13px;
    --fs-lg: 15px;

    /* Stacking order */
    --z-panel: 1001;
    --z-control: 1002;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--c-text);
}

/* The hidden attribute must win over any component display rule */
[hidden] {
    display: none !important;
}

/* ==========================================================================
   Components: floating panel, buttons, stats
   Shared by the measuring overlay; reusable for any future map panel.
   ========================================================================== */
.panel {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    font-size: var(--fs-sm);
    color: var(--c-text);
}

.panel-header {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--c-border);
}

.panel-title {
    margin: 0;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text);
}

/* Each panel's title icon carries its feature's accent, matching its toggle button */
.panel-title-icon {
    width: 14px;
    height: 14px;
    color: var(--c-accent);
    flex: none;
}

.panel-title-icon-weather {
    color: var(--c-primary);
}

.panel-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-1) var(--sp-2);
    padding: 0 var(--sp-3) var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-text-subtle);
}

/* Small print inside a panel: the disclaimer and the zoom warning */
.panel-note {
    margin: 0 var(--sp-3) var(--sp-3);
    padding: var(--sp-2);
    background: var(--c-surface-muted);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--c-text-muted);
    /* Reference text must never grow the panel past the map on a short screen */
    max-height: 45vh;
    overflow-y: auto;
}

.panel-note p {
    margin: 0 0 var(--sp-2);
}

.panel-note p:last-child {
    margin-bottom: 0;
}

.panel-note-warn {
    background: var(--c-warn-bg);
    color: var(--c-warn-text);
}

/* Buttons */
.btn {
    font: inherit;
    font-size: var(--fs-sm);
    line-height: 1;
    border: none;
    border-radius: var(--r-sm);
    padding: 6px var(--sp-2);
    cursor: pointer;
    background: var(--c-surface-muted);
    color: var(--c-text-muted);
    transition: background-color .15s ease, color .15s ease;
}

.btn:hover {
    background: #e9ecef;
    color: var(--c-text);
}

.btn-quiet {
    background: transparent;
}

.btn-danger {
    color: var(--c-danger);
}

.btn-danger:hover {
    background: var(--c-danger);
    color: #fff;
}

.btn-icon {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.btn-link {
    font: inherit;
    font-size: var(--fs-sm);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-link:hover {
    color: #0056b3;
}

/* Compact metric row */
.stat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.stat-value {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: var(--fs-xs);
    color: var(--c-text-subtle);
    white-space: nowrap;
}

#map {
    height: 100vh;
    width: 100%;
    position: relative;
}

#sidebar {
    position: fixed;
    left: -300px; /* Hidden by default */
    top: 0;
    width: 300px;
    height: 100vh;
    background-color: white;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    z-index: 1000;
    overflow-y: auto;
    transition: left 0.3s ease;
}

#sidebar.active {
    left: 0;
}

/* Base class for control buttons */
.control-button {
    position: fixed;
    left: var(--sp-5);
    z-index: var(--z-control);
    background: var(--c-surface);
    border: none;
    border-radius: var(--r-sm);
    padding: 10px;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-button:hover {
    background-color: var(--c-surface-muted);
}

/* Menu toggle button specific positioning */
#menu-toggle {
    top: 20px;
}

/* Hamburger icon */
.hamburger {
    width: 24px;
    height: 20px;
    position: relative;
    display: inline-block;
}

.hamburger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }

/* Hamburger animation */
#menu-toggle.active .hamburger span:nth-child(1) {
    transform: rotate(45deg);
    top: 9px;
}

#menu-toggle.active .hamburger span:nth-child(2) {
    opacity: 0;
}

#menu-toggle.active .hamburger span:nth-child(3) {
    transform: rotate(-45deg);
    top: 9px;
}

/* Weather toggle button specific positioning and behavior */
#weather-toggle {
    top: 80px; /* Position below hamburger menu (20px + 44px button height + 16px gap) */
    transition: all 0.3s ease;
}

#weather-toggle.active {
    background-color: var(--c-primary);
}

#weather-toggle.active:hover {
    background-color: #0056b3;
}

.weather-icon-toggle {
    width: 20px;
    height: 20px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

#weather-toggle.active .weather-icon-toggle {
    opacity: 1;
}

/* Measuring toggle button specific positioning and behavior */
#measure-toggle {
    top: 140px; /* Position below weather toggle (80px + 44px button height + 16px gap) */
    transition: all 0.3s ease;
}

#measure-toggle.active {
    background-color: var(--c-accent);
}

#measure-toggle.active:hover {
    background-color: #218838;
}

.measure-icon svg {
    width: 20px;
    height: 20px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

#measure-toggle.active .measure-icon svg {
    opacity: 1;
    color: white;
}

/* Snow depth toggle button specific positioning and behavior */
#snow-toggle {
    top: 200px; /* Position below measure toggle (140px + 44px button height + 16px gap) */
    transition: all 0.3s ease;
}

#snow-toggle.active {
    background-color: var(--c-info);
}

#snow-toggle.active:hover {
    background-color: #117a8b;
}

.snow-icon svg {
    width: 20px;
    height: 20px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

#snow-toggle.active .snow-icon svg {
    opacity: 1;
    color: white;
}

/* ==========================================================================
   Bottom dock
   Both map panels live here and stack vertically, so opening the measuring
   tool while the forecast timeline is up can never cover one with the other.
   The dock itself is click-through; only the panels take pointer events.
   ========================================================================== */
.map-dock {
    position: fixed;
    bottom: var(--sp-3);
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, calc(100vw - 2 * var(--sp-3)));
    z-index: var(--z-panel);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    pointer-events: none;
}

.map-dock > .panel {
    pointer-events: auto;
    /* Re-runs whenever a panel goes from display:none back into the flow */
    animation: dock-in .2s ease;
}

/* Taken out of the flow entirely, so a closed panel leaves no gap in the dock */
.map-dock > .panel.hidden {
    display: none;
}

@keyframes dock-in {
    from { opacity: 0; transform: translateY(12px); }
}

/* ==========================================================================
   Measuring overlay
   A compact bottom bar: header, one row of metrics, one line of small print.
   It deliberately stays under ~120px tall so it never eats the map on a phone.
   ========================================================================== */
.measuring-overlay {
    width: min(360px, 100%);
}

.measuring-stats {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
}

/* Measuring point markers */
.measuring-point {
    background-color: var(--c-accent);
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.measuring-point:hover {
    background-color: #218838;
    transform: scale(1.1);
}

@media (max-width: 480px) {
    .map-dock {
        width: calc(100vw - 2 * var(--sp-2));
        bottom: var(--sp-2);
    }

    .measuring-stats {
        gap: var(--sp-1);
        padding: var(--sp-2);
    }

    .stat-value {
        font-size: 12px;
    }

    /* Roomier touch targets in the header */
    .measuring-overlay .btn {
        padding: var(--sp-2) var(--sp-2);
    }

    .measuring-overlay .btn-icon {
        width: 32px;
        height: 32px;
        padding: 0;
    }
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    background-color: #f8f9fa;
}

.sidebar-header h2 {
    margin: 0;
    color: #333;
    font-size: 1.5em;
}

.map-style {
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.map-style h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 1.1em;
}

#map-style {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    font-size: 0.9em;
    color: #333;
    cursor: pointer;
}

#map-style:hover {
    border-color: #999;
}

#map-style:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.route-options {
    padding: 20px;
}

.route-category {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.route-category:last-child {
    border-bottom: none;
}

.route-category h3 {
    margin-bottom: 10px;
    color: #333;
    font-size: 1.2em;
    padding-bottom: 5px;
    border-bottom: 2px solid #007bff;
}

.route-category h4 {
    margin: 15px 0 10px 0;
    color: #666;
    font-size: 1em;
    font-weight: 500;
}

.route-category label {
    display: block;
    padding: 8px 0;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 4px;
}

.route-category label:hover {
    background-color: #f5f5f5;
}

/* Map controls container */
.mapboxgl-ctrl-container {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 1001 !important;
}

/* Control groups */
.mapboxgl-ctrl-group {
    background-color: #fff !important;
    border: none !important;
    box-shadow: 0 0 10px 2px rgba(0,0,0,.1) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
}

/* Individual buttons */
.mapboxgl-ctrl-group button,
.mapboxgl-ctrl button {
    width: 36px !important;
    height: 36px !important;
    background-color: #fff !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mapboxgl-ctrl-group button:hover,
.mapboxgl-ctrl button:hover {
    background-color: #f5f5f5 !important;
}

/* Geolocate control specific styles */
.mapboxgl-ctrl-geolocate {
    width: 36px !important;
    height: 36px !important;
    padding: 6px !important;
    background-color: #fff !important;
    border: none !important;
    box-shadow: 0 0 10px 2px rgba(0,0,0,.1) !important;
    border-radius: 4px !important;
    margin-top: 10px !important;
}

.mapboxgl-ctrl-geolocate:hover {
    background-color: #f5f5f5 !important;
}

/* Ensure the geolocate icon is visible */
.mapboxgl-ctrl-geolocate-icon {
    width: 20px !important;
    height: 20px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Scrollbar styling */
#sidebar::-webkit-scrollbar {
    width: 8px;
}

#sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#sidebar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

#sidebar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.info-text {
    font-size: 0.8em;
    color: #666;
    margin-top: 5px;
    font-style: italic;
}

.opacity-control {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.opacity-control input[type="range"] {
    flex: 1;
    height: 5px;
    -webkit-appearance: none;
    background: #ddd;
    border-radius: 5px;
    outline: none;
}

.opacity-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background: #4CAF50;
    border-radius: 50%;
    cursor: pointer;
}

.opacity-control input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #4CAF50;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

#opacity-value {
    min-width: 40px;
    text-align: right;
}

.snow-popup {
    background-color: white;
    padding: 5px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    font-size: 14px;
    border: 1px solid #ccc;
}

.mapboxgl-popup-content {
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.snow-popup-content {
    color: #333;
    font-weight: bold;
}

/* Ensure map controls are positioned correctly with the sidebar */
.mapboxgl-control-containerXXX {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1001; /* Higher than sidebar */
}

/* Enhanced popup styling */
.mapboxgl-popup {
    max-width: 200px !important;
}

.mapboxgl-popup-content {
    padding: 12px 15px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.2) !important;
    background-color: white !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

.snow-popup-content {
    color: #333 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-align: center !important;
    padding: 5px !important;
}

.mapboxgl-popup-close-button {
    font-size: 16px !important;
    padding: 5px 8px !important;
    color: #666 !important;
}

.mapboxgl-popup-close-button:hover {
    background-color: #f5f5f5 !important;
    color: #333 !important;
}

.mapboxgl-popup-tip {
    border-top-color: rgba(0,0,0,0.1) !important;
}

/* Accordion styles */
.accordion {
    margin-left: 20px;
}

.accordion-toggle {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: left;
    font-size: 0.9em;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.accordion-toggle:hover {
    background-color: #e9ecef;
}

.accordion-toggle::after {
    content: '+';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    transition: transform 0.2s;
}

.accordion-toggle.active::after {
    transform: translateY(-50%) rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
}

.accordion-content.active {
    max-height: 500px; /* Adjust this value based on your content */
}

.accordion-content label {
    display: block;
    padding: 8px 10px;
    font-size: 0.9em;
    color: #555;
    cursor: pointer;
    transition: background-color 0.2s;
}

.accordion-content label:hover {
    background-color: #f5f5f5;
}

/* Remove the old sub-options styles since we're using accordion now */
.sub-options {
    display: none;
}

/* Map click popup styles */
.map-click-popup {
    padding: 5px;
}

.map-click-popup h4 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 1.1em;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.map-click-popup p {
    margin: 5px 0;
    color: #666;
    font-size: 0.9em;
}

.map-click-popup .elevation-info {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 0.9em;
}

.map-click-popup .snow-depth-info {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 0.9em;
}

.map-click-popup .snow-depth-info .observation-time {
    font-size: 0.8em;
    color: #888;
    margin-top: 5px;
    font-style: italic;
}

.map-click-popup .snow-depth-info .station-name {
    font-size: 0.85em;
    color: #666;
    margin: 5px 0;
}

.map-click-popup .snow-depth-info a {
    color: #007bff;
    text-decoration: none;
}

.map-click-popup .snow-depth-info a:hover {
    text-decoration: underline;
}

.map-click-popup .snow-depth-info .snow-time {
    color: #666;
    font-size: 0.8em;
    font-style: italic;
    margin: 4px 0;
}

.map-click-popup .snow-depth-info .snow-source {
    color: #666;
    font-size: 0.75em;
    margin: 4px 0;
}

.map-click-popup .snow-depth-info .snow-source a {
    color: #007bff;
    text-decoration: none;
}

.map-click-popup .snow-depth-info .snow-source a:hover {
    text-decoration: underline;
}

/* Mapbox Geocoder styling */

.mapboxgl-ctrl-top-left {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
}
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--pin-right > *{
    top: 0px !important;
}

/* Mapbox Search Box styling */
#search-container {
    position: fixed !important;
    top: 21px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1 !important;
}

mapbox-search-box {
    width: 200px !important;
    display: block !important;
}

mapbox-search-box input::placeholder {
    color: #888 !important;
}

mapbox-search-box .mapbox-search-box__suggestions {
    background: white !important;
    border-radius: 4px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
    margin-top: 5px !important;
}

mapbox-search-box .mapbox-search-box__suggestion {
    padding: 8px 12px !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
}

mapbox-search-box .mapbox-search-box__suggestion:hover {
    background-color: #f5f5f5 !important;
}

/* Snow section styling */
.snow-section {
    padding: 20px;
    border-top: 1px solid #eee;
}

.snow-section h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 1.1em;
}

.snow-popup-content {
    color: #333 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-align: center !important;
    padding: 5px !important;
}

/* Weather marker styles */
.weather-marker {
    cursor: pointer;
}

.weather-box {
    background: transparent;
    border: none;
    padding: 4px;
    min-width: auto;
    text-align: center;
    position: relative;
    backdrop-filter: blur(2px);
}

.weather-box::before {
    display: none;
}

.weather-icon-container {
    margin: 2px 0;
}

.weather-icon-small {
    width: 35px;
    height: 35px;
    object-fit: contain;
    drop-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.weather-temp-main {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    margin: 2px 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    background: rgba(0,0,0,0.6);
    border-radius: 4px;
    padding: 2px 6px;
}

.weather-details-small {
    font-size: 8px;
    color: #ffffff;
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    background: rgba(0,0,0,0.6);
    border-radius: 4px;
    padding: 2px 4px;
    margin-top: 2px;
}

.weather-details-small div {
    margin: 1px 0;
}

/* ==========================================================================
   Weather forecast timeline
   Same panel shell, type scale and small print as the measuring overlay -
   header, the slider itself, one line of footer text.
   ========================================================================== */
.weather-timeline {
    width: 100%;
}

/* Current forecast time, as a pill in the panel header */
.timeline-badge {
    background: var(--c-primary);
    color: #fff;
    padding: 3px var(--sp-2);
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
}

.timeline-badge sup {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.9);
}

.timeline-track {
    position: relative;
    padding: var(--sp-2) var(--sp-3) var(--sp-1);
}

#weather-timeline-slider {
    width: 100%;
    height: 5px;
    margin: 0;
    background: #e9ecef;
    border-radius: 3px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    z-index: 3;
}

#weather-timeline-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--c-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
    transition: background-color .2s ease, transform .2s ease;
}

#weather-timeline-slider::-webkit-slider-thumb:hover {
    background: #0056b3;
    transform: scale(1.1);
}

#weather-timeline-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--c-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
    transition: background-color .2s ease, transform .2s ease;
}

#weather-timeline-slider::-moz-range-thumb:hover {
    background: #0056b3;
    transform: scale(1.1);
}

/* Tick marks sit just under the track; each step in the forecast gets one */
.timeline-marks {
    position: relative;
    height: 10px;
    margin-top: var(--sp-2); /* clears the slider thumb, which overhangs the track */
    pointer-events: none;
}

.timeline-mark {
    position: absolute;
    top: 0;
    width: 1px;
    height: 6px;
    background: #c7ccd1;
    transform: translateX(-50%);
}

.timeline-mark.major {
    height: 10px;
    background: #9aa0a6;
}

/* The two ends of the scale, so a bare slider still says what it spans */
.timeline-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-xs);
    color: var(--c-text-subtle);
}

@media (max-width: 480px) {
    .weather-timeline .btn-icon {
        width: 32px;
        height: 32px;
        padding: 0;
    }
}