*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
  /* Clears the fixed top bar and bottom nav. */
  padding: calc(var(--topbar-h) + 8px) 0 calc(var(--bottomnav-h) + 24px);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 8px; line-height: 1.25; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.05rem; }
p  { margin: 0 0 12px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 12px;
}

.muted { color: var(--text-muted); }
.dim   { color: var(--text-dim); }
.small { font-size: .85rem; }
.mono  { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.stack > * + * { margin-top: var(--gap); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Wide content (the admin tables) scrolls in its own box so the page body
   never scrolls sideways. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }