/* LumaRoute application styles. Component classes (lr-*) follow the LumaRoute design system bundle. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--primary); }
h1, h2, h3 { margin: 0; }
:where(button, input, select, textarea, a, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Focus moved by the app, not by the user (the page title after navigating, FocusOnNavigate; a manual section):
   screen readers announce it, but it is nothing to operate, so it gets no focus ring. */
[tabindex="-1"]:focus { outline: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-muted); }
.lr-title { font: 600 24px/30px var(--font-sans); }
.lr-heading { font: 600 17px/24px var(--font-sans); }
.lr-caption { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.lr-tagline { font: 500 13px/20px var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted); }
.lr-display { font: 700 40px/44px var(--font-sans); letter-spacing: -0.02em; }
.lr-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.lr-stack-sm { display: flex; flex-direction: column; gap: var(--space-3); }
.lr-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.lr-spacer { flex: 1; }
.lr-icon { display: inline-block; flex: none; vertical-align: middle; }

/* ---------- App shell ---------- */
.app-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.app-main { min-width: 0; display: flex; flex-direction: column; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.lr-sidenav { display: none; }
@media (min-width: 1024px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .app-main { padding-bottom: 0; height: 100dvh; overflow: auto; }
  .lr-sidenav { display: flex; position: sticky; top: 0; height: 100dvh; }
  .lr-tabbar { display: none !important; }
}

/* SideNav */
.lr-sidenav { flex-direction: column; gap: var(--space-1); width: 220px; padding: var(--space-5) var(--space-3); background: var(--bg); border-right: 1px solid var(--border); }
.lr-wordmark { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) var(--space-5); font: 600 19px/24px var(--font-sans); color: var(--ink); text-decoration: none; }
.lr-wordmark img { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.lr-wordmark b { font-weight: 600; color: var(--brand-text); }
.lr-navitem { display: flex; align-items: center; gap: var(--space-3); min-height: 42px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: 500 14px/20px var(--font-sans); text-decoration: none; cursor: pointer; }
.lr-navitem .lr-icon { color: var(--ink-muted); }
.lr-navitem:hover { background: var(--surface-raised); }
.lr-navitem.active { background: var(--surface-selected); color: var(--primary); }
.lr-navitem.active .lr-icon { color: var(--primary); }
.lr-sidenav-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-2) 0; }

/* TabBar */
.lr-tabbar { position: fixed; z-index: 1100; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--border); }
.lr-tab { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-1) 0; border: 0; background: transparent; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); text-decoration: none; border-radius: var(--radius-md); min-height: 48px; justify-content: center; }
.lr-tab.active { color: var(--primary); }

/* Mobile top bar */
.app-topbar { display: flex; align-items: center; gap: var(--space-2); padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) var(--space-3); }
.app-topbar .lr-wordmark { padding: 0; font-size: 17px; }
.app-topbar .lr-wordmark img { width: 28px; height: 28px; }
@media (min-width: 1024px) { .app-topbar { display: none; } }

/* Status banners (offline / reconnect) */
.lr-banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--border-control); color: var(--ink); font: 500 14px/20px var(--font-sans); }
.lr-banner .lr-icon { color: var(--partial); margin-top: 1px; }
.lr-banner-danger { background: var(--unlit-soft); border-color: var(--unlit-confirmed); color: var(--on-unlit-soft); }
.lr-banner-danger .lr-icon { color: var(--on-unlit-soft); }
.lr-banner-info .lr-icon { color: var(--primary); }
#lr-offline-banner { position: fixed; z-index: 3000; left: var(--space-4); right: var(--space-4); top: calc(var(--space-3) + env(safe-area-inset-top)); max-width: 640px; margin: 0 auto; box-shadow: var(--shadow-panel); display: none; }
html.lr-offline #lr-offline-banner { display: flex; }

