/* © 2026 William C. Chesher. All Rights Reserved.
   shell.css - the one top bar every bench page opens with (shell.py renders it, shell.js fills "who"), and the
   shared words for a state: the chip. Reads only the tokens. Replaces the header each page used to draw for
   itself, each a little differently. */

.bar { display: flex; align-items: center; gap: 22px; padding: 16px 0 24px; flex-wrap: wrap; }
.bar .wordmark { text-decoration: none; }
.bar-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-right: auto; }
.bar-nav a { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--ink-dim); text-decoration: none;
  padding: 6px 10px; border-radius: 8px; transition: color var(--fast) var(--ease), background var(--fast) var(--ease); }
.bar-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.bar-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--orange); border-radius: 8px 8px 2px 2px; }
.bar-nav a:focus-visible, .bar-who:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* who this browser is: a name and a role, or the way in */
.bar-who { font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; text-decoration: none; color: var(--ink-2);
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bar-who:hover { color: var(--ink); border-color: color-mix(in srgb, var(--orange) 50%, var(--line)); }
.bar-who .role { color: var(--ink-faint); }
.bar-who[data-who="out"] { color: var(--orange-ink); font-weight: 600; border-color: var(--orange);
  background: linear-gradient(100deg, var(--orange), var(--orange-lt)); }
.bar-who[aria-current="page"] { color: var(--ink); font-weight: 500; background: transparent; border-color: var(--orange); }

@media (max-width: 560px) {
  .bar { gap: 10px 14px; }
  .bar-nav { order: 3; width: 100%; margin-right: 0; }
  .bar-who { margin-left: auto; }
}

/* the chip: one look for a state on every page (admin's .chip, devices' .dev-chip, the studio's states).
   on = running / good, off = stopped / needs a look, bad = refused / stop. */
.chip { white-space: nowrap; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); }
.chip.on { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 45%, transparent); }
.chip.off { color: var(--caution); border-color: color-mix(in srgb, var(--caution) 45%, transparent); }
.chip.bad, .chip.warn { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }