/* ---------- top bar ---------- */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--bar-gap); flex-wrap: wrap;
  padding: var(--bar-padding-top) var(--pad) var(--bar-padding-bottom);
  background: linear-gradient(var(--bar-background) calc(100% - var(--bar-fade-height)), transparent);
}
.top .mark {
  font-family: var(--display);
  font-weight: var(--bar-logo-weight);
  font-size: var(--bar-logo-size);
  text-decoration: none;
  position: relative;
  top: var(--bar-logo-offset-top);
  left: var(--bar-logo-offset-left);
}
/* Reserve space for widest suffix - empty inline-block with measured width */
.top .suffix-slot { display: inline-block; width: var(--suffix-w, 2.5em); }
/* Flying suffix that animates between nav and logo */
.top .suffix-fly {
  position: absolute;
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--bar-suffix-size);
  color: var(--bar-suffix-color);
  pointer-events: none;
  transition: left 160ms ease-out, top 160ms ease-out, opacity 120ms ease-out;
}
.top .suffix-fly.at-nav {
  color: var(--bar-suffix-color-nav);
}
.top .suffix-fly.dropping { opacity: 0; }
/* Nav link spans can be hidden while keeping space */
.top nav a[data-suffix] span { visibility: visible; }
.top nav a[data-suffix].docked span { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .top .suffix-fly { transition: none; }
}
.top nav { display: flex; gap: var(--bar-nav-gap); flex-wrap: wrap; font-size: var(--bar-nav-size); }
.top nav a { text-decoration: none; color: var(--bar-nav-color); }
.top nav a:hover { color: var(--bar-nav-color-hover); }

/* narrow viewports (phones) - uses html.narrow class from device.js */
/* phones: one line, scaled by the script to fill the full width (--bar-fs) */
html.narrow .top { flex-wrap: nowrap; align-items: baseline; gap: 0.7em;
       padding-top: calc(0.55em - var(--bar-text-raise, 0px)); padding-bottom: calc(0.55em + var(--bar-text-raise, 0px));   /* same bar height, text raised */
       font-size: var(--bar-fs, 16px); line-height: 1.2; }
html.narrow .top .mark { font-size: var(--bar-logo-size); top: var(--bar-logo-offset-top); left: var(--bar-logo-offset-left); flex: none; }
/* suffix uses nav font size at all times */
html.narrow .top .suffix-fly { font-size: var(--bar-suffix-size); }
html.narrow .top nav { flex-wrap: nowrap; gap: var(--bar-nav-gap); font-size: var(--bar-nav-size); }
html.narrow .top.measuring nav { font-size: 0.75em; }     /* size used to fit the bar; the links then shrink */