/* workredux.com — site bar.
   ==========================================================================
   A slim strip that sits above a mounted demo's own chrome and says where you
   are: workredux.com / demos / <app>, with a way back to the hub. The header
   bar on the ops-center and scanner pages is the app's own; this one belongs to
   the site, so it stays deliberately slimmer (30px) and quieter than those.

   Served to every mounted app from /assets/sitebar.css.

   CSP: it is one external stylesheet, no inline style, no inline script.
   Tokens are namespaced --sb-* so they cannot clash with an app's own tokens
   (the tracker defines --bg/--border/--surface of its own).

   Theme: dark by default, which is what the tracker's own :root defaults to,
   and light only under html[data-theme="light"] — the same switch the site
   pages already set. That way the bar never disagrees with the page it is on.
   ========================================================================== */

.sb {
  --sb-canvas: #101214;
  --sb-line: #2c3238;
  --sb-ink: #f4f1eb;
  --sb-ink-2: #a8a298;
  --sb-ink-3: #7d848c;
  --sb-accent: #d0925a;
  --sb-link: #8aa4c0;

  /* above an app's password gate (the tracker's is z-index 9999 and covers the
     viewport) so a locked page still offers the way out */
  position: relative;
  z-index: 10000;

  background: var(--sb-canvas);
  border-bottom: 1px solid var(--sb-line);
  color: var(--sb-ink-2);
  font: 13px/1.4 Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sb-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  min-height: 30px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 12px;
}

.sb-mark {
  color: var(--sb-ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.sb-mark .sb-dot { color: var(--sb-accent); }
.sb-mark:hover { color: #fff; }

.sb-sep { color: var(--sb-ink-3); opacity: 0.7; margin: 0 7px; }
.sb-crumb { color: var(--sb-ink-2); text-decoration: none; }
.sb-crumb:hover { color: var(--sb-ink); }

.sb-here {
  color: var(--sb-ink);
  font-weight: 500;
}

.sb-spacer { flex: 1 1 auto; }

.sb-back {
  color: var(--sb-link);
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
}
.sb-back:hover { color: #b9cde2; }

@media (max-width: 560px) {
  .sb { font-size: 12px; }
  .sb-in { min-height: 28px; }
  .sb-crumb, .sb-sep { display: none; }
}

/* light: the site pages' own light theme, and the tracker's [data-theme="light"] */
html[data-theme="light"] .sb {
  --sb-canvas: #f6f4f1;
  --sb-line: #e4dfd6;
  --sb-ink: #1c1a17;
  --sb-ink-2: #6a6157;
  --sb-ink-3: #8d8578;
  --sb-accent: #b8792f;
  --sb-link: #4d6d8c;
}
html[data-theme="light"] .sb-mark { color: var(--sb-ink); }
html[data-theme="light"] .sb-mark:hover { color: #000; }
html[data-theme="light"] .sb-back:hover { color: #2f4d6b; }