/* 06-components/_statusbar.css */
/* ── c-statusbar — the fixed bottom F-key bar. Doubles as global footer. */
.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; }

/* ── c-breadcrumbs — the scroll-spy job-stage words in the footer. Each is a real #anchor
   link (works without JS); the scrollspy controller moves .is-current onto the one whose
   section is in view, so the footer doubles as a scroll 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;
}
/* Separators are their own elements (not a pseudo on the anchor), so the "·" is never part
   of a crumb link'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 — keep the footer a single, non-scrolling line by dropping the inessential
   meta links, leaving just the brand/version and the Source link. The scroll-spy crumbs stay
   visible (they're the mobile scroll indicator); tighten their spacing to fit one line. */
@media (max-width: 40rem) {
  .c-statusbar__cell--optional { display: none; }
  /* When the scroll-spy crumbs are present (overview), give them the full width by dropping
     the brand label; other pages keep it as their 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; }
}