/* Site footer — shared by index.html, session.html and complete.html.
   Markup comes from footer.js; each page only drops in
   <div class="footer" data-site-footer></div>. Colors/fonts reuse the
   page's own tokens. --footer-gap sets the space above the dashed line;
   --footer-pad-bottom lets a page subtract the bottom padding its own
   wrapper already adds, so text-to-page-end matches line-to-text (28px). */
.footer {
  margin-top: var(--footer-gap, 90px);
  padding: 28px 0 var(--footer-pad-bottom, 28px);
  border-top: 1px dashed var(--stroke);
  display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap;
  font-family: var(--f-pixel); font-size: 9px; letter-spacing: 0.2em; color: var(--dim);
}
.footer a { color: var(--accent); text-decoration: none; margin-left: 10px; }
.footer a:hover { text-decoration: underline; }
.footer .mail {
  appearance: none; border: 0; background: none; padding: 0;
  font: inherit; letter-spacing: inherit; color: var(--accent); cursor: pointer;
}
.footer .mail:hover { text-decoration: underline; }
/* Out of flow so the address sits flush right; the label hangs past it. */
.footer .contact { position: relative; }
.footer .copied {
  position: absolute; left: 100%; top: 0; margin-left: 10px; white-space: nowrap;
  color: var(--progress, #1fa84a); opacity: 0; transition: opacity .15s;
}
.footer .copied.on { opacity: 1; }
@media (max-width: 720px) {
  .footer .copied { left: auto; right: 0; top: 100%; margin: 6px 0 0; }
}