/* ============================================================================
   MLNF identity — class ring + badge, layered ONTO the existing MLNFAvatar
   helper (js/avatar-helper.js) rather than replacing it.

   Prefix is `mlnfid-`, NOT `mlnf-`: styles.css already owns .mlnf-name and
   .mlnf-avatar, and a collision there silently painted every username gold
   (`[data-theme="dark"] .mlnf-name` beat a bare `.mlnf-name`). Renaming is the
   root fix; escalating specificity would only have won the argument.

   Theme binds to [data-theme] because header.js sets that attribute. A
   prefers-color-scheme query does NOT track the site's own toggle.
   ========================================================================= */

.mlnfid{
  --c:#78868E;
  --collar:#0D1319;
  position:relative; display:inline-block; flex:none;
  width:var(--mlnfid-size,40px); height:var(--mlnfid-size,40px);
  vertical-align:middle;
}
/* the helper's own <img>/fallback sits inside untouched */
.mlnfid > .mlnf-avatar{width:100%!important;height:100%!important}

.mlnfid::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:calc(var(--mlnfid-size,40px)*.045) solid var(--c);
  pointer-events:none; z-index:1;
}
/* badge paints ABOVE the ring: ::after is generated last and otherwise covers it */
.mlnfid-badge{
  position:absolute;
  right:calc(var(--mlnfid-size,40px)*-.13);
  bottom:calc(var(--mlnfid-size,40px)*-.13);
  width:calc(var(--mlnfid-size,40px)*.56);
  height:calc(var(--mlnfid-size,40px)*.56);
  display:grid; place-items:center; z-index:2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.mlnfid-badge svg{
  width:100%; height:100%;
  fill:var(--c);            /* chip body   — inherits through <use> */
  stroke:var(--collar);     /* collar + knocked-out mark */
  stroke-linecap:round; stroke-linejoin:round;
}

/* Ring-only variant. Decorates an element that ALREADY owns its size and
   shape - the header avatar circle, Raven chat avatars, anything the page
   sized itself. Sets no width/height, so the host box is untouched; only the
   ring is painted. Pair it with a class: `class="mlnfid-ring mlnfid-hall"`.
   Without this, applying `.mlnfid` to an existing circle would force
   var(--mlnfid-size) onto it and collapse the layout.

   Ring weight is a var so small hosts can thin it: the sized `.mlnfid` derives
   its border from --mlnfid-size (.045x), but a ring-only host has no size to
   read, so 2px is the default and a 20px avatar overrides --mlnfid-ring-w. */
.mlnfid-ring{position:relative}
.mlnfid-ring::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:var(--mlnfid-ring-w,2px) solid var(--c,#78868E);
  pointer-events:none; z-index:1;
}
.mlnfid-ring.mlnfid-hall::after{box-shadow:0 0 6px rgba(212,175,55,.5)}

/* username: own class, no collision with the site's .mlnf-name */
a.mlnfid-name, span.mlnfid-name{
  display:inline-flex; align-items:center; gap:5px;
  font-weight:600; text-decoration:none; color:var(--c);
}
a.mlnfid-name:hover{text-decoration:underline; color:var(--c)}
.mlnfid-name svg{width:14px;height:14px;flex:none;color:var(--c)}

/* Standalone glyph — what renderAdminBadge() now emits. Sits after a username
   that some other renderer printed, so it carries its own spacing and must not
   inherit that renderer's font-size for the mark. */
.mlnfid-glyph{
  display:inline-flex; align-items:center; vertical-align:middle;
  margin-left:5px; color:var(--c);
}
.mlnfid-glyph svg{width:14px;height:14px;flex:none;color:var(--c)}

/* ── classes ───────────────────────────────────────────────────────────── */
.mlnfid-hall     {--c:#D4AF37}
.mlnfid-mod      {--c:#B08D57}   /* worn bronze — reads as hall-adjacent
                                    authority without competing with the gold */
.mlnfid-raven    {--c:#7E6FA8}   /* indigo — was #7C8A93, a grey within 4 points
                                    of Bondi's #78868E. Once Bondi's ring became
                                    visible, a bot and a plain member differed only
                                    by the chip. A bot should not read as a quiet
                                    person; indigo sits outside the whole tier
                                    family (gold/bronze/green/orange/steel) so it
                                    reads as "not a member" rather than "rank 0". */
.mlnfid-warrior  {--c:#C77B33}
.mlnfid-champion {--c:#9FB3C4}
.mlnfid-jarl     {--c:#8FBF6A}   /* weld green — kept OFF the gold family so a
                                    Jarl is never mistaken for a Hallbuilder */
.mlnfid-bondi    {--c:#78868E}

.mlnfid-bondi .mlnfid-badge{display:none}

/* Bóndi's ring is the quietest in the palette, but it still has to be SEEN —
   the point of decorating plain members is that the class system describes
   everyone. The old value (a fixed rgba(128,140,150,.32), theme-blind) painted
   a 1px border at 32% alpha: measured against a 32px avatar it moved the pixel
   by ~20/255 in one channel, i.e. nothing you can see, and it stayed invisible
   at 96px and in light theme too. Keep it recessive by using the class's own
   low-chroma grey, not by dissolving it. */
.mlnfid-bondi{--ring-c:rgba(140,152,162,.8)}
[data-theme="light"] .mlnfid-bondi{--ring-c:rgba(95,107,114,.7)}
.mlnfid.mlnfid-bondi::after,
.mlnfid-ring.mlnfid-bondi::after{border-color:var(--ring-c)}

/* exactly one class carries light */
.mlnfid.mlnfid-hall::after{
  box-shadow:0 0 calc(var(--mlnfid-size,40px)*.16) rgba(212,175,55,.5);
}

/* ── light theme: the site sets data-theme, so bind to it ─────────────── */
[data-theme="light"] .mlnfid{--collar:#F8F4E3}
[data-theme="light"] .mlnfid-hall     {--c:#8A6D18}
[data-theme="light"] .mlnfid-mod      {--c:#7A5C2E}
[data-theme="light"] .mlnfid-raven    {--c:#544878}
[data-theme="light"] .mlnfid-warrior  {--c:#8A5A26}
[data-theme="light"] .mlnfid-champion {--c:#5E7183}
[data-theme="light"] .mlnfid-jarl     {--c:#4C7A2E}
[data-theme="light"] .mlnfid-bondi    {--c:#5F6B72}

/* ── always-dark surfaces ──────────────────────────────────────────────
   The light-theme block above assumes the class sits on a surface that
   follows the site theme. A few do NOT: the Great Hall poster scrim
   (rgba(8,12,20,.94)), the stream-card placeholder (#1a1a2e→#0f3460) and
   the live fleet medallion (#0d1117→#0f3460) are hard-coded dark in BOTH
   themes. On those, swapping --c to the dark-on-light palette puts a dark
   mark on a dark background — Bóndi lands around 2.5:1, dimmer than the
   always-gold border it replaced.

   Scoped to the containers rather than tagged per element on purpose: the
   marquee's mark is emitted by MLNFIdentity.glyph(), whose class list isn't
   reachable from the call site, and the stream-card helper feeds BOTH the
   always-dark placeholder and the theme-following card avatar from one value.
   Container scoping catches every descendant without touching either.

   Two classes beat the single-class light override on specificity, so these
   win in light theme without !important. Add a container here if you build
   another surface that stays dark in both themes. */
[data-theme="light"] :is(.gh-poster-scrim,.stream-card-placeholder,.avatar-medallion) .mlnfid-hall     {--c:#D4AF37}
[data-theme="light"] :is(.gh-poster-scrim,.stream-card-placeholder,.avatar-medallion) .mlnfid-mod      {--c:#B08D57}
[data-theme="light"] :is(.gh-poster-scrim,.stream-card-placeholder,.avatar-medallion) .mlnfid-raven    {--c:#7E6FA8}
[data-theme="light"] :is(.gh-poster-scrim,.stream-card-placeholder,.avatar-medallion) .mlnfid-warrior  {--c:#C77B33}
[data-theme="light"] :is(.gh-poster-scrim,.stream-card-placeholder,.avatar-medallion) .mlnfid-champion {--c:#9FB3C4}
[data-theme="light"] :is(.gh-poster-scrim,.stream-card-placeholder,.avatar-medallion) .mlnfid-jarl     {--c:#8FBF6A}
[data-theme="light"] :is(.gh-poster-scrim,.stream-card-placeholder,.avatar-medallion) .mlnfid-bondi    {--c:#8C98A2}