/* Only the distance page: shared branding and navigation stay in style.css. */
.distance-intro {background:var(--wash);padding-block:40px;}
.distance-layout {display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;padding-top:28px;padding-bottom:48px;}
.distance-layout h2 {font-size:26px;line-height:1.3;margin-bottom:12px;}
.distance-help {color:var(--muted);margin-bottom:16px;}
#distance-form {padding:16px;}
#distance-stops {display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;padding:4px 3px 12px;}
.distance-stop {flex:0 0 280px;margin:0;padding:12px;border:1px solid var(--line);min-width:0;}
.distance-stop legend {font-size:12px;letter-spacing:.03em;font-weight:700;padding:0 6px;margin-bottom:6px;color:var(--accent);}
.distance-fields {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;}
.distance-field {min-width:0;}
.distance-field label {display:block;font-size:12px;font-weight:700;margin-bottom:4px;}
.distance-field select {width:100%;min-height:48px;margin-top:0;background:#fff;border:1px solid #9daeba;border-radius:0;padding:8px 20px 8px 8px;color:var(--ink);font-size:16px;}
.distance-field select:disabled {background:var(--wash);color:var(--muted);}
.distance-error {display:none;color:#9f3026;font-size:13px;margin-top:6px;}
.distance-field select:user-invalid,.distance-field select[aria-invalid="true"] {border-color:#9f3026;}
.distance-field select:user-invalid + .distance-error,.distance-field select[aria-invalid="true"] + .distance-error {display:block;}
.distance-stop-actions {display:flex;gap:6px;justify-content:flex-end;margin-top:8px;}
.distance-stop-actions button {width:48px;height:48px;border:1px solid var(--line);background:white;font-size:20px;line-height:1;}
.distance-stop-actions button:hover:enabled {border-color:var(--accent);background:var(--wash);}
.distance-stop-actions button:disabled {opacity:.3;cursor:default;}
.distance-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;}
.distance-actions .button {min-height:48px;}
.distance-actions button:disabled {opacity:.55;cursor:wait;}
.distance-add {background:#fff;border:1px solid var(--accent);color:var(--accent);}
#distance-status {margin-top:18px;color:var(--muted);min-height:28px;}
.distance-result {background:var(--ink);color:white;padding:24px;max-width:720px;}
.distance-result:focus {outline:2px solid var(--signal);outline-offset:5px;}
.distance-result .kicker {color:var(--signal);}
.distance-total {display:block;font-size:clamp(40px,4vw,56px);font-weight:700;line-height:1.2;margin:12px 0;overflow-wrap:anywhere;}
#distance-count {color:#b7d3e0;margin-bottom:24px;}
.distance-legs {list-style:none;padding:0;margin:0 0 24px;}
.distance-legs li {display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid #304860;font-size:14px;}
.distance-legs li span {overflow-wrap:anywhere;}
.distance-legs strong {white-space:nowrap;}
.distance-maps {display:flex;flex-direction:column;gap:12px;}
.distance-map-link {background:var(--signal);color:var(--ink);text-align:center;}
.distance-placeholder {border:1px solid var(--line);padding:32px;color:var(--muted);}
.distance-result:not([hidden]) ~ .distance-placeholder {display:none;}
.distance-side {min-width:0;}
@media(min-width:481px) and (max-width:850px){.distance-stop{flex-basis:220px;}}
@media(max-width:480px){.distance-intro{padding-block:28px;}.distance-stop{flex-basis:260px;}.distance-layout{padding-top:24px;}.distance-result{padding:20px;}.distance-actions{gap:8px;}.distance-actions .button{flex:1;padding-inline:10px;}.distance-legs li{gap:8px;}}