/* ──────────────────────────────────────────────────────────────
   Omvej — Ride canvas (visual slice B)

   Loaded AFTER style.css (standalone route-builder) and after
   shell.css (unified shell). Everything is scoped to .app / .shell
   so login, admin and invite flows are untouched.

   Intent: the map is the star. A small floating cream/fjord rail
   sits over it, the selected route lives in a low dock with a
   persistent action strip, and mobile collapses to one stable
   bottom sheet that always keeps its buttons on screen.
   ────────────────────────────────────────────────────────────── */

/* ── Tokens ─────────────────────────────────────────────────── */

.app,
.shell {
  /* Cream land, fjord water — light theme */
  --route-canvas-rail-surface: #fbf7f0;
  --route-canvas-rail-veil: rgba(255, 255, 255, 0.72);
  --route-canvas-rail-edge: rgba(47, 79, 110, 0.14);
  --route-canvas-rail-shadow: 0 16px 38px rgba(23, 42, 63, 0.14);
  --route-canvas-hairline: rgba(47, 79, 110, 0.12);
  --route-canvas-ink: #16232f;
  --route-canvas-muted: #5d7085;
  --route-canvas-dock-surface: rgba(251, 247, 240, 0.94);
  --route-canvas-dock-strip: rgba(240, 234, 224, 0.72);
  --route-canvas-dock-edge: rgba(47, 79, 110, 0.16);
  --route-canvas-dock-shadow: 0 12px 30px rgba(23, 42, 63, 0.16);
  --route-canvas-accent-wash: rgba(47, 128, 237, 0.09);
  --route-canvas-accent-line: rgba(47, 128, 237, 0.32);
  --route-canvas-header-surface: linear-gradient(
    180deg,
    rgba(19, 32, 46, 0.9),
    rgba(21, 36, 52, 0.78)
  );

  /* Geometry */
  --route-canvas-radius: 20px;
  --route-canvas-radius-sm: 13px;
  --route-canvas-radius-xs: 10px;
  --route-canvas-gutter: 0.72rem;
  --route-canvas-touch: 44px;

  /* Motion — micro / standard / panel, calm ease-out only */
  --route-canvas-micro: 130ms;
  --route-canvas-standard: 190ms;
  --route-canvas-panel: 240ms;
  --route-canvas-ease: cubic-bezier(0.22, 0.68, 0.36, 1);
}

[data-theme="dark"] .app,
[data-theme="dark"] .shell {
  --route-canvas-rail-surface: #101b27;
  --route-canvas-rail-veil: rgba(148, 178, 209, 0.05);
  --route-canvas-rail-edge: rgba(148, 178, 209, 0.16);
  --route-canvas-rail-shadow: 0 16px 38px rgba(2, 8, 18, 0.5);
  --route-canvas-hairline: rgba(148, 178, 209, 0.14);
  --route-canvas-ink: #e4ebf3;
  --route-canvas-muted: #97a9bd;
  --route-canvas-dock-surface: rgba(15, 26, 38, 0.92);
  --route-canvas-dock-strip: rgba(22, 36, 51, 0.72);
  --route-canvas-dock-edge: rgba(148, 178, 209, 0.18);
  --route-canvas-dock-shadow: 0 12px 30px rgba(2, 8, 18, 0.52);
  --route-canvas-accent-wash: rgba(122, 178, 232, 0.14);
  --route-canvas-accent-line: rgba(122, 178, 232, 0.4);
  --route-canvas-header-surface: linear-gradient(
    180deg,
    rgba(9, 16, 25, 0.92),
    rgba(12, 21, 32, 0.8)
  );
}

/* Feed the cream/fjord surface into the tokens the app already reads. */
.app {
  --route-rail-surface: var(--route-canvas-rail-surface);
}

/* ── Shell: calm, compact header; map fills everything below ── */

.shell .shell-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  min-height: 54px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
}

.shell .shell-header > .brand,
.shell .shell-header > .header-actions {
  pointer-events: auto;
  border-radius: var(--route-canvas-radius-sm);
  background: var(--route-canvas-rail-surface);
  box-shadow: var(--route-canvas-dock-shadow);
  padding: 0.45rem 0.65rem;
}

.shell .shell-header .shell-context { display: none; }

/* Embedded map controls clear the floating brand/account controls. */
.app.is-embedded .map-inspect-bar,
.app.is-embedded .maplibregl-ctrl-top-left,
.app.is-embedded .maplibregl-ctrl-top-right { top: 5rem; }
.app.is-embedded .street-view-inspector.is-expanded { top: 5rem; }