/* ---------- Buttons ---------- */
.lr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 42px; padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); font: 600 14px/20px var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; }
.lr-btn-primary { background: var(--primary); color: var(--on-primary); }
.lr-btn-primary:hover { filter: brightness(1.06); }
.lr-btn-secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--border-control); }
.lr-btn-secondary:hover { background: var(--surface-selected); }
.lr-btn-ghost { background: transparent; color: var(--ink-muted); }
.lr-btn-ghost:hover { color: var(--ink); background: var(--surface-raised); }
.lr-btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
/* The Luma gradient: one per screen, only for "Bereken mijn route". Label 18px semibold per the design system's contrast note. */
.lr-btn-cta { min-height: 54px; padding: 0 var(--space-5); background: linear-gradient(90deg, var(--luma-mint), var(--luma-blue)); color: var(--on-gradient); font-size: 18px; line-height: 24px; text-shadow: 0 1px 2px rgba(10, 22, 38, .45); }
.lr-btn-cta:hover { filter: brightness(1.05); }
.lr-btn-block { display: flex; width: 100%; }
.lr-btn:disabled, .lr-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.lr-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--ink-muted); border-radius: var(--radius-md); cursor: pointer; }
.lr-icon-btn:hover { color: var(--ink); background: var(--surface-raised); }
.lr-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: lr-spin .8s linear infinite; }
@keyframes lr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lr-spinner { animation-duration: 2s; } }

/* ---------- Badges ---------- */
.lr-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-pill); font: 600 12px/16px var(--font-sans); white-space: nowrap; }
.lr-badge-lit { background: var(--lit-soft); color: var(--on-lit-soft); }
.lr-badge-partial { background: var(--partial-soft); color: var(--on-partial-soft); }
.lr-badge-neutral { background: var(--surface-selected); color: var(--ink); }
.lr-badge-danger { background: var(--unlit-soft); color: var(--on-unlit-soft); }

/* ---------- Panels & cards ---------- */
.lr-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.lr-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; }
.lr-card.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.lr-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.lr-card-name { font: 600 17px/24px var(--font-sans); }
.lr-stat { white-space: nowrap; font: 600 24px/28px var(--font-sans); letter-spacing: -0.01em; }
.lr-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font: 500 12px/16px var(--font-sans); color: var(--ink); }
.lr-meta li { display: flex; align-items: center; gap: var(--space-2); }
.lr-meta .lr-icon { color: var(--ink-muted); }
.lr-thumb { display: block; width: 100%; height: 96px; background: var(--map-ground); border-radius: var(--radius-md); }
.lr-thumb path { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

/* Lighting bar: stacked share per class, always with text labels next to it. */
.lr-lightbar { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; background: var(--border); }
.lr-bar-svg { display: block; width: 100%; height: 100%; }
.lr-bar-svg .lr-c-lit { fill: var(--lit); }
.lr-bar-svg .lr-c-probable { fill: var(--partial); }
.lr-bar-svg .lr-c-unknown { fill: var(--unlit); }
.lr-bar-svg .lr-c-unlit { fill: var(--unlit-confirmed); }
.lr-c-lit { background: var(--lit); stroke: var(--lit); }
.lr-c-probable { background: var(--partial); stroke: var(--partial); }
.lr-c-unknown { background: var(--unlit); stroke: var(--unlit); }
.lr-c-unlit { background: var(--unlit-confirmed); stroke: var(--unlit-confirmed); }
.lr-lightstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); margin: 0; font: 500 12px/16px var(--font-sans); }
.lr-lightstats div { display: flex; align-items: center; gap: var(--space-2); }
.lr-lightstats dt { color: var(--ink-muted); flex: 1; }
.lr-lightstats dd { margin: 0; font-weight: 600; }
.lr-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* DetailList */
.lr-details { margin: 0; display: flex; flex-direction: column; }
.lr-details > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); font: 400 14px/20px var(--font-sans); }
.lr-details > div:last-child { border-bottom: 0; }
.lr-details dt { color: var(--ink-muted); }
.lr-details dd { margin: 0; font-weight: 500; text-align: right; }

