/* Artwork in the containers the emoji used to sit in.

   Every one of those containers — .wsw-em, .lib-e, .hub-ic, .nav-emoji, .ye,
   .gp-glyph — is a tinted, rounded, bordered box built to give a bare character
   some presence. The artwork does not need that: each icon already carries its
   own ground and its own circle, and a circle inside a tinted rounded square
   reads as two containers rather than one. So where an icon replaces a glyph,
   the box gets out of its way. */

/* ⚠️ SIZED OFF THE FONT BY DEFAULT, not off the box.
   Half of these containers set a font-size and no width — .ye is 16px of text
   and nothing else — so `width: 100%` resolved against nothing and the image
   fell back to its intrinsic 128px. That is how a 22px row icon rendered three
   hundred pixels tall in the practices year list. An em-based default cannot do
   that, and it means a container wired later gets a text-sized icon rather than
   a poster. The fixed-size boxes opt into filling, below. */
.uaf-ico {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  object-fit: contain;
  vertical-align: -0.3em;
}

/* The boxes that DO have a size: fill them. */
.wsw-em > .uaf-ico,
.lib-e > .uaf-ico,
.hub-ic > .uaf-ico,
.nav-emoji > .uaf-ico,
.nav-icn > .uaf-ico {
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: baseline;
}

/* Drop the tint where artwork replaces a glyph. */
/* .nav-icn is the ☰ menu's Members Home box — a tinted rounded square built
   for a stroked 18px SVG, and white on the primary row. The artwork brings its
   own ground, so both go. */
.wsw-em:has(.uaf-ico),
.lib-e:has(.uaf-ico),
.hub-ic:has(.uaf-ico),
.nav-icn:has(.uaf-ico),
.nav-item.primary .nav-icn:has(.uaf-ico) {
  background: transparent;
  border-color: transparent;
}
.lib-e:has(.uaf-ico) { padding: 2px; }
.hub-ic:has(.uaf-ico) { padding: 1px; }

/* ── Past and locked ──────────────────────────────────────────────────────
   `filter: grayscale(1)` was written for emoji, which are loud and needed
   quietening once a practice had run. The artwork is already earthy and muted,
   and greyscale on it removes the only thing that identifies it — a grey drop
   and a grey circle are the same picture. Past and locked still read as such:
   the label is muted, the RAN pill is right there, and a locked row carries a
   padlock. Opacity alone carries it. */
.yr-item.past .ye:has(.uaf-ico) { filter: none; opacity: .8; }
.nav-item.locked .nav-emoji:has(.uaf-ico) { filter: none; opacity: .55; }
.hub-card.locked .hub-ic:has(.uaf-ico) { filter: none; opacity: .6; }


/* A member's Growth Group history row in the directory console. 26px wide and
   no height, so the em default (28px at its 20px font) would overhang. */
#tab-directory .hist-glyph .uaf-ico { width: 24px; height: 24px; }

/* An icon standing in for an emoji inside a line of text — the eyebrow on a
   practice page. Slightly tighter than the default so it sits on the line. */
.uaf-ico.inline {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.28em;
  margin-right: 2px;
}


/* ── A program icon beside its name ───────────────────────────────────────
   The glyph these replace was a text node inside the label, so the row has to
   keep the height and baseline it had. inline-flex on the pair rather than
   flex on the container: the container is often a block whose width other
   things depend on, and this only has to hold two items together. 6px is the
   gap for 16-20px icons; 8px from 24px up. */
.uaf-prog {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: baseline;
  /* ⚠️ The row used to be as tall as an EMOJI's line box, which is taller than
     the latin text beside it — removing the glyph shortened every one of these
     rows by a pixel. 1.3 restores that line box from the text rather than from
     a hard-coded height, so it holds at any font size and on any platform,
     which a magic pixel would not. */
  line-height: 1.3;
}
.uaf-prog > .ic { flex: none; }

/* The shared icon contract: equal width and height, never cropped or
   auto-fitted. The art carries its own internal padding so the set sits at one
   optical size, and `contain` is what preserves that. */
.ic {
  object-fit: contain;
  flex: none;
  display: block;
}


/* ── A label that had its icon painted in ─────────────────────────────────
   data-icon declares the role in the markup and the painter prepends the
   image, so the element ends up holding an <img> followed by its text — the
   same shape the emoji text node used to make, and it needs the same gap the
   glyph's trailing space used to provide. 6px at 16-20px icons, 8px from 24
   up; these labels are all 14-20. */
[data-icon-done] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
[data-icon-done] > .ic { flex: none; }