.shell .brand {
  gap: 9px;
  padding: 0.2rem 0.35rem;
  border: 0;
  border-radius: var(--route-canvas-radius-xs);
  background: transparent;
  box-shadow: none;
}

.shell .brand-logo {
  width: 24px;
  height: 24px;
  filter: none;
}

.shell .brand-name {
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--route-canvas-ink);
}

.shell .brand-tagline {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--route-canvas-muted);
}

.shell .shell-context {
  padding: 0.24rem 0.62rem;
  border: 0;
  border-radius: var(--route-canvas-radius-xs);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.shell .shell-context__eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}

.shell .shell-context__title {
  font-size: 0.84rem;
  font-weight: 600;
}

.shell .shell-main--routes {
  padding: 0;
}

.shell .routes-shell--frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

@media (min-width: 761px) and (max-width: 1000px) {
  .shell .shell-header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .shell .shell-context {
    display: none;
  }
  .shell .user-menu,
  .shell .user-menu__panel {
    flex-wrap: nowrap;
  }
  .shell .user-name {
    min-width: 0;
    max-width: 8ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .shell .user-integration {
    order: initial;
    flex-basis: auto;
    padding: 0 0 0 0.5rem;
    border-top: 0;
    border-left: 1px solid var(--route-canvas-hairline);
  }
}

/* ── Full-bleed map canvas ──────────────────────────────────── */

.app .map-wrap {
  inset: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.app .map-stage,
.app .map-canvas {
  border-radius: 0;
}

/* The rail floats over the map, so map chrome keeps using the
   existing clearance token — it just gets a narrower rail now. */
.app .maplibregl-ctrl-top-left {
  top: 1rem;
  left: calc(var(--route-rail-clearance) + 1rem);
}

.app .maplibregl-ctrl-top-right {
  top: 1rem;
}

/* The planner floats along the bottom of the canvas on every viewport, so
   provider attribution lifts clear of it using the measured reservation
   instead of being covered. Street View keeps its own larger clearance. */
.app .map-canvas {
  --omvej-attribution-sheet-clearance: 0px;
  --omvej-attribution-inspector-clearance: 0px;
  /* Height actually occupied by the bottom stack: planner surface, plus the
     selected-route dock when it is on screen. Both come from measured values
     (--route-rail-reserved-bottom, --route-dock-height) set in app.js. */
  --route-bottom-stack: var(--route-rail-reserved-bottom, 0px);
}

.app .map-canvas:has(.route-dock:not([hidden]):not([data-mode="hidden"])) {
  --route-bottom-stack: calc(
    var(--route-rail-reserved-bottom, 0px) + var(--route-dock-height, 0px) + 1.25rem
  );
}

.app .omvej-mapbox-attribution {
  position: relative;
  z-index: 21;
  font-size: 0.66rem;
  transform: translateY(calc(0px - max(
    var(--omvej-attribution-sheet-clearance, 0px),
    var(--omvej-attribution-inspector-clearance, 0px)
  )));
}

/* ── Floating rail ──────────────────────────────────────────── */

.app .side-panel {
  border-radius: var(--route-canvas-radius);
  border: 1px solid var(--route-canvas-rail-edge);
  background: var(--route-canvas-rail-surface);
  box-shadow: var(--route-canvas-rail-shadow);
  color: var(--route-canvas-ink);
  gap: 0.6rem;
}

.app .side-panel[data-rail-mode="collapsed"] {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.app .rail-surface {
  gap: 0.6rem;
}

.app .rail-surface__intro {
  gap: 0.3rem;
  padding: 0.05rem 0.05rem 0;
}

.app .rail-surface__intro h3 {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--route-canvas-ink);
}

.app .rail-sections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--route-canvas-hairline);
  border-radius: var(--route-canvas-radius-sm);
  background: var(--route-canvas-accent-wash);
}

.app .rail-section {
  min-height: 44px;
  padding: 0.45rem 0.35rem;
  justify-content: center;
  border: 0;
  border-radius: var(--route-canvas-radius-xs);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--route-canvas-muted);
  transition:
    background-color var(--route-canvas-micro) var(--route-canvas-ease),
    color var(--route-canvas-micro) var(--route-canvas-ease);
}

.app .rail-section:last-child {
  border-bottom: 0;
}

.app .rail-section.is-active {
  color: var(--route-canvas-ink);
  background: var(--route-canvas-rail-surface);
  box-shadow: 0 1px 4px var(--route-canvas-hairline);
}

.app .rail-section::before {
  content: none;
}

