/* Final canvas composition: one container, independent scroll and actions. */
[data-ui-icon] { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
[data-ui-icon] svg, .theme-toggle > svg { width: 18px; height: 18px; display: block; flex: none; }
.app.ride-canvas-complete .compact-btn { color: var(--route-canvas-ink); }
.shell .theme-toggle, .shell .user-menu__trigger { color: var(--route-canvas-ink); }
/* Keep the logo's explicit dimensions when its parent changes flex direction. */
.app.ride-canvas-complete .omvej-mapbox-attribution__logo { flex-basis: auto; }
.app.ride-canvas-complete {
  --planner-control-height: 48px;
  --planner-label-height: 14px;
  --planner-field-gap: 6px;
  height: var(--canvas-viewport-height, 100dvh);
  transform: translateY(var(--canvas-viewport-offset, 0px));
}
.app.ride-canvas-complete .side-panel {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: min(60%, 34rem);
  gap: 0.5rem;
}
.app.ride-canvas-complete .rail-surface { flex: 1 1 auto; min-height: 0; }
.app.ride-canvas-complete #route-dock {
  position: relative;
  inset: auto;
  transform: none;
  width: 100%;
  max-width: none;
  margin: 0;
  flex: 0 0 auto;
  max-height: min(40vh, 22rem);
  border: 0;
  border-top: 1px solid var(--route-canvas-hairline);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.app.ride-canvas-complete .side-panel[data-rail-mode="collapsed"] {
  height: auto;
  max-height: 50%;
}
.app.ride-canvas-complete #rail-planner-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0.5rem;
}
.app.ride-canvas-complete #rail-planner-view > .rail-subview-header { display: none; }
.app.ride-canvas-complete #rail-planner-view[hidden] { display: none; }

