@layer components {
  .course-overview__map {
    position: relative;
    overflow: hidden;
    z-index: 0; /* Create stacking context to keep map controls below bottom bar */
  }

  .course-overview__gesture-hint {
    --hint-bg: color-mix(in srgb, var(--color-canvas) 88%, var(--color-ink-lightest) 12%);
    --hint-border: color-mix(in srgb, var(--color-ink-lighter) 70%, transparent);

    position: absolute;
    inset: auto 0.75rem 0.75rem auto;
    padding: 0.45rem 0.65rem;
    border-radius: 0.65rem;
    background: var(--hint-bg);
    border: 1px solid var(--hint-border);
    box-shadow: 0 10px 24px oklch(var(--lch-black) / 0.08);
    font-size: var(--text-x-small);
    color: var(--color-ink);
    display: grid;
    gap: 0.15rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 140ms ease, transform 140ms ease;
    z-index: 4;
  }

  .course-overview__gesture-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .gesture-hint__line {
    display: none;
    white-space: nowrap;
  }

  .course-overview__gesture-hint[data-mode="desktop"] .gesture-hint__line--desktop,
  .course-overview__gesture-hint[data-mode="mobile"] .gesture-hint__line--mobile {
    display: block;
  }

  .course-overview__gesture-hint:not([data-mode]) .gesture-hint__line {
    display: block;
  }

  /* Elevation profile gesture hint */
  .elevation-profile__gesture-hint {
    --hint-bg: color-mix(in srgb, var(--color-canvas) 88%, var(--color-ink-lightest) 12%);
    --hint-border: color-mix(in srgb, var(--color-ink-lighter) 70%, transparent);

    position: absolute;
    inset: auto 0.75rem 0.75rem auto;
    padding: 0.45rem 0.65rem;
    border-radius: 0.65rem;
    background: var(--hint-bg);
    border: 1px solid var(--hint-border);
    box-shadow: 0 10px 24px oklch(var(--lch-black) / 0.08);
    font-size: var(--text-x-small);
    color: var(--color-ink);
    display: grid;
    gap: 0.15rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 140ms ease, transform 140ms ease;
    z-index: 4;
  }

  .elevation-profile__gesture-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .elevation-profile__gesture-hint .gesture-hint__line {
    display: none;
    white-space: nowrap;
  }

  .elevation-profile__gesture-hint[data-mode="desktop"] .gesture-hint__line--desktop,
  .elevation-profile__gesture-hint[data-mode="mobile"] .gesture-hint__line--mobile {
    display: block;
  }

  .elevation-profile__gesture-hint:not([data-mode]) .gesture-hint__line {
    display: block;
  }
}