.app .rail-section.is-activating {
  animation: none;
}

.app .rail-surface__intro .status-pill:not(.has-error):not(.is-syncing) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}

.app .side-panel[data-rail-context="planner"] #rail-route-settings-view > .rail-subview-header {
  display: none;
}

.app .rail-view {
  overflow-y: auto;
  overflow-x: hidden;
  gap: 0.66rem;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

/* Keep the CTA outside the form's sole scroll owner, never over an input.
   Explicit rows matter: the surface is short and wide now, so an implicit
   flow would let the sticky action row ride over the header on small heights. */
.app #rail-route-settings-view {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-height: 0;
}

.app #rail-route-settings-view > .rail-subview-header {
  grid-row: 1;
}

.app #rail-route-settings-view > #rail-planning-state {
  grid-row: 2;
  min-height: 0;
}

.app #rail-route-settings-view > .rail-primary-actions {
  grid-row: 3;
}

.app #rail-route-settings-view > .rail-secondary-access {
  grid-row: 4;
}

.app .rail-panel-stack {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-padding-block: 8px;
}

.app .rail-view > .rail-workspace-row,
.app .rail-view > .rail-subview-header,
.app .rail-primary-actions {
  flex-shrink: 0;
}

.app .rail-view[hidden],
.app .rail-surface[hidden] {
  display: none;
}

.app .rail-subview-header {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--route-canvas-hairline);
}

.app .rail-subview-header h2 {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app .rail-workspace-row {
  min-height: var(--route-canvas-touch);
  border-top: 1px solid var(--route-canvas-hairline);
  font-size: 0.86rem;
  transition: background-color var(--route-canvas-micro) var(--route-canvas-ease);
}

.app .rail-workspace-row:hover {
  background: var(--route-canvas-accent-wash);
}

/* Form hierarchy: quiet labels, confident fields. */
.app .compact-label,
.app .direct-map-settings-field > span,
.app .empty-state__eyebrow,
.app .panel-section-title {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--route-canvas-muted);
}

.app .compact-input-group input,
.app .compact-select,
.app .compact-distance-value input,
.app .avoid-name-input,
.app .direct-map-settings-field input,
.app .direct-map-settings-field select {
  min-height: 38px;
  border-radius: var(--route-canvas-radius-xs);
  border: 1px solid var(--route-canvas-hairline);
  color: var(--route-canvas-ink);
  transition:
    border-color var(--route-canvas-micro) var(--route-canvas-ease),
    box-shadow var(--route-canvas-micro) var(--route-canvas-ease);
}

.app .compact-input-group input:focus-visible,
.app .compact-select:focus-visible,
.app .avoid-name-input:focus-visible {
  border-color: var(--route-canvas-accent-line);
  box-shadow: 0 0 0 3px var(--route-canvas-accent-wash);
  outline: none;
}

.app .planner-origin__hint,
.app .ptp-builder__hint,
.app .empty-state__copy {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--route-canvas-muted);
}

.app .compact-btn {
  min-width: var(--route-canvas-touch);
  min-height: 38px;
  border-radius: var(--route-canvas-radius-xs);
}

/* Generate stays reachable while the rail body scrolls. */
.app .rail-primary-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 0.4rem;
  padding-top: 0.55rem;
  margin-top: 0.1rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--route-canvas-rail-surface) 0%, transparent),
    var(--route-canvas-rail-surface) 42%
  );
}

.app .primary.compact-generate {
  min-height: var(--route-canvas-touch);
  border-radius: var(--route-canvas-radius-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    background-color var(--route-canvas-micro) var(--route-canvas-ease),
    box-shadow var(--route-canvas-micro) var(--route-canvas-ease);
}

/* ── Route candidates: understated comparison ───────────────── */

.app .route-list {
  gap: 0;
  border-radius: var(--route-canvas-radius-sm);
  border: 1px solid var(--route-canvas-hairline);
  overflow: hidden;
}

.app .route-result-row {
  min-height: 58px;
  padding: 0.55rem 0.6rem 0.55rem 0.68rem;
  border-bottom: 1px solid var(--route-canvas-hairline);
  border-left: 3px solid transparent;
  transition:
    background-color var(--route-canvas-micro) var(--route-canvas-ease),
    border-color var(--route-canvas-micro) var(--route-canvas-ease);
}

.app .route-result-row:last-child {
  border-bottom: 0;
}

.app .route-result-row:hover {
  border-left-color: var(--route-canvas-accent-line);
  background: var(--route-canvas-accent-wash);
}

.app .route-result-row[aria-current="true"] {
  border-left-color: var(--route-selection-accent);
  background: var(--route-canvas-accent-wash);
}

.app .route-result-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--route-canvas-ink);
}

