/* MiR-Pool — every circular badge with a glyph in it, centred once.
   ------------------------------------------------------------------------
   WHAT WENT WRONG LAST TIME, SO IT DOES NOT AGAIN

   The previous version of this file called itself "the one crest rule" and was
   nothing of the kind. It covered ONE family -- team crests, the ones with a
   letter in them -- and then local centring was stripped from everything whose
   name looked crest-ish. .rr-lead is the rank badge: a NUMBER in a disc, from a
   different component, and it was stripped without being covered. Its 1, 2 and
   3 fell to the top-left corner of their circles. That is a worse bug than the
   one being fixed, and it shipped.

   The lesson is not "be more careful". It is that removing a local rule is only
   safe if the shared rule provably covers the element, so this file now lists
   every circular glyph family in the app, and a test resolves the cascade for
   each of them rather than trusting the list to be complete.

   THREE FAMILIES, ONE PROBLEM
     team crests    a letter in a coloured disc
     rank badges    a number in a disc
     avatars        a letter, or a photograph
   All three centre a glyph in a circle, so all three want the same contract.

   WHY THE GLYPH SITS HIGH WITHOUT IT
   A capital or a digit occupies a glyph box that reserves room for a descender
   it does not have. Centre the box and you have centred the box, not the mark,
   so it floats above the middle. line-height:1 collapses the box to the mark,
   grid centres what is left, and padding-top adds the last fraction -- in EM,
   because a pixel that is right on a 58px hero crest is four times too much on
   a 17px ticker crest. */

/* WHAT THIS RULE OWNS, AND WHAT IT MUST NOT
   It owns CENTRING. It does not own size, shape or colour, and the temptation
   to add them is a trap: .crest is a 34px squircle on the admin page and a 26px
   squircle on the hub, so a shared `border-radius:50%` would round off two
   deliberate designs. It survives today only because those pages load this file
   before their own <style> -- coupling this file to a line number in eight other
   files. Centring a glyph is the same job in a circle or a rounded square, so
   this rule does that job and leaves the geometry where it belongs: on the page.

   And it claims only names that mean ONE thing app-wide. .badge is a 42px medal
   on the dashboard and a stat card on the player page; .wl is a 26px disc on one
   page and bare bold text on another. Claiming those would collapse the other
   component -- the .rr-lead failure inverted, a component captured rather than
   left behind. Ambiguous names opt in by wearing .crest-centred in the markup. */
.crest-centred,
/* ---- team crests: a letter ---- */
.crest, .crestly, .tcrest, .pcrest, .h-crest, .rcrest, .crestlogo,
.hero-crest, .mcrest, .bm-crest, .crestchip .crest, .dgroup .crest,
/* ---- rank badges: a number ---- */
.rr-lead, .srank, .medal,
/* ---- avatars: a letter or a picture ---- */
.pav, .mav, .avatar, .profilebtn {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  /* THE NUDGE, AND WHY IT IS THE OTHER WAY UP NOW
     The old value was padding-top:.055em, on the usual reasoning that capitals
     sit high. Measured against SF's actual metrics that reasoning is backwards
     for this font: ascent+descent comes to 1.21em, so with line-height:1 the
     baseline lands low in the line box and a capital's ink sits BELOW centre by
     about .037em. The old rule then pushed it further down.

     It went unnoticed while font-size was a fixed rem, because the error is a
     fraction of the FONT size and the font never grew. Tie font-size to the
     diameter -- which is the only way a crest centres at every size -- and the
     error grows with the circle: +0.30px at 24px, +0.99px at 40px, +2.61px at
     90px. Small crests fine, hero crest visibly out. Hence padding-BOTTOM: with
     border-box and centred content, bottom padding lifts the glyph by half its
     value, and in em so it tracks the font at every size. One variable, so it
     is one line to retune. */
  padding-bottom: var(--crest-nudge, .074em);
  box-sizing: border-box;
  /* a photograph is set to fill the disc, so the disc has to clip it; only .pav,
     .mav and .profilebtn do that for themselves, and .crest, .tcrest, .h-crest,
     .hero-crest, .rcrest and .mcrest would all leak a square photo without it */
  overflow: hidden;
  /* NOT font-variant-numeric. The previous version forced `normal` here, which
     is a numeral decision, and .rr-lead deliberately asks for tabular-nums so a
     rank column lines up. It works today only because rows.css happens to load
     after this file on both pages that use it -- a coin-flip this rule has no
     business entering. Centring is what this owns; numerals belong to the
     component that has an opinion about them. */
}

/* A photograph has no baseline and wants none of the optical nudge: the padding
   would both shrink the box it fills and shift it. Neutralised on the container,
   so the picture gets the whole disc. */
.crest-centred:has(img),
.crest:has(img), .crestly:has(img), .tcrest:has(img), .pcrest:has(img),
.h-crest:has(img), .rcrest:has(img), .crestlogo:has(img), .hero-crest:has(img),
.mcrest:has(img), .rr-lead:has(img), .pav:has(img), .mav:has(img),
.avatar:has(img), .profilebtn:has(img) {
  padding-bottom: 0;
}

/* A picture fills its disc and wants none of the glyph's centring. */
.crest-centred > img,
.crest > img, .crestly > img, .tcrest > img, .pcrest > img, .h-crest > img,
.rcrest > img, .crestlogo > img, .hero-crest > img, .mcrest > img,
.rr-lead > img, .pav > img, .mav > img, .avatar > img, .profilebtn > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- opt-in sizing: one number, everything else derived -------------------
   A crest that sets --crest-size gets its diameter AND its font from that one
   number, so the glyph is always the same fraction of the circle. This is what
   makes it centre at every size rather than at the sizes somebody checked:
   .h-crest used to say width:46px with font-size:1.05rem, and then 58px with
   1.25rem in a media query -- two independent numbers whose ratio drifted from
   .365 to .345, and would have gone to .22 at 90px.

   It stays OPT-IN. The blanket rule above must never set width or border-radius,
   because .crest is a 34px squircle on the admin page and a 26px one on the hub;
   claiming geometry app-wide is what nearly rounded off two deliberate designs.
   Set --crest-size where you want this; everywhere else keeps its own sizing. */
.crest-sized {
  width: var(--crest-size);
  height: var(--crest-size);
  flex: none;
  border-radius: 50%;
  font-size: calc(var(--crest-size) * var(--crest-ratio, .45));
}

/* An emoji or an SVG is not a letter. The nudge above corrects for cap-height --
   the empty band a capital reserves for a descender it has not got -- and an
   emoji has no such band, so nudging it just pushes it low. These discs take the
   centring and decline the correction. */
.ic, .clearq, .ball-pin, .ball .pip {
  display: grid;
  place-items: center;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
}