/* footbar.css — the one site-wide navigation bar: fixed to the bottom of the
   viewport on every page, the app included. Loaded by index.html and by each
   content page, so the links never differ between them.
   Pages reserve space for it with padding-bottom / height math — nothing should
   ever sit underneath it. */
:root{ --footbar-h:40px; }

.footbar{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  height:var(--footbar-h);
  display:flex; align-items:center; justify-content:center; gap:28px;
  padding:0 16px;
  background:#08090a;
  border-top:1px solid #f1c40f35;
  box-shadow:0 -3px 20px #0006;
  font-family:Inter,system-ui,sans-serif; font-size:13px;
}
.footbar a{
  color:#b0b0b0; text-decoration:none; white-space:nowrap;
  padding:4px 2px; border-bottom:1px solid transparent; transition:color .15s,border-color .15s;
}
.footbar a:hover{ color:#fff; }
.footbar a[aria-current=page]{ color:#f1c40f; border-bottom-color:#f1c40f65; }
.footbar a:focus-visible{ outline:2px solid #f1c40f; outline-offset:3px; border-radius:3px; }

@media (max-width:480px){
  .footbar{ gap:18px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce){ .footbar a{ transition:none; } }