body {
  background: #14161a;
  color: #d8dce2;
  font: 14px/1.4 system-ui, sans-serif;
  margin: 0 auto;
  max-width: 900px;
  padding: 12px 16px 24px;
}

h1 {
  font-size: 20px;
  margin: 4px 0 12px;
  color: #f0a63c;
}

a { color: #7fb4ff; }

form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px 12px;
  margin-bottom: 12px;
}

label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #9aa3ad;
  gap: 2px;
}

label.check {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #d8dce2;
}

input, select, button {
  font: inherit;
  background: #1e2228;
  color: #e6e9ed;
  border: 1px solid #3a414b;
  border-radius: 4px;
  padding: 5px 7px;
  min-width: 0;
}

input[type=checkbox] { padding: 0; }

.buttons {
  display: flex;
  gap: 8px;
  grid-column: 1 / -1;
}

button {
  cursor: pointer;
  padding: 7px 14px;
}

button#go {
  background: #f0a63c;
  color: #14161a;
  border-color: #f0a63c;
  font-weight: 600;
}

button:disabled {
  opacity: 0.4;
  cursor: default;
}

#status {
  color: #9aa3ad;
  min-height: 1.4em;
}

#notes {
  margin: 4px 0 8px;
  padding-left: 18px;
  color: #e0b25a;
  font-size: 13px;
}

#sortbar {
  display: flex;
  align-items: end;
  gap: 12px;
  margin: 8px 0;
}

#sortbar[hidden] { display: none; }

#count {
  color: #9aa3ad;
  font-size: 12px;
}

.route {
  border: 1px solid #2c323a;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: #1a1d22;
}

.route .head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 4px;
}

.route .name {
  font-weight: 600;
  color: #f0a63c;
}

.route .big {
  font-weight: 600;
  color: #7ddc8a;
}

.leg {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.leg b {
  display: inline-block;
  width: 34px;
  color: #9aa3ad;
  font-weight: normal;
}

.dim { color: #8a929c; }

.old { color: #e0b25a; }

footer {
  margin-top: 20px;
  font-size: 12px;
  color: #8a929c;
}