:root {
  --navy: #0b1f44;
  --yellow: #e8b923;
  --bg: #f3f4f7;
  --header-h: 48px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  font-family: sans-serif;
  background: var(--bg);
  color: var(--navy);
}
.screen { min-height: 100dvh; }
.hidden { display: none !important; }
.card { max-width: 420px; margin: 12vh auto; padding: 24px; background: #fff; border-radius: 12px; }
h1 { font-size: 1.1rem; margin: 0 0 8px; }
h2 { font-size: 1rem; margin: 8px 0; }
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--yellow);
  flex: 0 0 auto;
}
header h1 { margin: 0; font-size: 1rem; }
.who-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
#who { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42vw; }
.btn {
  background: var(--navy); color: #fff; border: 0; border-radius: 8px;
  padding: 10px 14px; cursor: pointer;
  min-height: 44px;
}
.btn.ghost { background: transparent; color: var(--navy); min-height: 40px; }
.btn.small { padding: 6px 10px; font-size: 13px; min-height: 36px; }
.err { color: #b00020; }
.note { color: #5a6270; font-size: 13px; margin: 4px 0; }
.lookup { display: flex; gap: 8px; margin: 6px 0; }
.lookup input {
  flex: 1; min-width: 0;
  padding: 10px 12px; border: 1px solid #cfd3dc; border-radius: 8px; font-size: 16px;
  min-height: 44px;
}
.dash {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.dash-bar {
  flex: 0 0 auto;
  padding: 6px 12px;
  background: #fff;
  border-bottom: 1px solid #e4e6eb;
}
#renewals-box { margin: 4px 0; font-size: 14px; }
#renewals-box summary { cursor: pointer; padding: 6px 0; }
.map-pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#map {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0;
  border-radius: 0;
}
#riders {
  flex: 0 0 auto;
  max-height: 22vh;
  overflow: auto;
  padding: 0 12px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.rider.hit { background: #fff6d6; }
.row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #e4e6eb; font-size: 14px;
}
.rider { cursor: pointer; }
@media (min-width: 720px) {
  .map-pane { flex-direction: row; }
  #riders {
    flex: 0 0 280px;
    max-height: none;
    border-left: 1px solid #e4e6eb;
  }
}