/* Badge overflow: a short list, then a "+N" chip whose tail opens on hover and
   on focus.

   MOVED OUT OF blocks/toplist/style.css ON 2026-09-04, because the markup had
   already moved. Render\Badges became shared in #164 and two blocks now emit
   `.pfg-badges`, but these rules stayed behind in the toplist stylesheet — so in
   the review panel the "+N" chip AND its concealed tail both rendered, which is
   the one thing the component exists to prevent. Extracting the PHP without its
   CSS is what caused it; they ship together now.

   Loaded as the shared `pfg-badges` handle. Any block emitting Render\Badges
   output must declare it in block.json or it will show the same bug. */

.pfg-metric__chips {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

/* ---- Badge overflow ----

   A "+N" chip standing in for the tail of a badge list, and a panel that shows
   the tail on hover and on focus. Markup from FirmRow::badge_list().

   NOT ONE LINE OF SCRIPT. The reveal is `:hover` and `:focus-within`, which is
   why the chip carries `tabindex` in the markup: a keyboard reaches exactly the
   reveal a mouse does, a tap focuses it on touch, and with scripting off all
   three still work. The panel is hidden by `opacity`, never `display: none`,
   so it never reflows the row when it appears.

   The panel is NOT how a screen reader learns the hidden names — it is
   `aria-hidden`, and the chip carries them as a sentence instead. Nothing here
   puts a fact behind an interaction. */
.pfg-badges__more {
	/* The stand-off between the chip and the panel above it, and the height of
	   the bridge that spans it. One value, two rules that must agree. */
	--pfg-badges-gap: 8px;

	position: relative;
	display: inline-flex;
}

/* NEUTRAL, DELIBERATELY. The pattern this was drawn from paints the overflow
   chip orange. Accent on this site belongs to the price, the grade seal, the
   CTA, the coupon pill, the active pill and a market's colour dot, and an
   overflow chip is none of those — a coloured one would read as a signal about
   the firm. So it is an OUTLINE of a pill: the same size and radius as the
   badges it stands for, hairline instead of fill. Solid, not dashed: dashed is
   the coupon motif and the research-in-progress chip, and a third meaning on
   the same edge would flatten both.

   Scoped through `.pfg-badges` for WEIGHT, not for meaning: `.pfg-chip` fills
   itself from primitives.css, which loads after this file, so a bare
   `.pfg-chip--more` would lose the unfill on equal specificity and the chip
   would come out solid. */
.pfg-badges .pfg-chip--more {
	/* `.pfg-chip` is content-box and pins `height: 22px`, so a border added to
	   it would stand 24px against 22px pills. */
	box-sizing: border-box;
	height: 22px;
	background: transparent;
	border: 1px solid var(--border-2, rgba(255, 255, 255, 0.07));
	color: var(--text-3, #979CAD);
	font-variant-numeric: tabular-nums;
}

/* The row's hover language: a hairline brightening. No lift, no fill, no glow. */
.pfg-badges .pfg-chip--more:hover,
.pfg-badges__more:focus-within .pfg-chip--more {
	border-color: var(--border-strong, rgba(255, 255, 255, 0.16));
	color: var(--text-2, #C6CBDD);
}

.pfg-badges .pfg-chip--more:focus-visible {
	outline: 2px solid var(--acc, #A79FFF);
	outline-offset: 2px;
}

/* Above the chip, not below: the badges sit on the row's LAST line, so a panel
   underneath would open over the grade strip and off the bottom of a row near
   the fold. Above, it opens over the firm's own name inside the same card.

   SURFACE AND REVEAL ARE THE NAV FLYOUT'S, NOT NEW ONES. `.pfg-nav__panel`
   already floats a CSS-only `:hover`/`:focus-within` panel on this site, and it
   goes DARKER than what it covers — surface-1 over the row's surface-4 — with a
   `--grid-line` edge. Copying it means one floating-panel idiom rather than
   two. What is deliberately NOT copied is the nav's `box-shadow`: this design
   separates with borders, and a hairline against a darker fill already does it.

   `visibility`, not `display`, so the panel never reflows the row when it
   opens, and so a closed one takes no pointer events and no find-in-page hit. */
.pfg-badges__panel {
	position: absolute;
	bottom: calc(100% + var(--pfg-badges-gap));
	left: 0;
	z-index: 4;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	width: max-content;
	max-width: 240px;
	padding: 8px;
	border: 1px solid var(--wp--preset--color--grid-line, #2A3040);
	border-radius: 14px;
	background: var(--surface-1, #14171E);
	opacity: 0;
	visibility: hidden;
	transition: opacity 130ms ease, visibility 130ms;
}

/* THE HOVER BRIDGE, for the same reason the nav needs one. The panel stands off
   the chip by a gap; a pointer travelling from one to the other crosses it, and
   the gap belongs to neither box, so `__more:hover` would go false mid-journey
   and shut the panel just as the pointer arrived. The band is a child of the
   PANEL, which is a descendant of `__more`, so hovering it keeps `__more`
   hovered. It costs nothing when closed: a `visibility: hidden` panel takes no
   pointer events, so this exists only while the panel is open. */
.pfg-badges__panel::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: var(--pfg-badges-gap);
}

.pfg-badges__more:hover .pfg-badges__panel,
.pfg-badges__more:focus-within .pfg-badges__panel {
	opacity: 1;
	visibility: visible;
}

/* ESCAPE CLOSES IT. WCAG 2.2 SC 1.4.13 wants content shown on hover or focus
   to be Hoverable, Persistent AND DISMISSIBLE. The bridge above buys the
   first, `visibility` buys the second, and neither one can hear a key — so
   this panel had no Escape at all, and the criterion's "does not obscure"
   exception does not apply to it: it is `z-index: 4` over the firm name in
   the row above.

   `assets/js/hover-dismiss.js` stamps the attribute WITHOUT moving hover or
   focus, which is the requirement stated precisely; the rule below is the
   whole of the CSS half. It is placed after the reveal and matches at equal
   specificity (0,3,0), so source order decides and closed wins over open.

   The attribute is cleared when the pointer or focus genuinely leaves, so a
   dismissed panel is dismissed for this visit to the chip, not for the page.
   With scripting off nothing sets it and the reveal is untouched. */
.pfg-badges__more[data-pfg-dismissed] .pfg-badges__panel {
	opacity: 0;
	visibility: hidden;
}

/* THE LAST METRIC COLUMN OPENS LEFTWARD.

@media (prefers-reduced-motion: reduce) {
	.pfg-badges__panel {
		transition: none;
	}
}