:root { --route-overlay-halo: #11100d; --route-overlay-label: #fff; }
:root[data-theme="light"] { --route-overlay-halo: #11100d; --route-overlay-label: #fff; }
.route-page { max-width: 1320px; margin: 0 auto; padding: 1.4rem 1.25rem 4rem; }
.route-intro { max-width: 54rem; margin-bottom: 1.4rem; }
.route-intro h2, .route-map__head h2 { margin: 0.2rem 0 0; color: var(--fg-strong); font-family: var(--font-title); line-height: 1.25; }
.route-intro p:last-child { margin: 0.55rem 0 0; }
.route-controls { display: grid; grid-template-columns: minmax(12rem, .8fr) minmax(12rem, 1fr) auto minmax(12rem, 1fr); align-items: end; gap: .75rem; padding: 1rem; border-block: 1px solid var(--line); background-color: var(--bg-elev); background-image: var(--hazard); background-size: 100% 4px; background-repeat: no-repeat; }
.route-controls label { display: grid; gap: .3rem; }
.route-controls label > span { color: var(--muted); font-size: .75rem; letter-spacing: .12em; }
.route-controls select { width: 100%; min-height: 2.75rem; padding: .5rem 2.2rem .5rem .65rem; border: 1px solid var(--line-bright); border-radius: 0; background-color: var(--bg-sunk); color: var(--fg-strong); font: inherit; }
.route-controls__arrow { align-self: end; padding-bottom: .65rem; color: var(--accent); font-family: var(--mono); font-weight: 600; }
.route-status { padding: 2rem; text-align: center; color: var(--muted); }
.route-status.is-error { color: var(--c-heavy); }
.route-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(17rem, .75fr); gap: 1.2rem; margin-top: 1.2rem; align-items: start; }
.route-map, .route-detail { border: 1px solid var(--line); background-color: var(--bg-elev); box-shadow: var(--shadow); }
.route-map__head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.route-map__head .eyebrow { margin: 0; }
.route-map__head a { white-space: nowrap; font-size: .82rem; }
.route-map__viewport { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1; background-color: var(--bg-sunk); isolation: isolate; }
#route-svg { display: block; width: 100%; height: 100%; background-color: var(--bg-sunk); cursor: default; user-select: none; }
#route-svg:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.route-map__viewport.is-zoomed #route-svg { cursor: grab; touch-action: none; }
.route-map__viewport.is-panning #route-svg { cursor: grabbing; }
.route-map__tools { position: absolute; z-index: 3; top: .65rem; right: .65rem; display: flex; align-items: stretch; border: 1px solid var(--line-bright); background-color: var(--bg-elev); box-shadow: var(--shadow); }
.route-map__tools button, .route-map__tools output { display: grid; min-width: 2.45rem; min-height: 2.35rem; place-items: center; padding: .3rem .55rem; border: 0; border-right: 1px solid var(--line); background-color: transparent; color: var(--fg-strong); font: 600 .8rem var(--mono); }
.route-map__tools button { cursor: pointer; }
.route-map__tools button:last-child { border-right: 0; }
.route-map__tools button:hover:not(:disabled) { background-color: var(--accent-dim); color: var(--fg-strong); }
.route-map__tools button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.route-map__tools button:disabled { cursor: not-allowed; color: var(--muted); opacity: .48; }
.route-map__tools output { min-width: 4rem; color: var(--accent); }
.route-map__north { position: absolute; z-index: 2; top: .8rem; left: .9rem; display: grid; justify-items: center; color: var(--route-overlay-label); font: 600 .8rem var(--mono); filter: drop-shadow(0 1px 2px var(--route-overlay-halo)); pointer-events: none; }
.route-map__north span { font-size: 1.8rem; line-height: .85; }
.route-map__scale { position: absolute; z-index: 2; bottom: 1rem; left: 1rem; min-width: 3rem; max-width: 32%; height: 1.15rem; border: solid var(--route-overlay-label); border-width: 0 3px 3px; filter: drop-shadow(0 1px 2px var(--route-overlay-halo)); pointer-events: none; }
.route-map__scale span { position: absolute; left: 50%; bottom: .25rem; transform: translateX(-50%); white-space: nowrap; color: var(--route-overlay-label); font: 600 .72rem var(--mono); text-shadow: 0 1px 3px var(--route-overlay-halo); }
.route-map__field { fill: var(--bg-sunk); }
.route-basemap { opacity: .8; filter: brightness(.72) contrast(1.14) saturate(.72); }
:root[data-theme="light"] .route-basemap { opacity: .96; filter: brightness(.94) contrast(1.06) saturate(.78); }
.route-active { fill: none; stroke: var(--accent); stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.route-halo-color { flood-color: var(--route-overlay-halo); flood-opacity: .92; }
.route-point circle { stroke: var(--route-overlay-halo); stroke-width: 9; }
.route-point--from circle { fill: var(--c-scout); }
.route-point--to circle { fill: var(--c-heavy); }
.route-point text { fill: var(--route-overlay-label); stroke: var(--route-overlay-halo); stroke-width: 9; paint-order: stroke fill; font: 600 32px var(--font); }
.route-map__caption { margin: 0; padding: .7rem 1rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .78rem; }
.route-detail { padding: 1rem; }
.route-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background-color: var(--line); border: 1px solid var(--line); }
.route-summary > div { display: grid; gap: .2rem; padding: .7rem; background-color: var(--panel); }
.route-summary span { color: var(--muted); font-size: .7rem; }
.route-summary strong { color: var(--fg-strong); font: 600 1.15rem var(--mono); }
#route-risk[data-risk="low"] { color: var(--c-scout); }
#route-risk[data-risk="medium"] { color: var(--accent); }
#route-risk[data-risk="high"] { color: var(--c-heavy); }
.route-warning { margin-top: .8rem; padding: .6rem .75rem; border-left: 4px solid var(--line-bright); background-color: var(--bg-sunk); font-size: .84rem; }
.route-warning--low { border-color: var(--c-scout); }
.route-warning--medium { border-color: var(--accent); }
.route-warning--high { border-color: var(--c-heavy); }
.route-detail h3 { margin: 1.5rem 0 .65rem; color: var(--fg-strong); font-family: var(--font-title); font-size: .9rem; letter-spacing: .08em; }
.route-surfaces { margin: 0; }
.route-surfaces > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .65rem; align-items: center; padding: .42rem 0; border-bottom: 1px solid var(--line-soft); }
.route-surfaces dt { color: var(--muted); font-size: .8rem; }
.route-surfaces dd { display: grid; grid-template-columns: 1fr 3.8rem; gap: .55rem; align-items: center; margin: 0; }
.route-surfaces meter { width: 100%; accent-color: var(--accent); }
.route-surfaces dd span { text-align: right; color: var(--fg); font: .8rem var(--mono); }
.route-notes { margin-top: 1.3rem; padding-top: .1rem; border-top: 4px solid var(--accent-dim); }
.route-notes h3 { margin-top: .8rem; }
.route-notes ul { margin: 0; padding-left: 1.25rem; }
.route-notes li, .route-notes p { color: var(--muted); font-size: .78rem; line-height: 1.75; }
@media (max-width: 860px) { .route-controls { grid-template-columns: 1fr 1fr; } .route-controls__arrow { display: none; } .route-layout { grid-template-columns: 1fr; } .route-detail { box-shadow: none; } }
@media (max-width: 520px) { .route-page { padding-inline: .75rem; } .route-controls { grid-template-columns: 1fr; } .route-map__head { align-items: start; flex-direction: column; } .route-map__tools { top: .4rem; right: .4rem; } .route-map__tools button, .route-map__tools output { min-width: 2.2rem; min-height: 2.15rem; padding-inline: .4rem; } .route-map__tools output { min-width: 3.5rem; } .route-map__north { top: .55rem; left: .6rem; } .route-map__scale { bottom: .7rem; left: .7rem; } .route-summary { grid-template-columns: 1fr; } .route-surfaces > div { grid-template-columns: 6.3rem 1fr; } }