/* ═══════════════════════════════════════════════════════════════════════════
   brand-mark.css — one orange circle logo, in the same place, on every tab.

   Why a file of its own rather than a few lines in one-orange.css: that file
   is the colour layer, and its tests enforce that it only ever *recolours* —
   it may not hide an element and may not set pointer-events, because doing
   either to a call to action would strand anyone who cannot use a microphone.
   Both of those are exactly what a logo needs. Different job, different file.

   What was actually on the live site (mobile viewport, full page, 2026-08-27):

     Reels      5 orange circle logos   one per reel card, several cards in the DOM
     ScanSquad  1
     Book       0
     Partner    0
     Profile    0

   Five, one, or none, depending on the tab — "different branding on each tab".
   The mark was never wrong; its *placement* was, because it was attached to
   feed cards whose number varies instead of to the app.

   So: paint it once, on the page itself, in a fixed position. Every tab gets
   exactly one and it lands in the same spot on all five, regardless of what is
   rendered underneath. The disc is unchanged from the original — 28px, brand
   orange, white "S", same soft glow.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Owner 2026-10-04: "Even logo 🟠 orange border transparent or see through in
   all tabs. No S inside just orange border." So the disc keeps its place and
   its size and loses the letter: an empty see-through ring in brand orange,
   the same glass the button rows use. */
body::before {
  content: '';
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  left: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* Owner 2026-10-04: see-through glass disc with an orange border, like the pills. */
  box-sizing: border-box;
  background: var(--sg-row-bg, rgba(20, 20, 26, .20));
  border: 2px solid var(--sg-orange, #FF6D00);
  -webkit-backdrop-filter: var(--sg-row-blur, blur(8px));
  backdrop-filter: var(--sg-row-blur, blur(8px));
  box-shadow: 0 0 8px rgba(255, 109, 0, .35);
  opacity: 1;
  /* Decorative. Without this the disc would swallow taps on whatever sits
     beneath the top-left corner of every screen. */
  pointer-events: none;
  z-index: 9500;
}

/* The per-card copies are retired in favour of the single fixed mark above.
   Hidden rather than deleted from the shells so the markup that generates a
   reel card stays untouched and this stays one reversible decision. */
.sg-brand-circle {
  display: none !important;
}