@import url('./variables.css');
@import url('./base.css');
@import url('./components.css');
@import url('./views.css');

/* A small centred pill, not a full-width slab — it's an aside, and it sits
   on top of the map the user came here to look at. */
.geo-indicator {
  position: absolute;
  /* One row below the offline pill, which may be on screen at the same time
     — losing the network is exactly when geolocation falls back. */
  top: calc(var(--map-chrome-bottom) + var(--space-xl));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-overlay);
  max-width: calc(100% - var(--space-xl));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  box-shadow: var(--shadow-sm);
  text-align: center;
  white-space: nowrap;
}

/* F3 (DESIGN_TODO P0): the fallback notice is a button — the one affordance
   that recovers a launch without a position. It keeps the pill shape and only
   gains the affordances a button needs. */
button.geo-indicator--fallback {
  cursor: pointer;
  font-family: inherit;
  color: var(--color-primary);
  border-color: var(--color-primary);
  min-height: var(--touch-target);
}