/* Tour map and elevation profile (P5c/P5d, fixed with ADR-0053). This file is linked from index.html (the portal.css of the Administration package does not contain these rules).
   The content area is the positioned parent of the in-app fullscreen: the menu and the app bar stay visible, the layer selection stays on the map, the profile stays below the map. */
/* Blazor keeps the class "portal-loading" (padding 2rem, from the Administration portal.css) on the root element after start, which pushed the whole layout 32 px right and down; once the layout is rendered the padding must go. */
#app.portal-loading:has(.mud-layout) { padding: 0; }
.mud-main-content { position: relative; }
.tour-map-area { display: block; }
.tour-map-slot { position: relative; }
/* Fullscreen: the area fills the viewport below the app bar (absolute in the content area, whose left margin is the open menu: it sits right of the menu or at the left edge when the menu is closed or a small window). Column: the map takes the rest (flex 1, min-height 0, the map itself
   is absolutely positioned inside the slot by map.css), the profile section keeps a fixed share below it; without a profile only the switch row stays and the map takes the rest. */
/* The height of the app bar as MudBlazor applies it to the padding of .mud-main-content (7/8 on a narrow window, 3/4 in landscape below 600 px, full from 600 px). */
.tour-map-area-fullscreen { --tour-appbar: calc(var(--mud-appbar-height, 64px) * 7 / 8); }
@media (min-width: 0px) and (orientation: landscape) { .tour-map-area-fullscreen { --tour-appbar: calc(var(--mud-appbar-height, 64px) * 3 / 4); } }
@media (min-width: 600px) { .tour-map-area-fullscreen { --tour-appbar: var(--mud-appbar-height, 64px); } }
.tour-map-area-fullscreen { position: absolute; top: var(--tour-appbar); right: 0; left: 0; height: calc(100vh - var(--tour-appbar)); height: calc(100dvh - var(--tour-appbar)); z-index: 10; display: flex; flex-direction: column; overflow: hidden; background: var(--mud-palette-surface); padding: 0.5rem 1rem; box-sizing: border-box; }
.tour-map-area-fullscreen .tour-map-slot { flex: 1 1 0; min-height: 0; overflow: hidden; }
/* The map of GIS has min-height 280 px; in the fullscreen it must follow the slot (the splitter lets it shrink to 150 px), otherwise it would cover the handle and the diagram. */
.tour-map-area-fullscreen .waysoft-map { min-height: 0; }
/* Profile section: one header row (title, range), the row of switches (one per line of the diagram), the diagram and the readout; hidden diagram: only the row of switches. */
.tour-map-area-fullscreen .tour-profile-section { flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto auto; column-gap: 1rem; align-items: center; min-height: 0; overflow: hidden; }
.tour-map-area-fullscreen .tour-profile-section > h3 { margin: 0; }
.tour-map-area-fullscreen .tour-profile-section > p { margin: 0; }
.tour-map-area-fullscreen .tour-profile-section > .tour-profile-series { grid-column: 1 / -1; }
.tour-map-area-fullscreen .tour-profile-section > .tour-profile-readout { grid-column: 1 / -1; margin: 0.25rem 0 0; }
.tour-map-area-fullscreen .tour-profile-section .tour-profile { grid-column: 1 / -1; min-height: 0; width: 100%; }
/* ADR-0056: the height of the diagram (host element of the pointer, .tour-profile-diagram) is the one the user chose with the splitter (--tour-diagram-h on the area), in the normal view and in the fullscreen; the width is the full width,
   the drawing (viewBox 760 x 260) is scaled to fit and centred, the pointer script maps the position onto the drawing box. The map takes the rest (fullscreen) or the rest of a fixed block (normal view, see below). */
