/* app.css - Main application styling */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Kanit (the brand text face, see tokens.css) on every element, including buttons and inputs */
button,
input,
select,
textarea,
body {
    font-family: var(--font-text);
}

/* Faster tooltip appearance */
[title] {
    position: relative;
}

[title]:hover::after {
    animation: fadeIn 0.1s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

body {
    font-family: var(--font-text);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Side ribbon (left): granite, the app's own menu glyphs; expanded shows labels. Geometry refined in the theme layer at the end. */
.side-ribbon {
    width: 56px;
    flex: none;
    height: 100%;
    background: var(--rail-bg);
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.2s ease;
}

.side-ribbon.expanded {
    width: 220px;
}

.ribbon-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
    overflow-y: auto;
}

.ribbon-bottom {
    flex: none;
    padding: 4px 0 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ribbon-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 44px;
    padding: 0 18px;
    border: none;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.ribbon-item:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ribbon-item i {
    width: 20px;
    font-size: 17px;
    text-align: center;
    flex: none;
}

/* Labels keep their expanded layout at all times (clipped by the ribbon's overflow) and only fade: nothing re-wraps or
   jumps while the width animates. Expanding: fade in once the ribbon is (almost) open; collapsing: gone at once. */
.ribbon-item span, .ribbon-nickname, .ribbon-wordmark { transition: opacity 0.12s ease 0.12s; }
.side-ribbon:not(.expanded) .ribbon-item span,
.side-ribbon:not(.expanded) .ribbon-nickname,
.side-ribbon:not(.expanded) .ribbon-wordmark { opacity: 0; transition-delay: 0s; transition-duration: 0.05s; }
.ribbon-items { overflow-x: hidden; }   /* the always-laid-out labels must not add a horizontal scrollbar */

.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    width: 380px;
    height: 100%;
    background: var(--panel-bg);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 100;
    position: relative;
    min-width: 240px;
}

/* Collapsed column (resizable() in app.js): nothing left of it but its grab border beside it */
.sidebar.is-collapsed, .ribbon-panel.is-collapsed { width: 0 !important; min-width: 0 !important; border-right: none; visibility: hidden; }
/* The grab border of a side column: a visible bar (a sibling of the column, so it stays at the edge at width 0) with a
   grip glyph; drag resizes, a click collapses / expands. Light next to the sidebar, granite next to the ribbon panel. */
.panel-grip {
    position: relative;
    width: 8px;
    flex: none;
    z-index: 102;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--inset-bg);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    cursor: ew-resize;
    transition: background-color var(--dur-fast);
}
.panel-grip[hidden] { display: none; }
.panel-grip:hover, .panel-grip.is-dragging { background: rgba(204, 128, 71, 0.35); }
.panel-grip-button {
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-faint);
    font-size: 10px;
    cursor: inherit;
}
.panel-grip:hover .panel-grip-button, .panel-grip.is-dragging .panel-grip-button { color: var(--accent-press); }
.sidebar.is-collapsed + .panel-grip, .ribbon-panel.is-collapsed + .panel-grip { cursor: pointer; }
#ribbon-panel-grip { background: var(--ribbon-card-bg); border-color: rgba(255, 255, 255, 0.1); }
#ribbon-panel-grip .panel-grip-button { color: var(--rail-muted); }
#ribbon-panel-grip:hover, #ribbon-panel-grip.is-dragging { background: rgba(204, 128, 71, 0.45); }

.sidebar h3 {
    font-size: 16px;
    color: var(--text);
    margin-bottom: 12px;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-muted);
    transition: color 0.2s;
}

.btn-icon:hover {
    color: var(--text);
}

/* Routing options in sidebar */
.routing-options-sidebar {
    border-bottom: 0.5px solid var(--line);
    background: var(--panel-bg);
}

.routing-options-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    transition: background 0.2s;
}

.routing-options-header:hover {
    background: var(--inset-bg);
}

.routing-options-header i {
    color: var(--text-muted);
    font-size: 12px;
    transition: transform 0.3s;
    transform: rotate(180deg);
}

.routing-options-header.collapsed i {
    transform: rotate(0deg);
}

.routing-options-content {
    padding: 10px 2px 6px;
    overflow: visible;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 1400px;   /* tallest variant: pedestrian (sliders + stepper + language) */
    opacity: 1;
}

.routing-options-content.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    /* Clip + hide once faded: with overflow visible its invisible controls spilled over the waypoint list
       and swallowed wheel scrolling and clicks there */
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0s linear 0.3s;
}

.compact-row-layout {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

/* Styled select wrapper */
.select-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.select-wrapper.mini {
    flex: 1;
}

.select-icon {
    position: absolute;
    left: 12px;
    color: var(--accent);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.select-arrow {
    position: absolute;
    right: 12px;
    color: var(--text-faint);
    font-size: 12px;
    pointer-events: none;
    z-index: 1;
}

.styled-select {
    flex: 1;
    width: 100%;
    padding: 10px 32px 10px 38px;
    border: 2px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.styled-select.mini {
    padding: 10px 28px 10px 32px;
    font-size: 13px;
}

.styled-select:hover {
    border-color: var(--accent);
    background: var(--panel-bg);
}

.styled-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(204, 128, 71, 0.1);
}

/* Generic dropdown styles */
.dropdown-wrapper {
    position: relative;
    flex: 1;
}

.dropdown-wrapper.mini {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dropdown-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 2px;
}

.dropdown-btn {
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.dropdown-btn span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 2px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    display: none;
}

/* Only route type dropdown should have no max-height */
#route-type-dropdown-menu {
    max-height: none;
}

/* Other dropdowns can scroll if needed */
#vehicle-dropdown-menu,
#hilliness-dropdown-menu,
#windingness-dropdown-menu,
#avoid-dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

.dropdown-menu.open {
    display: block;
}

.dropdown-option {
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dropdown-option i {
    width: 18px;
    min-width: 18px;
    text-align: center;
    color: var(--text-muted);
    padding-top: 2px;
}

.dropdown-option-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dropdown-option-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.dropdown-option-description {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
    white-space: normal;
}

.dropdown-option:hover {
    background: var(--panel-bg);
    border-radius: 8px;
}

.dropdown-option:hover i {
    color: var(--accent);
}

.dropdown-option:hover .dropdown-option-title {
    color: var(--accent);
}

.dropdown-option.selected {
    background: var(--inset-bg);
    border-radius: 8px;
}

.dropdown-option.selected i {
    color: var(--accent);
}

.dropdown-option.selected .dropdown-option-title {
    color: var(--accent);
    font-weight: 600;
}

.dropdown-option.hidden {
    display: none;
}

/* Avoid dropdown specific */
.avoid-dropdown-wrapper {
    position: relative;
    margin-bottom: 8px;
}

#avoid-dropdown-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkmark {
    display: inline-block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 2px solid var(--line-strong);
    border-radius: 4px;
    background: white;
    transition: all 0.2s;
    position: relative;
}

/* Routing toggle (checkbox switch in the routing options) */
.routing-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 8px 0;
}

.routing-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.routing-toggle-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    position: relative;
    padding-left: 28px;
}

.routing-toggle-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid var(--line-strong);
    border-radius: 4px;
    background: white;
    transition: all 0.2s;
}

.routing-toggle input[type="checkbox"]:checked ~ .routing-toggle-label::before {
    background: var(--accent);
    border-color: var(--accent);
}

.routing-toggle input[type="checkbox"]:checked ~ .routing-toggle-label::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 10px;
}

/* Routing options controls (rendered by renderRoutingOptions) */
.routing-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0;
}

.routing-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.routing-seg {
    display: flex;
    background: var(--line);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.routing-seg-btn {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 7px 4px;
    font: inherit;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.routing-seg-btn i {
    font-size: 16px;
}

/* Vehicle glyphs: the iOS app's template icons (Assets.xcassets → public/images/vehicles/*.png, 150 × 90),
   drawn in the current text colour as CSS masks so selected / hover states just work */
.vehicle-icon {
    display: inline-block;
    width: 26px;
    height: 16px;
    vertical-align: -3px;
    background-color: currentColor;
    -webkit-mask: var(--vehicle-mask) center / contain no-repeat;
    mask: var(--vehicle-mask) center / contain no-repeat;
}
.vehicle-icon--car        { --vehicle-mask: url(/public/images/vehicles/car.png); }
.vehicle-icon--motorcycle { --vehicle-mask: url(/public/images/vehicles/motorcycle.png); }
.vehicle-icon--scooter    { --vehicle-mask: url(/public/images/vehicles/scooter.png); }
.vehicle-icon--bicycle    { --vehicle-mask: url(/public/images/vehicles/bicycle.png); }
.vehicle-icon--rv         { --vehicle-mask: url(/public/images/vehicles/rv.png); }
.vehicle-icon--pedestrian { --vehicle-mask: url(/public/images/vehicles/pedestrian.png); }

.routing-seg-btn:hover:not(:disabled) {
    color: var(--text);
}

.routing-seg-btn.selected {
    background: #fff;
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.routing-seg-btn:disabled {
    color: var(--text-faint);
    cursor: not-allowed;
}

.routing-slider {
    margin: 10px 0 4px;
}

.routing-slider input[type="range"] {
    width: 100%;
    margin: 6px 0 2px;
    accent-color: var(--accent);
}

.routing-slider-ends {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
}

.routing-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0;
}

.routing-stepper-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.routing-stepper-value {
    min-width: 84px;
    text-align: center;
    font-size: 13px;
    color: var(--text);
}

.routing-stepper-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
    font-size: 11px;
    cursor: pointer;
}

.routing-stepper-btn:hover {
    background: var(--panel-bg);
}

.routing-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    background: #fff;
    color: var(--text);
}

/* Waypoints */
.waypoints-section {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.waypoints-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.waypoints-section h3 {
    font-size: 16px;
    color: var(--text);
    margin: 0;
    font-weight: 600;
}

.btn-clear {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
}

.btn-clear:hover:not(:disabled) {
    color: var(--danger);
}

.btn-clear:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.waypoints-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--text-muted);
    font-size: 14px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
}

.btn-icon:hover:not(:disabled) {
    color: var(--text-2);
}

.btn-icon.active {
    color: var(--accent);
}

.btn-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.waypoints-container {
    margin-bottom: 12px;
    padding: 20px 0; /* Add padding for easier drop zone at top/bottom */
    min-height: 60px; /* Ensure there's always a drop target area */
}

.waypoints-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.waypoints-empty-state p {
    margin: 0;
    color: var(--text-faint);
    font-size: 14px;
    line-height: 1.5;
}

.waypoint-item {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
    position: relative;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.waypoint-item-main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 8px;
    align-items: start;
}

.waypoint-item input {
    cursor: text;
}

.waypoint-item button {
    cursor: pointer;
}

.waypoint-item-content {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-bg);
    transition: background 0.2s, border-color 0.2s;
}

.waypoint-content-main {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.waypoint-coordinates {
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
    padding: 4px 8px;
    text-align: left;
    letter-spacing: 0.3px;
}

.waypoint-arrival-info {
    font-size: 11px;
    color: var(--text);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    text-align: right;
}

.waypoint-arrival-info i {
    font-size: 10px;
    color: var(--text);
}

/* Collapsed row: the whole card expands it on click; expanded: the icon collapses it */
.waypoint-item:not(.expanded) .waypoint-item-content,
.waypoint-item:not(.expanded) .waypoint-name-input,
.waypoint-item.expanded .waypoint-icon {
    cursor: pointer;
}

.waypoint-item-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.waypoint-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.waypoint-expandable {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.waypoint-item.expanded .waypoint-expandable {
    grid-template-rows: 1fr;
}

.waypoint-expandable > div {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px
}

.waypoint-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.waypoint-name-container {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.waypoint-name-input {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    color: var(--text);
    transition: all 0.2s ease;
    pointer-events: none;
}

.waypoint-name-confirm-btn {
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: var(--success);
    color: white;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    display: none;
}

.waypoint-name-confirm-btn:hover {
    background: var(--success-press);
    transform: scale(1.05);
}

.waypoint-name-confirm-btn:active {
    transform: scale(0.95);
}

.waypoint-item.expanded .waypoint-name-input {
    border: 1px solid var(--line);
    background: var(--panel-bg);
    pointer-events: auto;
}

.waypoint-item.expanded .waypoint-name-input:hover {
    border-color: var(--line-strong);
    background: #ffffff;
}

.waypoint-name-input:focus {
    outline: none;
    border-color: var(--accent);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(204, 128, 71, 0.1);
}

.waypoint-description-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

.waypoint-description-input {
    flex: 1;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--panel-bg);
    transition: all 0.2s ease;
}

.waypoint-description-input:hover {
    border-color: var(--line-strong);
    background: #ffffff;
}

.waypoint-description-input:focus {
    outline: none;
    border-color: var(--accent);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(204, 128, 71, 0.1);
}

.waypoint-description-confirm-btn {
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: var(--success);
    color: white;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    display: none;
}

.waypoint-description-confirm-btn:hover {
    background: var(--success-press);
    transform: scale(1.05);
}

.waypoint-description-confirm-btn:active {
    transform: scale(0.95);
}

.waypoint-stop-time {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
}

.waypoint-stoptime-confirm-btn {
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: var(--success);
    color: white;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    display: none;
}

.waypoint-stoptime-confirm-btn:hover {
    background: var(--success-press);
    transform: scale(1.05);
}

.waypoint-stoptime-confirm-btn:active {
    transform: scale(0.95);
}

.stop-time-label {
    font-size: 13px;
    color: var(--text-2);
    font-weight: 500;
}

.stop-time-hours,
.stop-time-minutes {
    width: 50px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    background: var(--panel-bg);
    color: var(--text);
    transition: all 0.2s ease;
}

.stop-time-hours:hover,
.stop-time-minutes:hover {
    border-color: var(--line-strong);
    background: #ffffff;
}

.stop-time-hours:focus,
.stop-time-minutes:focus {
    outline: none;
    border-color: var(--accent);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(204, 128, 71, 0.1);
}

.waypoint-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.waypoint-delete-btn {
    padding: 6px 12px;
    background: var(--danger-soft);
    border: 1px solid var(--danger-soft);
    border-radius: 6px;
    font-size: 12px;
    color: var(--danger);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.waypoint-delete-btn:hover {
    background: #F0D3CF;
    border-color: var(--danger);
    color: var(--danger);
}

.waypoint-delete-btn i {
    font-size: 11px;
}

.waypoint-convert-btn {
    padding: 6px 12px;
    background: var(--inset-bg);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.waypoint-convert-btn:hover {
    background: var(--line);
    border-color: var(--text-faint);
    color: var(--text);
}

.waypoint-convert-btn i {
    font-size: 11px;
}

/* Drag handle, inside the row header (waypoints) or the row itself (vias) */
.waypoint-handle {
    cursor: move;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    user-select: none;
    align-self: stretch;
}

.waypoint-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    width: 24px;
    align-self: center;
}

/* Map markers copied from the apps (app.js renderWaypointMarker) */
.marker-route-fill { fill: var(--route-color); }
.via-pin { display: block; transform-origin: 11px 34px; transition: scale 0.2s; } /* tilt + hover pivot on the ground point */
.supporting-point-marker { cursor: pointer; }
.supporting-point-marker:hover { z-index: 1000; }
.supporting-point-marker:hover .via-pin { scale: 1.3; }
/* Same images in the waypoint list and the map menus, scaled to a fixed height (app.js waypointIconHTML) */
.wp-icon { height: 30px; display: flex; align-items: flex-end; justify-content: center; }
.wp-icon > img, .wp-icon > svg { height: 100%; width: auto; }
.map-menu-option .menu-icon.wp-icon { width: 24px; height: 28px; }
/* Map popups (right-click menu, waypoint popup) cover the markers, incl. a hovered via pin (z-index 1000) */
.map-context-popup, .waypoint-maplibre-popup { z-index: 1001; }

.waypoint-input {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    font-size: 14px;
}

.waypoint-input:focus {
    outline: none;
    border-color: var(--accent);
}

.waypoint-remove {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--line-strong);
    cursor: pointer;
    padding: 4px 8px;
}

.waypoint-remove:hover {
    color: var(--danger);
}

/* Add waypoint buttons */
.add-waypoint-buttons {
    padding: 16px 0;
    display: flex;
    gap: 8px;
}

.add-waypoint-buttons button {
    width: 100%;
}

/* Routing options */
.routing-options {
    padding: 16px;
    border-top: 1px solid var(--line);
}

.routing-options h3 {
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--text);
}

.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 4px;
}

