/* The expanded panel is absolute: disclosure never changes the scroll layout. */
html #poc-bar.journey-dock {
  left: auto;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: auto;
  height: 46px;
  padding: 0;
  gap: 8px;
  flex-wrap: nowrap;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}
.journey-dock .journey-glass {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 24px;
  box-shadow: 0 2px 5px -1px #00000026, 0 9px 24px -6px #00000038;
}
.journey-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, #ffffff09, #ffffff00 45%, #ffffff05), var(--desktop-glass-tint, rgba(4,8,12,.58));
  -webkit-backdrop-filter: blur(2px) saturate(125%);
  backdrop-filter: blur(2px) saturate(125%);
  backdrop-filter: var(--glass-refraction, blur(2px)) saturate(125%);
}
.journey-glass::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg,#ffffffa8 0%,#ffffff70 20%,#ffffff24 43%,#ffffff0c 56%,#162b38b8 80%,#ffffff20 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: inset 0 0 9px #ffffff18;
}
#poc-bar #journey-toggle, #poc-bar #journey-pause {
  min-height: 46px;
  height: 46px;
  flex: none;
  padding: 0 14px;
  gap: 8px;
  font-size: .8125rem;
  line-height: 1;
}
#poc-bar #journey-pause { order: -1; width: 46px; padding: 0; }
.journey-dock svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#journey-toggle .journey-chevron { width: 14px; transition: transform .2s ease; }
#journey-toggle[aria-expanded='true'] .journey-chevron { transform: rotate(180deg); }
#journey-toggle[data-attention='true'] > span::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-radius: 50%; background: #f5c981; vertical-align: middle; }
#poc-bar #journey-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - 96px);
  overflow: auto;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-radius: 24px;
  transform-origin: bottom right;
  animation: journey-panel-in .2s ease-out;
}
#journey-panel #poc-play, #journey-panel #poc-route { order: 1; }
#journey-panel button { margin: 0; min-width: 0; font-size: .75rem; }
#journey-panel .secondary { background: #ffffff08; border-color: #ffffff4d; color: #fff; }
#journey-panel .secondary:hover { background: #ffffff20; }
#journey-panel #journey-options[open] {
  position: static;
  order: 2;
  grid-column: 1 / -1;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  max-height: none;
  overflow: visible;
}
#journey-panel #poc-prev, #journey-panel #poc-next { width: calc(50% - 4px); }
#journey-panel #poc-prev { margin-right: 8px; }
#journey-panel #poc-replay, #journey-panel #journey-options > button:not([id]) { width: 100%; margin-top: 8px; }
html #journey-panel #poc-state {
  display: block;
  order: 3;
  grid-column: 1 / -1;
  height: auto;
  min-height: 0;
  padding: 4px 2px 0;
  color: #e1e7e9;
  font-size: .75rem;
  line-height: 1.45;
  overflow: visible;
}
html[data-route='static'] #journey-panel #poc-route { grid-column: 1 / -1; }
@keyframes journey-panel-in { from { opacity: 0; transform: translateY(5px) scale(.97); } to { opacity: 1; transform: none; } }
@media (min-width: 901px) { html #poc-bar.journey-dock { right: var(--content-inset); } }
@media (prefers-reduced-motion: reduce) { #poc-bar #journey-panel { animation: none; } #journey-toggle .journey-chevron { transition: none; } }