/* ---------- Form controls ---------- */
.lr-field { display: flex; flex-direction: column; gap: var(--space-2); }
.lr-field-label { display: flex; align-items: center; gap: var(--space-2); font: 600 14px/20px var(--font-sans); color: var(--ink); }
.lr-field-label .lr-icon { color: var(--ink-muted); }
.lr-field-hint { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.lr-field-error { font: 500 13px/18px var(--font-sans); color: var(--danger); }
/* Fields side by side: label, control and hint each get a row of their own (subgrid), so the controls line up
   even when one label wraps or only one field has a hint. */
.lr-field-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4); }
.lr-field-row > .lr-field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-2); align-content: start; }
.lr-field-row > .lr-field > .lr-field-label { align-self: end; }
.lr-input { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 46px; padding: 0 var(--space-2) 0 var(--space-3); background: var(--surface-raised); border: 1px solid var(--border-control); border-radius: var(--radius-md); color: var(--ink); }
.lr-input > .lr-icon { color: var(--primary); }
.lr-input input, .lr-select { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 16px/22px var(--font-sans); outline: none; }
.lr-input input::placeholder { color: var(--ink-muted); }
.lr-input:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.lr-select-wrap { min-height: 46px; padding: 0 var(--space-3); background: var(--surface-raised); border: 1px solid var(--border-control); border-radius: var(--radius-md); display: flex; align-items: center; }
.lr-select-wrap:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.lr-select { appearance: auto; min-height: 44px; }
.lr-select option { background: var(--surface); color: var(--ink); }
.lr-suggestions { position: absolute; z-index: 1200; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: var(--space-1); list-style: none; background: var(--surface); border: 1px solid var(--border-control); border-radius: var(--radius-md); box-shadow: var(--shadow-panel); max-height: 280px; overflow: auto; }
.lr-suggestions button { display: flex; gap: var(--space-2); align-items: center; width: 100%; padding: var(--space-2) var(--space-3); border: 0; background: transparent; color: var(--ink); font: 400 14px/20px var(--font-sans); text-align: left; border-radius: var(--radius-sm); cursor: pointer; }
.lr-suggestions button:hover, .lr-suggestions button.active { background: var(--surface-selected); }
.lr-suggestions small { color: var(--ink-muted); margin-left: auto; }

/* OptionGroup */
.lr-options { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lr-options-cols-1 { grid-template-columns: minmax(0, 1fr); }
.lr-options-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lr-options-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lr-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 68px; padding: var(--space-3) var(--space-2); background: var(--surface-raised); color: var(--ink); border: 1px solid var(--border-control); border-radius: var(--radius-md); font: 500 13px/16px var(--font-sans); cursor: pointer; text-align: center; }
.lr-option .lr-icon { color: var(--ink-muted); }
.lr-option:hover { background: var(--surface-selected); }
.lr-option[aria-checked="true"] { background: var(--selected); border-color: var(--selected); color: var(--on-selected); }
.lr-option[aria-checked="true"] .lr-icon { color: var(--on-selected); }
.lr-option[aria-checked="true"].lr-option-glow .lr-icon { color: var(--partial); filter: drop-shadow(0 0 6px rgba(244, 212, 36, .6)); }

/* Toggle chips (multi-select preferences) */
.lr-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lr-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 38px; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--border-control); background: var(--surface-raised); color: var(--ink); font: 500 13px/18px var(--font-sans); cursor: pointer; }
.lr-chip[aria-pressed="true"] { background: var(--selected); border-color: var(--selected); color: var(--on-selected); }
.lr-chip[aria-pressed="true"] .lr-icon { color: var(--on-selected); }

/* DistanceSlider */
.lr-slider-top { display: flex; align-items: center; gap: var(--space-2); }
.lr-num { width: 72px; min-height: 40px; padding: 0 var(--space-2); background: var(--surface-raised); border: 1px solid var(--border-control); border-radius: var(--radius-sm); color: var(--ink); font: 500 16px/22px var(--font-sans); }
.lr-unit { color: var(--ink); }
.lr-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; position: relative; }
.lr-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: transparent; }
.lr-range::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: var(--border); }
.lr-range::-moz-range-progress { height: 4px; border-radius: var(--radius-pill); background: var(--primary); }
.lr-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: var(--radius-pill); background: var(--primary); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--primary); }
.lr-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--primary); border: 3px solid var(--surface); }
/* Chromium has no pseudo-element for the filled part of a range track: a progress element under the transparent track draws it. */
.lr-range-wrap { position: relative; display: flex; }
.lr-range-fill { position: absolute; left: 0; top: 50%; width: 100%; height: 4px; margin-top: -2px; border: 0; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; pointer-events: none; -webkit-appearance: none; appearance: none; }
.lr-range-fill::-webkit-progress-bar { background: var(--border); }
.lr-range-fill::-webkit-progress-value { background: var(--primary); }
.lr-range-fill::-moz-progress-bar { background: var(--primary); }
.lr-minmax { display: flex; justify-content: space-between; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }

