/* ── zeq-app-nav.css — Shared standalone app bar for all Zeq apps ────────── */
/* Drop this + zeq-app-nav.js into any app page. No other nav needed.       */

/* Universal "?" guide button — RETIRED 2026-07-19.
   The script that mounted it is now a no-op stub and every injector has been
   removed, but browsers and installed PWAs hold old JS for as long as their
   cache says they may. This rule is the backstop: a stale cached script can
   still create the element, and it will never be seen. Cheap, and it makes
   the removal independent of cache expiry across ~14 domains. */
#zeq-guide-button,
#zeq-guide-panel,
#zeq-guide-backdrop { display: none !important; }

.zeq-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1.25rem;
  /* Installed to a phone home screen the page draws under the system status
     bar, so the clock, signal and battery landed on top of the app title and
     the account chip. Push the bar below the inset. env() resolves to 0px in
     a normal browser tab and on desktop, so this costs nothing there. */
  padding-top: calc(0.55rem + env(safe-area-inset-top, 0px));
  padding-left: calc(1.25rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1.25rem + env(safe-area-inset-right, 0px));
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

/* ── Left: logo + title ─────────────────────────────────────────────────── */
.zeq-appbar-left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.zeq-appbar-logo {
  font-size: 0.85rem;
  font-weight: 700;
  color: #00ff88;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.zeq-appbar-logo:hover { color: #00ff88; text-decoration: none; }
.zeq-appbar-dot {
  width: 8px;
  height: 8px;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
  animation: zeq-appbar-pulse 0.777s ease-in-out infinite;
}
@keyframes zeq-appbar-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); opacity: 0.7; }
}
.zeq-appbar-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.1);
}
.zeq-appbar-subtitle {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
}

/* ── Active state-machine pill (slug + status) ──────────────────────────── */
/* EX.POLISH (2026-05-19) — when the pill is hidden via the HTML `hidden`
   attribute (no authed session yet), `display: inline-flex` was winning
   and the "offline / —" placeholder leaked into every page's nav. Force
   display:none on the hidden state. */
.zeq-appbar-machine[hidden] { display: none !important; }
.zeq-appbar-machine {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.6rem;
  padding: 0.22rem 0.55rem;
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.zeq-appbar-machine:hover {
  border-color: rgba(0, 255, 136, 0.38);
  background: rgba(0, 255, 136, 0.08);
  text-decoration: none;
}
.zeq-machine-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.zeq-machine-dot.active {
  background: #00ff88;
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.55);
  animation: zeq-machine-pulse 1.554s ease-in-out infinite;
}
.zeq-machine-dot.inactive {
  background: rgba(255, 184, 77, 0.7);
  box-shadow: 0 0 4px rgba(255, 184, 77, 0.35);
}
@keyframes zeq-machine-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.zeq-machine-slug {
  /* Hidden — the machine slug duplicated the right-side ZID button.
     Keep only the status pill (dot + "active") on the left. */
  display: none;
}
.zeq-machine-status {
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
}
/* Green when the dot is active (sibling selector — dot sits before status). */
.zeq-machine-dot.active ~ .zeq-machine-status {
  color: #00ff88;
}

/* ── Right: ZID button + dropdown ───────────────────────────────────────── */
.zeq-appbar-right { position: relative; }

.zeq-appbar-account {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  color: #00ff88;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  transition: all 0.15s;
}
.zeq-appbar-account:hover {
  border-color: rgba(0, 255, 136, 0.3);
  background: rgba(0, 255, 136, 0.06);
}
.zeq-appbar-account .zeq-chevron {
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.3);
  transition: transform 0.15s;
}
.zeq-appbar-account.open .zeq-chevron { transform: rotate(180deg); }

.zeq-appbar-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: rgba(10, 12, 18, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  padding: 0.35rem 0;
  z-index: 1100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.zeq-appbar-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.32);
  padding: 0.4rem 0.8rem 0.2rem;
}
.zeq-appbar-menu.show { display: block; }
.zeq-appbar-menu a {
  display: block;
  padding: 0.5rem 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  transition: all 0.1s;
}
.zeq-appbar-menu a:hover {
  background: rgba(0, 255, 136, 0.08);
  color: #00ff88;
}
.zeq-appbar-menu a.active {
  color: #00ff88;
  background: rgba(0, 255, 136, 0.04);
}
.zeq-appbar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.3rem 0;
}
.zeq-appbar-signout {
  color: rgba(255, 130, 130, 0.85) !important;
  font-weight: 500;
}
.zeq-appbar-signout:hover {
  background: rgba(255, 80, 80, 0.08) !important;
  color: #ff7a7a !important;
}