/* planner.html: geladen via <link> zodat de browser het cachet. */
  .ac-wrap { position: relative; }
  main { --planner-panel-width: 520px; overflow: hidden !important; }

  #planner-map { height: 100%; }

  #planner-side-panel {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: var(--planner-panel-width);
    z-index: 50;
    display: flex;
    flex-direction: column;
  }

  @media (max-width: 767px) {
    #planner-side-panel {
      top: auto !important;
      left: 0 !important;
      right: 0;
      bottom: env(safe-area-inset-bottom);
      width: 100% !important;
      max-width: 100% !important;
      height: calc(100dvh - 58px - env(safe-area-inset-bottom));
      border-radius: 20px 20px 0 0;
      transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    #planner-side-panel.panel-peek {
      transform: translateY(calc(100% - 4rem));
    }
    .mobile-panel-grip {
      display: flex !important;
    }
  }

  /* Secties semi-transparant zodat glass-panel doorschijnt */
  #planner-content div.bg-white {
    background: rgba(255, 255, 255, 0.6) !important;
  }

  /* Pulse-indicator op het actieve input-veld om de gebruiker te tonen
     welk veld een station-klik op de kaart vult. */
  .field-active {
    box-shadow: 0 0 0 2px rgba(0, 48, 130, 0.35) !important;
  }