/* Shared global site chrome — slim mono + bracket active.
   Loaded after page-local styles so it wins for nav chrome only.
   Colors stay dark + teal; no trading/UI logic here. */

:root {
  --site-nav-height: 32px;
  --site-chrome-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --site-nav-bg: #0b0e12;
  --site-nav-line: rgba(148, 163, 184, 0.12);
  --site-nav-text: rgba(226, 232, 240, 0.62);
  --site-nav-text-strong: rgba(226, 232, 240, 0.92);
  --site-nav-active: #a5f3fc;
  --site-nav-active-dim: rgba(34, 211, 238, 0.55);
}

/* ---------- MattDOM: .site-nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 9998;
  width: 100%;
  height: var(--site-nav-height);
  min-height: var(--site-nav-height);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  border-bottom: 1px solid var(--site-nav-line);
  background: var(--site-nav-bg);
  flex: 0 0 var(--site-nav-height);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  font-family: var(--site-chrome-mono);
  box-sizing: border-box;
}

.site-nav::-webkit-scrollbar { display: none; }

.site-brand {
  flex: 0 0 auto;
  color: var(--site-nav-text-strong);
  text-decoration: none;
  font-family: var(--site-chrome-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.site-brand:hover { color: #fff; }

.site-links {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2px 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.site-links a,
.site-links span[data-site-user] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--site-nav-text);
  text-decoration: none;
  font-family: var(--site-chrome-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}

.site-links a:hover {
  color: var(--site-nav-text-strong);
  background: transparent;
  border-color: transparent;
}

.site-links a.active {
  color: var(--site-nav-active);
  background: transparent;
  border-color: transparent;
}

.site-links a.active::before { content: "[ "; color: var(--site-nav-active-dim); }
.site-links a.active::after { content: " ]"; color: var(--site-nav-active-dim); }

.site-links a[data-site-sign-in],
.site-links span[data-site-user] {
  margin-left: auto;
}

.site-links span[data-site-user] {
  color: rgba(226, 232, 240, 0.78);
}

.site-links a[data-site-sign-out],
.site-links a[data-site-sign-in] {
  color: rgba(226, 232, 240, 0.55);
}

.site-links a[data-site-sign-out]:hover,
.site-links a[data-site-sign-in]:hover {
  color: var(--site-nav-active);
}

/* ---------- Shared #topbar / .topnav (most templates) ---------- */
#topbar,
header.topbar.site-chrome,
.site-chrome#topbar {
  --topbar-height: var(--site-nav-height);
  height: auto;
  min-height: var(--site-nav-height);
  display: flex;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid var(--site-nav-line);
  background: var(--site-nav-bg);
  backdrop-filter: none;
  font-family: var(--site-chrome-mono);
}

#topbar {
  height: auto !important;
  min-height: var(--site-nav-height);
  padding: 0 !important;
  background: var(--site-nav-bg) !important;
  border-bottom: 1px solid var(--site-nav-line) !important;
  backdrop-filter: none !important;
}

#topbar .topbar-inner,
header.topbar .topbar-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  height: var(--site-nav-height);
  min-height: var(--site-nav-height);
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
}

#topbar .topbar-brand,
header.topbar .brand,
header.topbar .topbar-brand {
  font-family: var(--site-chrome-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--site-nav-text-strong);
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
}

#topbar .topbar-brand:hover,
header.topbar .brand:hover {
  color: #fff;
}

#topbar .topnav,
header.topbar .topnav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 10px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
}

#topbar .topnav a,
#topbar .topnav span,
header.topbar .topnav a,
header.topbar .topnav span {
  text-decoration: none;
  color: var(--site-nav-text);
  font-family: var(--site-chrome-mono);
  font-weight: 500;
  font-size: 11px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: color 120ms ease;
  line-height: 1;
}

#topbar .topnav a:hover,
header.topbar .topnav a:hover {
  color: var(--site-nav-text-strong) !important;
  background: transparent !important;
}

#topbar .topnav a.active,
header.topbar .topnav a.active {
  color: var(--site-nav-active) !important;
  background: transparent !important;
}

#topbar .topnav a.active::before,
header.topbar .topnav a.active::before {
  content: "[ ";
  color: var(--site-nav-active-dim);
}

#topbar .topnav a.active::after,
header.topbar .topnav a.active::after {
  content: " ]";
  color: var(--site-nav-active-dim);
}

#topbar .topnav a[data-site-sign-in],
header.topbar .topnav a[data-site-sign-in],
#topbar .topnav span[data-site-user],
header.topbar .topnav span[data-site-user],
#topbar .topnav #logoutLink,
#topbar .topnav #userLabel {
  margin-left: auto;
}

@media (max-width: 900px) {
  .site-nav,
  #topbar .topbar-inner,
  header.topbar .topbar-inner {
    gap: 10px;
    padding-inline: 10px;
  }
  .site-links,
  #topbar .topnav,
  header.topbar .topnav {
    gap: 2px 8px;
  }
}

@media (max-height: 800px) {
  :root { --site-nav-height: 28px; }
}