/* Mobile first, portrait, sunlight: black on white, big targets. */
:root {
  --flat: #1f5fd6;   /* < 4 %        */
  --g3: #e07b00;     /* 4–7 %, 3rd gear */
  --g2: #c8102e;     /* >= 7 %, 2nd gear */
  --other: #7a7a7a;  /* unselected routes */
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 17px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #000;
  background: #fff;
}
a { color: #0b4fb3; }

#inputs { padding: 8px; display: grid; gap: 6px; }
.pt { position: relative; display: flex; gap: 6px; align-items: center; }
.pt[hidden] { display: none; }
.pt input {
  flex: 1; min-width: 0; height: 46px; padding: 0 10px;
  font-size: 17px; border: 2px solid #444; border-radius: 8px; color: #000;
}
.pt input:focus { border-color: var(--flat); outline: none; }
.pt button, .card button {
  height: 46px; padding: 0 12px; font-size: 16px; font-weight: 600;
  border: 2px solid #444; border-radius: 8px; background: #f2f2f2; color: #000;
}
.dot {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 15px;
}
.dot.start { background: #1a7f37; }
.dot.via { background: #6e40c9; }
.dot.end { background: #c8102e; }

.suggest {
  position: absolute; top: 50px; left: 34px; right: 0; z-index: 1000;
  margin: 0; padding: 0; list-style: none;
  background: #fff; border: 2px solid #444; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.suggest:empty { display: none; }
.suggest li { padding: 10px 12px; border-bottom: 1px solid #ddd; cursor: pointer; }
.suggest li:last-child { border-bottom: 0; }
.suggest li small { display: block; color: #444; }
.suggest li.active, .suggest li:hover { background: #e8f0ff; }

#map { height: 42vh; min-height: 240px; }
.pin {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
/* Map / Satellite switch: always open, rows big enough for a thumb */
.leaflet-control-layers-expanded { padding: 4px 8px; font-size: 16px; }
.leaflet-control-layers-base label > span { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.leaflet-control-layers-base input { width: 22px; height: 22px; margin: 0; }
.map-menu button { display: block; width: 100%; margin: 4px 0; height: 42px; font-size: 16px; }

#status { margin: 6px 10px; min-height: 1.2em; font-weight: 600; }
#status.error { color: var(--g2); }

#verdict { margin: 0 8px 8px; padding: 10px 12px; border-radius: 10px; background: #f4f4f4; border-left: 8px solid #555; }
#verdict.flat { border-color: #1a7f37; } #verdict.some { border-color: #b58900; }
#verdict.hilly { border-color: var(--g3); } #verdict.very { border-color: var(--g2); }
#verdict .class { font-size: 22px; font-weight: 800; }
#verdict .facts { font-size: 18px; font-weight: 600; }
#verdict .hint { color: #333; }
#verdict .alt { margin-top: 8px; font-weight: 700; }
#verdict button.alt { display: block; width: 100%; min-height: 46px; text-align: left; padding: 8px 10px;
  font-size: 17px; border: 2px solid #1a7f37; border-radius: 8px; background: #fff; color: #000; }

#more { margin: 0 8px 10px; }
#more summary { padding: 12px 0; font-weight: 700; cursor: pointer; }
#more-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

#chart { padding: 0 8px; }
#chart svg { display: block; width: 100%; height: 150px; }
#chart .legend { font-size: 14px; display: flex; gap: 12px; flex-wrap: wrap; margin: 2px 0 6px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 4px; }
.sw.flat { background: var(--flat); } .sw.g3 { background: var(--g3); } .sw.g2 { background: var(--g2); }

#cards { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; gap: 8px; }
.card {
  border: 2px solid #bbb; border-radius: 10px; padding: 10px 12px; cursor: pointer;
}
.card.selected { border: 3px solid var(--flat); background: #f3f7ff; }
.card .top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.card .time { font-size: 22px; font-weight: 800; }
.card .dist { font-size: 18px; }
.tag {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 10px; background: #000; color: #fff;
}
.tag.flattest { background: #1a7f37; }
.gears { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 2px; font-weight: 600; }
.gears .g2 { color: var(--g2); } .gears .g3 { color: var(--g3); }
.meta { color: #333; font-size: 15px; }
.card .actions { display: flex; gap: 8px; margin-top: 8px; }
.card .actions > * { flex: 1; display: grid; place-items: center; text-align: center; }
.card a.gmaps {
  height: 46px; font-size: 16px; font-weight: 600; text-decoration: none;
  border: 2px solid #1a73e8; border-radius: 8px; background: #fff; color: #0b4fb3;
}
.card:not(.selected) .actions { display: none; }

footer { padding: 10px; font-size: 13px; color: #333; border-top: 1px solid #ddd; }

@media (min-width: 900px) {
  /* desktop: inputs + cards left, map + chart right */
  body { display: grid; grid-template-columns: 420px 1fr; grid-template-rows: auto auto auto 1fr auto auto; height: 100vh; }
  #inputs { grid-column: 1; grid-row: 1; }
  #status { grid-column: 1; grid-row: 2; }
  #verdict { grid-column: 1; grid-row: 3; }
  #cards { grid-column: 1; grid-row: 4; overflow: auto; align-content: start; }
  #more { grid-column: 1; grid-row: 5; }
  #map { grid-column: 2; grid-row: 1 / span 4; height: auto; }
  #chart { grid-column: 2; grid-row: 5; }
  footer { grid-column: 1 / span 2; grid-row: 6; }
}