.app.ride-canvas-complete .side-panel[data-rail-context="planner"] .planner-origin {
  min-width: 0;
  gap: var(--planner-field-gap);
  padding: 0;
  border: 0;
}
.app.ride-canvas-complete .side-panel[data-rail-context="planner"] .compact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: var(--planner-field-gap);
}
.app.ride-canvas-complete .side-panel[data-rail-context="planner"] .compact-label {
  display: block;
  flex: none;
  font-size: 11px;
  line-height: var(--planner-label-height);
  font-weight: 600;
}
.app.ride-canvas-complete :is(#start, #bias, #distance, #set-start, #generate),
.app.ride-canvas-complete .compact-slider-group {
  box-sizing: border-box;
  height: var(--planner-control-height);
  min-height: var(--planner-control-height);
  margin-block: 0;
}
.app.ride-canvas-complete :is(#start, #bias) { width: 100%; min-width: 0; }
.app.ride-canvas-complete #start { text-overflow: ellipsis; }
.app.ride-canvas-complete #set-start { flex: 0 0 var(--planner-control-height); }
.app.ride-canvas-complete .compact-input-group { min-width: 0; }
.app.ride-canvas-complete .compact-slider-group { min-width: 0; gap: 8px; }
.app.ride-canvas-complete #distance-slider { min-width: 24px; width: 0; }
.app.ride-canvas-complete #distance { width: 52px; }
.app.ride-canvas-complete .rail-sections { box-sizing: border-box; height: var(--planner-control-height); padding: 1px; }
.app.ride-canvas-complete .rail-section { min-height: 44px; padding-block: 0; }
.app.ride-canvas-complete .side-panel[data-rail-context="planner"] .rail-primary-actions { margin-top: 0; }

/* Both menu paths escape the planner's transformed scroll/clipping surfaces. */
.app.ride-canvas-complete.start-search-portal { display: contents; transform: none; }
.app.start-search-portal::before, .app.start-search-portal::after { display: none; }
.app.ride-canvas-complete .start-search-menu {
  display: none;
  position: fixed;
  inset: auto;
  top: var(--start-menu-top);
  left: var(--start-menu-left);
  width: var(--start-menu-width);
  max-height: var(--start-menu-height);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--route-canvas-rail-edge);
  border-radius: var(--route-canvas-radius-sm);
  background: var(--route-canvas-rail-surface);
  color: var(--route-canvas-ink);
  box-shadow: var(--route-canvas-dock-shadow);
  z-index: 50;
}
.app.ride-canvas-complete .start-search-menu:is(:popover-open, .is-open) { display: block; }
.app.ride-canvas-complete .start-search-menu.is-above { transform: translateY(-100%); }
.app.ride-canvas-complete .start-search-results { list-style: none; margin: 0; padding: 0; }
.app.ride-canvas-complete .start-search-option {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 48px;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--route-canvas-radius-xs);
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.app.ride-canvas-complete .start-search-option:is(:hover, [aria-selected="true"]) { background: var(--route-canvas-accent-wash); transform: none; }
.app.ride-canvas-complete .start-search-option__title { font-size: 0.86rem; font-weight: 600; }
.app.ride-canvas-complete .start-search-option__detail,
.app.ride-canvas-complete .start-search-status { font-size: 0.75rem; color: var(--route-canvas-muted); }
.app.ride-canvas-complete .start-search-status:not(.visually-hidden) { padding: 8px 10px; margin: 0; }
.app.ride-canvas-complete .start-search-attribution { display: block; padding: 6px 10px 2px; font-size: 0.65rem; color: var(--route-canvas-muted); }
.app.ride-canvas-complete .map-canvas {
  --route-bottom-stack: var(--route-rail-reserved-bottom, 0px);
  --omvej-attribution-sheet-clearance: calc(var(--route-bottom-stack) + 0.5rem);
  --street-view-compact-rail-clearance: max(calc(var(--route-compact-rail-height) + 0.5rem), calc(var(--route-bottom-stack) + 0.5rem));
}
/* A focused job starts at its own header. Keep live feedback when present,
   but don't reserve the planner's empty intro row and its grid gap. */
.app.ride-canvas-complete .side-panel:not([data-rail-context="planner"]):not([data-rail-context="results"])
  .rail-surface__intro:not(:has(> .status-pill:not(.is-hidden))) { display: none; }
.app.ride-canvas-complete .side-panel:not([data-rail-context="planner"]):not([data-rail-context="results"])
  .rail-surface:not(:has(> .rail-surface__intro > .status-pill:not(.is-hidden))) {
  grid-template-rows: minmax(0, 1fr);
}
.app.ride-canvas-complete .mobile-route-actions-hint { display: none; }
.app.ride-canvas-complete #route-dock[inert] { display: none; }
.app.ride-canvas-complete .side-panel[data-rail-context="results"] .rail-sections { display: none; }
.app.ride-canvas-complete .side-panel[data-rail-context="results"] .rail-surface__intro { display: contents; }
.app.ride-canvas-complete .side-panel[data-rail-context="results"] .rail-surface__intro > :not(#rail-collapse) { display: none; }
.app.ride-canvas-complete .side-panel[data-rail-context="results"] #rail-collapse:not([hidden]) {
  display: flex;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
}
/* Results have one full-width scroll owner. Intrinsic rows must never shrink
   warning text to the old empty-state minimum height. */
.app.ride-canvas-complete .side-panel[data-rail-context="results"] .rail-surface:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}
.app.ride-canvas-complete #rail-workspace-view:not([hidden]) {
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: auto minmax(0, 1fr);
  grid-auto-rows: max-content;
  min-width: 0;
  min-height: 0;
  padding: 0 0.2rem 0.15rem;
  gap: 0.5rem 0.8rem;
  overflow-y: auto;
  scroll-padding-block: 0.35rem;
}
.app.ride-canvas-complete #rail-workspace-view > .rail-subview-header {
  grid-column: 1;
  grid-row: 1;
  min-height: 44px;
  padding: 0;
  border: 0;
}
.app.ride-canvas-complete #workspace-heading { color: var(--route-canvas-muted); }
.app.ride-canvas-complete #route-plan-summary:not([hidden]) {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: transparent;
}
.app.ride-canvas-complete #route-plan-summary .route-plan-secondary { grid-column: 2; }
.app.ride-canvas-complete #route-plan-summary .route-plan-edit { grid-column: 3; grid-row: 1; }
.app.ride-canvas-complete #rail-workspace-view > :is(#wind-info, #route-list, .route-results-tools) { grid-column: 1 / -1; }
.app.ride-canvas-complete .side-panel[data-rail-context="results"] .route-list {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  min-height: 0;
  max-height: none;
  gap: 0.5rem;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.app.ride-canvas-complete .route-results-state { grid-column: 1 / -1; }
.app.ride-canvas-complete .side-panel[data-rail-context="results"] .route-result-row {
  grid-template-areas: "title distance" "ascent overlap" "warning warning" "direction selected";
  grid-template-rows: repeat(4, max-content);
  align-content: start;
  min-width: 0;
  min-height: min-content;
  padding: 0.8rem;
  gap: 0.35rem 0.65rem;
  border: 1px solid var(--route-canvas-hairline);
  border-radius: var(--route-canvas-radius-sm);
  background: var(--route-canvas-rail-surface);
  overflow: visible;
}
.app.ride-canvas-complete .side-panel[data-rail-context="results"] .route-result-row:hover {
  border-color: var(--route-canvas-accent-line);
  background: var(--route-canvas-accent-wash);
}
.app.ride-canvas-complete .side-panel[data-rail-context="results"] .route-result-row[aria-current="true"] {
  border-color: var(--route-selection-accent);
  background: var(--route-canvas-accent-wash);
  box-shadow: inset 0 0 0 1px var(--route-selection-accent);
}
.app.ride-canvas-complete .route-result-distance { font-size: 1.15rem; }
.app.ride-canvas-complete .route-result-ascent::before { content: "↑ "; }
.app.ride-canvas-complete .route-result-direction:empty { display: none; }
.app.ride-canvas-complete .route-result-warning {
  max-width: 100%;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.app.ride-canvas-complete .route-result-selected-marker {
  grid-area: selected;
  justify-self: end;
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  color: var(--route-canvas-ink);
  font-size: 0.66rem;
  font-weight: 600;
}
.app.ride-canvas-complete .route-result-selected-marker::before { content: "✓ "; }
.app.ride-canvas-complete .route-results-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
  min-width: 0;
}
.app.ride-canvas-complete .route-results-tools > .rail-workspace-row {
  width: auto;
  min-height: 44px;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: var(--route-canvas-radius-xs);
  font-size: 0.72rem;
  color: var(--route-canvas-muted);
}
.app.ride-canvas-complete .route-results-tools > .rail-workspace-row::after { content: none; }
/* The candidate cards already identify the selection. Keep the dock identity
   for the collapsed mobile sheet, where those cards are no longer visible. */
.app.ride-canvas-complete .side-panel[data-rail-context="results"][data-rail-mode="open"] .route-dock__identity { display: none; }
.app.ride-canvas-complete .route-dock__body > .route-dock__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.4rem 0 max(0.4rem, var(--route-safe-area-bottom));
  background: transparent;
}
.app.ride-canvas-complete .route-dock__action--regenerate { border-color: transparent; color: var(--route-canvas-muted); }
.app.ride-canvas-complete .route-dock__action--more { width: 44px; font-size: 1.25rem; line-height: 1; }
.app.ride-canvas-complete .route-dock__action--export::after { content: "⌄"; margin-left: 0.5rem; }
/* Menus escape the rail's clipping surface via the top layer or a body portal.
   Both paths use an opaque themed surface, not the browser's popover colours. */