/* Switch */
.lr-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 44px; cursor: pointer; }
.lr-switch input { appearance: none; width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--border-control); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.lr-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
.lr-switch input:checked { background: var(--primary); }
.lr-switch input:checked::after { transform: translateX(18px); }

/* Legend */
.lr-legend { display: inline-flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); border: 1px solid var(--border); }
.lr-legend-title { font: 600 13px/18px var(--font-sans); }
.lr-legend-row { display: flex; align-items: center; gap: var(--space-3); font: 500 12px/16px var(--font-sans); }
.lr-swatch { width: 28px; height: 4px; border-radius: var(--radius-pill); flex: none; }
.lr-start { width: 12px; height: 12px; margin: 0 8px; border-radius: var(--radius-pill); background: var(--start-point); box-shadow: 0 0 0 3px var(--on-selected); flex: none; }
.lr-legend-dash { width: 28px; height: 0; border-top: 3px dashed var(--unlit); flex: none; }

/* ---------- Planner page ---------- */
.planner { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-height: 0; }
.planner-map { position: relative; height: 42vh; min-height: 260px; order: -1; }
.planner-sheet { position: relative; z-index: 2; margin-top: calc(-1 * var(--radius-xl)); background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-5) var(--space-4) var(--space-6); box-shadow: var(--shadow-panel); }
.planner-sheet-handle { width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--border-control); margin: calc(-1 * var(--space-3)) auto var(--space-4); }
@media (min-width: 1024px) {
  .planner { grid-template-columns: 420px minmax(0, 1fr); height: 100dvh; }
  .planner-sheet { order: 0; margin: 0; border-radius: 0; box-shadow: none; overflow: auto; border-right: 1px solid var(--border); padding: var(--space-5); }
  .planner-sheet-handle { display: none; }
  .planner-map { order: 1; height: 100%; }
}
.planner-hero { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.planner-section { display: flex; flex-direction: column; gap: var(--space-5); }
.planner-advanced summary { cursor: pointer; font: 600 14px/20px var(--font-sans); color: var(--ink); list-style: none; display: flex; align-items: center; gap: var(--space-2); min-height: 40px; }
.planner-advanced summary::-webkit-details-marker { display: none; }
.planner-advanced[open] summary .lr-icon-chevron { transform: rotate(180deg); }
.planner-advanced > div { padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-4); }
.results { display: flex; flex-direction: column; gap: var(--space-3); }
.results-header { display: flex; align-items: center; gap: var(--space-2); }
.results-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.skeleton { background: linear-gradient(90deg, var(--surface-raised), var(--surface-selected), var(--surface-raised)); background-size: 200% 100%; animation: lr-shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-lg); min-height: 180px; }
@keyframes lr-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------- Map ---------- */
.lr-map { position: absolute; inset: 0; background: var(--map-ground); }
.lr-map .leaflet-tile-pane { filter: var(--tile-filter); }
.lr-map .leaflet-container { background: var(--map-ground); font-family: var(--font-sans); }
.lr-map-wrap { position: relative; width: 100%; height: 100%; min-height: 260px; overflow: hidden; }
.lr-map-wrap:fullscreen { background: var(--map-ground); }
.lr-map-controls { position: absolute; z-index: 1000; top: var(--space-3); right: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.lr-map-controls .lr-icon-btn { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-panel); color: var(--ink); width: 42px; height: 42px; }
.lr-map-controls .lr-icon-btn[aria-pressed="true"] { background: var(--selected); color: var(--on-selected); }
.lr-map-legend { position: absolute; z-index: 1000; right: var(--space-3); bottom: var(--space-6); }
.lr-map-legend.collapsed .lr-legend-row { display: none; }
.lr-map-hint { position: absolute; z-index: 1000; left: 50%; transform: translateX(-50%); top: var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--selected); color: var(--on-selected); font: 600 13px/18px var(--font-sans); box-shadow: var(--shadow-panel); white-space: nowrap; }
.lr-map-layers { position: absolute; z-index: 1001; top: var(--space-3); right: 64px; width: 240px; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); display: flex; flex-direction: column; gap: var(--space-1); }
.lr-map-status { position: absolute; z-index: 1000; left: var(--space-3); bottom: var(--space-6); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-muted); font: 500 12px/16px var(--font-sans); box-shadow: var(--shadow-panel); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 85%, transparent) !important; color: var(--ink-muted) !important; font: 500 10px/14px var(--font-sans) !important; }
.leaflet-control-attribution a { color: var(--ink) !important; }
.leaflet-control-zoom a { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--border) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-panel); border: 1px solid var(--border); }
.leaflet-popup-content { margin: var(--space-3) var(--space-4); font: 400 13px/18px var(--font-sans); min-width: 220px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--ink-muted); }
.lr-popup h4 { margin: 0 0 var(--space-2); font: 600 14px/20px var(--font-sans); }
.lr-popup dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); }
.lr-popup dt { color: var(--ink-muted); }
.lr-popup dd { margin: 0; text-align: right; }
.lr-popup ul { margin: var(--space-2) 0 0; padding-left: 18px; color: var(--ink-muted); }
.lr-popup .lr-badge { margin-bottom: var(--space-2); }
.lr-start-marker { width: 18px; height: 18px; border-radius: 50%; background: var(--start-point); box-shadow: 0 0 0 3px #fff, var(--shadow-panel); }
.lr-end-marker { width: 18px; height: 18px; border-radius: 4px; background: var(--ink); box-shadow: 0 0 0 3px var(--start-point), var(--shadow-panel); }
.lr-gps-marker { width: 16px; height: 16px; border-radius: 50%; background: #4285de; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 10px rgba(66, 133, 222, .25); }
.lr-route-glow { filter: drop-shadow(0 0 5px rgba(80, 228, 128, .45)); }
:root[data-theme="light"] .lr-route-glow { filter: none; }

/* ---------- Route details ---------- */
.page { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); max-width: 1400px; width: 100%; margin: 0 auto; }
@media (min-width: 1024px) { .page { padding: var(--space-6); } }
.page-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.details-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.details-main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.details-map { position: relative; height: 56vh; min-height: 320px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
@media (min-width: 1024px) {
  .details-layout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .details-main { position: sticky; top: var(--space-6); }
  .details-map { height: max(360px, calc(100dvh - 520px)); }
}
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.stat-tile { padding: var(--space-3) var(--space-4); background: var(--surface-raised); border-radius: var(--radius-md); border: 1px solid var(--border); }
.stat-tile .lr-stat { font-size: 20px; line-height: 26px; }
.warning-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.segment-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.segment-list button { width: 100%; display: grid; grid-template-columns: 12px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-1); border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--ink); text-align: left; font: 400 13px/18px var(--font-sans); cursor: pointer; }
.segment-list button:hover { background: var(--surface-raised); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-6) var(--space-4); color: var(--ink-muted); }
.empty-state img { width: 72px; height: 72px; opacity: .9; }
.settings-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); max-width: 760px; }
.prose { max-width: 760px; }
.prose p, .prose li { color: var(--ink); }
.prose h2 { margin: var(--space-5) 0 var(--space-2); font: 600 19px/26px var(--font-sans); }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--border); vertical-align: top; }