.form-group select,
.form-group input[type="range"] {
    width: 100%;
}

.form-group select {
    padding: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    font-size: 14px;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    font-size: 13px;
}

/* Checkbox label */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    user-select: none;
    padding: 8px 0;
    position: relative;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-text {
    user-select: none;
    position: relative;
    padding-left: 28px;
}

.checkbox-text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid var(--line-strong);
    border-radius: 4px;
    background: white;
    transition: all 0.2s;
}

.checkbox-label input[type="checkbox"]:checked ~ .checkbox-text::before {
    background: var(--accent);
    border-color: var(--accent);
}

.checkbox-label input[type="checkbox"]:checked ~ .checkbox-text::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 10px;
}

/* Radio group */
.radio-group {
    display: flex;
    gap: 12px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    user-select: none;
    padding: 8px 0;
    position: relative;
}

.radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radio-text {
    user-select: none;
    position: relative;
    padding-left: 28px;
}

.radio-text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: white;
    transition: all 0.2s;
}

.radio-label input[type="radio"]:checked ~ .radio-text::before {
    background: var(--accent);
    border-color: var(--accent);
}

.radio-label input[type="radio"]:checked ~ .radio-text::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

/* Range slider */
.form-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--line);
    outline: none;
    -webkit-appearance: none;
}

.form-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

.form-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}

/* Export route info */
.export-route-info {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

/* Buttons */
.btn-primary,
.btn-secondary {
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

/* Standalone buttons need full width (not in flex containers) */
.side-panel-content .btn-primary,
.side-panel-content .btn-secondary {
    width: 100%;
}

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-press);
}

.btn-primary:disabled {
    background: var(--line-strong);
    color: var(--text-faint);
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--panel-bg);
    color: var(--text-2);
    border: 1px solid var(--line);
}

.btn-secondary:hover {
    background: var(--inset-bg);
    color: var(--accent);
    border-color: var(--accent);
}

.btn-secondary:disabled {
    background: var(--panel-bg);
    color: var(--line-strong);
    border-color: var(--panel-bg);
    cursor: not-allowed;
}

.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    transition: color 0.2s;
}

.btn-link:hover {
    color: var(--accent-press);
}

/* Big RV settings section */
.profile-rv-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.profile-rv-section h4 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--text);
}

.profile-rv-section .section-description {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.rv-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.rv-settings-grid .form-group {
    margin-bottom: 0;
}

.rv-settings-grid .form-input {
    width: 100%;
}

/* Profile alerts section */
.profile-alerts-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.profile-alerts-section h4 {
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--text);
}

/* Route summary */
.route-summary {
    padding: 16px;
    border-top: 1px solid var(--line);
    background: var(--panel-bg);
}

.route-summary h3 {
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--text);
}

#route-details {
    font-size: 14px;
    color: var(--text-2);
    margin-bottom: 12px;
}

.route-actions {
    display: flex;
    gap: 8px;
}

.route-name-input {
    padding: 10px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    font-size: 14px;
}

/* Saved route items */

.saved-route-item {
    padding: 16px;
    background: var(--panel-bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.saved-route-item:hover {
    background: var(--inset-bg);
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(204, 128, 71, 0.1);
}

.saved-route-name {
    font-weight: 600;
    color: var(--text);
    font-size: 16px;
    margin-bottom: 6px;
}

.saved-route-info {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.saved-route-description {
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 8px;
    font-style: italic;
}

/* Map */
.map-container {
    flex: 1;
    height: 100%;
    position: relative;
}

/* Map cursor states */
.evomaps-canvas-container.evomaps-interactive {
    cursor: default;
}

.evomaps-canvas-container.evomaps-interactive.evomaps-track-pointer {
    cursor: pointer;
}

.evomaps-canvas-container.evomaps-interactive:active {
    cursor: grab;
}

.evomaps-canvas-container.evomaps-interactive.evomaps-drag-pan {
    cursor: grab;
}

.evomaps-canvas-container.evomaps-interactive.evomaps-drag-pan:active {
    cursor: grabbing;
}

/* Marker cursor states */
.evomaps-marker {
    cursor: grab;
}

.evomaps-marker:active {
    cursor: grabbing;
}

/* Remove padding from MapLibre attribution control */
.evomaps-ctrl.evomaps-ctrl-attrib {
    padding: 3px !important;
    border-radius: 12px !important;
}

/* Map controls: white with black icons and the search bar's shadow (overrides the SDK's dark theme) */
.map-container .evomaps-ctrl-group {
    background: #fff;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden;
}

.evomaps-ctrl-group > button {
    border-radius: 0 !important;
    color: var(--text) !important;
}

.evomaps-ctrl-group > button:first-child {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.evomaps-ctrl-group > button:last-child {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.evomaps-ctrl-group > button:hover {
    background-color: var(--panel-bg) !important;
}

/* Attribution control rounded corners */
.evomaps-ctrl-attrib {
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Floating My Data button on map */
.floating-my-data-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: none;
    border-radius: 24px;
    padding: 10px 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.floating-my-data-btn:hover {
    background: var(--panel-bg);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.floating-my-data-btn i {
    color: var(--accent);
    font-size: 16px;
}

/* Floating search box on map */
/* Closed beta badge: a dark pill at the top centre of the map, above every control, never in the way (no pointer events) */
.beta-badge {
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1001;
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
    background: var(--scenic-granite, #1f2127); color: #fff; font-family: var(--font-display); font-size: 12px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); pointer-events: none; user-select: none;
}
.beta-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #cc8047); box-shadow: 0 0 0 3px rgba(204, 128, 71, 0.3); }
@media print { .beta-badge { display: none; } }

.map-search-container {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
    width: 150px;
    max-width: calc(100vw - 40px);
    transition: width 0.2s ease;
}

.map-search-container.expanded {
    width: 380px;
}

.map-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.map-search-icon {
    position: absolute;
    left: 16px;
    color: var(--text-muted);
    font-size: 16px;
    pointer-events: none;
}

.map-search-input {
    width: 100%;
    padding: 14px 20px 14px 48px;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    outline: none;
    background: transparent;
}

.map-search-input::placeholder {
    color: var(--text-faint);
}

.map-search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 1001;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.map-search-suggestions .suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid var(--panel-bg);
    transition: background 0.2s;
}

.map-search-suggestions .suggestion-item:last-child {
    border-bottom: none;
}

.map-search-suggestions .suggestion-item:hover {
    background: var(--panel-bg);
    border-radius: 12px;
}

.map-search-clear-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.map-search-clear-btn:hover {
    background: var(--panel-bg);
    color: var(--text-2);
}

/* Search Results Panel */
.search-results-panel {
    position: absolute;
    left: 20px;
    top: 80px;
    bottom: 20px;
    width: 380px;
    max-width: calc(100vw - 40px);
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.search-results-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text);
}

.search-results-list {
    overflow-y: auto;
    flex: 1;
}

.search-result-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid var(--panel-bg);
    transition: background 0.2s;
}

.search-result-item:hover {
    background: var(--panel-bg);
    border-radius: 12px;
}

.search-result-item.active {
    background: var(--inset-bg);
    border-left: 3px solid var(--accent);
    padding-left: 9px;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 4px;
}

.search-result-address {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.search-result-distance {
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 4px;
}

/* Map style control */
.map-style-control {
    position: relative;
    overflow: visible !important;
}

.evomaps-ctrl-group {
    overflow: visible !important;
}

.map-style-button {
    width: 29px;
    height: 29px;
    background: transparent !important; /* same dark group background as the other controls */
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-size: 14px;
    border-radius: 12px !important;
}

.map-style-button:hover {
    background: var(--panel-bg) !important;
    border-radius: 12px !important;
}

.evomaps-ctrl button.map-style-button {
    background: transparent !important;
    border-radius: 12px !important;
}

.evomaps-ctrl button.map-style-button:hover {
    background: var(--panel-bg) !important;
    border-radius: 12px !important;
}

/* Map Settings button: a map with a small gear badge */
.map-settings-icon { position: relative; display: inline-block; width: 18px; height: 18px; line-height: 18px; }
.map-settings-icon .fa-map { font-size: 16px; }
.map-settings-icon .fa-gear { position: absolute; right: -6px; bottom: -3px; font-size: 10px; line-height: 1; padding: 1px; background: #fff; border-radius: 50%; }

/* Map Settings panel (Style & Settings · Built in POIs · My Data): look & feel of the EvoMaps demo settings panel */
.layers-tabs { display: flex; margin: -2px -16px 0; padding: 0 10px; border-bottom: 1px solid var(--line); background: #fff; }
.layers-tab {
    flex: 1; padding: 9px 4px 8px; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
    background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; white-space: nowrap;
}
.layers-tab:hover { color: var(--text); }
.layers-tab.active { color: var(--accent-press); border-bottom-color: var(--accent); }
.layers-tab-panel { display: flex; flex-direction: column; gap: 12px; }
.layers-tab-panel[hidden] { display: none; }
.layers-mydata-note { display: none; margin: 0; font-size: 12px; color: var(--text-muted); }
body:not(.user-logged-in) .layers-mydata-note { display: block; }

.layers-panel {
    display: none;
    position: absolute;
    right: 64px;
    bottom: 10px;
    z-index: 10000;
    width: 340px;
    top: 10px;                                    /* full height whatever the tab: the panel never jumps between tabs */
    box-sizing: border-box;
    overflow: auto;
    background: var(--panel-bg);                  /* warm grey; the sections sit on it as white cards */
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    cursor: default;
    padding: 0 16px 16px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    flex-direction: column;
    gap: 12px;
}

.layers-panel.open {
    display: flex;
}

/* Sticky head; content scrolling under it is blurred away */
.layers-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -16px 2px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    border-radius: 10px 10px 0 0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.layers-head b {
    font-size: 15px;
}

.layers-close {
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--text);
    opacity: 0.6;
    padding: 0 2px;
}

.layers-close:hover {
    opacity: 1;
}

.layers-panel label {
    font-weight: 600;
    color: var(--text);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Label language */
.layers-panel .map-language-select {
    width: 100%;
    margin-top: 6px;
    padding: 6px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    background: #fff;
    color: var(--text);
}

.layers-panel .map-language-select option {
    color: var(--text);
}

/* Style thumbnails */
.layers-panel .map-style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 6px;
}

.map-style-thumb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: none;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

.map-style-thumb-item:hover {
    background: var(--inset-bg);
}

.map-style-thumb {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: var(--line);
    flex-shrink: 0;
    box-sizing: border-box;
}

.map-style-thumb-item.active .map-style-thumb {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-radius: 6px;
}

.map-style-thumb-label {
    font-size: 9px;
    color: var(--text-2);
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

/* POIs */
.poi-count {
    font-weight: normal;
    opacity: 0.8;
}

.poi-tools {
    display: flex;
    gap: 2%;
    margin: 4px 0 2px;
}

.poi-tools button {
    flex: 1;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--text);
    border-radius: 50px;
}

.poi-tools button:hover {
    background: var(--inset-bg);
}

.poi-cols {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--line);
    padding-bottom: 3px;
    margin-top: 4px;
}

.poi-group {
    margin-top: 4px;
}

.poi-group summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 0;
    list-style-position: inside;
}

.poi-group[open] summary {
    margin-bottom: 2px;
}

.poi-n {
    opacity: 0.8;
    font-weight: normal;
}

.poi-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 1px 0;
}

.layers-panel .poi-row label {
    flex: 1;
    font-weight: normal;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.poi-row input[type=checkbox] {
    width: auto;
    margin: 0;
}

.poi-row input[type=number] {
    width: 48px;
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
}

.poi-icon {
    width: 21px;
    height: 21px;
    flex: none;
}

.poi-info {
    opacity: 0.8;
    cursor: help;
    font-size: 12px;
}

.poi-warn {
    color: var(--danger);
    font-size: 11px;
    padding: 2px 0 4px 26px;
}

/* Autocomplete suggestions */
.suggestion-section { padding: 10px 12px 2px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.suggestion-group { margin-left: 16px; border-bottom: 1px solid var(--panel-bg); }   /* a section's rows + their dividers sit indented under the header */
.suggestion-group:last-child { border-bottom: none; }
.suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid var(--panel-bg);
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background: var(--panel-bg);
    border-radius: 12px;
}

/* Radio buttons styled as cards */
.radio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.radio-card {
    position: relative;
    cursor: pointer;
}

.radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.radio-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 2px solid var(--line);
    border-radius: 8px;
    background: white;
    transition: all 0.2s;
}

.radio-content i {
    font-size: 20px;
    color: var(--text-muted);
}

.radio-content span {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
}

.radio-card input[type="radio"]:checked + .radio-content {
    border-color: var(--accent);
    background: var(--panel-bg);
}

.radio-card input[type="radio"]:checked + .radio-content i {
    color: var(--accent);
}

.radio-card input[type="radio"]:checked + .radio-content span {
    color: var(--accent);
}

.radio-card.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.radio-card.disabled .radio-content {
    background: var(--panel-bg);
    border-color: var(--line);
}

/* Inline radio buttons for hilliness/windingness */
.radio-group-inline {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.radio-inline {
    flex: 1;
    cursor: pointer;
}

.radio-inline input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.radio-inline span {
    display: block;
    padding: 8px;
    text-align: center;
    border: 2px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    background: white;
    transition: all 0.2s;
}

.radio-inline input[type="radio"]:checked + span {
    border-color: var(--accent);
    background: var(--accent);
    color: white;
}

/* Button container for proper alignment */
.button-container {
    padding: 0 16px;
    margin-bottom: 12px;
}

.button-container .btn-primary,
.button-container .btn-secondary {
    width: 100%;
    margin: 0;
}

/* Map click menu - styled as MapLibre popup content */
.map-context-popup .evomaps-popup-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 0;
    width: 240px;
}

/* Hide close button for search result popups */
.map-context-popup .evomaps-popup-close-button {
    display: none;
}

.map-click-menu {
    width: 240px;
    overflow: hidden;
}

.map-menu-address-container {
    padding: 12px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--line);
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.map-menu-address {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-word;
    margin-bottom: 4px;
    opacity: 0.5;
    transition: opacity 0.3s ease-out;
}

.map-menu-address.fade-in {
    opacity: 1;
}

.map-menu-coordinates {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.2;
    margin-top: 4px;
    font-family: monospace;
}

.map-menu-options {
    padding: 4px 0;
}

.map-menu-option {
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: white;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
}

.map-menu-option .menu-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.map-menu-option:hover {
    background: var(--panel-bg);
}

.map-menu-separator {
    height: 1px;
    background: var(--line);
    margin: 4px 0;
}

.save-location-option i {
    width: 20px;
    text-align: center;
    color: var(--accent);
}

.routing-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.compact-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.radio-row {
    display: flex;
    gap: 4px;
}

.radio-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.radio-compact input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.radio-compact i {
    padding: 8px;
    border: 2px solid var(--line);
    border-radius: 6px;
    font-size: 16px;
    color: var(--text-muted);
    background: white;
    transition: all 0.2s;
    min-height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radio-compact span {
    padding: 8px 10px;
    border: 2px solid var(--line);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-2);
    background: white;
    transition: all 0.2s;
    white-space: nowrap;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radio-compact input[type="radio"]:checked + i,
.radio-compact input[type="radio"]:checked + span {
    border-color: var(--accent);
    background: var(--accent);
    color: white;
}

.radio-compact.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Radio compact with text (icon + label in same button) */
.radio-compact-with-text {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.radio-compact-with-text input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.radio-compact-with-text span {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 2px solid var(--line);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-2);
    background: white;
    transition: all 0.2s;
    white-space: nowrap;
    min-height: 36px;
}

.radio-compact-with-text span i {
    font-size: 12px;
}

.radio-compact-with-text input[type="radio"]:checked + span {
    border-color: var(--accent);
    background: var(--accent);
    color: white;
}

.radio-compact-with-text.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Mini radio buttons for hilliness/windingness */
.radio-row-mini {
    display: flex;
    gap: 4px;
    align-items: center;
}

.radio-mini {
    cursor: pointer;
    position: relative;
}

.radio-mini input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.radio-mini span {
    display: block;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-2);
    background: white;
    transition: all 0.2s;
}

.radio-mini input[type="radio"]:checked + span {
    border-color: var(--accent);
    background: var(--accent);
    color: white;
}

.mini-sep {
    font-size: 10px;
    color: var(--line-strong);
    padding: 0 2px;
}

/* Compact checkboxes */
.checkbox-row {
    display: flex;
    gap: 4px;
}

.checkbox-compact {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.checkbox-compact input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.checkbox-compact span {
    padding: 8px 10px;
    border: 2px solid var(--line);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-2);
    background: white;
    transition: all 0.2s;
    white-space: nowrap;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-compact input[type="checkbox"]:checked + span {
    border-color: var(--accent);
    background: var(--accent);
    color: white;
}

/* Compact buttons */
.btn-compact {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    background: var(--accent);
    color: white;
}

.btn-compact:hover {
    background: var(--accent-press);
}

.btn-compact.btn-secondary {
    background: white;
    color: var(--text-2);
    border: 2px solid var(--line);
}

.btn-compact.btn-secondary:hover {
    background: var(--panel-bg);
}

/* Route summary in sidebar */
.route-summary-sidebar {
    padding: 12px 16px 16px 16px;
    border-top: 0.5px solid var(--line);
    border-bottom: 0.5px solid var(--line);
    background: var(--panel-bg);
}

.route-info {
    margin-bottom: 12px;
}

.route-info #route-details {
    font-size: 14px;
    color: var(--text-2);
}

.route-info #route-details p {
    margin: 4px 0;
}

.route-actions {
    display: flex;
    gap: 8px;
}

.route-actions button {
    flex: 1;
}

/* Side panels (My Routes, Save Route) */
.side-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
}

.side-panel.closing .side-panel-overlay {
    animation: fadeOut 0.3s ease-out;
}

.side-panel.closing .side-panel-content {
    animation: slideOutRight 0.3s ease-out;
}

.side-panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.side-panel-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 90%;
    max-width: 500px;
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--line);
}

