/*
 * Active navigation presentation only. No positioning, visibility, transforms,
 * progress widths, event hooks, route state or animations are implemented here.
 * Load after the central design system and existing map styles.
 */
body:not(.licht) .trilho-navigation {
  --trilho-canvas: oklch(0.205 0.012 60);
  --trilho-canvas-deep: oklch(0.168 0.01 60);
  --trilho-surface: oklch(0.245 0.014 60);
  --trilho-ink: oklch(0.945 0.013 85);
  --trilho-muted: oklch(0.712 0.016 70);
  --trilho-border: oklch(0.945 0.013 85 / 20%);
  --trilho-forest: oklch(0.928 0.016 85);
  --trilho-destructive: #f09588;
  color-scheme: dark;
}
body :is(#nav-instructie-kaart, #nav-navigatie).trilho-navigation {
  background: var(--trilho-surface);
  color: var(--trilho-ink);
  border: var(--trilho-border-width) solid var(--trilho-border);
  border-radius: var(--trilho-radius);
  box-shadow: var(--trilho-shadow);
  font-family: var(--trilho-font-ui);
}
#nav-instructie-kaart.trilho-navigation .nav-instr-inner { gap: var(--trilho-space-3); }
#nav-instructie-kaart.trilho-navigation .nav-instr-pijl {
  width: var(--trilho-touch-large);
  height: var(--trilho-touch-large);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--trilho-forest);
  color: var(--trilho-surface);
  border-radius: var(--trilho-radius-control);
  font-size: 2rem;
  line-height: 1;
}
#nav-instructie-kaart.trilho-navigation .nav-instr-tekst { min-width: 0; }
#nav-instructie-kaart.trilho-navigation .nav-instr-actie {
  color: var(--trilho-ink);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: anywhere;
}
#nav-instructie-kaart.trilho-navigation .nav-instr-straat {
  color: var(--trilho-muted);
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#nav-instructie-kaart.trilho-navigation .nav-instr-afstand-blok { flex-shrink: 0; }
#nav-instructie-kaart.trilho-navigation .nav-instr-getal {
  color: var(--trilho-ink);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
#nav-instructie-kaart.trilho-navigation .nav-instr-eenheid {
  color: var(--trilho-muted);
  font-size: .875rem;
}
#nav-navigatie.trilho-navigation .nav-sheet-titel {
  color: var(--trilho-muted);
  font-size: .875rem;
  gap: var(--trilho-space-3);
}
#nav-navigatie.trilho-navigation .nav-sheet-handle-bar { background: var(--trilho-border); }
#nav-navigatie.trilho-navigation .nav-stats-rij {
  background: var(--trilho-canvas);
  border: var(--trilho-border-width) solid var(--trilho-border);
  border-radius: 0;
}
#nav-navigatie.trilho-navigation .nav-stat-blok { min-width: 0; }
#nav-navigatie.trilho-navigation .nav-stat-val {
  color: var(--trilho-ink);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
#nav-navigatie.trilho-navigation :is(.nav-stat-lbl, .nav-voortgang-lbl) {
  color: var(--trilho-muted);
  font-size: .875rem;
}
#nav-navigatie.trilho-navigation .nav-voortgang-km { color: var(--trilho-ink); font-size: .875rem; }
#nav-navigatie.trilho-navigation .nav-voortgang-rij { flex-wrap: wrap; gap: var(--trilho-space-2); }
#nav-navigatie.trilho-navigation .nav-voortgang-wrap {
  background: var(--trilho-canvas-deep);
  border: 1px solid var(--trilho-border);
  border-radius: 0;
  height: 8px;
}
/* Width remains owned by nav-core.js, including reset and live updates. */
#nav-navigatie.trilho-navigation #nav3-voortgang-balk {
  background: var(--trilho-forest);
  border-radius: 0;
}
#nav-navigatie.trilho-navigation button {
  min-width: var(--trilho-touch-large);
  min-height: var(--trilho-touch-large);
  border-radius: var(--trilho-radius-control);
  font-family: var(--trilho-font-ui);
  font-size: 1rem;
  box-shadow: none;
}
#nav-navigatie.trilho-navigation .nav-stop-btn {
  color: var(--trilho-destructive);
  border: var(--trilho-border-strong) solid var(--trilho-destructive);
  background: var(--trilho-surface);
}
#nav-navigatie.trilho-navigation .nav-sim-btn {
  color: var(--trilho-ink);
  border: 1px solid var(--trilho-control-border);
  background: var(--trilho-surface);
}
#nav-navigatie.trilho-navigation #nav-geluid-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--trilho-ink);
}
#nav-navigatie.trilho-navigation button:focus-visible {
  outline: var(--trilho-focus-width) solid var(--trilho-rust);
  outline-offset: var(--trilho-focus-offset);
}
#nav-navigatie.trilho-navigation button:disabled { opacity: .5; cursor: not-allowed; }
@media (hover: hover) {
  #nav-navigatie.trilho-navigation button:not(:disabled):hover { background-color: var(--trilho-canvas-deep); }
}
@media (forced-colors: active) {
  #nav-navigatie.trilho-navigation #nav3-voortgang-balk { background: Highlight; }
  #nav-navigatie.trilho-navigation .nav-stop-btn { border-color: ButtonText; }
}

/* Visual audit: remove the remaining legacy green statistic cards. */
#nav-navigatie.trilho-navigation .nav-stat-blok {
  background: transparent;
  border-color: var(--trilho-border);
  border-radius: 0;
}
@media (max-width: 767px) {
  #nav-instructie-kaart.trilho-navigation {
    top: calc(var(--nav-height) + env(safe-area-inset-top) + 72px);
    max-height: calc(46dvh - var(--nav-height) - env(safe-area-inset-top) - 88px);
    overflow-y: auto;
  }
  #nav-navigatie.trilho-navigation { max-height: 54dvh; }
}

/* Short landscape viewports use two columns instead of overlapping sheets. */
@media (max-width: 767px) and (max-height: 500px) {
  #nav-instructie-kaart.trilho-navigation {
    top: calc(var(--nav-height) + env(safe-area-inset-top) + 12px);
    left: 72px;
    right: calc(48vw + 8px);
    max-height: calc(100dvh - var(--nav-height) - env(safe-area-inset-top) - 24px);
  }
  #nav-navigatie.trilho-navigation {
    left: auto;
    right: 0;
    width: 48vw;
    max-height: calc(100dvh - var(--nav-height) - env(safe-area-inset-top));
  }
}