/* Satelle footer — IMPORTED verbatim from the canonical Satelle Design System
   (Claude Design project 87655a87-b189-4319-9d63-6d2f1bed5ea9,
   https://claude.ai/design/p/87655a87-b189-4319-9d63-6d2f1bed5ea9,
   components/navigation/SiteFooter.css), imported 2026-07-10 (sty_13321c7e;
   switched to the width:100% max-width model, re-imported 2026-07-11, sty_8a8d7ace).
   THE shared footer sheet: ONE component for the landing site and the app
   (templates/partials/footer.html links this). Mirrors the header.css precedent
   — both surfaces link it; neither styles.css nor app.css declares footer rules.
   Colour/width/font tokens come from the page token layer (tokens.css). */
.site-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.25rem 2rem 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}
.site-footer .footer-email { color: var(--muted); }
.site-footer .footer-email:hover { color: var(--accent); }
.site-footer .footer-version { margin-left: auto; }

/* Mobile (≤640px, the ONE documented breakpoint — sty_9931dfc6): tighten the
   gutter to the shared --gutter-mobile token and let the line wrap, dropping
   margin-left:auto so a wrapped version stamp sits left under the email instead
   of pushed to a far edge. email · version stay readable, nothing overflows. */
@media (max-width: 640px) {
  .site-footer {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
    flex-wrap: wrap;
    gap: 4px 14px;
  }
  .site-footer .footer-version { margin-left: 0; }
}