/* © 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); }

/* ---- text for waiting: every bench page waits the same way, in characters, never a spinner graphic ----
   .tspin turns | / - \ in one cell (a strip of the four slid a cell at a time); .tcursor is a block cursor;
   .scanline sweeps once under a line that is still loading. Reduced motion: the dash holds still. */
.tspin { display: inline-block; width: 1ch; height: 1.2em; overflow: hidden; vertical-align: -.25em; font-family: var(--mono); font-style: normal; }
.tspin::before { content: "|/-\\"; display: block; width: 4ch; font-family: var(--mono); white-space: pre; animation: tspin .6s steps(4) infinite; }
@keyframes tspin { to { transform: translateX(-4ch); } }
.tcursor { display: inline-block; width: .6em; height: 1.05em; margin-left: 4px; vertical-align: -.15em; background: currentColor; opacity: .8; animation: tcursor 1s steps(1) infinite; }
@keyframes tcursor { 50% { opacity: 0; } }
.scanline { display: block; position: relative; height: 2px; margin-top: 10px; overflow: hidden; border-radius: 2px; background: var(--line); }
.scanline::after { content: ""; position: absolute; inset: 0; width: 30%; background: linear-gradient(90deg, transparent, var(--orange), transparent); animation: scanline 1.6s linear infinite; }
@keyframes scanline { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) {
  .tspin::before { animation: none; transform: translateX(-2ch); }
  .tcursor, .scanline::after { animation: none; }
}

/* ---- the seam on a working page: the front page's ASCII divider, tighter, naming what comes next.
   The fill is drawn here once, so a page writes only the label. It goes when what it names is hidden. */
.seam-ascii.tight { margin: 22px 0 14px; opacity: .7; }
.seam-ascii.tight span::before { content: "-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-="; }
.seam-ascii.tight b { font-weight: 500; letter-spacing: .06em; }
.seam-ascii.tight:has(+ [hidden]) { display: none; }