.app .route-result-distance {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.app .route-result-direction,
.app .route-result-ascent,
.app .route-result-overlap {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--route-canvas-muted);
}

.app .route-plan-summary {
  border-radius: var(--route-canvas-radius-xs);
  background: var(--route-canvas-accent-wash);
}

/* ── Selected route dock ────────────────────────────────────── */

.app .route-dock__body {
  min-height: 0;
  max-height: none;
}

.app .route-dock {
  display: flex;
  flex-direction: column;
  bottom: max(3.75rem, calc(var(--route-safe-area-bottom) + 3.75rem));
  border-radius: var(--route-canvas-radius);
  border: 1px solid var(--route-canvas-dock-edge);
  background: var(--route-canvas-dock-surface);
  box-shadow: var(--route-canvas-dock-shadow);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  transition:
    background-color var(--route-canvas-standard) var(--route-canvas-ease),
    border-color var(--route-canvas-standard) var(--route-canvas-ease),
    box-shadow var(--route-canvas-standard) var(--route-canvas-ease);
}

.app .route-dock__header {
  min-height: 56px;
  padding: 0.5rem 0.55rem 0.5rem 0.78rem;
}

.app .route-dock__title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--route-canvas-ink);
}

.app .route-dock__compact-metrics {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--route-canvas-muted);
}

.app .route-dock__distance {
  font-weight: 600;
  color: var(--route-canvas-ink);
}

.app .route-dock__expand {
  min-height: 44px;
  padding-inline: 0.72rem;
  border-radius: var(--route-canvas-radius-xs);
  border: 1px solid var(--route-canvas-hairline);
  background: transparent;
  color: var(--route-canvas-muted);
  font-size: 0.74rem;
  white-space: nowrap;
  transition:
    background-color var(--route-canvas-micro) var(--route-canvas-ease),
    color var(--route-canvas-micro) var(--route-canvas-ease);
}

.app .route-dock__expand:hover {
  background: var(--route-canvas-accent-wash);
  color: var(--route-canvas-ink);
}

.app .route-dock__expand::after {
  content: "›";
  display: inline-block;
  margin-left: 0.42rem;
  transform: rotate(90deg);
  transition: transform var(--route-canvas-standard) var(--route-canvas-ease);
}

.app .route-dock__expand[aria-expanded="true"]::after {
  transform: rotate(-90deg);
}

.app .route-dock__expanded {
  border-top: 1px solid var(--route-canvas-hairline);
}

.app .route-dock__expanded[hidden] {
  display: none;
}

.app .route-dock__metric-label {
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--route-canvas-muted);
}

.app .route-dock__metric-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--route-canvas-ink);
}

/* Persistent action strip: styled for actions placed directly in the
   dock body (outside the collapsible details) and still correct while
   they live inside .route-dock__expanded. */
.app .route-dock__body > .route-dock__actions {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
  gap: 0.38rem;
  padding: 0.42rem 0.55rem max(0.5rem, var(--route-safe-area-bottom));
  border-top: 1px solid var(--route-canvas-hairline);
  background: var(--route-canvas-dock-strip);
}

.app .route-dock[data-mode="expanded"] .route-dock__body:has(> .route-dock__actions) {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.app .route-dock__action {
  min-height: var(--route-canvas-touch);
  padding-inline: 0.6rem;
  border-radius: var(--route-canvas-radius-xs);
  border: 1px solid var(--route-canvas-hairline);
  background: transparent;
  color: var(--route-canvas-ink);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color var(--route-canvas-micro) var(--route-canvas-ease),
    border-color var(--route-canvas-micro) var(--route-canvas-ease);
}

.app .route-dock__action:hover {
  background: var(--route-canvas-accent-wash);
  border-color: var(--route-canvas-accent-line);
}

.app .route-dock__action--save {
  border-color: transparent;
  background: var(--accent);
  color: #f7fbff;
}

.app .route-dock__action--save:hover {
  background: var(--accent-strong);
  border-color: transparent;
}

[data-theme="dark"] .app .primary.compact-generate,
[data-theme="dark"] .app .route-dock__action--save {
  color: var(--route-canvas-rail-surface);
}

.app .route-dock__state,
.app .route-dock__notice {
  font-size: 0.72rem;
  color: var(--route-canvas-muted);
}

/* ── Floating map surfaces over the canvas ──────────────────── */

.app .map-context-menu,
.app .street-view-inspector,
.app .avoid-drawing-bar {
  border-radius: var(--route-canvas-radius);
  border: 1px solid var(--route-canvas-dock-edge);
  box-shadow: var(--route-canvas-dock-shadow);
}

.app .map-context-menu__eyebrow,
.app .street-view-inspector__eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--route-canvas-muted);
}