/* Reconnect modal overrides (template component) */
#components-reconnect-modal { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; font-family: var(--font-sans) !important; }

/* Radzen theme alignment */
/* Radzen loads its dark theme; every text colour follows the LumaRoute tokens, so the Day theme stays readable too. */
:root {
  --rz-primary: var(--primary); --rz-text-font-family: var(--font-sans); --rz-base-background-color: var(--surface); --rz-border-radius: var(--radius-md);
  --rz-text-color: var(--ink); --rz-text-title-color: var(--ink); --rz-text-secondary-color: var(--ink-muted); --rz-text-tertiary-color: var(--ink-muted);
}
.rz-notification-item { font-family: var(--font-sans); }

/* Logo per theme */
.logo-for-light { display: none; }
:root[data-theme="light"] .logo-for-light { display: inline-block; }
:root[data-theme="light"] .logo-for-dark { display: none; }

/* Fullscreen fallback (iOS Safari has no element fullscreen) */
.lr-map-wrap.lr-map-fallback-fullscreen { position: fixed; inset: 0; z-index: 4000; min-height: 100dvh; }

/* Blazor error UI */
#blazor-error-ui { display: none; position: fixed; z-index: 5000; left: var(--space-4); right: var(--space-4); bottom: calc(88px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--unlit-soft); color: var(--on-unlit-soft); box-shadow: var(--shadow-panel); font: 500 14px/20px var(--font-sans); }
#blazor-error-ui .reload { color: inherit; font-weight: 700; margin-left: var(--space-2); }
#blazor-error-ui .dismiss { cursor: pointer; float: right; font-size: 20px; line-height: 20px; }

