/* OnlyBoosts booster dot.
 *
 * The small blue mark in the top-right of an avatar meaning "this person has a
 * page on OnlyBoosts, so clicking opens it instead of copying their npub".
 * Attached by addBoosterDot() in assets/js/onlyboosts.js.
 *
 * ⚠️ DELIBERATELY SMALL, and sized as a share of the avatar rather than fixed.
 * The avatars this lands on run from 26px (article bylines) to 104px (featured
 * supporter tiles), so a fixed size is either invisible on one end or a badge
 * on the other. The ceiling is 9px, which is what the green wallet-connected
 * dot measures on the 28px nav avatar — that dot is the reference for how loud
 * this is allowed to be, and this should never exceed it.
 *
 * The OnlyBoosts favicon was the other candidate and does not survive the
 * scale: the mark is an ostrich head plus three broadcast arcs, which at 8px
 * on an article byline is a smudge rather than a logo.
 */

.ob-has-dot {
  /* The dot positions against the avatar, so the avatar must be a containing
     block. Several of these (.sup-avatar, .people-avatar) are plain spans that
     were never positioned. */
  position: relative;
  overflow: visible;
}

/* ⚠️ THE OVERFLOW OVERRIDE ABOVE HAS A PRICE, and this rule is what pays it.
   .sup-avatar and .people-avatar are `border-radius: 50%` plus
   `overflow: hidden`, and that overflow is what clips their <img> into a
   circle — the image itself is a square filling the box at object-fit: cover.
   Setting overflow: visible so the dot can sit outside the avatar also lets the
   image out, and every supporter with a profile picture renders as a square.
   Re-clipping the image on its own box restores the circle without re-trapping
   the dot. `inherit` rather than 50% so this holds for any avatar shape. */
.ob-has-dot > img {
  border-radius: inherit;
}

/* For avatars that cannot hold the dot themselves — see wrapWithDot(). Sized
   by its content so the dot's percentage still resolves against the avatar. */
.ob-dot-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.ob-dot {
  position: absolute;
  /* ⚠️ THE DOT'S CENTRE SITS ON THE CIRCLE, at the bottom-right 45° point. Not
     at the corner of the square box, and not tucked fully inside. Both of those
     were tried and both were wrong, in opposite directions:
       top/right: 0     → centre lands at ~129% of the radius. Fine at 26px,
                          where the overhang is a few px, but on a 104px tile
                          the dot floats free of the avatar entirely.
       inset 14%        → centre at ~89%, reading as a sticker dropped onto the
                          photo rather than a badge belonging to the avatar.
     Measured from shipped implementations, the centre belongs on the edge:
     shadcn/ui puts it at 97% of the radius, MUI at 85%, Chakra at 113%. The
     45° point is 100%, and it is what `left/top: 85.36%` plus a -50% translate
     produces — 0.5 + 0.5/√2 = 0.8536 on each axis puts the centre exactly one
     radius from the middle. Size-independent, so it holds for any dot diameter
     and any avatar from 18px to 104px without a per-surface value.

     Bottom-right rather than top-right because that is where every design
     system that ships an identity or presence marker puts it. */
  left: 85.36%;
  top: 85.36%;
  transform: translate(-50%, -50%);
  /* Percentages resolve against the avatar. 26% keeps it proportional in the
     middle of the range; the clamp stops it from vanishing on a 26px byline or
     growing into a badge on a 104px tile. */
  width: clamp(6px, 26%, 9px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #00aff0; /* OnlyBoosts --brand, the same blue as its theme-color */
  /* A ring in the surface behind it, so the dot reads as a mark ON the avatar
     rather than a blue pixel IN the photo. Surfaces on a non-cream background
     override --ob-dot-ring rather than restyling the dot. */
  box-shadow: 0 0 0 1.5px var(--ob-dot-ring, var(--cream, #fff));
  pointer-events: none;
}

/* Controls that link out rather than copy.
 *
 * Every one of these was a <button> before this feature and is styled as one by
 * its own sheet. The <a> form has to inherit that styling rather than pick up
 * the browser's default blue-and-underlined link treatment, which would make
 * the same control look like two different things depending on whether the
 * person happens to have boosted a podcast. Color and decoration only — the
 * layout, padding and hover all still come from the original rules.
 */
a.sup-card,
a.people-card,
a.author-id,
a.featured-by,
a.pcast-boost-name,
a.art-featured-by,
a.art-byline-name,
a.art-reader-name,
a.merch-npub-chip {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* .sup-card and .people-card set their own color as buttons; inherit would
   pull the surrounding text color instead. */
a.sup-card,
a.people-card {
  color: var(--text);
}