.app .map-inspect-bar {
  position: absolute;
  top: 14px;
  right: 64px;
  z-index: 22;
}

.app .map-canvas:has(.street-view-inspector.is-expanded:not(.is-hidden)) .map-inspect-bar {
  display: none;
}

.app .map-inspect-toggle {
  min-height: var(--route-canvas-touch);
  min-width: var(--route-canvas-touch);
  padding-inline: 0.85rem;
  border-radius: var(--route-canvas-radius-sm);
  border: 1px solid var(--route-canvas-dock-edge);
  background: var(--route-canvas-dock-surface);
  color: var(--route-canvas-ink);
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: var(--route-canvas-dock-shadow);
  transition: background-color var(--route-canvas-micro) var(--route-canvas-ease);
}

.app .map-inspect-toggle[aria-pressed="true"] {
  border-color: var(--route-canvas-accent-line);
  background:
    linear-gradient(var(--route-canvas-accent-wash), var(--route-canvas-accent-wash)),
    var(--route-canvas-rail-surface);
}

.app .map-inspect-toggle:focus-visible {
  outline: 2px solid var(--route-canvas-ink);
  outline-offset: 3px;
}

.app .avoid-draft {
  position: absolute;
  top: 72px;
  right: 16px;
  z-index: 130;
  width: min(340px, calc(100% - 32px));
  max-height: calc(100% - 132px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--route-canvas-dock-shadow);
  display: grid;
  gap: 0.55rem;
  padding: 0.68rem 0.72rem;
  border-radius: var(--route-canvas-radius-sm);
  border: 1px solid var(--route-canvas-dock-edge);
  background: var(--route-canvas-rail-surface);
  color: var(--route-canvas-ink);
}

/* State flags remain authoritative over the more specific canvas components. */
.app .is-hidden,
.app [hidden],
.shell .is-hidden,
.shell [hidden] {
  display: none !important;
}

.app .avoid-draft__title {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app .avoid-draft__summary,
.app .avoid-draft__status {
  font-size: 0.73rem;
  line-height: 1.45;
  color: var(--route-canvas-muted);
}

.app .avoid-draft input,
.app .avoid-draft select {
  min-height: 38px;
  border-radius: var(--route-canvas-radius-xs);
  border: 1px solid var(--route-canvas-hairline);
  background: var(--input-bg);
  color: var(--route-canvas-ink);
}

.app .avoid-draft__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.4rem;
}

.app .avoid-draft__actions > button {
  min-height: var(--route-canvas-touch);
  border-radius: var(--route-canvas-radius-xs);
  font-size: 0.78rem;
  font-weight: 600;
}

.app .avoid-draft__header,
.app .avoid-draft__field {
  display: grid;
  gap: 6px;
}

.app .avoid-draft__eyebrow,
.app .avoid-draft__label {
  font-size: 0.7rem;
  color: var(--route-canvas-muted);
}

