.status-panel,
.location-status,
.fatal-message {
  position: absolute;
  z-index: var(--ui-layer);
  border: var(--border-thin) solid var(--color-light-grey);
  background: var(--color-black);
  color: var(--color-white);
  box-shadow: calc(var(--border-heavy) * 2) calc(var(--border-heavy) * 2) 0 var(--color-black);
}

.status-panel {
  top: calc(var(--safe-top) + var(--space-4));
  left: calc(var(--safe-left) + var(--space-4));
  width: min(calc(100% - var(--space-4) * 2), var(--panel-max-width));
  padding: var(--space-3) var(--space-4);
}

.status-panel__eyebrow,
.location-status {
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
}

.status-panel__eyebrow {
  color: var(--color-light-grey);
}

.status-panel__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-1);
}

.status-panel__title {
  font-size: clamp(1.25rem, 5vw, 1.75rem);
}

.status-panel__status {
  flex: none;
  color: var(--color-chartreuse);
  font-size: 0.6875rem;
  letter-spacing: var(--letter-spacing-tight);
}

.location-status {
  bottom: calc(var(--safe-bottom) + var(--space-4));
  left: calc(var(--safe-left) + var(--space-4));
  max-width: calc(100% - var(--space-4) * 2);
  padding: var(--space-2) var(--space-3);
  transition:
    opacity var(--timing-normal) linear,
    visibility var(--timing-normal) linear;
}

.location-status[data-state="success"] {
  border-color: var(--color-chartreuse);
  color: var(--color-chartreuse);
}

.location-status[data-state="warning"] {
  border-color: var(--color-hot-pink);
  color: var(--color-hot-pink);
}

.fatal-message {
  inset: 50% auto auto 50%;
  width: min(90%, var(--panel-max-width));
  padding: var(--space-4);
  transform: translate(-50%, -50%);
  border-color: var(--color-hot-pink);
  color: var(--color-hot-pink);
  text-align: center;
}

:focus-visible {
  outline: var(--border-heavy) solid var(--color-chartreuse);
  outline-offset: var(--border-heavy);
}