/* Narrow window: the header is stacked (the heading stays for assistive technology), the hint under the diagram is cut to the room that is left. */
@media (max-width: 599.98px) {
    .tour-map-area-fullscreen .tour-profile-section { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
    .tour-map-area-fullscreen .tour-profile-section > h3 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .tour-map-area-fullscreen .tour-profile-section > .tour-profile-readout { font-size: 0.8rem; line-height: 1.1; min-height: 0; overflow: hidden; max-height: 2.2em; }
}
body:has(.tour-map-area-fullscreen) { overflow: hidden; }
.tour-profile-series { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; }
.tour-profile-toggle { display: inline-flex; align-items: center; gap: 0.25rem; }
.tour-profile-swatch { display: inline-block; width: 1.5rem; height: 0.25rem; border-radius: 2px; background: var(--mud-palette-primary); }
.tour-profile-swatch-speed { background: #e65100; }
.tour-profile-swatch-heartrate { background: #c62828; }
.tour-profile-swatch-cadence { background: #6a1b9a; }
.tour-profile { outline-offset: 2px; }
.tour-profile-svg { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.tour-profile-diagram { height: var(--tour-diagram-h, 240px); }
/* Normal view: map and diagram share a block of fixed height (--tour-block, 440 px map + 240 px diagram as before), so the handle follows the pointer and the page does not jump; the map keeps at least 150 px. Only while the handle is there (diagram shown). */
.tour-map-area { --tour-block: 680px; }
.tour-map-panel:not(.tour-map-area-fullscreen):not(.tour-map-panel-with-sidebar):has(.tour-splitter) > .tour-map-body > .tour-map-slot .waysoft-map { height: max(150px, calc(var(--tour-block) - var(--tour-diagram-h, 240px))); min-height: 150px; }
/* The splitter (window splitter, ADR-0056): at least 28 px high for the finger, the grip is only the visible mark. */
.tour-splitter { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; height: 28px; min-height: 24px; cursor: row-resize; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 4px; outline-offset: -2px; }
.tour-splitter-grip { display: block; width: 56px; height: 5px; border-radius: 3px; background: var(--mud-palette-text-secondary); opacity: 0.6; }
.tour-splitter:hover .tour-splitter-grip, .tour-splitter:focus-visible .tour-splitter-grip, .tour-splitter-dragging .tour-splitter-grip { background: var(--mud-palette-primary); opacity: 1; }
.tour-splitter:focus-visible { outline: 2px solid var(--mud-palette-primary); }
body.tour-splitter-active { user-select: none; -webkit-user-select: none; cursor: row-resize; }
.tour-profile-grid { stroke: var(--mud-palette-lines-default); stroke-width: 1; }
.tour-profile-axis { stroke: var(--mud-palette-text-secondary); stroke-width: 1.5; }
.tour-profile-label, .tour-profile-title { fill: var(--mud-palette-text-primary); font-size: 12px; }
.tour-profile-title { font-size: 13px; font-weight: 600; }
.tour-profile-area { fill: var(--mud-palette-primary); fill-opacity: 0.15; stroke: none; }
.tour-profile-line { stroke: var(--mud-palette-primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tour-profile-line-sensor { stroke-width: 2; }
.tour-profile-line-speed, .tour-profile-axis-speed { stroke: #e65100; }
.tour-profile-line-heartrate, .tour-profile-axis-heartrate { stroke: #c62828; }
.tour-profile-line-cadence, .tour-profile-axis-cadence { stroke: #6a1b9a; }
.tour-profile-text-speed { fill: #e65100; }
.tour-profile-text-heartrate { fill: #c62828; }
.tour-profile-text-cadence { fill: #6a1b9a; }
.tour-profile-marker-speed { fill: #e65100; }
.tour-profile-marker-heartrate { fill: #c62828; }
.tour-profile-marker-cadence { fill: #6a1b9a; }
.tour-profile-marker-line { stroke: var(--mud-palette-text-primary); stroke-width: 1.5; stroke-dasharray: 4 3; }
.tour-profile-marker { fill: var(--mud-palette-primary); stroke: var(--mud-palette-surface); stroke-width: 2; }
.tour-profile-readout { margin: 0.25rem 0 0; min-height: 1.5rem; color: var(--mud-palette-text-secondary); }

.tour-elevation-source { font-size: .75rem; line-height: 1.2; margin: .25rem 0; grid-column: 1 / -1; }

/* Shared map/profile frame: the optional sidebar is the only planning-specific slot. */
.tour-map-body { min-width: 0; }
.tour-map-area-fullscreen > .tour-map-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.tour-map-panel-with-sidebar { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 1.25rem; }
.tour-map-sidebar { min-width: 0; }
.tour-map-panel-with-sidebar > .tour-map-body { height: max(560px, 70vh); display: flex; flex-direction: column; }
.tour-map-panel-with-sidebar > .tour-map-body > .tour-map-slot { flex: 1 1 0; min-height: min(250px, 30vh); }
.tour-map-panel-with-sidebar .waysoft-map-container, .tour-map-panel-with-sidebar .waysoft-map-frame, .tour-map-panel-with-sidebar .waysoft-map { height: 100%; min-height: 0; }
.tour-map-panel-with-sidebar .tour-profile-section { flex: 0 0 auto; min-height: 0; padding-top: .5rem; }
.tour-map-panel-with-sidebar.tour-map-area-fullscreen { display: flex; flex-direction: row; gap: 1rem; }
.tour-map-panel-with-sidebar.tour-map-area-fullscreen > .tour-map-sidebar { flex: 0 0 min(360px, 40%); overflow-y: auto; overscroll-behavior: contain; padding-right: .25rem; }
.tour-map-panel-with-sidebar.tour-map-area-fullscreen > .tour-map-body { flex: 1 1 0; height: auto; min-height: 0; }
.tour-map-panel-with-sidebar.tour-map-area-fullscreen > .tour-map-body > .tour-map-slot { min-height: 0; }
@media (max-width: 959px) {
    .tour-map-panel-with-sidebar { grid-template-columns: minmax(0, 1fr); }
    .tour-map-panel-with-sidebar > .tour-map-body { height: 65vh; min-height: 400px; }
}
@media (max-width: 599.98px), (max-width: 959px) and (min-height: 480px) {
    .tour-map-panel-with-sidebar.tour-map-area-fullscreen { flex-direction: column; gap: .5rem; }
    .tour-map-panel-with-sidebar.tour-map-area-fullscreen > .tour-map-sidebar { flex: 0 1 auto; max-height: 40%; }
    .tour-map-panel-with-sidebar.tour-map-area-fullscreen > .tour-map-body { flex: 1 1 0; min-height: 0; }
}

/* Refreshing the route never removes the previous diagram or changes its space. */
.tour-profile-section { position: relative; min-width: 0; }
.tour-profile-progress { position: absolute; top: .25rem; right: .25rem; z-index: 1; display: flex; align-items: center; gap: .4rem; padding: .2rem .4rem; background: var(--mud-palette-surface); border-radius: 4px; font-size: .75rem; }
.tour-profile-updating .tour-profile { opacity: .6; pointer-events: none; }
.tour-profile-updating > h3 { padding-right: 2rem; }

/* Planning: one metadata fragment and one profile, arranged responsively without duplicate fields. */
.tour-planning-tour-data { grid-column: 1 / -1; min-width: 0; }
.planning-tour-data-fields, .planning-tour-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; }
.planning-tour-data-fields > .planning-tour-fields { flex: 1 1 20rem; }
.planning-tour-fields > .mud-input-control { flex: 1 1 12rem; min-width: 0; }
.planning-tour-data-fields > .mud-input-control { flex: 1 1 12rem; min-width: 0; }
.planning-tour-data-fields > .planning-edit-hint { margin: 0; }
.planning-sheet-controls, .planning-profile-empty { display: none; }
@media (min-width: 960px) {
    .tour-map-panel-planning.tour-map-area-fullscreen { display: grid; grid-template-columns: minmax(15rem, 360px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .tour-map-panel-planning.tour-map-area-fullscreen > .tour-map-sidebar { grid-column: 1; grid-row: 2; min-height: 0; }
    .tour-map-panel-planning.tour-map-area-fullscreen > .tour-map-body { grid-column: 2; grid-row: 2; min-height: 0; }
}
@media (max-width: 959.98px) {
    .tour-map-panel-planning { display: block; isolation: isolate; }
    .tour-map-panel-planning:not(.tour-map-area-fullscreen) { position: relative; height: max(420px, calc(100dvh - 12rem)); }
    .tour-map-panel-planning.tour-map-area-fullscreen { display: block; padding: 0; }
    .tour-map-panel-planning > .tour-map-body { display: contents; }
    .tour-map-panel-planning > .tour-map-body > .tour-map-slot { position: absolute; inset: 0; min-height: 0; }
    .tour-map-panel-planning .waysoft-map { height: 100%; min-height: 0; }
    .tour-map-panel-planning > .tour-map-body > .tour-splitter { display: none; }
    .tour-map-panel-planning > .tour-map-sidebar,
    .tour-map-panel-planning > .tour-planning-tour-data,
    .tour-map-panel-planning > .tour-map-body > .tour-profile-section {
        display: none; position: absolute; bottom: 0; left: 0; right: 0; z-index: 21;
        height: max(0px, calc(var(--planning-sheet-size, 45%) - 68px)); max-height: none;
        padding: 0.75rem; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
        background: var(--mud-palette-surface);
    }
    .tour-map-panel-planning[data-planning-tab="waypoints"] > .tour-map-sidebar,
    .tour-map-panel-planning[data-planning-tab="data"] > .tour-planning-tour-data,
    .tour-map-panel-planning[data-planning-tab="profile"] > .tour-map-body > .tour-profile-section { display: block; }
    .tour-map-panel-planning[data-sheet-open="false"] > .tour-map-sidebar,
    .tour-map-panel-planning[data-sheet-open="false"] > .tour-planning-tour-data,
    .tour-map-panel-planning[data-sheet-open="false"] > .tour-map-body > .tour-profile-section { display: none; }
    .tour-map-panel-planning > .tour-map-body > .tour-profile-section .tour-profile { width: 100%; }
    .tour-map-panel-planning .planning-sheet-controls {
        display: block; position: absolute; left: 0; right: 0; bottom: calc(var(--planning-sheet-size, 45%) - 68px);
        height: 68px; z-index: 22; border-radius: 0.75rem 0.75rem 0 0;
        background: var(--mud-palette-surface); box-shadow: 0 -3px 12px #0002;
    }
    .planning-sheet-handle { display: flex; width: 100%; height: 24px; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; touch-action: none; cursor: ns-resize; }
    .planning-sheet-handle > span { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--mud-palette-text-secondary); }
    .planning-sheet-tabs { display: flex; height: 44px; }
    .planning-sheet-tab { flex: 1; min-width: 0; padding: 0.5rem 0.25rem; border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; color: var(--mud-palette-text-secondary); cursor: pointer; }
    .planning-sheet-tab.active { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-primary); }
    .planning-tour-data-fields, .planning-tour-fields { display: flex; flex-direction: column; align-items: stretch; }
    .planning-tour-data-fields > .planning-tour-fields,
    .planning-tour-data-fields > .mud-input-control,
    .planning-tour-fields > .mud-input-control { flex: 0 0 auto; width: 100%; }
}

/* Calculation status belongs to the map panel, including fullscreen and the mobile sheet. */
.tour-map-panel-planning > .tour-map-body { position: relative; }
.planning-calculation { position: absolute; top: 64px; left: 16px; width: calc(100% - 32px); max-width: 360px; z-index: 3; }
.planning-calculation:empty { display: none; }