.side-panel-header h2 {
    font-size: 20px;
    color: var(--text);
    margin: 0;
}

.side-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.form-actions button {
    flex: 1;
}

/* Drag and drop states */
.waypoint-item.dragging,
.via-row.dragging {
    opacity: 0.5;
}

.waypoint-item.drag-over {
    border-top: 2px solid var(--accent);
}

/* Profile panel */

.profile-picture-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.profile-picture-large {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--line);
    overflow: hidden;
}

.profile-picture-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* OAuth Info Box */
.oauth-info-box {
    background: var(--inset-bg);
    border: 2px solid var(--line-strong);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.oauth-info-box i {
    color: var(--info);
    font-size: 20px;
    margin-top: 2px;
}

.oauth-info-content {
    flex: 1;
}

.oauth-info-content strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.oauth-info-content p {
    color: var(--text-2);
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(204, 128, 71, 0.1);
}

.form-input[readonly] {
    background-color: var(--panel-bg);
    color: var(--text-muted);
    cursor: not-allowed;
    border-color: var(--line) !important;
    box-shadow: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .map-container {
        height: 60vh;
    }
    .panel-grip { display: none; }
    .sidebar.is-collapsed { width: 100% !important; visibility: visible; }

    .radio-grid.vehicle-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .route-summary-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .summary-actions {
        flex-direction: column;
    }

    .route-name-compact {
        width: 100%;
    }
}

/* Custom Alert */
.custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    animation: fadeIn 0.2s ease;
}

.custom-alert-overlay.show {
    display: flex;
}

.custom-alert-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.2s ease;
}

.custom-alert-icon {
    font-size: 48px;
    text-align: center;
    margin-bottom: 16px;
}

.custom-alert-icon.info {
    color: var(--accent);
}

.custom-alert-icon.warning {
    color: var(--cta);
}

.custom-alert-icon.error {
    color: var(--danger);
}

.custom-alert-icon.success {
    color: var(--success);
}

.custom-alert-icon.question {
    color: var(--accent);
}

.custom-alert-message .custom-alert-title { margin-bottom: 6px; font-size: 17px; color: var(--text); }
.custom-alert-message {
    font-size: 16px;
    color: var(--text);
    text-align: center;
    margin-bottom: 24px;
    line-height: 1;
    white-space: pre-line;
}

.custom-alert-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.custom-alert-buttons button {
    min-width: 100px;
}
/* A choice (customChoice): the options one under the other, full width */
.custom-alert-overlay.is-stacked .custom-alert-buttons { flex-direction: column; align-items: stretch; }
.custom-alert-overlay.is-stacked .custom-alert-buttons button { width: 100%; }

@keyframes slideIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Map loading spinner */
.map-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
    animation: fadeIn 0.2s ease;
    pointer-events: none;
}

.map-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.map-loading-text {
    color: white;
    font-size: 16px;
    font-weight: 500;
}

/* MapLibre waypoint popup styling */
.waypoint-maplibre-popup .evomaps-popup-content {
    padding: 0px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    max-width: 400px;
}

.waypoint-maplibre-popup .evomaps-popup-tip {
    border-top-color: white;
}


/* Routes Browser - Folder Tree and Routes List */
.routes-browser {
    display: flex;
    height: 100%;
    gap: 0;
}

.routes-sidebar {
    width: 200px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    background: var(--panel-bg);
}

.routes-sidebar-header {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    box-sizing: border-box;
}

.routes-sidebar-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.folders-tree {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.folder-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
    user-select: none;
    gap: 6px;
}

.folder-item:focus {
    outline: none;
}

.folder-item:hover {
    background: var(--inset-bg);
}

.folder-item.selected {
    background: var(--accent);
    color: white;
}

.folder-item.selected .folder-icon {
    color: white;
}

.folder-expand {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
}

.folder-expand.empty {
    visibility: hidden;
}

.folder-expand i {
    transition: transform 0.2s;
}

.folder-item.expanded > .folder-expand i {
    transform: rotate(90deg);
}

.folder-icon {
    font-size: 14px;
    color: var(--accent);
}

.folder-name {
    flex: 1;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-children {
    padding-left: 16px;
    display: none;
}

.folder-item.expanded + .folder-children {
    display: block;
}

.folder-item.dragover {
    background: var(--accent-soft);
    border: 1px dashed var(--accent);
}

.routes-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.routes-content-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-bg);
    min-height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.routes-content-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.routes-table-container {
    flex: 1;
    overflow-y: auto;
}

.routes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}

.routes-table tbody tr {
    border-bottom: 1px solid var(--inset-bg);
    cursor: pointer;
    transition: background 0.15s;
}

.routes-table thead {
    position: sticky;
    top: 0;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--line);
    z-index: 1;
}

.routes-table th {
    text-align: left;
    padding: 10px 16px;
    font-weight: 600;
    color: var(--text-2);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.routes-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.routes-table th.sortable:hover {
    background: var(--inset-bg);
}

.routes-table th.sortable span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.routes-table .sort-icon {
    font-size: 10px;
    color: var(--line-strong);
    transition: color 0.2s;
}

.routes-table th.sort-asc .sort-icon {
    color: var(--accent);
}

.routes-table th.sort-desc .sort-icon {
    color: var(--accent);
}

.routes-table th.sort-asc .sort-icon::before {
    content: "\f0de";
}

.routes-table th.sort-desc .sort-icon::before {
    content: "\f0dd";
}

.routes-table tbody tr:hover {
    background: var(--inset-bg);
}

.routes-table tbody tr.dragging {
    opacity: 0.5;
}

.routes-table td {
    padding: 10px 16px;
    color: var(--text);
    vertical-align: middle;
}

.routes-table .name-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.routes-table .item-icon {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 14px;
    gap: 4px;
}

.routes-table .item-kind-text {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: capitalize;
}

.routes-table .item-name {
    font-weight: 500;
}

.routes-table .item-description {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.routes-table .item-distance,
.routes-table .item-duration {
    color: var(--text);
    font-size: 13px;
}

.routes-table .item-date {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.routes-table .item-kind {
    color: var(--text-muted);
    text-transform: capitalize;
}

.routes-table .item-time {
    color: var(--text-faint);
    font-size: 11px;
    margin-top: 2px;
}

.routes-table .item-more {
    color: var(--accent);
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
}

.routes-table .item-more:hover {
    text-decoration: underline;
}

/* Context Menu */
.context-menu {
    position: fixed;
    background: white;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 10000;
    padding: 4px 0;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
    color: var(--text);
}

.context-menu-item:hover {
    background: var(--panel-bg);
}

.context-menu-item i {
    width: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.context-menu-item-danger {
    color: var(--danger);
}

.context-menu-item-danger i {
    color: var(--danger);
}

.context-menu-item-danger:hover {
    background: var(--danger-soft);
}

/* Route item dragging */
.route-item.dragging {
    opacity: 0.5;
}

.route-item.dragover {
    border-top: 2px solid var(--accent);
}

/* My Data panel specific styles */
#saved-routes-panel .side-panel-content {
    width: 900px;
    max-width: 90vw;
}

#saved-routes-panel .side-panel-body {
    padding: 0;
}

/* Route details modal */
.route-details-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
}

.route-details-content {
    position: absolute;
    background: white;
    border-radius: 6px;
    min-width: 240px;
    max-width: 280px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0;
}

.route-info-section {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.route-info-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.route-info-description {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.4;
}

.route-info-item {
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.route-info-item i {
    font-size: 12px;
    width: 14px;
}

.route-info-item.route-info-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.route-info-item:last-child {
    margin-bottom: 0;
}

.route-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.route-details-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text);
}

.route-details-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.route-details-close:hover {
    color: var(--text);
}

.route-details-row {
    margin-bottom: 16px;
}

.route-details-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.route-details-value {
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
}

.route-description {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--inset-bg);
}

.route-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-2);
}

.route-info-label {
    font-weight: 500;
    min-width: 110px;
}

.route-info-row i {
    font-size: 12px;
    color: var(--text-2);
}

.route-dates {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--panel-bg);
    border-radius: 6px;
}

.route-date-item {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.route-date-item:last-child {
    margin-bottom: 0;
}

.route-date-label {
    font-weight: 500;
    min-width: 65px;
}

.route-details-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.route-delete-btn {
    background: rgba(180, 52, 42, 0.5) !important;
    color: white !important;
    border-color: var(--danger) !important;
}

.route-delete-btn:hover {
    background: rgba(180, 52, 42, 0.5) !important;
    border-color: var(--danger) !important;
}

.route-load-btn {
    margin-left: auto;
}

/* Vias as rows in the waypoint list (not draggable, so no handle column: the right margin lines them up) */
.via-row {
    margin-bottom: 4px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.via-row-content {
    padding: 6px 8px;
}

/* Distance · time between two consecutive rows */
.segment-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 2px 0 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.waypoints-container.is-reordering .segment-info {
    visibility: hidden;
}

/* Header ruler toggle: distance lines between rows and the running totals on stops and vias */
.waypoints-container.hide-segment-info .segment-info,
.waypoints-container.hide-segment-info .waypoint-arrival-info {
    display: none;
}

.supporting-point-delete {
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 4px;
    font-size: 12px;
    opacity: 1;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.supporting-point-delete:hover {
    opacity: 0.6;
}

/* Dropdown divider */
.dropdown-divider {
    height: 1px;
    background-color: var(--line);
    margin: 4px 0;
}

/* User Location Marker */
.user-location-marker {
    width: 0;
    height: 0;
    position: relative;
}

.user-location-dot {
    width: 16px;
    height: 16px;
    background: #4285f4;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.user-location-accuracy {
    background: rgba(66, 133, 244, 0.15);
    border: 1px solid rgba(66, 133, 244, 0.3);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    transition: width 0.3s ease, height 0.3s ease;
}

/* Location Help Modal */
.location-help-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.location-help-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Code Input Styles (for email verification, password reset, etc.) */
.code-digit,
.code-digit-email {
    width: 48px;
    height: 56px;
    font-size: 24px;
    text-align: center;
    border: 2px solid var(--line);
    border-radius: 8px;
    font-family: var(--font-text);
    font-weight: 600;
    transition: border-color 0.2s;
}

.code-digit:focus,
.code-digit-email:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 3px rgba(204, 128, 71, 0.1);
}

.code-digit.error,
.code-digit-email.error {
    border-color: var(--danger);
}

.btn-link {
    background: none;
    border: none;
    color: var(--info);
    cursor: pointer;
    padding: 0;
    font-size: 14px;
}

.btn-link:hover {
    color: var(--accent-press);
    text-decoration: underline;
}

.btn-link:disabled {
    color: var(--text-faint);
    cursor: not-allowed;
}

/* Email Verification Banner */
.verification-banner {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--accent);
    color: white;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 900;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.verification-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.verification-banner-content i {
    font-size: 20px;
}

.verification-banner-content span {
    font-size: 14px;
}

.verification-banner-content strong {
    font-weight: 600;
}

.verification-link {
    color: white;
    text-decoration: underline;
    font-weight: 600;
    margin-left: 8px;
}

.verification-link:hover {
    opacity: 0.9;
}

.verification-banner-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.verification-banner-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
    .verification-banner {
        top: 50px;
        padding: 10px 16px;
    }

    .verification-banner-content span {
        font-size: 13px;
    }
}

/* Change Email Modal Error Messages */
#change-email-error,
#change-email-verify-error {
    color: var(--danger);
    background: var(--danger-soft);
    padding: 12px;
    padding-bottom: 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
}

/* Round Trip Panel - Inside sidebar */
/* Round trip (lives in its sidebar tab) */
.round-trip-panel { background: transparent; }

/* Range slider styling for round trip panel */
.round-trip-panel input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    outline: none;
}

.round-trip-panel input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
}

.round-trip-panel input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Radio button styling for round trip panel */
.round-trip-panel input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    flex-shrink: 0;
}

.round-trip-panel input[type="radio"]:checked {
    border-color: var(--accent);
    background: var(--accent);
}

.round-trip-panel input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

/* Checkbox styling for round trip panel */
.round-trip-panel input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--line-strong);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    flex-shrink: 0;
}

.round-trip-panel input[type="checkbox"]:checked {
    border-color: var(--accent);
    background: var(--accent);
}

.round-trip-panel input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Segmented Control for Round Trip Direction */
.segmented-control {
    display: inline-flex;
    background: var(--line);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.segmented-control input[type="radio"] {
    display: none;
}

.segmented-control label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    min-width: 44px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-muted);
    font-size: 18px;
    background: transparent;
}

.segmented-control label:hover {
    color: var(--text);
}

.segmented-control input[type="radio"]:checked + label {
    background: #ffffff;
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* GPX Import Panel (Between sidebar and map) */
.gpx-import-panel {
    width: 280px;
    background: white;
    border-right: 1px solid var(--line);
    display: none;
    flex-direction: column;
    overflow-y: auto;
    z-index: 100;
    position: relative;
    min-width: 280px;
    max-width: 600px;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.gpx-import-panel.active {
    display: flex;
    animation: slideInFromLeft 0.3s ease forwards;
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.gpx-panel-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    z-index: 101;
    transition: background-color 0.2s ease;
}

.gpx-panel-resize-handle:hover {
    background-color: rgba(204, 128, 71, 0.1);
}

.gpx-panel-resize-handle:active {
    background-color: rgba(204, 128, 71, 0.2);
}

.gpx-import-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--line);
    user-select: none;
}

.gpx-import-panel-header label {
    font-weight: 600;
    margin: 0;
}

.gpx-import-panel-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* GPX Drop Zone */
.gpx-drop-zone {
    border: 2px dashed var(--line-strong);
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background: var(--panel-bg);
    transition: all 0.2s ease;
    cursor: pointer;
}

.gpx-drop-zone:hover {
    border-color: var(--accent);
    background: var(--inset-bg);
}

.gpx-drop-zone.dragover {
    border-color: var(--accent);
    background: var(--accent-soft);
    border-style: solid;
}

.gpx-file-select-link {
    color: var(--accent);
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
}

.gpx-file-select-link:hover {
    color: var(--accent-press);
}

