/* ===== Shared fixed-header surface =====
   Gives the top bar a solid blurred plate so page content can never be read
   through it while scrolling. Pages override --barbg to match their own base. */

.bar{
  background:var(--barbg,color-mix(in srgb,#08070a 92%,transparent));
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--acc) 22%,transparent);
  z-index:60;
  padding-top:14px;
  padding-bottom:14px;
}

/* Reel (portrait) mode: keep the plate opaque, override reel.css's gradient. */
html.reel-on .bar{
  background:var(--barbg,color-mix(in srgb,#08070a 92%,transparent));
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--acc) 22%,transparent);
  padding:12px 16px;
  z-index:60;
}

/* The 42px circular logo must never touch the hairline. */
.bar .brand .logo{margin:2px 0}

/* In-flow bars (report / defi) become sticky plates with the same treatment. */
.wrap>.bar{
  position:sticky;
  top:0;
  margin:-26px calc(-1 * clamp(20px,5vw,40px)) 18px;
  padding:14px clamp(20px,5vw,40px);
}