/* Elevation profile bottom sheet (profile.js).
   States: hidden (off screen) · .peek (only the 48px header strip shows: grip, ELEVATION,
   sparkline, totals) · .open (header + chart). Drag or tap the header to move between them. */

.profile-sheet {
    --profile-peek: 48px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 170px;
    z-index: 1500;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 0 env(safe-area-inset-bottom, 0);
    background: var(--primary-color, #006D4F);
    color: var(--text-color, white);
    font-family: var(--font-family, Arial, sans-serif);
    border-top: 2px solid var(--border-color, white);
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -2px 8px var(--shadow-color, rgba(0, 0, 0, 0.4));
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.profile-sheet.peek {
    transform: translateY(calc(100% - var(--profile-peek)));
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
}

.profile-sheet.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
}

.profile-sheet.dragging {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .profile-sheet,
    .profile-sheet.peek,
    .profile-sheet.open {
        transition: none;
    }
}

@media screen and (max-width: 767px), screen and (max-height: 499px) {
    .profile-sheet {
        height: 150px;
    }
}

/* Header: a button that is the whole peek strip. */
.profile-sheet .profile-header {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--profile-peek);
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px 0;
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    text-align: left;
    white-space: nowrap;
    overflow: visible;   /* the totals clip themselves; the sparkline's dot must not be cut */
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.profile-sheet .profile-header:focus-visible {
    outline: 3px solid #f9e243;
    outline-offset: -3px;
}

.profile-grip {
    position: absolute;
    left: 50%;
    top: 5px;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.55);
}

.profile-title {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-mini {
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    position: relative;
}

.profile-mini-svg {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    overflow: visible;   /* the runner's dot and its ring may reach past the 26px sparkline box */
}

.profile-sheet.open .profile-mini {
    display: none;
}

.profile-mini-line {
    fill: none;
    stroke: #f9e243;
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.profile-totals {
    flex: 0 1 auto;
    margin-left: auto;
    font-size: 12px;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-gain-short {
    display: none;
}

/* 320-380px phones: the long label would squeeze the sparkline out of the strip */
@media (max-width: 380px) {
    .profile-gain-long { display: none; }
    .profile-gain-short { display: inline; }
}

.profile-chevron {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    opacity: 0.8;
    transition: transform 0.25s ease;
}

.profile-chevron svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-sheet.open .profile-chevron {
    transform: rotate(180deg);
}

.profile-chart {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.profile-svg {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Axes */
.profile-axis-text {
    fill: rgba(255, 255, 255, 0.8);
    font: 11px var(--font-family, Arial, sans-serif);
}

.profile-grid {
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 1;
}

.profile-baseline,
.profile-xtick {
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 1;
}

/* Profile */
.profile-area {
    fill: rgba(255, 255, 255, 0.18);
    stroke: none;
}

.profile-line {
    fill: none;
    stroke: #f9e243;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Staircase marks */
.profile-sheet .profile-stair,
.profile-sheet .profile-stair:focus,
.profile-sheet .profile-stair:focus-visible {
    outline: none;
    cursor: pointer;
}

.profile-stair-hit {
    stroke: transparent;
    stroke-width: 14;
    pointer-events: stroke;
}

.profile-stair-tick {
    stroke: rgba(255, 165, 0, 0.6);
    stroke-width: 1;
    pointer-events: none;
}

.profile-stair-badge circle {
    fill: #ffa500;
    stroke: #1b2233;
    stroke-width: 1;
}

.profile-stair-badge text {
    fill: #1b2233;
    font: bold 10px var(--font-family, Arial, sans-serif);
    pointer-events: none;
}

.profile-stair.is-collapsed .profile-stair-badge {
    display: none;
}

.profile-stair:hover .profile-stair-badge,
.profile-stair:focus .profile-stair-badge,
.profile-stair.is-collapsed:hover .profile-stair-badge,
.profile-stair.is-collapsed:focus .profile-stair-badge {
    display: inline;
}

/* the staircase whose popup is open */
.profile-stair.is-selected .profile-stair-badge {
    display: inline;
}

.profile-stair.is-selected .profile-stair-tick,
.profile-stair:hover .profile-stair-tick,
.profile-stair:focus .profile-stair-tick {
    stroke: #ffffff;
    stroke-width: 2;
}

.profile-stair.is-selected .profile-stair-badge circle,
.profile-stair:hover .profile-stair-badge circle,
.profile-stair:focus .profile-stair-badge circle {
    fill: #f9e243;
    stroke: #ffffff;
    stroke-width: 2;
}

/* Cursor, tooltip, race-day position */
.profile-overlay {
    pointer-events: none;
}

.profile-cursor {
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 1;
}

.profile-cursor-dot {
    fill: #f9e243;
    stroke: #ffffff;
    stroke-width: 1;
}

.profile-mini-sel line {
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1.5;
}

.profile-mini-sel circle {
    fill: #f9e243;
    stroke: #ffffff;
    stroke-width: 1.5;
}

/* The runner: the map's location dot, scaled to the chart (blue, white border, pulsing ring) */
.profile-position-dot {
    fill: #4285f4;
    stroke: #ffffff;
    stroke-width: 3;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.profile-position-ring {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: profile-pulse 2s infinite;
}

.profile-mini-svg .profile-position-dot {
    stroke-width: 2;
}

.profile-mini-svg .profile-position-ring {
    stroke-width: 1.5;
}

@keyframes profile-pulse {
    0% { transform: scale(1); opacity: 1; }
    70% { transform: scale(2); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .profile-position-ring { animation: none; opacity: 0.6; }
}

.profile-tooltip {
    position: absolute;
    display: none;
    left: 0;
    top: 0;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 40, 30, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #ffffff;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
}