.app .avoid-draft__error {
  color: var(--error, #dc2626);
  font-size: 0.78rem;
}

.app .avoid-draft__action--primary,
.app .avoid-draft__action--secondary {
  color: var(--route-canvas-rail-surface);
  background: var(--accent-strong);
}

.app .avoid-draft__action--ghost {
  color: var(--route-canvas-ink);
  background: var(--route-canvas-accent-wash);
}

/* ── Desktop: bottom-centered command surface, map keeps focus ─ */

@media (min-width: 761px) {
  .app {
    --workspace-inset: 16px;
    --floating-rail-width: min(70rem, calc(100% - (2 * var(--workspace-inset))));
  }

  /* One calm surface along the bottom of the canvas — no permanent rail. */
  .app .side-panel {
    top: auto;
    left: 50%;
    right: auto;
    bottom: var(--workspace-inset);
    transform: translateX(-50%);
    width: var(--floating-rail-width);
    max-height: min(calc(100% - (2 * var(--workspace-inset))), 30rem);
    padding: 0.72rem 0.9rem 0.8rem;
    gap: 0.5rem;
  }

  .app .side-panel[data-rail-mode="collapsed"] {
    width: auto;
    padding: 0;
  }

  /* Planner: heading row, then one horizontal band of primary controls. */
  .app .side-panel[data-rail-context="planner"] .rail-surface,
  .app .side-panel[data-rail-context="results"] .rail-surface {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 0.9rem;
    row-gap: 0.5rem;
  }

  .app .side-panel[data-rail-context="planner"] .rail-surface__intro,
  .app .side-panel[data-rail-context="results"] .rail-surface__intro {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .app .side-panel[data-rail-context="planner"] .rail-sections,
  .app .side-panel[data-rail-context="results"] .rail-sections {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .app .side-panel[data-rail-context="planner"] #rail-route-settings-view,
  .app .side-panel[data-rail-context="results"] #rail-workspace-view {
    grid-column: 2;
    grid-row: 2;
  }

  /* One scroll owner (#rail-planning-state) with a stable action/job footer:
     the rows must be able to shrink, otherwise short screens overflow the
     clipped surface and push the primary fields out of reach. */
  .app .side-panel[data-rail-context="planner"] #rail-route-settings-view {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
    min-height: 0;
  }

  .app .side-panel[data-rail-context="planner"]
    #rail-route-settings-view > .rail-subview-header {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .app .side-panel[data-rail-context="planner"] #rail-planning-state {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    /* Must stretch: an end-aligned overflowing scroller would push its own
       content above the clipped surface instead of scrolling it. */
    align-self: stretch;
  }

  .app .side-panel[data-rail-context="planner"] .rail-primary-actions {
    grid-column: 2;
    grid-row: 2;
    position: static;
    align-self: end;
    align-content: end;
    min-width: 11rem;
    padding-top: 0;
    background: none;
  }

  .app .side-panel[data-rail-context="planner"] .rail-secondary-access {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  /* Primary fields read left-to-right: start, mode-dependent detail, length. */
  .app .side-panel[data-rail-context="planner"] .rail-panel.is-active {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.6rem 0.7rem;
  }

  .app .side-panel[data-rail-context="planner"] .planner-origin {
    flex: 2 1 14rem;
    min-width: 11rem;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .app .side-panel[data-rail-context="planner"] .planner-origin__hint {
    display: none;
  }

  /* Each primary field reads as a labelled column, like the approved band. */
  .app .side-panel[data-rail-context="planner"] .compact-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    align-items: stretch;
    flex: 1 1 10.5rem;
    min-width: 8.5rem;
    gap: 0.28rem;
  }

  .app .side-panel[data-rail-context="planner"] .compact-label {
    flex: none;
  }

  .app .side-panel[data-rail-context="planner"] .compact-slider-group {
    align-items: center;
  }

  /* Optional toggles must not claim a whole line while they are empty. */
  .app .side-panel[data-rail-context="planner"] .compact-toggles {
    flex: 0 1 auto;
    min-width: 0;
  }

  .app .side-panel[data-rail-context="planner"] .compact-toggles:empty {
    display: none;
  }

  .app .side-panel[data-rail-context="planner"] .ptp-builder {
    flex: 1 1 100%;
  }

  /* Results compare side by side instead of stacking a tall list. */
  .app .side-panel[data-rail-context="results"] .route-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }

  .app .side-panel[data-rail-context="results"] .route-result-row {
    border-bottom: 0;
    border-right: 1px solid var(--route-canvas-hairline);
  }

  .app .side-panel[data-rail-context="results"] .route-result-row:last-child {
    border-right: 0;
  }

  /* Selected-route dock rides above the planner using its measured height. */
  .app .route-dock {
    width: min(38rem, calc(100% - 2rem));
    bottom: calc(var(--route-rail-reserved-bottom, 4.5rem) + 0.75rem);
  }

  .app .route-dock__body > .route-dock__actions {
    padding-bottom: 0.5rem;
  }

  .app .workspace:has(.route-dock:not([hidden])) .street-view-inspector.is-expanded {
    bottom: calc(var(--route-bottom-stack, 0px) + var(--route-attribution-height, 4rem) + 1.5rem);
  }

  .app .map-canvas {
    --omvej-attribution-sheet-clearance: calc(var(--route-bottom-stack, 0px) + 0.5rem);
  }
}

/* Secondary access row: named jobs, horizontal, always reachable. */
.app .rail-secondary-access {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
  align-items: stretch;
}

.app .rail-secondary-access > .rail-workspace-row {
  width: auto;
  flex: 0 1 auto;
  min-height: var(--route-canvas-touch);
  padding: 0.4rem 1.55rem 0.4rem 0.6rem;
  border: 1px solid var(--route-canvas-hairline);
  border-radius: var(--route-canvas-radius-xs);
  font-size: 0.78rem;
}

