.rt { display: grid; grid-template-columns: minmax(0, 1fr) 420px; height: calc(100vh - 57px); height: calc(100dvh - 57px); }
#map { height: 100%; min-height: 300px; z-index: 0; }
.panel { overflow-y: auto; padding: 14px 16px 40px; border-left: 1px solid var(--line); background: var(--bg); }
/* phones: the map stays at the top and the panel slides over it like a sheet — opaque, above the map, so an input
   is never drawn half on top of the map tiles */
@media (max-width: 800px) {
  .rt { display: block; height: auto; }
  #map { position: sticky; top: var(--header-h, 57px); height: 40vh; min-height: 220px; z-index: 0; transition: height .2s; }
  body.typing #map { height: 22vh; min-height: 140px; }
  .panel { position: relative; z-index: 1; border-left: 0; background: var(--bg); border-radius: 16px 16px 0 0; margin-top: -14px;
    box-shadow: 0 -6px 18px #0004; padding-top: 18px; min-height: 65vh; overflow: visible; }
  .panel::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: -6px auto 12px; }
}
.stop { display: flex; gap: 8px; align-items: flex-start; } .mv { display: flex; gap: 4px; flex: none; }
.mv .btn { width: 34px; padding: 0; } .mv .btn:disabled { opacity: .3; cursor: default; }
.btn.sm { height: 34px; font-size: 14px; }
.step { margin-bottom: 18px; } .step h2 { font-size: 17px; margin: 6px 0 10px; display: flex; align-items: center; gap: 8px; }
.n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .grow { flex: 1; min-width: 0; }
.panel input, .panel select { height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: var(--surface); font: inherit; width: 100%; box-sizing: border-box; }
.row.small select { width: auto; height: 34px; } .small { font-size: 13px; } .muted { color: var(--muted); }
.btn { height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); padding: 0 12px; cursor: pointer; font: inherit; }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; } .btn.big { width: 100%; height: 48px; margin-top: 6px; }
.btn.sm { height: 32px; font-size: 13px; }
.f { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; } .f select { margin-top: 4px; }
.sugg-wrap { position: relative; } .sugg { position: absolute; left: 0; right: 0; top: 42px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; z-index: 10; box-shadow: 0 6px 20px #0002; max-height: 300px; overflow: auto; }
.sugg div { padding: 9px 12px; cursor: pointer; } .sugg div:hover, .sugg div.on { background: var(--accent-soft); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 5px 11px; font-size: 13px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.poi { display: flex; gap: 10px; align-items: flex-start; padding: 8px 4px; border-top: 1px solid var(--line); cursor: pointer; }
.poi input { width: 20px; height: 20px; margin-top: 2px; flex: none; } .poi b { font-weight: 600; } .poi .meta { font-size: 12.5px; color: var(--muted); }
.poi.on { background: var(--accent-soft); }
.stars { color: #c98a00; letter-spacing: -1px; }
.res-sum { font-size: 22px; font-weight: 700; margin: 4px 0; } .legs { list-style: none; padding: 0; margin: 10px 0; counter-reset: s; }
.legs li { padding: 8px 0 8px 34px; border-top: 1px solid var(--line); position: relative; }
.legs li .no { position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.legs li .leg { font-size: 12.5px; color: var(--muted); }
.note { background: #fff7e0; border: 1px solid #f0dc9a; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.num-icon { background: var(--accent); color: var(--accent-text); border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px #0006; display: grid !important; place-items: center; font: 700 12px system-ui; }
.flag-icon { font-size: 22px; line-height: 1; text-shadow: 0 1px 3px #fff; }

.note { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--text); }
.panel input, .panel select, .btn { color: var(--text); }
.num-icon { border-color: var(--surface); }