* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  background: var(--color-bg);
  color: var(--color-text);
  padding-bottom: 64px; /* space for the fixed bottom tab bar on mobile */
}

/*
 * The UA stylesheet's `[hidden] { display: none }` is author-overridable: any
 * author-origin `display:` declaration (e.g. `.bottom-sheet-overlay { display: flex }`)
 * wins over it and the element renders even while it carries `hidden`.
 * `!important` here beats every non-`!important` author declaration regardless of
 * selector specificity or source order, so `hidden` reliably hides — in this
 * stylesheet and in every page-specific stylesheet loaded after it.
 */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button, input, textarea {
  font-family: inherit;
}

/* Transient feedback toast (see js/toast.js). Shared by every page. */
.toast {
  position: fixed;
  bottom: 80px; /* clears the fixed bottom tab bar on mobile */
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-text);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 30;
  white-space: nowrap;
}

.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (min-width: 768px) {
  .toast {
    bottom: 24px; /* no bottom tab bar on desktop */
  }
}