/* Custom Import Icon (arrow down to bracket) */
.import-icon-container {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.import-icon-container::before {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 1px;
    right: 1px;
    height: 4px;
    border: 2px solid currentColor;
    border-top: none;
    border-radius: 0 0 3px 3px;
}

.import-icon-container .fa-arrow-down {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
}



/* ================================================================================================
   Scenic design system — theme layer (2026-09-28)
   Colours throughout this file were remapped onto public/css/tokens.css. The rules below add what a
   colour swap cannot: the brand type (Kanit for the interface, Archivo for titles), the paper canvas,
   the granite rail with the app's own menu glyphs, buttons as tracked caps, tight radii, calm shadows.
   New brand decisions belong here, not scattered above.
   ================================================================================================ */

/* Type */
body, button, input, select, textarea { font-family: var(--font-text); }
body { color: var(--text-2); background: var(--planner-bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4,
.sidebar h3, .waypoints-section h3, .routing-options-header span, .side-panel-header h2,
.routes-sidebar-header h3, .layers-head b, .custom-alert-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}
/* Small caps labels above fields — the brand's "subhead" register */
.side-panel .form-group label, .auth-modal .form-group label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--text-muted);
}

/* Canvas + panels: paper, hairline separators, white cards */
.main-content, .map-container { background: var(--planner-bg); }
.sidebar { border-right: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.routing-options-sidebar { background: transparent; border-bottom: 1px solid var(--line-soft); }
.side-panel-content, .layers-panel, .layers-head, .custom-alert-content, .map-search-suggestions,
.route-details-content, .search-results-panel { background: var(--card-bg); }
.side-panel-content { box-shadow: var(--shadow-lg); }
.custom-alert-content { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.layers-panel, .map-search-suggestions { box-shadow: var(--shadow-md); }

/* Buttons: ochre primary, paper secondary, tracked caps, 8 px corners (the Web Planner page) */
.btn-primary, .btn-secondary {
    border-radius: var(--radius-control);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); }
.btn-primary:disabled { background: var(--line-strong); color: var(--card-bg); }
.btn-secondary { background: var(--card-bg); color: var(--text); border: 1px solid var(--line-card); }
.btn-secondary:hover { background: var(--inset-bg); color: var(--text); border-color: var(--hover-border); }
.btn-link, .btn-link:hover { color: var(--accent-press); }
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-icon:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Inputs */
.side-panel .form-input { border: 1px solid var(--line-card); border-radius: var(--radius-control); background: var(--card-bg); color: var(--text); }
.side-panel .form-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }

/* Floating map chips: white, 10 px corners, the map shadow */
.map-search-wrapper, .map-search-input, .floating-my-data-btn { border-radius: var(--radius-lg); }
.map-search-wrapper, .floating-my-data-btn { box-shadow: var(--shadow-map); }
.map-container .evomaps-ctrl-group { box-shadow: var(--shadow-map) !important; }

/* Top-right stack (SDK controls: scale bar, zoom readout, compass), aligned with the search bar's 20px gutter */
.map-container .evomaps-ctrl-top-right { top: 10px; right: 10px; }
/* The SDK's compass is round; our 12px control-box radius above must not square it */
.map-container .evomaps-ctrl-compass-box, .map-container .evomaps-ctrl-compass-box > button { border-radius: 50% !important; }

/* Round trip cone: pinned to the middle of the map; the image is scaled/rotated by updateRoundTripCone() */
.round-trip-cone { position: absolute; left: 50%; top: 50%; width: 280px; height: 280px; margin: -140px 0 0 -140px; pointer-events: none; z-index: 1; }
.round-trip-cone img { width: 100%; height: 100%; display: block; transform-origin: center center; }
/* Crosshair on the start/end point: ring + two lines in the route colour, fixed size */
.round-trip-crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; box-sizing: border-box; border: 2px solid var(--route-color); border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.round-trip-crosshair::before, .round-trip-crosshair::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--route-color); }
.round-trip-crosshair::before { width: 2px; height: 36px; margin: -18px 0 0 -1px; }
.round-trip-crosshair::after { width: 36px; height: 2px; margin: -1px 0 0 -18px; }

/* Stop time: hidden until the database and the apps support it (code, totals and the URL field stay) */
.waypoint-stop-time { display: none !important; }

/* Markers: start/end/stop scale like the via pin on hover, from the ground point; a tooltip chip appears above */
.waypoint-marker > img, .waypoint-marker > svg { transform-origin: 50% 100%; transition: scale 0.2s; }
.waypoint-marker:hover { z-index: 1000 !important; }
.waypoint-marker:hover > img, .waypoint-marker:hover > svg { scale: 1.3; }
.marker-tip {
    display: none; position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%);
    padding: 6px 10px; border-radius: var(--radius-md); background: var(--rail-bg); color: var(--rail-text);
    font: 500 12px/1.3 var(--font-text); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-map);
}
.marker-tip b { display: block; font-weight: 600; color: var(--scenic-white); }
.marker-tip span { display: block; }
.marker-tip span:empty { display: none; }
.marker-tip-arrival { color: var(--rail-muted); }
.waypoint-marker:hover .marker-tip, .supporting-point-marker:hover .marker-tip { display: block; }

/* Marker popup (start, stops, vias, end): one card. Kind eyebrow, name + description editable in place (borderless until
   hover/focus), arrival, coordinates; the SDK × top right closes, Delete at the bottom. */
.waypoint-maplibre-popup .evomaps-popup-close-button {
    right: 6px; left: auto; top: 6px; width: 28px; height: 28px; padding: 0;
    border-radius: 50%; font-size: 18px; line-height: 28px; color: var(--text-muted);
}
.waypoint-maplibre-popup .evomaps-popup-close-button:hover { background: var(--inset-bg); color: var(--text); }
.marker-popup { width: 320px; max-width: 80vw; font-family: var(--font-text); color: var(--text); }
.marker-popup-main { display: flex; gap: 12px; padding: 14px 40px 10px 14px; }
.marker-popup-main .wp-icon { flex: none; margin-top: 16px; }
.marker-popup-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.marker-popup-kind { font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.marker-popup-name, .marker-popup-desc {
    width: calc(100% + 12px); margin: 0 0 0 -6px; padding: 3px 6px; box-sizing: border-box;
    border: 1px solid transparent; border-radius: var(--radius-md); background: transparent;
    font-family: var(--font-text); color: var(--text); text-overflow: ellipsis;
}
.marker-popup-name { font-size: 16px; font-weight: 600; }
.marker-popup-desc { font-size: 13px; color: var(--text-2); }
.marker-popup-name:hover, .marker-popup-desc:hover { background: var(--inset-bg); }
.marker-popup-name:focus, .marker-popup-desc:focus { outline: none; background: var(--card-bg); border-color: var(--accent); box-shadow: var(--shadow-focus); }
.marker-popup-arrival { margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.marker-popup-arrival:empty { display: none; }
.marker-popup-coords { font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-muted); }
.marker-popup-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; padding: 10px 14px 12px; border-top: 1px solid var(--line-soft); }
/* Footer: an info note (drag the pin) on the left, the Delete button on the right */
.marker-popup-hint { flex: 1; display: flex; align-items: flex-start; gap: 6px; font: 12px/1.35 var(--font-text); color: var(--text-muted); }
.marker-popup-hint i { flex: none; margin-top: 2px; color: var(--info); }
.marker-popup-delete {
    flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; white-space: nowrap; cursor: pointer;
    border: 1px solid var(--line-card); border-radius: var(--radius-control); background: var(--card-bg);
    color: var(--danger); font: 500 13px var(--font-text);
}
.marker-popup-delete:hover { background: var(--danger-soft); border-color: var(--danger); }
/* Scale bar: the engine's bracket (its width is the measure) in planner colours */
.map-container .evomaps-ctrl-scale {
    background: rgba(255, 255, 255, 0.8); border: 2px solid var(--text); border-top: none;
    color: var(--text); font: 500 11px/16px var(--font-text); padding: 0 6px;
}
/* Camera readout (zoom · pitch · bearing): a white map chip like the search bar */
.map-container .evomaps-ctrl-camera-info {
    background: var(--card-bg); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-map);
    color: var(--text); font: 500 12px/16px var(--font-text); padding: 5px 10px;
}

/* Side ribbon: granite rail, 48 px items with soft corners, the app's menu glyphs in the rail text colour */
.side-ribbon { border-right: 1px solid rgba(255, 255, 255, 0.06); }
.ribbon-items { padding: 6px; gap: 4px; }
.ribbon-bottom { padding: 6px; border-top: none; }   /* its top line is an inset divider (.ribbon-bottom::before) */
.ribbon-item {
    height: 48px;
    padding: 0 12px;
    gap: 12px;
    border-radius: var(--radius-lg);
    color: var(--rail-text);
    font-size: 13px;
    font-weight: 500;
}
.ribbon-item:hover { background: rgba(255, 255, 255, 0.08); color: var(--scenic-white); }
/* The open screen's button flares into the panel: it takes the panel's colour, runs to the ribbon's edge and gets concave
   fillets above and below (radial gradients outside the item), so button and panel read as one tab. The ribbon's own
   right border goes while a panel shows (body.ribbon-panel-open, set by sheet.js). */
.ribbon-item, .ribbon-profile { position: relative; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base); }
.ribbon-item.is-active, .ribbon-profile.is-active {
    background: var(--ribbon-panel-bg);
    color: var(--scenic-white);
    z-index: 1;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.ribbon-items .ribbon-item.is-active, .ribbon-bottom .ribbon-item.is-active { width: calc(100% + 6px); margin-right: -6px; }   /* over the 6 px padding, to the edge */
.ribbon-profile.is-active { margin-right: -4px; padding-right: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ribbon-item.is-active::before, .ribbon-item.is-active::after, .ribbon-profile.is-active::before, .ribbon-profile.is-active::after {
    content: '';
    position: absolute;
    right: 0;
    width: 10px;
    height: 10px;
    pointer-events: none;
}
.ribbon-item.is-active::before, .ribbon-profile.is-active::before { top: -10px; background: radial-gradient(circle at 0 0, transparent 9.6px, var(--ribbon-panel-bg) 10.2px); }
.ribbon-item.is-active::after, .ribbon-profile.is-active::after { bottom: -10px; background: radial-gradient(circle at 0 100%, transparent 9.6px, var(--ribbon-panel-bg) 10.2px); }
body.ribbon-panel-open .side-ribbon { border-right-color: var(--ribbon-panel-bg); }   /* the 1 px edge takes the panel's colour: tab and panel join seamlessly */
/* The collapsed ribbon's tooltip (app.js initSideRibbon): a granite chip beside the hovered button */
.ribbon-tip {
    position: fixed;
    z-index: 4000;
    transform: translateY(-50%);
    padding: 5px 10px;
    border-radius: var(--radius-md);
    background: var(--scenic-granite-90);
    color: var(--scenic-white);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    animation: ribbon-tip-in var(--dur-fast) var(--ease-out);
}
.ribbon-tip::before { content: ''; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%) rotate(45deg); background: inherit; border-radius: 2px; }
@keyframes ribbon-tip-in { from { opacity: 0; transform: translate(-4px, -50%); } to { opacity: 1; transform: translateY(-50%); } }
.ribbon-item i { width: 20px; font-size: 16px; }
.ribbon-item svg { width: 20px; height: 20px; flex: none; }
.ribbon-item i.ribbon-flag { width: 20px; flex: none; font-size: 18px; font-style: normal; line-height: 1; text-align: center; }   /* the language button's icon slot (an <i>: the collapsed ribbon hides its spans) */
.mydata-menu-item.is-current { font-weight: 700; }

/* ================================================================================================
   Plan sidebar (Web Planner design, 2026-09-29): header with stats, one "Route mode" row over the routing
   options, waypoint tools as buttons, the three ways into a route, and a sticky "Save & share" block.
   ================================================================================================ */
.plan-eyebrow {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.plan-header { flex: none; padding: 18px 16px 14px; }
.plan-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.plan-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--text); margin: 0; }
.plan-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border-radius: 10px; overflow: hidden; background: rgba(17, 22, 17, 0.1); }
.plan-stat { padding: 10px 6px 9px; background: var(--card-bg); text-align: center; }
.plan-stat-value { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-stat-label { margin-top: 3px; font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.plan-sections { margin: 8px 0 0; text-align: center; font-size: 13px; font-weight: 500; color: var(--text-2); }
.plan-sections[hidden] { display: none; }
/* Each listed word underlined with a 2.5px rounded bar in its route colour (iOS draws the bar, not text-decoration) */
.plan-section-word { position: relative; display: inline-block; }
.plan-section-word::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2.5px; border-radius: 1.25px; background: var(--section-color); }

/* Route mode row: the routing options' header, styled as a card */
.routing-options-sidebar { padding: 0 16px 12px; border-bottom: 1px solid var(--line-soft); background: transparent; }
.route-mode-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line-card);
    border-radius: 9px;
    background: var(--card-bg);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.route-mode-row:hover { background: var(--card-bg); border-color: var(--hover-border); }
.route-mode-icon { display: flex; justify-content: center; width: 30px; flex: none; color: var(--text); }
.route-mode-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.route-mode-value { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.routing-options-content.collapsed { padding-top: 0; padding-bottom: 0; }
/* Expanded: the options sit inside the same white card as the Route mode row (the row opens into it) */
.route-mode-row:not(.collapsed) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.routing-options-content:not(.collapsed) { margin-top: -1px; padding: 10px 12px 12px; background: var(--card-bg); border: 1px solid var(--line-card); border-top: 1px solid var(--line-soft); border-radius: 0 0 9px 9px; }

/* Directions (the written directions in the panel): a row above Save / Share / Export, the list behind it */
.directions-section { flex: none; border-top: 1px solid var(--line-soft); }
.directions-section[hidden] { display: none; }
.directions-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; background: none; border: none; font: inherit; cursor: pointer; text-align: left; }
.directions-toggle:hover { background: var(--inset-bg); }
.directions-toggle .plan-eyebrow { flex: 1; }
.directions-count { font-size: 12px; color: var(--text-muted); }
.directions-toggle i { font-size: 12px; color: var(--text-muted); transition: transform 0.2s; transform: rotate(180deg); }
.directions-toggle.collapsed i { transform: rotate(0); }
.directions-list { list-style: none; margin: 0; padding: 0 16px 10px; max-height: min(45vh, 440px); overflow-y: auto; opacity: 1; transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease, visibility 0s linear 0s; }
.directions-list.collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; visibility: hidden; transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease, visibility 0s linear 0.25s; }   /* slides shut, then leaves the tab order */
.directions-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft); cursor: pointer; }
.directions-row:first-child { border-top: none; }
.directions-row:hover { background: var(--inset-bg); }
.directions-step { flex: none; width: 20px; padding-top: 5px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-align: right; }
.directions-icon { flex: none; width: 28px; height: 28px; filter: brightness(0); }
.directions-stop { flex: none; width: 28px; display: flex; justify-content: center; }
.directions-stop img, .directions-stop svg { width: 22px; height: 28px; }
.directions-text { flex: 1; min-width: 0; padding-top: 4px; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.directions-street { display: block; font-weight: 500; color: var(--text-2); }
.directions-distance { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--text-muted); }

.directions-hover-dot { width: 20px; height: 20px; border-radius: 50%; background: rgba(60, 60, 60, 0.45); border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); pointer-events: none; }

