.c-statusbar {
  grid-row: 3;
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: var(--bar-h);
  padding-inline: var(--space-sm);
  background: var(--panel);
  border-top: var(--bw) solid var(--line);
  font-size: var(--text-xs);
  overflow: hidden;
  white-space: nowrap;
}
.c-statusbar__key { color: var(--accent); font-weight: var(--fw-bold); }
.c-statusbar__label { color: var(--text-muted); margin-left: 0.5ch; }
.c-statusbar__cell { color: var(--text); flex: none; }
.c-statusbar__spacer { flex: 1; }
.c-statusbar__stat { color: var(--text-dim); flex: none; }

/* Every crumb is a real fragment link and the server renders the first one current, so the strip
   works with no JavaScript; scrollspy_controller.js moves is-current from there as the reader
   scrolls, which is what makes the footer a position indicator. */
.c-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: none;
}
.c-breadcrumbs__crumb {
  color: var(--text-dim);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 120ms ease, text-shadow 120ms ease;
}
/* The separator is an element of its own rather than a pseudo on the anchor, so it stays outside
   a crumb's hit area. */
.c-breadcrumbs__sep {
  color: var(--line);
  pointer-events: none;
}
.c-breadcrumbs__crumb:hover,
.c-breadcrumbs__crumb:focus-visible {
  color: var(--text);
}
.c-breadcrumbs__crumb.is-current {
  color: var(--accent);
  font-weight: var(--fw-bold);
  text-shadow: 0 0 6px color-mix(in oklab, var(--accent) 55%, transparent);
}

/* Narrow screens hold the footer to one non-scrolling line: the optional cells go and the crumbs
   tighten, the crumbs being what a reader on a phone navigates by. */
@media (max-width: 40rem) {
  .c-statusbar__cell--optional { display: none; }
  /* A page with crumbs gives them the width the brand label was taking; a page without keeps the
     label as its footer identity. */
  .c-statusbar:has(.c-breadcrumbs) .c-statusbar__stat { display: none; }
  .c-breadcrumbs { gap: 0.4ch; min-width: 0; font-size: 0.9em; }
  .c-breadcrumbs__crumb { letter-spacing: 0; }
}