:root {
  --bg: #f4f5f7; --panel: #ffffff; --ink: #1c2330; --muted: #5d6675; --line: #d5d9e0;
  --accent: #1f6fd0; --accent-ink: #ffffff; --bad: #b3261e; --bad-bg: #fdecea;
  --warn-bg: #fff4d6; --warn-ink: #6b4a00; --map-bg: #eef1f5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c; --panel: #1d2128; --ink: #e6e9ee; --muted: #9aa3b2; --line: #343a45;
    --accent: #5a9cf0; --accent-ink: #0c1320; --bad: #ff8a80; --bad-bg: #3a1d1b;
    --warn-bg: #3b3115; --warn-ink: #ffd97a; --map-bg: #232830;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}
header { padding: 10px 16px 6px; background: var(--panel); border-bottom: 1px solid var(--line); }
h1 { font-size: 18px; margin: 0 0 8px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
     margin: 16px 0 6px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
#status { margin: 8px 0 2px; color: var(--muted); }
#error, #warning { margin: 6px 0; padding: 8px 10px; border-radius: 6px; white-space: pre-wrap; }
#error { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad); }
#warning { background: var(--warn-bg); color: var(--warn-ink); }

button, select, input[type=text] {
  font: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px;
}
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }

main { flex: 1; display: grid; grid-template-columns: minmax(340px, 470px) 1fr; gap: 12px;
       padding: 12px 16px; min-height: 0; }
#inputs, #outputs { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
                    min-width: 0; }
#inputs { display: flex; flex-direction: column; }
.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0;
               background: none; padding: 9px 10px; color: var(--muted); }
.tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tab { padding: 4px 14px 14px; overflow: auto; }
.hint { color: var(--muted); margin: 10px 0; }

.fields { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(110px, 170px); gap: 6px 10px;
          align-items: center; }
.fields label { cursor: help; }
.fields input[type=text], .fields select { width: 100%; }
.fields .check { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; cursor: help; }

table.grid { border-collapse: collapse; width: 100%; margin-bottom: 8px; }
table.grid th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 2px 3px; }
table.grid td { padding: 2px 3px; }
table.grid td:first-child { color: var(--muted); width: 1.6em; }
table.grid input[type=text] { width: 100%; min-width: 0; padding: 4px 6px; }
table.grid .ident { width: 4.6em; }
table.grid .move { white-space: nowrap; }
table.grid .move button { padding: 2px 6px; }

#summary { margin: 10px 0 0; white-space: pre-wrap; font: 12.5px/1.45 ui-monospace, Consolas, monospace; }

/* The form is long (20 waypoint rows); keep the map in view while it scrolls. */
#outputs { display: flex; flex-direction: column; min-height: 520px; position: sticky; top: 12px;
           align-self: start; height: calc(100vh - 24px); }
.toolbar, .downloads { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 12px; }
.toolbar { border-bottom: 1px solid var(--line); }
.downloads { border-top: 1px solid var(--line); }
.spacer { flex: 1; }
#view { flex: 1; position: relative; min-height: 360px; }
#map { position: absolute; inset: 0; background: var(--map-bg); }
#qr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 10px; padding: 12px; background: #ffffff; color: #1c2330; }
#qr[hidden] { display: none; }
#qr canvas { max-width: 100%; max-height: calc(100% - 60px); image-rendering: pixelated; }
#qr-note { margin: 0; text-align: center; max-width: 60ch; }

.leaflet-container { font: inherit; }
.wp-label { background: rgba(255,255,255,.85); border: 0; box-shadow: none; padding: 0 3px;
            font-size: 11px; font-weight: 600; color: #a01414; }
.wp-label::before { display: none; }
.wp-label.boundary { color: #5b1f96; font-weight: 500; }
.wp-label.transit { color: #333; }

footer { padding: 8px 16px 14px; color: var(--muted); font-size: 12.5px; }

@media (max-width: 860px) {
  main { grid-template-columns: 1fr; padding: 12px; }
  #outputs { min-height: 0; position: static; height: auto; }
  #view { flex: none; height: 60vh; }
}