/* A shared route / folder in the Scenic Routes tab (openSharedLink): who shared what, the message, the add button */
.discover-share { margin: 0 0 10px; padding: 12px; border-radius: 10px; background: var(--card-bg); border: 1px solid var(--line-card); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08)); }
.discover-share[hidden] { display: none; }
.discover-share-head { display: flex; align-items: center; gap: 10px; }
.discover-share-head > i { font-size: 18px; color: var(--accent); flex: none; }
.discover-share-text { display: flex; flex-direction: column; min-width: 0; }
.discover-share-text b { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.discover-share-text span { font-size: 12px; color: var(--text-2); }
.discover-share-message { margin: 8px 0 0; font-size: 13px; color: var(--text); font-style: italic; }
.discover-share-note { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.discover-share .btn-primary { width: 100%; margin-top: 10px; height: 36px; font-size: 12px; }

/* Waypoints: eyebrow title, tools as small white buttons */
.waypoints-section { padding: 12px 16px 16px; }
.waypoints-section h3.plan-eyebrow { font-family: var(--font-text); font-weight: 500; font-size: 10.5px; letter-spacing: 0.18em; color: var(--text-muted); margin: 0; }
.waypoints-header { margin-bottom: 8px; }
.waypoints-header-actions { gap: 6px; }
.waypoints-header-actions .tool-btn {
    width: 34px;
    height: 32px;
    padding: 0;
    justify-content: center;
    border: 1px solid var(--line-card);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-2);
    font-size: 13px;
}
.waypoints-header-actions .tool-btn:hover:not(:disabled) { border-color: var(--hover-border); color: var(--text); }
.waypoints-header-actions .tool-btn:disabled { opacity: 0.45; }
/* Clear waypoints: the trash is red, as a destructive action (dimmed with the button while the list is empty) */
.waypoints-header-actions #start-over-btn { color: var(--danger); }
.waypoints-header-actions #start-over-btn:hover:not(:disabled) { color: var(--danger); border-color: var(--danger-soft); background: var(--danger-soft); }
.waypoints-container { padding: 4px 0 8px; min-height: 0; margin-bottom: 4px; }
.waypoints-empty-state { padding: 6px 4px 10px; align-items: flex-start; text-align: left; }
.waypoints-empty-state p { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }

/* Save & share */
/* State holders the URL state, share and export read (app.js writes their text and inline display): never shown */
#route-name-display, #route-description-display, #route-details { display: none !important; }
.plan-save { position: relative; flex: none; padding: 12px 16px 14px; border-top: 1px solid var(--line-soft); border-bottom: none; background: var(--panel-bg); }
/* One modal shell for the save and export panels (the share dialog is the custom alert with the same card look):
   centred on the page over a blurred backdrop, the card scrolls when it is taller than the window */
.plan-modal { position: fixed; inset: 0; z-index: 99000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); animation: fadeIn 0.2s ease; }
.plan-modal[hidden] { display: none; }
.plan-modal-card { width: 90%; max-width: 440px; max-height: 90vh; overflow-y: auto; padding: 24px; background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); animation: slideIn 0.2s ease; }
.plan-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.plan-modal-icon { font-size: 22px; color: var(--accent); }
.plan-modal-title { flex: 1; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); }
.plan-modal-close { flex: none; }
.plan-modal label.plan-eyebrow { display: block; margin-bottom: 5px; }
.plan-modal .plan-input + .plan-eyebrow { margin-top: 10px; }
.plan-modal .form-actions { margin-top: 16px; }
.plan-modal .form-actions button { height: 44px; }
/* The export form's labels and fields in the same voice as the save fields (eyebrow labels, 40px inputs) */
.plan-modal .form-group { margin-bottom: 12px; }
.plan-modal .form-group > label, .plan-modal .form-field > label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); margin-bottom: 5px; }
.plan-modal .form-input, .plan-modal .styled-select { padding: 0 12px; height: 40px; border: 1px solid var(--line-card); border-radius: 8px; background: var(--card-bg); font: inherit; font-size: 14px; color: var(--text); }
.plan-modal .select-wrapper .styled-select { padding: 0 32px 0 38px; }   /* room for the icon on the left and the chevron on the right */
.plan-modal .form-input:focus { box-shadow: var(--shadow-focus); }
.plan-modal textarea.form-input { height: auto; padding: 8px 12px; }
.form-optional { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-faint); }
.share-link-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.plan-modal-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
/* The route's summary on top of the three: distance · time, the "Has …" line, the route mode */
.route-summary { margin-bottom: 16px; padding: 10px 12px; border-radius: 10px; background: var(--panel-bg); text-align: center; font-size: 13px; color: var(--text-2); }
.route-summary-stats { font-size: 15px; color: var(--text); }
.route-summary-sections { margin-top: 4px; font-weight: 500; }
.route-summary-mode { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.custom-alert-overlay { backdrop-filter: blur(4px); }
.custom-alert-message:empty { display: none; }
.plan-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line-card);
    border-radius: 8px;
    background: var(--card-bg);
    font: inherit;
    font-size: 14px;
    color: var(--text);
}
.plan-input::placeholder { color: var(--text-faint); }
.plan-input:hover { border-color: var(--hover-border); }
.plan-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.plan-save .route-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.plan-save .route-actions .btn-primary, .plan-save .route-actions .btn-secondary { height: 40px; padding: 0 8px; font-size: 11.5px; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------------------------------------------------------------------------------------------------------
   Waypoint list — one grouped card (2026-09-29). Every row (start, stop, via, end) has the same layout:
   icon · name + one muted secondary line · handle · ×. Rows are separated by hairlines; the distance · time
   between two rows sits on that hairline. Overrides the per-row card styles above.
   --------------------------------------------------------------------------------------------------------- */
.waypoints-header { align-items: center; margin-bottom: 10px; }
.waypoints-container:has(.waypoint-item) {
    padding: 0;
    background: var(--card-bg);
    border: 1px solid var(--line-card);
    border-radius: var(--radius-lg);
}
.waypoints-container .waypoint-item,
.waypoints-container .via-row { margin: 0; }
.waypoints-container .waypoint-item-content {
    padding: 8px 10px;
    border: none;
    border-radius: 0;
    background: transparent;
    transition: background var(--dur-fast);
}
.waypoints-container .waypoint-item:not(.expanded):hover .waypoint-item-content,
.waypoints-container .via-row:hover .waypoint-item-content { background: var(--panel-bg); }
.waypoints-container > :first-child .waypoint-item-content { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.waypoints-container > :last-child .waypoint-item-content { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.waypoints-container .waypoint-content-main { gap: 10px; }

/* Name + secondary line. The collapsed name input loses its box so it reads as text, aligned with the line below */
.waypoints-container .waypoint-name-input,
.waypoints-container .row-name {
    padding: 4px 8px;
    font-family: var(--font-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text);
}
.waypoints-container .waypoint-name-input,
.waypoints-container .row-name { border: 1px solid transparent; } /* via name = same box as a waypoint name input */
.waypoints-container .row-name { flex: 1; min-width: 0; }
.row-text { flex: 1; min-width: 0; }
.row-secondary {
    display: flex;
    gap: 0;
    padding: 0 9px;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.waypoints-container .waypoint-arrival-info {
    display: block;
    width: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    text-align: left;
}
/* Via rows: a click toggles the coordinates (they have no fields to edit) */
.waypoints-container .via-row .waypoint-item-content { cursor: pointer; }
.waypoints-container .via-row.expanded .waypoint-expandable { grid-template-rows: 1fr; }
.waypoints-container .via-row.expanded .waypoint-expandable > div { padding: 4px 0 2px; }

/* Handle and × */
.waypoints-container .waypoint-handle { width: 18px; font-size: 15px; color: var(--text-faint); }
.waypoints-container .waypoint-item:hover .waypoint-handle,
.waypoints-container .via-row:hover .waypoint-handle { color: var(--text-muted); }
.waypoints-container .supporting-point-delete { width: 24px; height: 24px; padding: 0; font-size: 13px; color: var(--text); opacity: 0.55; }
.waypoints-container .supporting-point-delete:hover { opacity: 1; }

/* Distance · time on the hairline between two rows */
.waypoints-container .segment-info {
    margin: 0;
    padding: 0 12px;
    gap: 8px;
    height: 18px;
    font-size: 11px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.waypoints-container .segment-info::before,
.waypoints-container .segment-info::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
/* Distances hidden: plain hairlines between rows instead */
.waypoints-container.hide-segment-info :is(.waypoint-item, .via-row) ~ :is(.waypoint-item, .via-row) { border-top: 1px solid var(--line-soft); }

/* Expanded row: the fields, evenly spaced, in the planner's input style */
.waypoints-container .waypoint-item.expanded .waypoint-item-content { background: var(--panel-bg); }
.waypoints-container .waypoint-expandable > div { gap: 8px; padding: 0; }
.waypoints-container .waypoint-item.expanded .waypoint-expandable > div { padding: 8px 0 4px; }
.waypoints-container .waypoint-item.expanded .waypoint-icon { align-self: flex-start; margin-top: 5px; }
.waypoints-container .waypoint-item.expanded .waypoint-name-input,
.waypoints-container .waypoint-description-input,
.waypoints-container .stop-time-hours,
.waypoints-container .stop-time-minutes {
    height: 34px;
    border: 1px solid var(--line-card);
    border-radius: var(--radius-control);
    background: var(--card-bg);
    font-family: var(--font-text);
    color: var(--text);
}
.waypoints-container .waypoint-description-input { padding: 0 10px; font-size: 13px; }
.waypoints-container .waypoint-coordinates { padding: 0 9px; font-family: var(--font-text); font-size: 12px; letter-spacing: 0; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.waypoints-container .waypoint-stop-time { padding: 0 9px; gap: 6px; font-size: 13px; color: var(--text-2); }
.waypoints-container .stop-time-label { font-size: 13px; font-weight: 400; color: var(--text-2); }
.waypoints-container .stop-time-hours,
.waypoints-container .stop-time-minutes { width: 48px; padding: 0 6px; }
.waypoints-container .waypoint-actions { padding: 0 9px; }
.waypoints-container .waypoint-delete-btn { padding: 4px 0; background: none; border: none; font-size: 12px; color: var(--danger); }
.waypoints-container .waypoint-delete-btn:hover { background: none; text-decoration: underline; }

/* ---------------------------------------------------------------------------------------------------------
   Sidebar tabs — Plan · Import · Round trip (2026-09-29). Segmented control at the top; each panel fills the
   rest of the sidebar (Plan keeps its own scrolling list + sticky Save & share).
   --------------------------------------------------------------------------------------------------------- */
.sidebar-tabs {
    flex: none;
    display: flex;
    gap: 2px;
    margin: 14px 16px 0;
    padding: 3px;
    border-radius: var(--radius-control);
    background: var(--inset-bg);
}
.sidebar-tab {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-family: var(--font-text);
    font-size: 13px;
    white-space: nowrap;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.sidebar-tab:hover { color: var(--text); }
.sidebar-tab.active { background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-sm); }
.sidebar-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* Narrow sidebar (it can be resized down to 280 px): smaller tab labels so all four still fit */
.sidebar { container-type: inline-size; }
@container (max-width: 340px) {
    .sidebar-tab { padding: 0 4px; font-size: 11.5px; }
}

.sidebar-tab-panel { display: none; flex: 1; min-height: 0; flex-direction: column; }
.sidebar-tab-panel.active { display: flex; }
.sidebar-tab-panel[data-tab-panel="import"],
.sidebar-tab-panel[data-tab-panel="round-trip"],
.sidebar-tab-panel[data-tab-panel="scenic-routes"] { overflow-y: auto; padding: 8px 16px 16px; }
.plan-header { padding-top: 14px; }

/* Content blocks in the Import and Round trip tabs */
.tab-section { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.tab-section:last-child { border-bottom: none; }
/* Same small tracked caps as the list title ("17 WAYPOINTS") */
.tab-section .plan-eyebrow { display: block; margin: 0 0 8px; font-family: var(--font-text); font-weight: 500; font-size: 10.5px; letter-spacing: 0.18em; color: var(--text-muted); }
.tab-hint { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.tab-inline-form { display: flex; gap: 8px; }
.tab-inline-form .plan-input { flex: 1; min-width: 0; }
.tab-inline-form .btn-primary { height: 40px; padding: 0 14px; flex: none; }

/* GPX drop zone */
.sidebar-tab-panel .gpx-drop-zone { padding: 28px 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--card-bg); }
.sidebar-tab-panel .gpx-drop-zone:hover { border-color: var(--hover-border); background: var(--card-bg); }
.gpx-drop-icon { display: block; margin-bottom: 10px; font-size: 26px; color: var(--text-faint); }
.gpx-drop-title { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--text); }
.sidebar-tab-panel .gpx-file-select-link { font-size: 12.5px; font-weight: 400; color: var(--text-muted); }
.sidebar-tab-panel .gpx-file-select-link:hover { color: var(--text); }
.gpx-selected-filename { margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); }

/* Round trip */
.round-trip-row { display: flex; align-items: baseline; justify-content: space-between; }
.round-trip-row .plan-eyebrow { margin: 0; }
.round-trip-value { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); }
.round-trip-panel input[type="range"] { width: 100%; margin: 12px 0 6px; }
.round-trip-range-labels { font-size: 11.5px; color: var(--text-faint); }
.round-trip-compass-wrap { display: flex; justify-content: center; padding: 4px 0; }
#round-trip-compass { width: 110px; height: 110px; cursor: pointer; }
.round-trip-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 12px; }
.round-trip-actions .btn-primary, .round-trip-actions .btn-secondary { height: 40px; padding: 0 14px; }
.tab-notes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.tab-notes li { display: flex; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.tab-notes i { margin-top: 2px; font-size: 11px; color: var(--text-faint); }
/* The list scrolls inside the Plan tab (a flex child needs min-height: 0 to shrink below its content) */
.sidebar-tab-panel .waypoints-section { min-height: 0; }

/* ================================================================================================
   Ribbon header (index.php .ribbon-header): profile picture + nickname like the app's side-menu header,
   expand / collapse arrows beside it. Click rules: app.js initSideRibbon.
   ================================================================================================ */
.ribbon-header {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 76px;
    padding: 0 4px;   /* 4 + 48 + 4 = the collapsed width: the picture never moves */
    flex: none;
    position: relative;
}

/* Bottom: Scenic logo (+ the wordmark when expanded) → scenic.app */
.ribbon-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 48px;
    padding: 0 10px;   /* 24px mark centred on the 20px item icons above (12px padding) */
    margin-top: 4px;
    border: none;
    background: none;
    border-radius: var(--radius-lg);
    color: var(--scenic-white);
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.ribbon-logo:hover { background: rgba(255, 255, 255, 0.08); }
.ribbon-logo img { width: 24px; height: 24px; flex: none; display: block; transform: translateX(3px); }   /* optical centring: the splashes on the right make the mark look left-heavy */
.ribbon-wordmark {
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}
.ribbon-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 28px;   /* hover pill hugs the round picture */
    background: transparent;
    color: var(--rail-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ribbon-profile:hover { background: rgba(255, 255, 255, 0.08); color: var(--scenic-white); }
.ribbon-avatar { width: 48px; height: 48px; flex: none; }   /* same size collapsed and expanded */
/* Up to two lines next to the picture, then an ellipsis (nicknames are up to 40 characters) */
.ribbon-nickname {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
    flex: none;
    width: 154px;   /* its expanded width (220 − 4 − 48 − 10 − 4), fixed so the text never re-wraps while expanding */
}
.side-ribbon.expanded .ribbon-toggle i { transform: rotate(180deg); }   /* bottom row: » expands, « collapses */
.side-ribbon { position: relative; z-index: 1500; transition: width 0.2s ease; }
.ribbon-toggle { height: 36px; }   /* lower than the menu items */
/* Hairline between the bottom sections (help / Scenic + Get App / toggle), same as above the bottom section */
/* Every ribbon line: --rail-line, inset 12px from both edges (header bottom, bottom-section top, dividers in it) */
.ribbon-divider { height: 1px; margin: 4px 6px; border: none; background: var(--rail-line); }   /* + the section's 6px padding */
.ribbon-header::after, .ribbon-bottom::before { content: ''; position: absolute; left: 12px; right: 12px; height: 1px; background: var(--rail-line); }
.ribbon-header::after { bottom: 0; }
.ribbon-bottom { position: relative; }
.ribbon-bottom::before { top: 0; }

/* Get App: the label stays visible under the icon when collapsed */
/* Same 54px row in both states (rows below never move). Collapsed: the icon sits a little higher with a small label
   under it; expanded: the icon glides to the middle and the label beside it fades in. */
.ribbon-get-app { position: relative; height: 54px; }
.ribbon-get-app i { transition: transform 0.2s ease; }
.side-ribbon:not(.expanded) .ribbon-get-app i { transform: translateY(-7px); }
.ribbon-mini-label {
    position: absolute; left: 0; width: 44px; bottom: 8px;   /* centred under the icon: row starts at 6px, icon centre at 28px */
    font-size: 9px; line-height: 1; text-align: center; white-space: nowrap;
    opacity: 0; transition: opacity 0.1s ease;
}
.side-ribbon:not(.expanded) .ribbon-mini-label { opacity: 1; transition-delay: 0.1s; }

/* Get App popup: small white card over a dim backdrop, like Google Maps' "Get the app" */
.get-app-modal {
    position: fixed; inset: 0; z-index: 3100;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.get-app-modal[hidden] { display: none; }
.get-app-card {
    position: relative;
    width: 100%; max-width: 380px;
    padding: 28px 28px 24px;
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.get-app-card h2 { margin: 0 32px 20px 0; text-align: left; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); }
.get-app-close {
    position: absolute; top: 18px; right: 16px;
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: transparent; color: var(--text); font-size: 20px; cursor: pointer;
}
.get-app-close:hover { background: var(--inset-bg); }
.get-app-qr {
    position: relative; display: inline-block;
    padding: 6px; border: 1px solid var(--line-card); border-radius: var(--radius-lg);
}
.get-app-qr > img { display: block; width: 200px; height: 200px; }
/* The app icon (Icon Composer export, own transparent rounded corners) in the middle, on a white margin so the
   modules around it stay readable; the code uses error correction H, so it still scans (checked with a decoder) */
.get-app-qr > img.get-app-qr-logo {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 48px; height: 48px;
    padding: 3px; border-radius: 14px; background: #fff;
}
.get-app-card p { margin: 16px 8px 18px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.get-app-badges { display: flex; align-items: center; justify-content: center; gap: 4px; }
.get-app-badges img { display: block; }

/* Profile picture anywhere (account.js setAvatar): circle with the theme accent border (Save route's colour), for everyone */
.user-avatar {
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: var(--card-bg);
    border: 2px solid var(--accent);
    box-sizing: border-box;
}

/* ================================================================================================
   Sheet (public/js/sheet.js): the big screen panel for Me (and later My Routes …). Covers almost the
   whole window, close top right, the planner behind it blurred.
   ================================================================================================ */
/* Ribbon panel: the dock the sheets render into — a column between the ribbon and the sidebar (sheet.js). Dark like
   the ribbon it belongs to: the planner's colour aliases are re-pointed here, so every rule below keeps using the same
   variables (cards, inputs, buttons, text, lines) and comes out in granite. */
.ribbon-panel {
    --panel-bg: var(--ribbon-panel-bg);
    --card-bg: var(--ribbon-card-bg);
    --inset-bg: rgba(255, 255, 255, 0.07);
    --line: rgba(255, 255, 255, 0.10);
    --line-soft: rgba(255, 255, 255, 0.08);
    --line-card: rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.24);
    --hover-border: rgba(255, 255, 255, 0.35);
    --text: var(--scenic-white);
    --text-2: var(--rail-text);
    --text-muted: var(--rail-muted);
    --text-faint: #7E827B;
    --accent-press: var(--accent-hover);   /* small ochre text reads better lighter on dark */
    --danger: #E4756B;
    --success-press: #5DBF5D;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    color-scheme: dark;                    /* native selects, checkboxes, scrollbars */
    width: 420px;
    min-width: 300px;
    height: 100%;
    flex: none;
    position: relative;
    z-index: 100;
    overflow: hidden;                      /* the slide clips the content */
    background: var(--panel-bg);
    color: var(--text);
}
.ribbon-panel[hidden] { display: none; }
/* The slide (sheet.js slidePanel): only while animating does the width transition; shut = 0; the content keeps the
   final width meanwhile so nothing re-wraps */
.ribbon-panel.is-animating { min-width: 0 !important; transition: width var(--dur-base) var(--ease-out); }   /* min-width would snap the slide to 320 */
.ribbon-panel.is-closed { width: 0 !important; min-width: 0 !important; }
.ribbon-panel.is-animating .app-sheet { right: auto; width: var(--panel-w, 420px); }
.ribbon-panel .form-input, .ribbon-panel .app-sheet .form-input { background: rgba(255, 255, 255, 0.06); color: var(--text); border-color: var(--line-strong); }
.ribbon-panel .form-input::placeholder { color: var(--text-faint); }
.ribbon-panel .form-input:focus { border-color: var(--accent); }
.ribbon-panel .btn-secondary { background: rgba(255, 255, 255, 0.06); }
.ribbon-panel .btn-primary:disabled { background: rgba(255, 255, 255, 0.12); color: var(--text-faint); }
.ribbon-panel .me-card { border-color: var(--line-card); }
.ribbon-panel .location-sort select, .ribbon-panel .location-actions, .ribbon-panel .ride-map-chart select { background: var(--card-bg); color: var(--text); border-color: var(--line-card); }
.ribbon-panel .app-sheet-header { background: var(--panel-bg); border-bottom-color: var(--line); }
.app-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; }
/* Pages: a fresh page fades in; push / pop slide like the app's navigation stack (sheet.js show(direction)): the
   leaving page stays absolutely placed where it was and slides out while the new one slides in */
.app-sheet-body { position: relative; overflow-x: hidden; }
.app-sheet-page { animation: sheet-page-in var(--dur-base) var(--ease-out); }
.app-sheet-page.is-leaving { position: absolute; left: 16px; right: 16px; pointer-events: none; }
.app-sheet-page.from-right { animation: sheet-page-from-right 280ms var(--ease-out); }
.app-sheet-page.from-left { animation: sheet-page-from-left 280ms var(--ease-out); }
.app-sheet-page.to-left { animation: sheet-page-to-left 280ms var(--ease-out) forwards; }
.app-sheet-page.to-right { animation: sheet-page-to-right 280ms var(--ease-out) forwards; }
@keyframes sheet-page-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes sheet-page-from-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sheet-page-from-left { from { transform: translateX(-35%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes sheet-page-to-left { to { transform: translateX(-35%); opacity: 0; } }
@keyframes sheet-page-to-right { to { transform: translateX(100%); } }
.app-sheet[hidden] { display: none; }
.app-sheet-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--panel-bg);
}
.app-sheet-header {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    height: 56px;
    padding: 0 8px;
    flex: none;
    border-bottom: 1px solid var(--line);
    background: var(--card-bg);
}
.app-sheet-title { margin: 0; text-align: center; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sheet-back, .app-sheet-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    cursor: pointer;
}
.app-sheet-back[hidden] { visibility: hidden; display: block; }
.app-sheet-close { grid-column: 4; }
.app-sheet-tools { display: flex; align-items: center; gap: 2px; }
.app-sheet-tool {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--accent-press);
    font-size: 15px;
    cursor: pointer;
}
.app-sheet-tool:hover { background: var(--inset-bg); }
.app-sheet-back:hover, .app-sheet-close:hover { background: var(--inset-bg); }
.app-sheet-body { flex: 1; overflow-y: auto; padding: 4px 16px 40px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* ================================================================================================
   Me screen (public/js/me.js): iOS Form look — section label, white card of rows, footer text
   ================================================================================================ */
.me-section { margin-top: 22px; }
.me-section-title {
    margin: 0 0 8px 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent-press);
}
.me-card { background: var(--card-bg); border: 1px solid var(--line-card); border-radius: var(--radius-lg); overflow: hidden; }
.me-section-footer { margin: 8px 4px 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.me-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    text-align: left;
}
.me-card > .me-row + .me-row, .me-card > .me-row + .me-field, .me-card > .me-field + .me-field { border-top: 1px solid var(--line-soft); }
button.me-row { cursor: pointer; }
button.me-row:hover { background: var(--panel-bg); }
.me-row-label { flex: 1; }
.me-row-value { text-align: right; color: var(--text-muted); display: flex; flex-direction: column; align-items: flex-end; }
.me-row-value small { font-size: 11px; }
.me-chevron { font-size: 12px; color: var(--text-faint); flex: none; }
.me-danger .me-row-label { color: var(--danger); }
.me-accent { color: var(--accent-press); font-weight: 500; }
.me-muted { color: var(--text-muted); }
.me-loading { color: var(--text-faint); }
.me-text { font-size: 14px; line-height: 1.5; color: var(--text-2); margin: 0; }
.me-card > .me-text { padding: 12px 16px; }

/* Profile row: nickname + region, 70 px picture */
.me-profile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-profile-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; overflow-wrap: anywhere; }
.me-avatar { width: 70px; height: 70px; flex: none; }

/* Statistics row: 3 × 2 grid of figures */
.me-stats-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
.me-stat { display: flex; flex-direction: column; gap: 2px; }
.me-stat small { font-size: 11px; color: var(--text-muted); }
.me-stat b { font-size: 15px; font-weight: 600; color: var(--accent-press); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .me-stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* Levels + ranking */
.me-level-img { flex: none; object-fit: contain; }
.me-level-name { font-size: 17px; font-weight: 600; }
.me-level-info { align-items: flex-start; }
.me-rank-row { gap: 10px; }
.me-rank { min-width: 28px; font-size: 16px; font-variant-numeric: tabular-nums; }
.me-rank-name { display: flex; justify-content: space-between; gap: 12px; }

/* Edit profile + account forms */
.me-edit-picture { display: flex; justify-content: center; padding: 20px 0 8px; }
.me-picture-btn { position: relative; padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; }
.me-avatar-large { width: 130px; height: 130px; }
.me-camera {
    position: absolute; right: 4px; bottom: 4px;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--on-accent); font-size: 14px;
    box-shadow: var(--shadow-sm);
}
.me-field { display: flex; align-items: center; gap: 12px; padding: 8px 16px; font-size: 14px; color: var(--text); }
.me-field > span { flex: 0 0 140px; color: var(--text-2); }
.me-field .form-input { flex: 1; min-width: 0; }
.me-form .me-field { padding: 8px 0; }
.me-form { margin-top: 22px; }
.me-form .me-text p { margin: 0 0 10px; }
.me-info { margin: 8px 4px 0; font-size: 12px; color: var(--text-muted); }
.me-info summary { cursor: pointer; color: var(--accent-press); }
.me-info p { margin: 6px 0 0; line-height: 1.45; }
.me-actions { margin-top: 20px; display: flex; justify-content: flex-end; }
.me-btn-danger, .me-btn-danger:hover { background: var(--danger); }
.me-message { margin-top: 10px; min-height: 18px; font-size: 13px; text-align: right; }
.me-message.ok { color: var(--success-press); }
.me-message.bad { color: var(--danger); }
.app-sheet .form-input { padding: 8px 10px; border: 1px solid var(--line-card); border-radius: var(--radius-control); background: var(--card-bg); color: var(--text); font: inherit; font-size: 14px; }
.app-sheet .form-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }

/* Statistics charts: one series in the accent; the selected year solid, the others lighter (as in the app) */
.me-chart-controls { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.me-chart-controls .form-input { flex: 0 1 220px; }
.me-check { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
.me-chart-card { padding: 12px 12px 4px; }
.me-chart-caption { margin: 0 4px 4px; font-size: 12px; color: var(--text-2); min-height: 16px; }
.me-chart { position: relative; }
.me-chart svg { display: block; width: 100%; height: auto; }
.me-grid { stroke: var(--line); stroke-width: 1; }
.me-axis { font-size: 11px; fill: var(--text-muted); font-family: var(--font-text); }
.me-bar { fill: var(--accent); opacity: 0.55; }
.me-bar.is-selected { opacity: 1; }
.me-avg { stroke: var(--text-faint); stroke-width: 1; }   /* average across the bars, as in the app */
.me-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.me-dot { fill: var(--text); stroke: var(--card-bg); stroke-width: 2; }
.me-hit { fill: transparent; cursor: pointer; }
.me-hit:hover { fill: rgba(17, 22, 17, 0.04); }
.me-tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 8px));
    padding: 6px 10px;
    border-radius: var(--radius-md);
    background: var(--rail-bg);
    color: var(--rail-text);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-md);
}
.me-year-stepper { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.me-year-stepper .me-section-title { margin: 0; letter-spacing: 0.05em; }

/* ================================================================================================
   Dialog backdrop — ONE look behind every dialog, side panel and sheet: darkened and blurred (tokens.css)
   ================================================================================================ */
.auth-modal-overlay,
.side-panel-overlay,
.custom-alert-overlay,
.location-help-modal,
.get-app-modal {
    background: var(--backdrop-bg);
    -webkit-backdrop-filter: var(--backdrop-blur);
    backdrop-filter: var(--backdrop-blur);
}

/* ================================================================================================
   Scenic Routes tab (2026-10-03) — Explore routes: place search + radius, filter chips, route cards,
   detail view. Head stays put, the list scrolls (same flex trick as the Plan tab's waypoint list).
   ================================================================================================ */
.sidebar-tab-panel[data-tab-panel="scenic-routes"] { overflow: hidden; padding: 8px 0 0; }
.discover-head { flex: none; padding: 0 16px 10px; border-bottom: 1px solid var(--line-soft); }
.discover-head .plan-title-row { margin-bottom: 10px; }
.discover-search-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-control); font-size: 12px; font-weight: 600; }
/* The map moved since the last search: the button is the way to search the new area */
.discover-search-btn.is-stale { background: var(--accent); border-color: var(--accent); color: #fff; }
.discover-search-btn.is-stale:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.discover-search-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.discover-search-btn.is-disabled { color: var(--text-faint); border-color: var(--line-soft); cursor: not-allowed; }
.discover-search-btn.is-disabled i { opacity: 0.5; }
.discover-search-btn.is-disabled:hover { background: var(--card-bg); }
/* Tooltip while the area is too big (data-tip set by updateDiscoverSearchButton) */
.discover-search-btn { position: relative; }
.discover-search-btn[data-tip]:not([data-tip=""]):hover::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 5;
    padding: 6px 9px; border-radius: 6px; background: var(--text); color: #fff; box-shadow: var(--shadow-md);
    font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; opacity: 1;
}
.discover-search-btn.is-loading i { animation: discover-spin 0.9s linear infinite; }
@keyframes discover-spin { to { transform: rotate(360deg); } }