.app.ride-canvas-complete.route-dock__action-portal {
  height: auto;
  min-height: 0;
  transform: none;
  background: none;
}
.app.route-dock__action-portal::before,
.app.route-dock__action-portal::after { content: none; }
.app.ride-canvas-complete .route-dock__action-menu {
  display: none;
  box-sizing: border-box;
  width: 12rem;
  padding: 0.35rem;
  gap: 0.2rem;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--route-canvas-rail-edge);
  border-radius: var(--route-canvas-radius-sm);
  background: var(--route-canvas-rail-surface);
  color: var(--route-canvas-ink);
  box-shadow: var(--route-canvas-dock-shadow);
  font: inherit;
  z-index: 80;
}
.app.ride-canvas-complete .route-dock__action-menu:popover-open { display: grid; }
.app.route-dock__action-portal > .route-dock__action-menu:not([hidden]) { display: grid; }
.app.ride-canvas-complete .route-dock__action-menu .route-dock__action {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  border: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.app.ride-canvas-complete .route-dock__action-menu .route-dock__action:focus-visible {
  outline: 2px solid var(--route-canvas-ink);
  outline-offset: -2px;
  background: var(--route-canvas-accent-wash);
}
.app.ride-canvas-complete .side-panel[data-rail-mode="open"] .route-dock__body {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 0.5rem;
}
.app.ride-canvas-complete .side-panel[data-rail-mode="open"] .route-dock__header {
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: auto;
  min-height: 0;
  padding: 0.4rem 0;
}
.app.ride-canvas-complete .side-panel[data-rail-mode="open"] .route-dock__actions {
  grid-column: 2;
  grid-row: 1;
  border: 0;
}
.app.ride-canvas-complete .side-panel[data-rail-mode="open"] .route-dock__expanded { grid-column: 1 / -1; grid-row: 2; }
@media (min-width: 761px) {
  .app.ride-canvas-complete .side-panel[data-rail-context="results"] {
    --floating-rail-width: min(60rem, calc(100% - (2 * var(--workspace-inset))));
  }
  .app.ride-canvas-complete .side-panel[data-rail-context="results"] .route-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }
  .app.ride-canvas-complete .side-panel[data-rail-context="planner"] {
    --floating-rail-width: min(60rem, calc(100% - (2 * var(--workspace-inset))));
  }
  .app.ride-canvas-complete #distance-slider { display: none; }
  .app.ride-canvas-complete .compact-slider-group { flex: none; width: 5.5rem; }
  .app.ride-canvas-complete .compact-distance-value { position: relative; width: 100%; }
  .app.ride-canvas-complete #distance {
    width: 100%;
    padding-inline: 0.75rem 2rem;
    border-radius: var(--route-canvas-radius-xs);
    text-align: left;
  }
  .app.ride-canvas-complete .compact-distance-value .compact-unit {
    position: absolute;
    inset-inline-end: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .app.ride-canvas-complete .side-panel[data-rail-context="planner"] #bias { max-width: 11rem; }
  .app.ride-canvas-complete .street-view-inspector:not(.is-morphing) {
    grid-template-rows: auto minmax(80px, 1fr) auto auto;
    overflow-y: auto;
  }
  .app.ride-canvas-complete #rail-planner-view {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-column: 2;
    grid-row: 2;
  }
  .app.ride-canvas-complete .side-panel[data-rail-context="planner"] #rail-planning-state { grid-column: 1; grid-row: 1; }
  .app.ride-canvas-complete .side-panel[data-rail-context="planner"] #rail-primary-actions { grid-column: 2; grid-row: 1; }
  .app.ride-canvas-complete .side-panel[data-rail-context="planner"] #rail-secondary-access { grid-column: 1 / -1; grid-row: 2; }
  .app.ride-canvas-complete .side-panel[data-rail-context="planner"] .rail-surface { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
  .app.ride-canvas-complete .side-panel[data-rail-context="planner"] .rail-sections { margin-top: calc(var(--planner-label-height) + var(--planner-field-gap)); }
  .app.ride-canvas-complete .side-panel[data-rail-context="planner"] [data-rail-panel="round-trip"].is-active {
    display: grid;
    /* Give the address the remaining space, not the compact preferences. */
    grid-template-columns: minmax(0, 1fr) 11rem 5.5rem;
    gap: 12px;
    align-items: start;
  }
  .app.ride-canvas-complete .side-panel[data-rail-context="planner"] .rail-primary-actions { min-width: 10rem; }
}
@media (min-width: 761px) and (max-width: 959px) {
  .app.ride-canvas-complete .side-panel[data-rail-context="planner"] [data-rail-panel="round-trip"].is-active {
    grid-template-columns: minmax(0, 1fr) 5.5rem;
  }
  .app.ride-canvas-complete .side-panel[data-rail-context="planner"] .planner-origin { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .app.ride-canvas-complete #rail-workspace-view:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  .app.ride-canvas-complete #rail-workspace-view > .rail-subview-header { min-height: 0; }
  .app.ride-canvas-complete #route-plan-summary:not([hidden]) {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.15rem 0.5rem;
  }
  .app.ride-canvas-complete #route-plan-summary .route-plan-secondary { grid-column: 1; grid-row: 2; }
  .app.ride-canvas-complete #route-plan-summary .route-plan-edit { grid-column: 2; grid-row: 1 / span 2; }
  .app.ride-canvas-complete .side-panel[data-rail-mode="open"] .route-dock__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .app.ride-canvas-complete .side-panel[data-rail-mode="open"] .route-dock__header { justify-content: start; padding-bottom: 0; }
  .app.ride-canvas-complete .side-panel[data-rail-mode="open"] .route-dock__actions { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .app.ride-canvas-complete .side-panel[data-rail-mode="open"] .route-dock__expanded { grid-row: 3; }
  .app.ride-canvas-complete .side-panel__handle::before { background: var(--route-canvas-muted); }
  /* Only the tall planning sheet needs stacked credits; inspection keeps its measured footprint. */
  .app.ride-canvas-complete .side-panel[data-rail-context="planner"][data-rail-mode="open"] ~ .map-wrap .omvej-mapbox-attribution {
    flex-direction: column;
    align-items: flex-start;
  }
  .app.ride-canvas-complete .workspace[data-rail-mode="drawing-hidden"] .avoid-drawing-bar {
    bottom: max(6rem, calc(var(--route-attribution-height, 0px) + var(--route-safe-area-bottom, 0px) + 2rem));
  }
  .app.ride-canvas-complete .side-panel { max-height: 70%; }
  .app.ride-canvas-complete #route-dock { max-height: 34vh; }
  .app.ride-canvas-complete .side-panel[data-rail-mode="collapsed"] { max-height: 50%; }
  /* The handle, gap and safe-area padding also occupy the capped sheet.
     Let details shrink inside it instead of overflowing its bottom padding. */
  .app.ride-canvas-complete .side-panel[data-rail-mode="collapsed"] #route-dock {
    flex-shrink: 1;
    min-height: 0;
  }
}
.shell .user-menu { position: relative; padding: 0; border: 0; }
.shell .user-menu__trigger:not([hidden]) { display: inline-flex; min-height: 44px; align-items: center; gap: 0.5rem; }
.shell .user-menu:not(.is-open) .user-menu__panel { display: none; }
.shell .user-menu.is-open .user-menu__panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(20rem, calc(100vw - 2rem));
  max-height: 70dvh;
  overflow-y: auto;
  padding: 1rem;
  border-radius: var(--route-canvas-radius-sm);
  background: var(--route-canvas-rail-surface);
  box-shadow: var(--route-canvas-dock-shadow);
  color: var(--route-canvas-ink);
}
.shell .user-menu.is-open .user-integration { flex-direction: column; align-items: start; border: 0; padding: 0; }
.shell .user-menu__panel :is(a, button):not(.is-hidden):not([hidden]) {
  display: flex;
  align-items: center;
  min-height: 44px;
  flex-shrink: 0;
}
.shell .user-menu__panel .user-name,
.shell .user-menu__panel .user-integration { color: var(--route-canvas-ink); }
@media (prefers-reduced-motion: reduce) {
  .app.ride-canvas-complete { transition: none; }
}
@media (forced-colors: active) {
  .app.ride-canvas-complete #route-dock { border: 1px solid CanvasText; }
}