:root {
  --vine: #B2D243;
  --ink: #111111;
  --paper: #ffffff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: Roboto, system-ui, sans-serif; }
#map { position: absolute; inset: 0; }

/* Demo chrome (toggle bar, cards) sits above the map */
.poc-bar {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 10;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: rgba(255,255,255,.92); padding: 8px 12px; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2); font-size: 14px;
}
.poc-bar a { color: var(--ink); text-decoration: none; font-weight: 600; }
.poc-mark { height: 24px; width: 24px; flex: 0 0 auto; }
.poc-pill {
  background: var(--ink); color: #fff; border: 0; border-radius: 999px;
  padding: 8px 16px; font-weight: 600; cursor: pointer;
}
.poc-pill.alt { background: var(--vine); color: var(--ink); }

.poc-status { font-variant-numeric: tabular-nums; }
.poc-status.bad { color: #b00020; font-weight: 700; }
.poc-status.good { color: #2e7d32; font-weight: 700; }

/* Bottom editorial card (waypoint demo) */
.poc-card {
  position: absolute; left: 12px; right: 12px; bottom: 16px; z-index: 10;
  background: var(--paper); border-radius: 4px; padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.poc-card h2 { font-family: "Bree Serif", Georgia, serif; margin: 0 0 4px; font-size: 20px; }
.poc-card .dist { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Mock blue dot (custom marker) */
.poc-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(26,115,232,.4);
}
.poc-arrow {
  width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-bottom: 22px solid #1a73e8; transform-origin: 50% 70%;
}