.app .rail-secondary-access > .rail-workspace-row::after {
  right: 0.55rem;
}

.app .rail-secondary-access > .route-settings-avoid-trigger {
  padding-right: 0.6rem;
}

/* The chip for the open job stays focusable so Back can hand focus straight
   back to it; it just reads as the current surface. */
.app .side-panel[data-rail-context="map-settings"] #planner-map-settings,
.app .side-panel[data-rail-context="route-settings"] #planner-route-settings,
.app .side-panel[data-rail-context="saved-routes"] #planner-saved-routes,
.app .side-panel[data-rail-context="route-points"] #planner-route-points,
.app .side-panel[data-rail-context="avoid-zones"] .route-settings-avoid-trigger {
  border-color: var(--route-canvas-accent-line);
  background: var(--route-canvas-accent-wash);
}

.app .rail-surface__eyebrow {
  grid-column: 1;
  margin: 0;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--route-canvas-muted);
}

.app .side-panel:not([data-rail-context="planner"]) .rail-surface__eyebrow {
  display: none;
}

/* One task surface at a time: a focused job owns the whole panel. The route
   type control and planner title belong to the planner/results composition,
   so they step aside instead of stacking above a secondary surface. */
.app .side-panel:not([data-rail-context="planner"]):not([data-rail-context="results"])
  .rail-surface {
  grid-template-rows: auto minmax(0, 1fr);
}

.app .side-panel:not([data-rail-context="planner"]):not([data-rail-context="results"])
  .rail-sections,
.app .side-panel:not([data-rail-context="planner"]):not([data-rail-context="results"])
  .rail-surface__intro h3 {
  display: none;
}

.app .rail-surface__intro {
  grid-template-columns: minmax(0, 1fr) auto;
}

.app .rail-surface__intro h3 {
  grid-column: 1;
}