/* Mobile: keep map attribution and legend clear of the overlapping planner sheet */
@media (max-width: 1023px) {
  .planner-map .leaflet-bottom { bottom: var(--radius-xl); }
  .planner-map .lr-map-legend { bottom: calc(var(--radius-xl) + var(--space-5)); }
}

/* Admin diagnostics tables */
.diag-table { width: 100%; border-collapse: collapse; font: 400 13px/18px var(--font-sans); }
.diag-table th, .diag-table td { text-align: left; vertical-align: top; padding: var(--space-2); border-bottom: 1px solid var(--border); }
.diag-table th { color: var(--ink-muted); font-weight: 600; white-space: nowrap; }

/* Elevation profile (route details): unscaled SVG axes around a stretched SVG plot, so text never scales. */
.elev-chart { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 160px auto auto; column-gap: var(--space-2); }
.elev-yaxis { position: relative; grid-row: 1; min-width: 40px; }
.elev-axis-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.elev-axis-svg text { font-size: 12px; fill: var(--ink-muted); font-variant-numeric: tabular-nums; }
.elev-plot { position: relative; grid-row: 1; grid-column: 2; touch-action: pan-y; cursor: crosshair; border-radius: var(--radius-sm); }
.elev-plot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.elev-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.elev-grid { stroke: var(--border); stroke-width: 1; }
.elev-area { fill: var(--primary); fill-opacity: 0.12; stroke: none; }
.elev-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.elev-crosshair { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-muted); pointer-events: none; }
.elev-marker { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.elev-tooltip { position: absolute; top: 4px; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-panel); font-size: 13px; line-height: 18px; color: var(--ink-muted); white-space: nowrap; pointer-events: none; z-index: 1; }
.elev-tooltip strong { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.elev-crosshair[hidden], .elev-marker[hidden], .elev-tooltip[hidden] { display: none; }
.elev-strip { grid-row: 2; grid-column: 2; display: flex; height: 6px; margin-top: var(--space-2); border-radius: var(--radius-pill); overflow: hidden; }
.elev-xaxis { position: relative; grid-row: 3; grid-column: 2; height: 20px; margin-top: var(--space-1); }
.elev-legend { flex-wrap: wrap; gap: var(--space-3); }
.elev-table summary { cursor: pointer; }
.elev-table table { margin-top: var(--space-2); width: 100%; }

/* Share choice (route details): small panel under the "Delen" button; full-width sheet on phones. */
.lr-share { position: relative; }
.lr-share-backdrop { position: fixed; inset: 0; z-index: 40; }
.lr-share-menu { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 41; width: 300px; display: flex; flex-direction: column; padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.lr-share-item { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; min-height: 48px; padding: var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.lr-share-item:hover, .lr-share-item:focus-visible { background: var(--surface-selected); }
.lr-share-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lr-share-item .lr-icon { flex: none; margin-top: 2px; color: var(--primary); }
.lr-share-title { font: 600 15px/20px var(--font-sans); }
@media (max-width: 599px) {
  .lr-share-backdrop { background: rgba(0, 0, 0, 0.45); }
  .lr-share-menu { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; padding: var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}

/* Account (sign-in, identity, account link in the navigation). */
.account-page { max-width: 720px; }
.account-provider { justify-content: flex-start; width: 100%; max-width: 360px; }
.lr-provider-logo { flex: none; }
.account-identity { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.account-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--selected); color: var(--on-selected); font: 700 18px/1 var(--font-sans); }
.account-avatar-sm { width: 26px; height: 26px; font-size: 12px; }
.account-name { font: 600 17px/24px var(--font-sans); }
.account-name, .account-email, .account-link-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-link { min-width: 0; }
.account-link-compact { border-radius: 50%; }
.account-danger { color: var(--danger); }
.account-danger:hover { color: var(--danger); background: var(--unlit-soft); }
.account-danger-solid { background: var(--unlit-confirmed); color: #ffffff; }
.account-danger-solid:hover { filter: brightness(1.08); }
.lr-link-btn { padding: 0; border: 0; background: none; color: var(--primary); font: inherit; text-decoration: underline; cursor: pointer; }
.lr-link-btn:disabled { opacity: 0.6; cursor: default; }

/* Utilities. The Content-Security-Policy allows no style attributes (style-src-attr 'none'), so one-off styling is a class.
   They are !important because they replace inline styles, which won over every component rule. */
.lr-m-0 { margin: 0 !important; }
.lr-mt-xxs { margin-top: 2px !important; }
.lr-mt-2 { margin-top: var(--space-2) !important; }
.lr-mx-9 { margin-left: 9px !important; margin-right: 9px !important; }
.lr-pl-4 { padding-left: var(--space-4) !important; }
.lr-pl-18 { padding-left: 18px !important; }
.lr-gap-xxs { gap: 2px !important; }
.lr-gap-xs { gap: 6px !important; }
.lr-gap-2 { gap: var(--space-2) !important; }
.lr-gap-3 { gap: var(--space-3) !important; }
.lr-gap-4 { gap: var(--space-4) !important; }
.lr-wrap { flex-wrap: wrap !important; }
.lr-justify-between { justify-content: space-between !important; }
.lr-justify-start { justify-content: flex-start !important; }
.lr-items-start { align-items: flex-start !important; }
.lr-items-end { align-items: flex-end !important; }
.lr-grow-150 { flex: 1 !important; min-width: 150px !important; }
.lr-grow2-260 { flex: 2 !important; min-width: 260px !important; }
.lr-min-w-0 { min-width: 0 !important; }
.lr-min-h-240 { min-height: 240px !important; }
.lr-min-h-60vh { min-height: 60vh !important; }
.lr-max-w-480 { max-width: 480px !important; }
.lr-h-44 { height: 44px !important; }
.lr-contents { display: contents !important; }
.lr-inline-block { display: inline-block !important; }
.lr-scroll-x { overflow-x: auto !important; }
.lr-break-all { word-break: break-all !important; }
.lr-text-right { text-align: right !important; }
.lr-text-15 { font-size: 15px !important; }
.lr-tagline-sm { font-size: 10px !important; line-height: 16px !important; }
.lr-text-ink { color: var(--ink) !important; }
.lr-text-muted { color: var(--ink-muted) !important; }
.lr-text-primary { color: var(--primary) !important; }
.lr-text-warning { color: var(--warning-ink) !important; }
.lr-text-danger { color: var(--danger) !important; }
.lr-bg-lit { background: var(--lit) !important; }
.lr-bg-partial { background: var(--partial) !important; }
.lr-bg-unlit-confirmed { background: var(--unlit-confirmed) !important; }
.lr-bg-conflict { background: var(--conflict) !important; }
.lr-bg-lamp-provincial { background: var(--lamp-provincial) !important; }
.lr-bg-lamp-national { background: var(--lamp-national) !important; }
.lr-bg-lamp-osm { background: var(--lamp-osm) !important; }
.lr-btn-reset { background: none !important; border: 0 !important; color: inherit !important; padding: 0 !important; cursor: pointer !important; }
.lr-popup-section { margin-top: 8px; }
.lr-popup-muted { opacity: .75; }
.map-page-canvas { position: relative; flex: 1; min-height: calc(100dvh - 140px); }
.diag-map-canvas { height: 60vh !important; position: relative !important; }
.saved-routes-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)) !important; }
.offline-page { min-height: 100dvh; justify-content: center; align-items: center; text-align: center; max-width: 520px; }
.offline-icon { border-radius: 22px; }
html:not(.lr-offline) .offline-when-offline,
html.lr-offline .offline-when-online { display: none; }
/* Radzen renders these values as style attributes, which the Content-Security-Policy ignores: the same values as rules. */
.rz-dialog-confirm { width: 600px; }

/* Confirmation dialog (native <dialog>). */
.lr-dialog { width: min(460px, calc(100vw - 2 * var(--space-4))); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-panel); }
.lr-dialog[open] { display: flex; flex-direction: column; gap: var(--space-4); }
.lr-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.lr-dialog > h2 { margin: 0; }
.lr-dialog-body { font: 400 15px/22px var(--font-sans); color: var(--ink); }
.lr-dialog-body p { margin: 0 0 var(--space-2); }
.lr-dialog-body p:last-child { margin-bottom: 0; }
.lr-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.rz-dialog-mask { pointer-events: none; }

