/* ============================================================================
   webdev.games · bar.css
   The site nav: a tmux status line across the top of every page, the
   terminal (index.html) and the /games/ pages alike. It lives in one file,
   with a type size of its own, so the two skins cannot drift apart and the
   bar does not jump when you cross from one page to the other. The markup
   is written by tools/build.js for all of them. The terminal's own status
   line (terminal.css) uses the same tokens, so the two bars there match.
   Colour and font tokens come from the page's stylesheet.
   ========================================================================== */

:root {
  --bar-fs:  14px;   /* the bar's type, whatever the page's is */
  --bar-lh:  22px;
  --bar-pad: 2px;    /* above and below each link */
  --bar-h:   calc(var(--bar-lh) + 2 * var(--bar-pad) + 4px);   /* line + link padding + 2px each side */
}
@media (hover: none) and (pointer: coarse) {
  :root { --bar-pad: 6px; }   /* taller tap targets on touch screens */
}

/* anchors and scrollIntoView land below the sticky bar, not under it */
html { scroll-padding-top: var(--bar-h); }

.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  background: var(--bar);
  color: var(--fg);
  font: 400 var(--bar-fs) / var(--bar-lh) var(--font);
  padding: 2px max(1ch, env(safe-area-inset-right)) 2px max(1ch, env(safe-area-inset-left));
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
  user-select: none;
  -webkit-user-select: none;
}
.bar::-webkit-scrollbar { display: none; }
.bar a { color: var(--fg); text-decoration: none; padding: var(--bar-pad) 1ch; }
.bar a:hover { background: var(--bar-2); color: var(--fg); }
.bar a.is-current { background: var(--fg); color: var(--bg); font-weight: 600; }
.bar .sess { color: var(--bright); font-weight: 600; padding: var(--bar-pad) 1ch var(--bar-pad) 0; }
/* .right is a flex row too, so its link gets the same box as the others; no right
   padding, so the handle ends 1ch from the edge like the clock in the status line */
.bar .right { display: flex; margin-left: auto; padding-left: 2ch; gap: 1ch; }
.bar .right a, .bar .right a:hover { color: var(--bright); padding-right: 0; }

/* who is here: "● 2 users, 41 in 24h", the way uptime says it. Filled by
   assets/presence.js from the stream server/presence.js serves; hidden until
   the first reading arrives, so a copy of the site with no counter behind it
   shows the bar it always did. The dot is the one accent and it breathes
   rather than glows. A phone's bar is full already ([webdev.games] 0:terminal
   1:games @jrya7 is 386px of 390), so the day half goes first and the whole
   reading below 480px. */
.bar .who { padding: var(--bar-pad) 0; color: var(--fg); white-space: nowrap; }
.bar .who b { color: var(--bright); font-weight: 600; }
.bar .who .live {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 1ch;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  position: relative;
  top: -1px;
  animation: who-breathe 2.4s ease-in-out infinite;
}
@keyframes who-breathe { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .bar .who .live { animation: none; } }
@media (max-width: 599px) { .bar .who .day { display: none; } }
@media (max-width: 479px) { .bar .who { display: none; } }