/* Header additions for a signed-in visitor: the credit pill and the avatar.
   Kept apart from site.css so the public stylesheet stays the public one. */

.credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink) !important;
  background: var(--panel);
  font: 500 13px/1 var(--sans);
  transition: border-color 140ms ease, background 140ms ease;
}
.credit-pill:hover { border-color: var(--accent); }
.credit-pill b {
  font: 600 13px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.credit-pill.bump b { animation: bump 420ms cubic-bezier(.2,.8,.2,1); }
@keyframes bump { 30% { transform: translateY(-3px); } 60% { transform: translateY(1px); } }

.avatar {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg) !important;
  font: 600 13px/1 var(--sans);
  text-decoration: none;
  transition: opacity 140ms ease;
}
.avatar:hover { opacity: .85; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.bar nav a.nav-app { color: var(--ink); font-weight: 500; }

@media (max-width: 700px) {
  /* The pill and the avatar sit flush right on their own row rather than
     trailing the text links, and the footer line is allowed to wrap. */
  .bar nav .credit-pill { margin-left: auto; }
  .foot-meta { flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 6px; }
}