/* ===================== STATES ===================== */
.loading{text-align:center;padding:var(--sp7);color:var(--txd);font-size:13px}
.loading::before{content:'';display:block;width:22px;height:22px;margin:0 auto var(--sp3);
  border:2px solid var(--bdr);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
.error{text-align:center;padding:var(--sp5);color:var(--red);font-size:13px}
.empty{text-align:center;padding:var(--sp6) var(--sp4);color:var(--txd)}
.empty .e-i{font-size:28px;opacity:.45;margin-bottom:var(--sp2)}
.empty .e-t{font-size:14px;font-weight:600;color:var(--txm);margin-bottom:var(--sp1)}
.empty .e-d{font-size:12.5px;max-width:48ch;margin:0 auto;line-height:1.6}
.pg-footer{padding:var(--sp4) var(--sp5);text-align:center;font-size:11.5px;color:var(--txd);
  border-top:1px solid var(--bdr);background:var(--card)}

/* The environment, when it is not production. Loud enough to notice, small
   enough not to matter. */
.pg-env{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  font-size:10.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);
  background:color-mix(in srgb,var(--amber) 12%,transparent);vertical-align:1px}
.pg-env[hidden]{display:none}