.app .rail-collapse {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* ── Mobile: one stable bottom sheet ────────────────────────── */

@media (max-width: 760px) {
  .app .side-panel[data-rail-mode="collapsed"] {
    padding: 4px 0.7rem calc(4px + var(--route-safe-area-bottom));
    background: var(--route-canvas-rail-surface);
  }

  /* One row of job chips: the sheet must not spend height on wrapping. */
  .app .rail-secondary-access {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .app .rail-secondary-access > .rail-workspace-row {
    flex: 0 0 auto;
  }

  .app .side-panel {
    max-height: min(70dvh, 34rem);
    border: 0;
    border-radius: var(--route-canvas-radius) var(--route-canvas-radius) 0 0;
    padding: 0.5rem 0.7rem max(0.6rem, var(--route-safe-area-bottom));
    background: var(--route-canvas-rail-surface);
    box-shadow: 0 -10px 30px rgba(2, 8, 18, 0.28);
    gap: 0.4rem;
  }

  /* Internal scrolling: the sheet body must clip, the active view scrolls,
     so Generate / Save stay on screen down to 320px. */
  .app .rail-surface {
    overflow: hidden;
    gap: 0.5rem;
  }

  .app .rail-view {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.15rem;
  }

  .app .rail-surface__intro h3 {
    font-size: 0.96rem;
  }

  .app .side-panel__handle {
    min-height: var(--route-canvas-touch);
  }

  .app .rail-section,
  .app .rail-workspace-row,
  .app .rail-subview-back,
  .app .route-result-row,
  .app .compact-btn,
  .app .primary.compact-generate,
  .app .route-dock__expand,
  .app .route-dock__action {
    min-height: var(--route-canvas-touch);
  }

  .app .compact-input-group input,
  .app .compact-select,
  .app .compact-distance-value input,
  .app .avoid-name-input,
  .app .direct-map-settings-field input,
  .app .direct-map-settings-field select,
  .app .avoid-draft input,
  .app .avoid-draft select {
    min-height: var(--route-canvas-touch);
    font-size: 1rem;
  }

  .app .rail-primary-actions {
    padding-bottom: 0.15rem;
  }

  .app .avoid-draft {
    top: auto;
    right: 10px;
    bottom: calc(var(--route-compact-rail-height) + 12px);
    width: calc(100% - 20px);
    max-height: min(65dvh, 30rem);
  }

  .app .map-canvas:has(.avoid-draft:not([hidden]):not(.is-hidden)) {
    --omvej-attribution-inspector-clearance: calc(min(65dvh, 30rem) + var(--route-compact-rail-height) + 1rem);
  }

  .app .workspace[data-rail-mode="open"] .map-canvas {
    --omvej-attribution-sheet-clearance: calc(
      var(--route-bottom-stack, min(70dvh, 34rem)) + 0.5rem
    );
  }

  /* Less chrome on small screens. */
  .app .planner-origin__hint,
  .app .ptp-builder__hint {
    font-size: 0.72rem;
  }

  .app .route-dock {
    left: 0.6rem;
    right: 0.6rem;
    bottom: calc(var(--route-compact-rail-height) + 4.75rem);
    border-radius: var(--route-canvas-radius-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .app .route-dock__header {
    min-height: 52px;
  }

  .app .route-dock__body > .route-dock__actions {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    padding-bottom: 0.5rem;
  }
}

/* ── 320px-class widths ─────────────────────────────────────── */

@media (max-width: 360px) {
  .app .side-panel {
    padding-inline: 0.55rem;
  }

  .app .rail-surface__intro h3 {
    font-size: 0.9rem;
  }

  .app .route-result-row {
    padding-inline: 0.5rem 0.45rem;
  }

  .app .route-dock {
    left: 0.4rem;
    right: 0.4rem;
  }

  .app .route-dock__title {
    font-size: 0.78rem;
  }

  .app .route-dock__action,
  .app .primary.compact-generate {
    font-size: 0.75rem;
  }
}

/* ── Short landscape ────────────────────────────────────────── */

@media (max-width: 900px) and (max-height: 480px) {
  .app .side-panel[data-rail-context="planner"] .rail-surface__intro h3,
  .app .side-panel[data-rail-context="results"] .rail-surface__intro h3 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .app .rail-surface__intro .status-pill {
    grid-column: 1;
    grid-row: 1;
  }
  .app .rail-collapse {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  /* Short landscape still has to leave a usable map above the surface, so the
     planner keeps its own scroll owner inside a strictly bounded height. */
  .app .side-panel {
    max-height: min(60dvh, 14rem);
    padding-top: 0.35rem;
    padding-bottom: max(0.4rem, var(--route-safe-area-bottom));
  }

  .app .side-panel[data-rail-context="planner"] .rail-surface__intro,
  .app .side-panel[data-rail-context="results"] .rail-surface__intro {
    padding-bottom: 0;
  }

  /* Short landscape trades the stacked field labels for inline ones so the
     primary row stays directly reachable instead of needing a scroll. */
  .app .side-panel[data-rail-context="planner"] .compact-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  .app .side-panel[data-rail-context="planner"] .compact-label {
    flex: 0 0 auto;
  }

  .app .rail-secondary-access > .rail-workspace-row {
    min-height: 38px;
    padding-block: 0.25rem;
  }

  .app .side-panel[data-rail-mode="collapsed"] {
    max-height: none;
  }

  .app .rail-surface__eyebrow {
    display: none;
  }

  .app .side-panel[data-rail-context="planner"] .rail-surface,
  .app .side-panel[data-rail-context="results"] .rail-surface {
    row-gap: 0.35rem;
  }

  .app .rail-secondary-access {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .app .rail-secondary-access > .rail-workspace-row {
    flex: 0 0 auto;
  }

  .app .route-dock {
    bottom: calc(var(--route-rail-reserved-bottom, var(--route-compact-rail-height)) + 0.6rem);
  }

  .app .route-dock__header {
    min-height: var(--route-canvas-touch);
  }


  .app .route-dock__body > .route-dock__actions {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) and (max-height: 480px) {
  .app .workspace[data-rail-mode="open"] .map-canvas {
    --omvej-attribution-sheet-clearance: calc(
      var(--route-bottom-stack, min(60dvh, 14rem)) + 0.5rem
    );
  }
}

/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .app .side-panel,
  .app .rail-section,
  .app .rail-workspace-row,
  .app .rail-view,
  .app .route-result-row,
  .app .route-dock,
  .app .route-dock__expand,
  .app .route-dock__expand::after,
  .app .route-dock__action,
  .app .primary.compact-generate,
  .app .compact-input-group input,
  .app .compact-select,
  .app .avoid-name-input,
  .app .map-inspect-toggle {
    transition: none;
    animation: none;
  }

  .app .route-dock__expand::after,
  .app .route-dock__expand[aria-expanded="true"]::after {
    transform: none;
  }
}

/* ── Forced colors ──────────────────────────────────────────── */

@media (forced-colors: active) {
  .app .side-panel,
  .app .route-dock,
  .app .route-dock__body > .route-dock__actions {
    border: 1px solid CanvasText;
  }

  .app .route-result-row[aria-current="true"] {
    border-left-color: Highlight;
  }
}