/* Place search with the radius inside the field */
.discover-place { position: relative; display: flex; align-items: center; margin-bottom: 10px; }
.discover-place .plan-input { padding-left: 34px; padding-right: 92px; }
.discover-place-icon { position: absolute; left: 12px; font-size: 13px; color: var(--text-faint); pointer-events: none; }
.discover-radius, .discover-chip, .discover-sort select, .discover-per-page select {
    appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7067' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.discover-radius { position: absolute; right: 6px; height: 28px; padding: 0 24px 0 10px; border: none; border-radius: 6px; background-color: var(--inset-bg); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); }
.discover-suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; display: none; z-index: 20; max-height: 260px; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--line-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.discover-suggestions.open { display: block; }
.discover-suggestion { padding: 9px 12px; cursor: pointer; font-size: 13px; color: var(--text); }
.discover-suggestion small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--text-muted); }
.discover-suggestion:hover, .discover-suggestion.active { background: var(--inset-bg); }

/* Text filters (name contains, creator is), applied on Enter / leaving the field */
.discover-text-filters { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; margin-bottom: 8px; }
.discover-text-filters .plan-input { height: 34px; padding: 0 10px; font-size: 13px; }
.discover-text-filters .plan-input.is-set { border-color: var(--accent); background: var(--accent-soft); }
/* Filter chips are native selects dressed as pills; a non-default value tints the chip */
.discover-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.discover-chip { height: 30px; padding: 0 26px 0 12px; border: 1px solid var(--line-card); border-radius: var(--radius-pill); background-color: var(--card-bg); font-size: 12.5px; font-weight: 500; color: var(--text); }
.discover-chip:hover { border-color: var(--hover-border); }
.discover-chip.is-set { border-color: var(--accent); background-color: var(--accent-soft); }
.discover-chip:focus-visible, .discover-sort select:focus-visible, .discover-radius:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.discover-result-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.discover-count { font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.discover-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-press); }
.discover-sort select { padding: 0 14px 0 0; border: none; background-color: transparent; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: inherit; background-position: right 0 center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23B96E38' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* The list */
.discover-list, .discover-detail { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 16px; }
.discover-list { display: flex; flex-direction: column; gap: 10px; }
.discover-hint { padding: 36px 16px; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.discover-hint i { display: block; margin-bottom: 10px; font-size: 24px; color: var(--text-faint); }
.discover-card { border: 1px solid var(--line-card); border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.discover-card:hover, .discover-card.is-hover { border-color: var(--hover-border); }
.discover-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.discover-card-main { display: flex; gap: 12px; padding: 12px; }
.discover-thumb { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 8px; background: var(--inset-bg) center / cover no-repeat; color: var(--text-faint); font-size: 22px; }
.discover-thumb-count { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(17,22,17,0.72); color: #fff; font-size: 11px; font-weight: 600; }
.discover-thumb-count i { margin-right: 3px; font-size: 10px; }
.discover-card-body { flex: 1; min-width: 0; }
.discover-card-name { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--text); }
.discover-card-name .name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.discover-dot { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.discover-card-rating { margin-bottom: 3px; font-size: 13px; color: var(--text); }
.discover-card-rating i { margin-right: 3px; font-size: 12px; color: var(--accent); }
.discover-card-rating .count, .discover-card-rating.none { color: var(--text-muted); }
.discover-card-rating .count { margin-left: 3px; }
/* Narrow sidebar: the three action buttons keep their words, drop their icons */
@container (max-width: 340px) {
    .discover-card-actions .btn-compact i { display: none; }
    .discover-card-actions .btn-compact { padding: 0 4px; font-size: 11px; }
}
.discover-card-stats { margin-bottom: 4px; font-size: 13px; color: var(--text-2); }
.discover-card-meta { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.discover-card-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 0 12px 12px; }
.discover-card-actions .btn-compact { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 8px; border: 1px solid var(--line-card); border-radius: var(--radius-control); background: var(--card-bg); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.discover-card-actions .btn-compact:hover { border-color: var(--hover-border); background: var(--card-bg); }
/* Pager under the result row */
.discover-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.discover-pager[hidden] { display: none; }
.discover-pager-nav { display: flex; align-items: center; gap: 2px; font-size: 12.5px; color: var(--text-2); }
.discover-pager-nav .btn-icon { padding: 4px 6px; font-size: 12px; }
.discover-per-page { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); }
.discover-per-page select { height: 26px; padding: 0 22px 0 9px; border: 1px solid var(--line-card); border-radius: var(--radius-pill); background-color: var(--card-bg); font-size: 12px; font-weight: 500; color: var(--text); }
.discover-per-page select:hover { border-color: var(--hover-border); }

/* Detail view (Open) */
.discover-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 0; border: none; background: none; font: inherit; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.discover-back:hover { color: var(--text); }
.discover-detail h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--text); }
.discover-detail-by { margin: 0 0 12px; font-size: 12.5px; color: var(--text-muted); }
.discover-detail-by i { color: var(--accent); }
.discover-detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.discover-detail-stat { padding: 10px 12px; border-radius: 8px; background: var(--inset-bg); }
.discover-detail-stat b { display: block; font-family: var(--font-display); font-size: 15px; color: var(--text); }
.discover-detail-stat span { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.discover-detail-desc { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); white-space: pre-line; }
.discover-detail .discover-count { display: block; margin: 14px 0 8px; }
.discover-photos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.discover-photo { flex: none; display: block; width: 110px; height: 110px; border-radius: 8px; background: var(--inset-bg) center / cover no-repeat; }
.discover-review { padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 13px; line-height: 1.5; color: var(--text-2); }
.discover-review-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; font-size: 12px; color: var(--text-muted); }
.discover-review-head b { color: var(--text); font-weight: 600; }
.discover-review-head i { color: var(--accent); }
.discover-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 4px; }
.discover-detail-actions .btn-primary, .discover-detail-actions .btn-secondary { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* Hover card on the map: the list card without its buttons, at the pointer; pointer events pass through it */
.discover-hover-popup { pointer-events: none; z-index: 6; }
.discover-hover-popup .evomaps-popup-content { padding: 0; border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: var(--shadow-md); }
.discover-card-popup { width: 300px; max-width: 70vw; border: none; box-shadow: none; cursor: default; }
/* Start / end pins of the selected route on the map */
.discover-pin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.discover-pin.start { background: #10b981; }
.discover-pin.end { background: #ef4444; }

/* hidden must win over the flex display of the two panes */
.discover-list[hidden], .discover-detail[hidden] { display: none; }

/* ================================================================================================
   My Vehicles (public/js/vehicles.js): 3:2 picture cards with the name overlaid (as the app's list),
   picture button on the vehicle page, history rows. Everything else reuses the .me-* styles.
   ================================================================================================ */
.vehicle-status { margin-top: 22px; text-align: center; }
.vehicle-empty { display: flex; justify-content: center; padding: 60px 0; }
.vehicle-list-actions { display: flex; justify-content: flex-end; margin-top: 22px; }
.vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.vehicle-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 0;
    border: 1px solid var(--line-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--card-bg);
    cursor: pointer;
    text-align: left;
}
.vehicle-card img, .vehicle-picture-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vehicle-card-name {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 36px 16px 14px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    color: #fff;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
}
.vehicle-edit-picture { display: flex; justify-content: center; padding: 20px 16px 8px; }
.vehicle-picture-btn {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 3 / 2;
    padding: 0;
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: none;
    cursor: pointer;
}
.vehicle-picture-btn .me-camera { right: 10px; bottom: 10px; }
.vehicle-entry .me-row-label { display: flex; flex-direction: column; gap: 3px; }
.vehicle-entry-meta { font-size: 12px; color: var(--text-muted); }
.vehicle-entry-meta i { margin-right: 5px; }
.vehicle-entry-meta i:not(:first-child) { margin-left: 12px; }
.vehicle-entry-actions { gap: 10px; }
.vehicle-btn-danger, .vehicle-btn-danger:hover { color: var(--danger); }
.vehicle-delete { margin-top: 36px; justify-content: center; }

/* ================================================================================================
   My Locations (public/js/locations.js): Home / Work row, folder accordion, rows with the marker,
   marker palette, organizing bar, crosshair pick bar on the map, pins + popup, layer toggles
   ================================================================================================ */
.location-status { margin-top: 22px; text-align: center; }
.location-homework { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.location-homework .me-row { border: 1px solid var(--line-card); border-radius: var(--radius-lg); background: var(--card-bg); min-height: 56px; }
.location-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.location-search { position: relative; flex: 1 1 220px; }
.location-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 13px; pointer-events: none; }
.location-search .form-input { width: 100%; padding-left: 34px; box-sizing: border-box; }
.location-sort { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.location-sort select, .location-actions {
    padding: 6px 26px 6px 10px; border: 1px solid var(--line-card); border-radius: var(--radius-control);
    background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
    font: inherit; font-size: 13px; color: var(--text); appearance: none; -webkit-appearance: none; cursor: pointer;
}
.location-folder .location-folder-head {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 4px; border: none; background: none;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--text); text-align: left; cursor: pointer;
}
.location-folder-icon { color: var(--accent-press); width: 18px; text-align: center; }
.location-folder-name { flex: 1; }
.location-folder-count { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.location-folder-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.location-folder .me-section-footer { margin: 0 4px 10px; }
.location-row .location-marker { flex: none; }
.location-row[role=button] { cursor: pointer; }
.location-row[role=button]:hover { background: var(--panel-bg); }
.location-row[role=button]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.location-drag { flex: none; width: 18px; margin: 0 -2px 0 -6px; color: var(--text-faint); font-size: 13px; text-align: center; cursor: grab; }
.location-drag:active { cursor: grabbing; }
.location-row.is-dragging { opacity: 0.5; }
.location-folder.is-drop-target .location-folder-head { color: var(--accent-press); }
.location-folder:not(.folder-group).is-drop-target .me-card, .location-folder:not(.folder-group).is-drop-target .location-folder-head { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: var(--radius-lg); }
/* Folder cards: the dashed border wraps the whole card (its tools row included when expanded), never the route cards */
.location-folder.folder-group.is-drop-target .folder-card { outline: 2px dashed var(--accent); outline-offset: -2px; }
.location-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.location-row-name { font-weight: 600; }
.location-row-desc { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.location-row-meta { font-size: 11px; color: var(--text-muted); }
.location-row-meta i { margin-right: 4px; }
.location-check { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.location-empty { padding: 14px 16px; color: var(--text-muted); }
.location-organize { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; }
.location-organize .btn-link { padding: 4px 6px; font-size: 13px; }
.location-organize-count { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.location-danger, .location-danger:hover { color: var(--danger); }
.location-page-actions { gap: 10px; }
.location-delete { margin-top: 32px; justify-content: center; }

/* the marker: a coloured disc with the symbol (the app's pin) */
.location-marker {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    color: #fff; font-size: 15px; font-weight: 700; line-height: 1; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.location-marker.large { width: 56px; height: 56px; font-size: 24px; }
.location-marker-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; }
.location-marker-fields { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.location-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.location-swatch {
    width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.location-swatch.is-selected { border-color: var(--text); }
.location-swatch.is-default { background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--line-card); font-size: 11px; color: var(--text-muted); }
.location-symbol-field { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.location-symbol-field .form-input { width: 72px; text-align: center; }
.location-position { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.location-position code { font-size: 13px; color: var(--text-2); margin-right: auto; }
.location-coords { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.location-coords a, .location-coords button { font-size: 13px; }
.location-many { max-height: 220px; overflow-y: auto; }
.location-many .me-row { min-height: 36px; padding: 6px 16px; font-size: 13px; }

/* picking a position on the main map (sheet closed): crosshair at the centre + a bar at the top */
.location-crosshair { z-index: 5; pointer-events: none; }
.location-pick-bar {
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 6;
    display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px;
    background: var(--card-bg); border: 1px solid var(--line-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.location-pick-bar small { font-weight: 400; color: var(--text-muted); }

/* pins on the map + their popup */
.location-pin { cursor: pointer; padding: 0; }
.location-pin:hover { transform: scale(1.12); }
.location-map-popup .evomaps-popup-content, .location-map-popup .maplibregl-popup-content { padding: 0; border-radius: var(--radius-lg); overflow: hidden; }
.location-popup { width: 240px; font-size: 13px; }
.location-popup-head { padding: 10px 14px 8px; }
.location-popup-head b { font-size: 14px; }
.location-popup-desc { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.location-popup .map-menu-option { padding: 8px 14px; font-size: 13px; }

/* layers panel: the "My Data" group with the collapsible My Locations entry */
.location-layers-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 0; border: none; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.location-layers-title { font-size: 13px; font-weight: 600; }
.location-layers-head i { margin-left: auto; font-size: 11px; color: var(--text-faint); }
.location-layers-on { font-size: 11px; font-weight: 600; color: var(--on-accent); background: var(--accent); border-radius: 9px; padding: 1px 6px; }
.layers-tab-panel[data-tab=mydata] .location-layer-list { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 4px 6px; }
.layers-tab-panel[data-tab=mydata] .location-layer-list[hidden] { display: none; }   /* the attribute must beat display: flex */
.layers-tab-panel[data-tab=mydata] .location-layer { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 400; }
.layers-tab-panel[data-tab=mydata] .location-layer input { accent-color: var(--accent); }
.layers-tab-panel[data-tab=mydata] .location-layer .location-marker { width: 20px; height: 20px; font-size: 10px; border-width: 1px; }
.layers-tab-panel[data-tab=mydata] .location-layer small { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.layers-tab-panel[data-tab=mydata] .location-layer-empty { margin: 0; font-size: 12px; color: var(--text-muted); }

/* ================================================================================================
   My POI Groups (public/js/poigroups.js): rows with the POI count, the "name,lat,lon" text of a group
   ================================================================================================ */
.poigroup-row-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.poigroup-csv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px 0; font-size: 12px; color: var(--text-muted); }
.poigroup-csv-head code { font-size: 12px; color: var(--text-2); }
.poigroup-csv-count { margin-left: auto; font-weight: 600; color: var(--accent-press); }
.poigroup-csv {
    display: block; width: 100%; box-sizing: border-box; margin: 8px 0 0; padding: 10px 16px;
    min-height: 180px; max-height: 50vh; resize: vertical; border: none; border-top: 1px solid var(--line-soft);
    background: var(--card-bg); color: var(--text); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.poigroup-csv:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.poigroup-csv.is-bad { box-shadow: inset 0 0 0 2px var(--danger); }
.poigroup-csv-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.poigroup-warning { margin: 8px 4px 0; font-size: 12px; color: var(--danger); }

/* ================================================================================================
   My Recorded Rides (public/js/rides.js): folder totals, ride rows, stats, pictures, the map mode
   (track + bottom bar + chart). The folder list reuses the .location-* classes.
   ================================================================================================ */
.ride-folder-totals { display: flex; gap: 10px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ride-folder-totals i { margin-right: 3px; }
.ride-row-color { width: 10px; height: 34px; flex: none; border-radius: 5px; }
.ride-row-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--text-muted); }
.ride-row-meta i { margin-right: 4px; }
.ride-row-vehicle { display: inline-flex; align-items: center; gap: 5px; }
.ride-row-vehicle img { width: 40px; height: 25px; object-fit: cover; border-radius: 4px; }
.ride-row-pic { width: 40px; height: 30px; object-fit: cover; border-radius: 4px; flex: none; }
.ride-stats { padding: 12px 16px; }
.ride-description { min-height: 64px; resize: vertical; }
.ride-pictures { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 12px 16px; }
.ride-picture { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; overflow: hidden; }
.ride-picture img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.ride-picture.is-selected { border-color: var(--accent); }
.ride-picture-caption { display: block; padding: 4px 2px 0; font-size: 11px; color: var(--text-muted); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ride-picture-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.ride-picture-editor .form-input { flex: 1; min-width: 140px; }
.ride-picture-editor label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ride-picture-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.ride-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.ride-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.ride-share code { word-break: break-all; }

/* map mode: the chart (SDK ElevationChart) at the bottom and photo pins */
/* The elevation / speed chart is the SDK's ElevationChart control: positioned clear of the zoom buttons, planner card look */
#map .evomaps-chart { left: 16px; right: 72px; bottom: 10px; border: 1px solid var(--line-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }   /* bottom-aligned with the credits button */
.chart-cursor { position: absolute; top: 20px; bottom: 18px; width: 1px; background: rgba(17, 22, 17, 0.7); pointer-events: none; }
/* The flag on the route while hovering the chart: the values above a stem that ends at the SDK's dot */
.chart-flag { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.chart-flag-label { padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line-card); box-shadow: var(--shadow-lg); font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.chart-flag-stem { width: 1px; height: 34px; background: #111; }
/* The planned route's chart toggle (a map button): lit while the chart shows */
/* Map Settings → View: pitch / bearing sliders and the gesture hint */
.map-camera { display: grid; gap: 6px; }
.layers-panel .map-camera-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 400; color: var(--text); text-transform: none; letter-spacing: 0; }
.map-camera-row span { width: 56px; font-weight: 600; }
.map-camera-row input { flex: 1; margin: 0; accent-color: var(--accent); }
.map-camera-row output { width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.map-camera-reset { justify-self: start; padding: 4px 10px; font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--text); cursor: pointer; }
.map-camera-reset:hover { background: var(--inset-bg); }
.map-gestures { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 11px; line-height: 1.35; color: var(--text-2); }
.map-gestures th, .map-gestures td { padding: 4px 6px 4px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.map-gestures thead th { border-top: 0; padding-top: 0; font-weight: 600; color: var(--text); }
.map-gestures tbody th { font-weight: 600; color: var(--text); white-space: nowrap; width: 1%; }
/* Every section of the panel is a white card on the warm grey panel */
.layers-tab-panel > div { background: #fff; border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04); }
.layers-tab-panel > div[hidden] { display: none; }
.plan-elevation-control > button.is-on { background: var(--accent) !important; color: #fff !important; }
.ride-photo-pin { width: 40px; height: 40px; object-fit: cover; border: 2px solid #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
/* My Routes' map mode: "Edit Route" centred at the bottom (the credits button's baseline), above the chart while it shows */
.route-map-edit {
    position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 6;
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px;
    background: var(--card-bg); color: var(--text); border: 1px solid var(--line-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: bottom 0.2s ease;
}
.route-map-edit:hover { background: var(--panel-bg); }
.route-map-edit.has-chart { bottom: 130px; }   /* the SDK chart: 110px tall, 10px off the bottom, 10px gap */


/* ================================================================================================
   My Routes (public/js/routes.js): the sidebar's inline save options, rows, rights note, smart folders,
   the map mode's stop / via pins. The folder list reuses the .location-* classes, the bar .ride-map-bar.
   ================================================================================================ */
.plan-textarea { resize: vertical; min-height: 44px; }
.plan-save-options { display: none; align-items: flex-end; gap: 14px; margin-top: 8px; }
body.user-logged-in .plan-save-options { display: flex; }
.plan-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); padding-bottom: 8px; white-space: nowrap; }
.plan-check input { accent-color: var(--accent); }
.plan-folder { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.route-row-vehicle { display: inline-flex; align-items: center; gap: 5px; }
.route-row-vehicle .vehicle-icon { width: 22px; height: 14px; }
.route-track-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 4px; background: #00D9FF; color: #000; }
.route-folder-lock { font-size: 11px; color: var(--text-muted); }
.route-rights { margin: 0; padding: 6px 16px 10px; font-size: 12px; color: var(--text-muted); }
.route-smart .location-folder-head { cursor: pointer; }
/* the small map in a route / ride page (ScenicMyData.mapPreview); a click opens the map mode */
/* reviews: cards with the six categories, star input */
.route-reviews { display: flex; flex-direction: column; }
.route-review { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.route-review-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; }
.route-review-comment { display: block; width: 100%; margin: 6px 0 0; padding: 0; border: none; background: none; text-align: left; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; white-space: pre-line; }
.route-review-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; margin-top: 8px; }
.route-review-cats span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-muted); }
.route-review-tools { display: flex; gap: 12px; margin-top: 8px; }
.route-stars { display: inline-flex; gap: 2px; color: var(--line-card); font-size: 13px; }
.route-stars .route-star.is-on { color: var(--accent); }
.route-stars.is-input .route-star { padding: 2px; border: none; background: none; cursor: pointer; font-size: 20px; color: var(--line-card); line-height: 1; }
.route-stars.is-input .route-star.is-on { color: var(--accent); }
.route-review-row { justify-content: space-between; }
.route-overall { color: var(--accent); }
/* share: segmented mode, invitees */
.route-share-message { margin: 0; border: none; border-radius: 0; min-height: 72px; }
.route-share-mode { display: flex; gap: 6px; padding: 12px 16px; }
.route-share-mode button { flex: 1; padding: 7px 10px; border: 1px solid var(--line-card); border-radius: var(--radius-lg); background: var(--card-bg); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.route-share-mode button.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.route-share-note { margin: 0; padding: 0 16px 10px; }
.route-share-search { margin: 0 16px 8px; }
.route-share-results .me-row, .route-invitee { gap: 10px; }
.route-share-result { width: 100%; text-align: left; }
.route-invitee .route-role { width: auto; padding: 4px 8px; font-size: 13px; }
.route-invited { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.route-elevation-status { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.route-smart-gear { margin-left: -10px; margin-right: 2px; font-size: 9px; align-self: flex-end; color: var(--text-muted); }   /* the app's folder.badge.gearshape */
.route-stop-pin, .route-via-pin { pointer-events: none; }
.route-via-pin { opacity: 0.95; }
.ride-map-bar .plan-check { padding-bottom: 0; }

/* ================================================================================================
   Ribbon panel screens for a mouse and a visible map (2026-10-06): stacked form fields, dense rows with a hover
   checkbox, the ⋯ / right-click menu, the hover chip on the map, the "On the map" row
   ================================================================================================ */
/* Fields: label above the input (a 420 px column has no room for label-left); a checkbox field stays one line */
.app-sheet .me-field { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 16px; }
.app-sheet .me-field > span { flex: none; font-size: 11px; font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.app-sheet .me-field:has(> input[type=checkbox]) { flex-direction: row; align-items: center; justify-content: space-between; }
.app-sheet .me-field:has(> input[type=checkbox]) > span { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); }
.app-sheet .me-stats-grid { grid-template-columns: repeat(2, 1fr); }
.app-sheet .vehicle-grid { grid-template-columns: 1fr; }
.app-sheet .location-homework { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }   /* Home and Work side by side */
.app-sheet .location-homework .item-card { padding-right: 8px; }
.app-sheet .location-homework .item-card .item-card-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.app-sheet .location-toolbar { margin-top: 12px; }
.app-sheet .me-section { margin-top: 16px; }
.app-sheet .ride-actions { padding: 10px 12px; }
.app-sheet .me-stat b { font-size: 14px; }

/* Rows: tighter, no chevron (a mouse list needs none), the checkbox shows on hover / while selecting */
.app-sheet .location-row { min-height: 40px; padding: 6px 10px 6px 4px; gap: 8px; }
.app-sheet .location-row > .me-chevron { display: none; }
.app-sheet .location-row-name { font-weight: 500; }
.app-sheet .ride-row-color { width: 6px; height: 28px; border-radius: 3px; }
.app-sheet .ride-row-meta { gap: 2px 8px; }
.app-sheet .ride-row-pic { width: 36px; height: 27px; }
.app-sheet .location-drag { margin: 0; }
.location-check { visibility: hidden; flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--accent-press); cursor: pointer; }
.location-row:hover .location-check, .location-folder.is-organizing .location-check, .location-check:checked { visibility: visible; }
.location-row.is-hover { background: var(--inset-bg); }
.location-folder-headrow { display: flex; align-items: center; gap: 2px; }
.location-folder-headrow .location-folder-head { flex: 1; min-width: 0; }
.location-folder-more {
    flex: none;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-faint);
    font-size: 14px;
    cursor: pointer;
}
.location-folder-more:hover, .location-folder-more[aria-expanded=true] { background: var(--inset-bg); color: var(--text); }
.app-sheet .location-folder-tools { margin: 0 0 8px; }
.app-sheet .location-folder-tools:empty { display: none; }

/* The popover menu */
.mydata-menu {
    position: fixed;
    z-index: 4000;
    min-width: 190px;
    padding: 4px;
    background: var(--card-bg);
    border: 1px solid var(--line-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    font-size: 13px;
    color: var(--text);
}
.mydata-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.mydata-menu-item i { width: 16px; text-align: center; color: var(--text-muted); font-size: 12px; }
.mydata-menu-item span { flex: 1; }
.mydata-menu-item:hover:not(:disabled) { background: var(--inset-bg); }
.mydata-menu-item:disabled { color: var(--text-faint); cursor: default; }
.mydata-menu-item.is-danger, .mydata-menu-item.is-danger i { color: var(--danger); }
.mydata-menu-arrow { margin-left: auto; font-size: 10px !important; }
.mydata-menu-sep { height: 1px; margin: 4px 6px; background: var(--line-soft); }
.mydata-menu-title { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.mydata-menu-sub { position: relative; }
.mydata-menu-sub > .mydata-menu { display: none; position: absolute; left: calc(100% - 2px); top: -5px; }
.mydata-menu-sub.is-left > .mydata-menu { left: auto; right: calc(100% - 2px); }
.mydata-menu-sub:hover > .mydata-menu, .mydata-menu-sub.is-open > .mydata-menu { display: block; }

/* The name chip beside a hovered line on the map */
.mydata-chip .evomaps-popup-content { padding: 3px 9px; border-radius: var(--radius-md); background: rgba(17, 22, 17, 0.9); color: #fff; font-size: 12px; font-weight: 500; box-shadow: none; }
.mydata-chip .evomaps-popup-tip { display: none; }

/* "On the map": the controls of the item shown on the main map (vias / elevation for a route, the chart for a ride) */
.mydata-onmap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; font-size: 13px; }
.mydata-onmap .plan-check { padding: 0; }
.mydata-onmap .ride-map-chart select { padding: 4px 6px; }
.mydata-onmap .route-elevation-status { font-size: 12px; color: var(--text-muted); }
.location-pin.is-hover { transform: scale(1.25); z-index: 2; }
.location-pin.is-draggable { cursor: grab; box-shadow: 0 0 0 3px rgba(204, 128, 71, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35); }
.location-pin.is-draggable:active { cursor: grabbing; }

/* ================================================================================================
   Folder screens in the app's shape (My Routes first): a search pill under the title, the header's icon buttons for
   add folder / sort, every folder a black card (name, totals, count, chevron) with its tools inside when open, and
   the routes below it as cards with a sketch of the route (canvas, the simplified line) on the left
   ================================================================================================ */
.app-sheet .folder-search { margin-top: 12px; }
.app-sheet .folder-search .form-input { border-radius: var(--radius-pill); padding-left: 38px; background: rgba(255, 255, 255, 0.08); }
.app-sheet .location-folders { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.app-sheet .location-folder.folder-group { margin: 0; }
.folder-card {
    border-radius: var(--radius-xl);
    background: var(--scenic-granite);
    overflow: hidden;
}
.folder-card .location-folder-headrow { padding: 0; }
.folder-card .location-folder-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 14px 14px 16px;
    border: none;
    background: none;
    font: inherit;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.folder-card .location-folder-head:hover { background: rgba(255, 255, 255, 0.04); }
.folder-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.folder-card .location-folder-name { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-card .location-folder-name .route-folder-lock, .folder-card .route-smart-gear { font-size: 11px; color: var(--text-muted); margin-left: 6px; }
.folder-card-meta { display: flex; gap: 14px; font-size: 13px; color: var(--text-muted); }
.folder-card-meta i { margin-right: 5px; }
.folder-card .location-folder-count { font-size: 15px; color: var(--text-2); }
.folder-card .me-chevron { font-size: 13px; color: var(--text-muted); }
.folder-card .location-folder-tools { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px 14px 16px; }   /* the pills centred in a row of their own */
.folder-card .location-folder-tools:empty { display: none; }
.folder-card .me-section-footer { margin: 0; padding: 2px 16px 0; }
.folder-card .me-section-footer:last-child { padding-bottom: 14px; }
.folder-card .folder-chevron { transition: transform var(--dur-base) var(--ease-out); }
.location-folder.is-open .folder-chevron { transform: rotate(90deg); }
/* Expanding / collapsing: the body's height animates through grid rows (0fr ↔ 1fr), the inner block clips meanwhile */
.folder-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.folder-body.is-open { grid-template-rows: 1fr; }
.folder-body-inner { min-height: 0; overflow: hidden; }
.folder-body.is-open .folder-body-inner { overflow: visible; transition: overflow 0s var(--dur-base); }
.mydata-menu-item .fa-blank { visibility: hidden; }
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--accent-press);
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--accent-press);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.btn-pill:hover { background: rgba(204, 128, 71, 0.12); }
.btn-pill--icon { padding: 0 10px; }
.folder-card .location-organize { flex: 1; }
/* The rows under an open folder: cards with the route sketch */
.app-sheet .item-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; background: none; border: none; overflow: visible; }
.item-card-row { display: flex; align-items: center; gap: 8px; }   /* the checkbox in front of the card */
.item-card-row > .location-check { margin: 0 0 0 2px; }
.item-card-row:hover > .location-check, .location-folder.is-organizing .item-card-row > .location-check { visibility: visible; }
.item-card-row > .item-card { flex: 1; min-width: 0; }
.location-organize .btn-icon.location-danger { color: var(--danger); }
.location-organize .btn-icon:disabled { color: var(--text-faint); cursor: default; }
.app-sheet .item-cards > .me-row + .me-row { border-top: none; }
.app-sheet .item-card {
    min-height: 72px;
    padding: 0 12px 0 0;
    gap: 12px;
    border-radius: var(--radius-xl);
    background: var(--scenic-granite);
    cursor: pointer;
}
.app-sheet .item-card:hover, .app-sheet .item-card.is-hover { background: #0B0E0B; }
.app-sheet .item-card > .me-chevron { display: block; }
.item-thumb { flex: none; width: 96px; height: 72px; border-radius: var(--radius-xl) 0 0 var(--radius-xl); background: var(--ribbon-card-bg); display: block; }
.app-sheet .item-card .location-row-text { flex-direction: column; align-items: stretch; gap: 3px; padding: 8px 0; }
.app-sheet .item-card .location-row-name { font-size: 15px; font-weight: 600; white-space: normal; }
.item-card-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--text-2); }
.item-card-meta i, .item-card-meta .vehicle-icon { margin-right: 5px; }
.item-card-meta .vehicle-icon { width: 22px; height: 14px; vertical-align: -3px; }
/* The routes that will move: a border laid over the card (an overlay, so the sketch canvas does not cover it) */
.app-sheet .item-card { position: relative; }
.app-sheet .item-card.is-dragging { opacity: 1; }
.app-sheet .item-card.is-dragging::after { content: ''; position: absolute; inset: 0; z-index: 1; border: 2px solid var(--accent); border-radius: var(--radius-xl); pointer-events: none; }
/* The drag image for a selection (mydata-ui.js wireFolderDrag): the grabbed row with a badge counting the rows that move */
.drag-ghost { position: fixed; top: -1000px; left: -1000px; z-index: 5000; pointer-events: none; }
.drag-ghost > .location-row { background: var(--scenic-granite); color: var(--scenic-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.drag-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 13px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    box-shadow: var(--shadow-md);
}

/* Route page (My Routes): the colour picker row and the Save / Delete pair */
.item-color-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.item-color-pick { position: relative; width: 44px; height: 44px; flex: none; cursor: pointer; }
.item-color-pick input[type=color] {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: none;
    cursor: pointer;
}
.item-color-pick input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.item-color-pick input[type=color]::-webkit-color-swatch { border: none; border-radius: 50%; }
.item-color-pick input[type=color]::-moz-color-swatch { border: none; border-radius: 50%; }
.item-color-text { flex: 1; font-size: 13px; color: var(--text-2); }
.item-page-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.item-page-buttons .btn-primary:disabled { cursor: default; }
/* A page's actions at its foot (the app's ⋯ menu as buttons): one row that scrolls sideways when it overflows; the chevron
   at the right edge shows there is more and scrolls on click */
.app-sheet-foot { flex: none; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--card-bg); }
.page-actions { position: relative; }
.page-actions-scroll { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.page-actions-scroll::-webkit-scrollbar { display: none; }
.page-actions-scroll .btn-pill { flex: none; white-space: nowrap; }
.page-actions-more { position: absolute; top: 0; right: 0; height: 34px; width: 48px; padding: 0 0 0 14px; border: none; cursor: pointer; color: var(--text-muted); background: linear-gradient(to right, transparent, var(--card-bg) 45%); }
.page-actions-more:hover { color: var(--text); }
/* Share panel: the protected alternative under the quick link */
.share-advanced { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-card); }
.share-advanced .btn-secondary { margin-top: 8px; }
.mobile-warning-badges { justify-content: center; margin-top: 14px; }

.item-color-row .location-marker-preview { flex: none; }
.item-card .location-marker { flex: none; margin-left: 12px; }
.item-card-meta .location-row-desc { display: block; flex-basis: 100%; width: 100%; }
.app-sheet .location-homework .item-card { background: var(--scenic-granite); border: none; border-radius: var(--radius-xl); cursor: pointer; }

/* Settings screen (settings.js): the Me rows with a control on the right — select, switch, colour, slider, link.
   The colour and slider rows stay one line (the sheet's stacked field layout is for text inputs). */
.app-sheet .settings-color, .app-sheet .settings-slider { flex-direction: row; align-items: center; gap: 12px; }
.app-sheet .settings-color > span, .app-sheet .settings-slider > span { flex: 1 1 auto; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); }
.settings-toggle input[type=checkbox], .settings-color input[type=checkbox] { flex: none; width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.settings-color .item-color-pick, .settings-color .item-color-pick input[type=color] { width: 32px; height: 32px; }
.settings-color input[type=color]:disabled { opacity: 0.35; cursor: default; }
.settings-color .btn-link { flex: none; font-size: 12px; }
.settings-slider input[type=range] { flex: 1 1 120px; min-width: 80px; accent-color: var(--accent); }
.settings-slider output { flex: none; width: 48px; text-align: right; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
a.settings-link { text-decoration: none; color: inherit; }
a.settings-link:hover { background: var(--panel-bg); }
.settings-link .me-row-label i { width: 18px; text-align: center; margin-right: 4px; color: var(--text-2); }
.settings-note { text-align: center; }
/* Settings → Coordinates in the map menu: off hides the line under the address in the context menu and the search popup */