/* ══════════════════════════════════════════════════════════════════
   /sys2026/topbar.css — Gnoke Station shared topbar
   ─────────────────────────────────────────────────────────────────
   Canonical topbar (floating rounded card), matching the Start page
   design. One file, one place to update, instead of ~12 copies.

   USAGE
   1. Link this AFTER your app's own stylesheet(s):
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="/sys2026/topbar.css">
      Loading it last lets it win the cascade for --topbar-h and any
      leftover .topbar-family rules an app forgets to remove.
   2. Delete your app's own .topbar / .tb-* / .sys-pill* / .tb-action /
      .tb-filename* / .topbar-chip / .hamburger-btn rules — they live
      here now.
   3. Any CSS that reserves layout space for the topbar (grid rows,
      position:fixed offsets, padding-top) should use
      var(--topbar-space) instead of var(--topbar-h) — it accounts
      for the floating card's 10px top margin. The .topbar's own
      height still just uses --topbar-h.

   Uses fallback chains on every token (var(--x, var(--y, #hex))) so
   it degrades gracefully even if an app's :root uses slightly
   different token names (--muted vs --text-3, etc).

   Edmund Sparrow © 2026 — MIT
   ══════════════════════════════════════════════════════════════════ */

:root {
  --topbar-space: calc(var(--topbar-h, 52px) + 10px);
}

.topbar {
  height: var(--topbar-h, 52px);
  margin: 10px 10px 0 10px;
  padding: 0 16px;
  border-radius: var(--radius-lg, 14px);
  background: var(--surface, #ffffff);
  border: none;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(13,43,62,.10), 0 2px 4px rgba(13,43,62,.06));
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 200;
  flex-shrink: 0;
}

.tb-logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; user-select: none;
}
.tb-hex {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 9px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff;
  background: linear-gradient(135deg, var(--blue-1, #86b4e4), var(--accent, var(--blue-3, #1b4d6e)));
  box-shadow: 0 2px 8px rgba(27,77,110,0.28);
}
.tb-hex img { width: 100%; height: 100%; object-fit: cover; }

.tb-wordmark {
  font-family: var(--font-sans, var(--display, sans-serif));
  font-weight: 800; font-size: 15px; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent, var(--blue-3, #1b4d6e));
}
.tb-wordmark small, .tb-wordmark span {
  display: block;
  font-weight: 400; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3, var(--muted, #6a8fa3));
}

.tb-sep    { width: 14px; height: 22px; flex-shrink: 0; }
.tb-spacer { flex: 1; }

/* ── status pill (sys-pill everywhere; bus-pill is the Start page's
   original name for the same thing — kept as an alias) ── */
.sys-pill, .bus-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px; border: none;
  background: var(--surface2, var(--surface-2, #f6fafb));
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(13,43,62,.07));
  font-family: var(--font-mono, var(--mono, monospace));
  font-size: 9px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-3, var(--muted, #6a8fa3));
  white-space: nowrap; transition: all 0.3s; cursor: default;
}
.sys-pill.live,         .bus-pill.live         { background: var(--live-bg, rgba(26,102,71,0.08)); color: var(--live, #1a6647); }
.sys-pill.error,        .bus-pill.error        { background: var(--dead-bg, rgba(176,48,48,0.07)); color: var(--dead, #b03030); }
.sys-pill.reconnecting, .bus-pill.reconnecting { background: var(--surface3, var(--surface-3, #edf4f8)); color: var(--text-2, var(--text2, #2d5268)); }
.sys-pill-dot, .bus-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-3, var(--muted, #6a8fa3)); transition: background 0.3s;
}
.sys-pill.live .sys-pill-dot, .bus-pill.live .bus-dot {
  background: var(--live, #1a6647);
  box-shadow: 0 0 0 2px rgba(26,102,71,0.18);
  animation: tbLivePulse 2s ease-in-out infinite;
}
.sys-pill.error .sys-pill-dot, .bus-pill.error .bus-dot { background: var(--dead, #b03030); }
.sys-pill.reconnecting .sys-pill-dot, .bus-pill.reconnecting .bus-dot {
  background: var(--text-2, var(--text2, #2d5268));
  opacity: 0.4; animation: tbReconnPulse 1.4s ease-in-out infinite;
}
@keyframes tbLivePulse   { 0%,100% { opacity: 1; }    50% { opacity: .45; } }
@keyframes tbReconnPulse { 0%,100% { opacity: 0.4; }  50% { opacity: 1; } }

@media (max-width: 640px) {
  .sys-pill span, .bus-pill span { display: none; }
  .sys-pill, .bus-pill { padding: 4px 7px; }
}

/* ── optional extras used by a handful of apps ── */
.tb-action {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 8px; border: none;
  background: var(--surface2, var(--surface-2, #f6fafb));
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(13,43,62,.07));
  font-family: var(--font-mono, var(--mono, monospace)); font-size: 11px;
  color: var(--text-2, var(--text2, #2d5268));
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.tb-action:hover { color: var(--accent, var(--blue-3, #1b4d6e)); background: var(--accent-lt, #daeaf4); }

.tb-filename {
  font-family: var(--font-mono, var(--mono, monospace)); font-size: 11px; font-weight: 500;
  color: var(--text-2, var(--text2, #2d5268)); letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: 5px; border: none; cursor: pointer;
  background: var(--surface2, var(--surface-2, #f6fafb));
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(13,43,62,.07));
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-filename.dirty::after { content: ' •'; color: var(--accent, var(--blue-2, #3f6e9b)); }
.tb-filename-input {
  display: none;
  font-family: var(--font-mono, var(--mono, monospace)); font-size: 11px; font-weight: 500;
  color: var(--text, #0d2b3e); letter-spacing: 0.02em;
  padding: 2px 7px; border-radius: 5px; outline: none; max-width: 200px;
  background: var(--surface, #fff); border: 1px solid var(--accent, var(--blue-2, #3f6e9b));
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

.topbar-chip {
  padding: 3px 10px; border-radius: 20px; white-space: nowrap;
  background: var(--surface2, var(--surface-2, #f6fafb));
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(13,43,62,.07));
  font-family: var(--font-mono, var(--mono, monospace)); font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--text-2, var(--text2, #2d5268));
}

.hamburger-btn {
  all: unset; cursor: pointer; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2, var(--surface-2, #f6fafb));
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(13,43,62,.07));
  color: var(--text-2, var(--text2, #2d5268));
  transition: all .15s;
}
.hamburger-btn:hover { color: var(--accent, var(--blue-3, #1b4d6e)); background: var(--accent-lt, #daeaf4); }

/* ── mobile / PWA ── */
@media (max-width: 640px) {
  .topbar { margin: 6px 6px 0 6px; }
}
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); }
}