footer.foot {
  margin-top: 1.1rem;
  color: var(--dim);
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
}

/* Small and unbold so it takes up as little room as possible — every
   pixel it doesn't use is a pixel that keeps the theme and MCP buttons
   from wrapping onto their own line on the (dev-only) staging site. */
.env-badge {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mcp-btn {
  margin-left: auto;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--amber);
  border: 1px solid var(--amber);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(255, 180, 84, 0.35);
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.mcp-btn:hover { background: transparent; color: var(--amber); box-shadow: 0 0 18px rgba(255, 180, 84, 0.5); }
.mcp-btn:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }

/* Fixed to fit the longest label ("high contrast") so the footer doesn't
   reflow — and the other footer content jump around — every time the
   label changes length on click. Kept just wide enough for that label so
   the footer's three status lines still fit on one row. */
#theme-toggle-btn { min-width: 7rem; text-align: center; }