/* In-app manual: a start page with the contents (/handleiding) and a page per chapter (/handleiding/{chapter}). */
.manual-page { max-width: 1200px; }
.manual-home { max-width: 960px; }
.manual-lead { margin: 0; max-width: 72ch; color: var(--ink-muted); font: 400 16px/24px var(--font-sans); }
.manual-lead a, .manual-content a, .manual-breadcrumb a { color: var(--primary); }
.manual-search { display: flex; flex-direction: column; gap: var(--space-2); }
.manual-search input[type="search"]::-webkit-search-cancel-button { display: none; }

/* Start page: one card per chapter with its topics. */
.manual-chapters { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.manual-chapter-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.manual-chapter-link { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; font: 700 17px/24px var(--font-sans); }
.manual-chapter-link:hover .manual-chapter-title { color: var(--primary); }
.manual-chapter-number { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-selected); color: var(--primary); font: 700 13px/1 var(--font-sans); }
.manual-chapter-topics { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.manual-chapter-topics a { color: var(--ink-muted); font: 500 13px/20px var(--font-sans); text-decoration: none; }
.manual-chapter-topics a:hover { color: var(--primary); text-decoration: underline; }
@media (min-width: 720px) { .manual-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Search results (start page and chapter pages). */
.manual-results { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.manual-results a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; }
.manual-results a:hover { border-color: var(--primary); }
.manual-hit-title { font: 600 15px/20px var(--font-sans); }
.manual-hit-snippet { color: var(--ink-muted); font: 400 13px/19px var(--font-sans); }
.manual-results mark { background: var(--partial-soft); color: var(--on-partial-soft); border-radius: 2px; padding: 0 1px; }

/* Chapter page: search and chapter list beside the text; on phones above it, the list folded away. */
.manual-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.manual-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
.manual-side { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.manual-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.manual-toc ol ol { margin: 2px 0 var(--space-2); padding-left: var(--space-3); border-left: 1px solid var(--border); }
.manual-toc a { display: block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font: 600 14px/20px var(--font-sans); }
.manual-toc ol ol a { color: var(--ink-muted); font-weight: 500; }
.manual-toc a:hover { background: var(--surface-raised); color: var(--ink); }
.manual-toc a[aria-current="page"] { background: var(--surface-selected); color: var(--primary); }
.manual-toc-fold { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.manual-toc-fold > summary { padding: var(--space-3); cursor: pointer; font: 600 14px/20px var(--font-sans); }
.manual-toc-fold > .manual-toc { padding: 0 var(--space-2) var(--space-2); }
.manual-toc-wide { display: none; }
.manual-content { min-width: 0; display: flex; flex-direction: column; font: 400 15px/24px var(--font-sans); color: var(--ink); }
.manual-content > h1 { margin: 0 0 var(--space-3); }
.manual-section { margin-top: var(--space-5); scroll-margin-top: var(--space-5); }
.manual-section:focus { outline: none; }
.manual-section > h2 { margin: 0 0 var(--space-2); font: 700 19px/26px var(--font-sans); }
.manual-content p { margin: 0 0 var(--space-3); max-width: 72ch; }
.manual-content ul, .manual-content ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); max-width: 72ch; }
.manual-content li { margin-bottom: var(--space-1); }
.manual-content strong { font-weight: 700; }
.manual-content img { display: block; max-width: 100%; height: auto; margin: var(--space-2) 0 var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); }
.manual-content p > em:only-child { display: block; color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.manual-content table { width: 100%; max-width: 72ch; margin: 0 0 var(--space-3); border-collapse: collapse; font-size: 14px; line-height: 20px; }
.manual-content th, .manual-content td { padding: var(--space-2); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.manual-content th { color: var(--ink-muted); font-weight: 600; }
.manual-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.manual-pager a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-weight: 600; }
.manual-pager a:hover { border-color: var(--primary); }
.manual-pager .lr-caption { display: inline-flex; align-items: center; gap: var(--space-1); }
.manual-pager-next { grid-column: 2; text-align: right; align-items: flex-end; }
@media (min-width: 1024px) {
  .manual-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .manual-side { position: sticky; top: var(--space-5); max-height: calc(100dvh - 2 * var(--space-5)); overflow: auto; padding-right: var(--space-2); }
  .manual-toc-fold { display: none; }
  .manual-toc-wide { display: block; }
}