:root {
    --ink: #19313f;
    --ink-soft: #536873;
    --paper: #f5f6f3;
    --panel: #ffffff;
    --line: #dce3e2;
    --accent: #0f766e;
    --accent-dark: #095b56;
    --accent-pale: #e5f3f0;
    --near: #e49a23;
    --shadow: 0 10px 32px rgb(24 49 63 / 10%);
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
    background: var(--paper);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.5;
}

button, input { font: inherit; }
a { color: inherit; }

.app-shell {
    display: grid;
    grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
    grid-template-areas: "panel map";
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
}

.info-panel {
    grid-area: panel;
    z-index: 3;
    overflow-y: auto;
    background: var(--panel);
    border-right: 1px solid var(--line);
    box-shadow: 7px 0 30px rgb(24 49 63 / 7%);
    padding: 32px 30px 28px;
}

.map-region { grid-area: map; position: relative; min-width: 0; }
#map { width: 100%; height: 100%; background: #dfe8e5; }

.hero { padding-bottom: 20px; }
.eyebrow, .section-kicker {
    margin: 0 0 7px;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    max-width: 360px;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.intro { margin: 13px 0 0; color: var(--ink-soft); max-width: 350px; }

.origin-control { margin: 0 0 18px; }
.origin-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}
.origin-option {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.origin-option:hover { border-color: #9dbbb5; background: #f7fbfa; }
.origin-option:focus-visible { outline: 3px solid rgb(15 118 110 / 22%); outline-offset: 2px; }
.origin-option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.origin-option strong { overflow: hidden; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.origin-option small { color: var(--ink-soft); font-size: 0.61rem; }
.origin-option[aria-pressed="true"] small { color: #d6eeea; }

.time-control {
    margin: 0 -8px;
    padding: 20px 18px 16px;
    border: 1px solid #cfe0dc;
    border-radius: 16px;
    background: linear-gradient(145deg, #f7fbfa, #edf6f4);
}

.control-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
#time-output { display: block; font-size: 1.65rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; }
.reach-pill {
    flex: none;
    border-radius: 100px;
    background: var(--accent);
    color: white;
    padding: 5px 10px;
    font-size: 0.72rem;
    font-weight: 750;
}

#time-slider {
    --progress: 40%;
    display: block;
    width: 100%;
    height: 26px;
    margin: 18px 0 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

#time-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 10px;
    background: linear-gradient(to right, var(--accent) var(--progress), #cad7d4 var(--progress));
}

#time-slider::-moz-range-track { height: 6px; border-radius: 10px; background: #cad7d4; }
#time-slider::-moz-range-progress { height: 6px; border-radius: 10px; background: var(--accent); }
#time-slider::-webkit-slider-thumb {
    width: 23px;
    height: 23px;
    margin-top: -8.5px;
    appearance: none;
    border: 3px solid white;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 1px 7px rgb(11 91 86 / 40%);
}
#time-slider::-moz-range-thumb {
    width: 18px; height: 18px; border: 3px solid white; border-radius: 50%;
    background: var(--accent); box-shadow: 0 1px 7px rgb(11 91 86 / 40%);
}
#time-slider:focus-visible { outline: 3px solid rgb(15 118 110 / 25%); outline-offset: 4px; border-radius: 8px; }
.range-labels { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 0.7rem; }

.data-status {
    margin: 13px 0;
    min-height: 22px;
    color: var(--ink-soft);
    font-size: 0.76rem;
}
.data-status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #9ba8ae; }
.data-status.is-ready::before { background: var(--accent); }
.data-status.is-warning { color: #8b5a12; }
.data-status.is-warning::before { background: var(--near); }

.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.metric-card {
    min-height: 104px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
}
.metric-primary { background: var(--ink); border-color: var(--ink); color: white; }
.metric-label { display: block; min-height: 36px; color: var(--ink-soft); font-size: 0.73rem; font-weight: 650; line-height: 1.25; }
.metric-primary .metric-label, .metric-primary small { color: #c9d5d9; }
.metric-card strong { display: block; margin-top: 5px; font-size: 1.55rem; line-height: 1; letter-spacing: -0.025em; }
.metric-card .metric-name { font-size: 1.1rem; line-height: 1.15; }
.metric-card small { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 0.66rem; }

.panel-section { margin-top: 27px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-heading h2, .method-note h2 { margin: 0; font-size: 0.98rem; letter-spacing: -0.01em; }
.section-heading span { color: var(--ink-soft); font-size: 0.7rem; }
.empty-state { margin: 10px 0; color: var(--ink-soft); font-size: 0.8rem; }

.branch-row + .branch-row { margin-top: 11px; }
.branch-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; font-size: 0.72rem; }
.branch-meta span { max-width: 78%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.branch-meta strong { font-variant-numeric: tabular-nums; }
.branch-track { height: 6px; overflow: hidden; border-radius: 10px; background: #e9edec; }
.branch-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-dark), #35a295); }

.city-list { border-top: 1px solid var(--line); }
.city-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 2px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.city-row:hover, .city-row:focus-visible { background: #f5f8f7; outline: none; }
.city-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #a0aaae; }
.city-row.is-reached .city-status-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale); }
.city-row.is-near .city-status-dot { background: var(--near); box-shadow: 0 0 0 3px #fff0d2; }
.city-main, .city-route { min-width: 0; }
.city-main strong, .city-route strong { display: block; font-size: 0.82rem; line-height: 1.3; }
.city-main small, .city-route small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 0.67rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.city-route { text-align: right; font-variant-numeric: tabular-nums; }
.city-row.is-muted .city-main, .city-row.is-muted .city-route { opacity: 0.65; }

.method-note {
    margin: 30px 0 0;
    padding: 18px;
    border-left: 3px solid var(--accent);
    background: #f3f7f6;
}
.method-note p { margin: 9px 0 0; color: var(--ink-soft); font-size: 0.76rem; }
.sources { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 25px; color: var(--ink-soft); font-size: 0.68rem; }
.sources strong { width: 100%; color: var(--ink); }
.sources a:hover { color: var(--accent); }

.map-legend {
    position: absolute;
    z-index: 500;
    left: 18px;
    bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 15px;
    padding: 10px 13px;
    border: 1px solid rgb(255 255 255 / 75%);
    border-radius: 9px;
    background: rgb(255 255 255 / 92%);
    box-shadow: var(--shadow);
    color: var(--ink-soft);
    font-size: 0.68rem;
    backdrop-filter: blur(8px);
}
.map-legend > span { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.origin-dot { background: #e3553f; box-shadow: 0 0 0 2px rgb(227 85 63 / 20%); }
.near-dot { background: var(--near); }

.map-loading {
    position: absolute;
    z-index: 500;
    top: 18px;
    left: 18px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgb(25 49 63 / 90%);
    color: #fff;
    font-size: 0.72rem;
    box-shadow: var(--shadow);
    transition: opacity 160ms ease;
}
.map-loading.is-hidden { opacity: 0; pointer-events: none; }
.map-loading.is-error { background: rgb(139 74 26 / 92%); }

.origin-marker-wrap { overflow: visible !important; }
.origin-marker { position: absolute; inset: 2px; border: 3px solid white; border-radius: 50%; background: #e3553f; box-shadow: 0 2px 6px rgb(77 31 24 / 40%); }
.origin-pulse { position: absolute; inset: -6px; border: 2px solid rgb(227 85 63 / 52%); border-radius: 50%; animation: origin-pulse 2.4s ease-out infinite; }
.origin-label {
    position: absolute;
    left: 23px;
    top: -4px;
    width: max-content;
    padding: 3px 7px;
    border-radius: 5px;
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 2px 7px rgb(25 49 63 / 22%);
}
@keyframes origin-pulse { from { transform: scale(0.65); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }

.leaflet-tooltip.city-label {
    padding: 2px 5px;
    border: 0;
    border-radius: 4px;
    background: rgb(255 255 255 / 88%);
    box-shadow: 0 1px 5px rgb(25 49 63 / 15%);
    color: var(--ink);
    font-size: 10px;
    font-weight: 750;
    transition: opacity 150ms ease;
}
.leaflet-tooltip.city-label::before { display: none; }
.leaflet-tooltip.city-label.is-muted { opacity: 0.48; font-weight: 600; }
.leaflet-tooltip.city-label.is-reached { color: var(--accent-dark); opacity: 1; }
.leaflet-tooltip.city-label.is-near { color: #8d5808; background: #fff7e7; opacity: 1; }
.city-popup { display: grid; gap: 2px; min-width: 155px; color: var(--ink); }
.city-popup strong { font-size: 0.95rem; }
.city-popup span { color: var(--ink-soft); font-size: 0.75rem; }
.leaflet-control-attribution { font-size: 9px; }

noscript { display: block; padding: 20px; background: #fff3cd; }

@media (max-width: 820px) {
    .app-shell {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    .map-region { order: 1; height: min(58vh, 490px); min-height: 390px; }
    .info-panel { order: 2; overflow: visible; padding: 26px 20px 30px; border: 0; box-shadow: none; }
    .hero { padding-bottom: 20px; }
    h1 { font-size: 2rem; }
    .map-legend { left: 10px; bottom: 22px; }
    .map-loading { left: 10px; top: 10px; }
}

@media (max-width: 430px) {
    .map-region { height: 48vh; min-height: 330px; }
    .info-panel { padding-inline: 15px; }
    .time-control { margin-inline: 0; }
    .control-heading { align-items: center; }
    #time-output { font-size: 1.45rem; }
    .reach-pill { max-width: 105px; text-align: center; }
    .map-legend { right: 10px; gap: 7px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}