:root {
    --bg: #ffffff;
    --fg: #1d2733;
    --muted: #5b6875;
    --line: #d9e0e6;
    --accent: #0b6fb8;
    --error: #b3261e;
    --btn: #eef3f7;
    --btn-hover: #dde7ef;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1b232b;
        --fg: #e6ecf1;
        --muted: #9fb0bf;
        --line: #34414d;
        --accent: #5fb0ee;
        --error: #ff8a80;
        --btn: #26313b;
        --btn-hover: #31404c;
    }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--fg);
    background: var(--bg);
}
#map { position: absolute; inset: 0; }

#panel {
    position: absolute;
    z-index: 1000;
    top: 12px;
    left: 56px;
    width: 300px;
    max-height: calc(100% - 24px);
    overflow-y: auto;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
h1 { margin: 0 0 6px; font-size: 18px; }
.hint { margin: 0 0 10px; color: var(--muted); font-size: 13px; }

.stats { display: flex; gap: 18px; margin-bottom: 8px; }
.stats div { display: flex; flex-direction: column; }
.label { font-size: 12px; color: var(--muted); }
.value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }

.speed { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.speed input {
    width: 64px; margin: 0 4px; padding: 3px 6px;
    font: inherit; color: var(--fg); background: var(--btn);
    border: 1px solid var(--line); border-radius: 6px;
}

#status { min-height: 1.2em; font-size: 13px; margin-bottom: 8px; }
#status.error { color: var(--error); }

.buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
button {
    font: inherit; font-size: 13px; padding: 5px 10px; cursor: pointer;
    color: var(--fg); background: var(--btn);
    border: 1px solid var(--line); border-radius: 6px;
}
button:hover:not(:disabled) { background: var(--btn-hover); }
button:disabled { opacity: .45; cursor: default; }

details { font-size: 13px; color: var(--muted); }
summary { cursor: pointer; color: var(--accent); }
details p { margin: 6px 0 0; }
a { color: var(--accent); }
code { font-size: 12px; }

.wp-icon {
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 3px solid var(--accent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.wp-icon.start { border-color: #2e9d3a; }
.wp-icon.end { border-color: #d0342c; }

/* Phones: the panel becomes a sheet below the map so neither covers the other. */
@media (max-width: 600px) {
    body { display: flex; flex-direction: column; }
    #map { position: relative; inset: auto; flex: 1; }
    #panel {
        position: static; width: auto;
        max-height: 45%;
        border-width: 1px 0 0;
        border-radius: 0;
        padding: 10px 16px 12px;
    }
    .hint, details { display: none; }
    .value { font-size: 19px; }
}