/* OBEINSON FREQUENCY X — the spinning mark in the corner of every screen.
 *
 * brand-badge.js clones #pinLogo and drops it here. The clone keeps .obnPinMark,
 * so the ring, the spin and the mark inside it are the PIN screen's own styling;
 * this file only places and sizes it.
 */

.obnBrandBadge {
  display: none;
  /* !important on the position, for the reason AGENTS.md already records for
     the now-playing dock: something in the app's own layers sets
     position:relative on body-level divs and wins on specificity. Without it
     this was laid out in the page flow and its bottom sat 2,912px below the
     window. */
  position: fixed !important;
  left: max(14px, env(safe-area-inset-left, 0px)) !important;
  bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
  /* above the catalog overlay (100) and the full-screen phone player (102),
     below the licence and PIN gates (150), which own the window outright */
  z-index: 120 !important;
  /* Both dimensions, explicitly. The sizing on the original is written as
     `#pinLogo.obnPinMark`, and the clone has no id — so it inherits neither the
     width nor the `aspect-ratio:1` that gave it a height. Measured without
     this: the badge ran roughly 3,000px tall and its bottom sat 2,932px below
     the window. */
  width: 62px !important;
  height: 62px !important;
  aspect-ratio: 1;
  margin: 0 !important;
  opacity: .72;
  /* decorative: it floats over lists, the map and the player's controls, and
     must never swallow a tap meant for something underneath it */
  pointer-events: none;
}

.obnBrandBadge.on { display: grid }

/* On a phone it clears the tab bar, and the now-playing dock when that is up. */
html.obn-phone .obnBrandBadge {
  width: 52px !important;
  height: 52px !important;
  bottom: calc(var(--obnTabsH, 0px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
}
html.obn-phone body.obnNpDocked .obnBrandBadge {
  bottom: calc(var(--obnTabsH, 0px) + 70px + env(safe-area-inset-bottom, 0px)) !important;
}

/* On the full-screen player the mark becomes a WATERMARK: large, centred and
   faint, instead of a small badge in the corner.
 *
 * It was 42px and quiet here precisely because the player has its own disc as
 * the hero and two spinning marks competed. Centring it only works because it
 * is faint enough to read as a backdrop rather than a second subject — the
 * opacity is doing as much work as the size, and raising one without lowering
 * the other brings the competition straight back.
 *
 * `bottom: auto` is required: the phone rules above set `bottom` with
 * !important to clear the tab bar, and without clearing it the badge is
 * anchored top AND bottom and stretches instead of centring.
 *
 * It stays pointer-events: none, so however large it gets it never takes a tap
 * meant for the controls underneath it. */
html.obn-phone .nowFab.full ~ .obnBrandBadge,
html.obn-phone body.obnHasNpFull .obnBrandBadge {
  width: min(66vw, 320px) !important;
  height: min(66vw, 320px) !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%);
  opacity: .16;
}

/* Reduce Motion: polish.css already stills every animation in the app, so the
   ring holds its position here rather than spinning. Nothing is lost — the
   mark is the brand, the rotation is decoration. */
@media (prefers-reduced-motion: reduce) {
  .obnBrandBadge svg.obnPinText { animation: none !important }
}