/* The thin bar that says where the reader is.
 *
 * It is not the site's header. Replicating that would mean carrying the two
 * menu panels, their six and five items, and the counts a browser check
 * asserts, in a second repository that the panel's Menu module cannot reach.
 * This bar has nothing that can go stale: a wordmark and two links.
 *
 * The wordmark is text in two spans, never an image: the site's own symbol is
 * served from a content-hashed address that changes on every deploy of the
 * site, and depending on it would break this page at a distance.
 *
 * The colours are repeated here rather than imported, for the same reason the
 * site's public/sitemap.css repeats a few values: the site's stylesheet is a
 * hashed bundle this page has no stable way to reference. Four values, and
 * they are the brand's, so they do not drift often.
 */

.am-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.6rem clamp(1rem, 4vw, 2rem);
  padding-top: calc(0.6rem + env(safe-area-inset-top, 0px));
  background: #0a192f;
  color: #ffffff;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.875rem;
  line-height: 1.4;
}

.am-bar__brand {
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: inherit;
}

.am-bar__apex {
  color: #ffffff;
}

.am-bar__mira {
  color: #f7931e;
}

.am-bar__here {
  color: #94a3b8;
}

.am-bar__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-left: auto;
}

.am-bar a:not(.am-bar__brand) {
  color: #e8f0f8;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.am-bar a:not(.am-bar__brand):hover {
  color: #f7931e;
}

.am-bar a:focus-visible,
.am-bar__brand:focus-visible {
  outline: 2px solid #f7931e;
  outline-offset: 2px;
}