/* © 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(--teal); border-radius: 8px 8px 2px 2px; }
.bar-nav a:focus-visible, .bar-who:focus-visible { outline: 2px solid var(--teal); 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(--teal) 50%, var(--line)); }
.bar-who .role { color: var(--ink-faint); }
.bar-who[data-who="out"] { color: var(--teal-ink); font-weight: 600; border-color: var(--teal);
  background: linear-gradient(100deg, var(--teal), var(--teal-lt)); }
.bar-who[aria-current="page"] { color: var(--ink); font-weight: 500; background: transparent; border-color: var(--teal); }

@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(--good); border-color: color-mix(in srgb, var(--good) 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(--teal), 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; }

/* the player (shell.js): sound on or off beside "who", and what a program said, at the foot of the page */
.bar-sound { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--ink-dim); cursor: pointer;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; white-space: nowrap; }
.bar-sound[aria-pressed="true"] { color: var(--ink-2); border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); }
.bar-sound:hover { color: var(--ink); }
.bar-sound:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.bench-says { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60;
  max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 10px;
  align-items: baseline; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.bench-says .who, .bench-says .note { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }
.bench-says[hidden] { display: none; }