/* Surround brand layer for the static app sites.
   - /fluidbridge: injected by scripts/sync-fluidbridge.sh (with fluidbridge.css).
   - /dmmonitor: linked by the DM Monitor pages themselves (<link href="/surround-brand/base.css">
     and the .sr-bar markup), since that copy is exact. Do not rename or remove this file,
     its fonts, or the .sr-* classes without telling the DM Monitor project.
   It holds the Surround fonts and the top bar whose logo goes back to the home page. */

@font-face {
  font-family: "Inter";
  src: url("/surround-brand/fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/surround-brand/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/surround-brand/fonts/geist-mono.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --sr-bg: #050507;
  --sr-ink: #ffffff;
  --sr-ink-3: rgba(255, 255, 255, 0.45);
  --sr-line: rgba(255, 255, 255, 0.08);
  --sr-grad: linear-gradient(115deg, #5BE9FF 0%, #A285FF 40%, #FF4FBF 70%, #C7F261 100%);
  --sr-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sr-display: "Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --sr-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── Surround bar ── */
.sr-bar {
  position: relative;
  z-index: 20;
  background: var(--sr-bg);
  border-bottom: 1px solid var(--sr-line);
  font-family: var(--sr-sans);
}
.sr-bar::after {
  /* thin aurora line, the main site's signature gradient */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--sr-grad);
  opacity: 0.35;
}
.sr-bar__in {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 22px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sr-logo,
.sr-logo:hover {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--sr-ink);
  font-family: var(--sr-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.sr-logo__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--sr-grad);
  box-shadow: 0 0 16px #5BE9FF;
  transition: transform 0.2s ease;
}
.sr-logo:hover .sr-logo__dot { transform: scale(1.3); }
.sr-all,
.sr-all:hover {
  font-family: var(--sr-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sr-ink-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.sr-all:hover { color: var(--sr-ink); }
.sr-logo:focus-visible,
.sr-all:focus-visible { outline: 2px solid #5BE9FF; outline-offset: 4px; border-radius: 4px; }