/* The error snackbar (Account.showError in account.js): every error the app shows appears as a red bar at
   the bottom of the screen, above the number pad when one is shown, with a × to close it. On every page
   that loads account.js. */
:root {
  --error-snackbar-bg: #b91c1c;
  --error-snackbar-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --error-snackbar-bg: #dc2626; }
}

:root[data-theme="dark"] { --error-snackbar-bg: #dc2626; }

.error-snackbar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--pad-h, 0px));
  z-index: 30;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: fit-content;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 10px 12px 16px;
  border-radius: 12px;
  background: var(--error-snackbar-bg);
  color: var(--error-snackbar-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-size: 0.95rem;
  line-height: 1.45;
  animation: error-snackbar-in 0.2s ease-out;
}

.error-snackbar p { margin: 0; }

.error-snackbar button {
  flex: none;
  width: 28px;
  height: 28px;
  margin: -3px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.error-snackbar button:hover { background: rgba(255, 255, 255, 0.18); }
.error-snackbar[hidden] { display: none; }

/* A phone turned sideways keeps the number pad on the right: the bar sits beside it, over the map. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  body.with-number-pad .error-snackbar { bottom: 12px; right: calc(min(320px, 42vw) + 16px); }
}

@keyframes error-snackbar-in {
  from { opacity: 0; transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  .error-snackbar { animation: none; }
}