/**
 * Block primitives shared across the product blocks: chips, logo tiles, pills,
 * the non-canonical badge, the disclosure line and the disabled treatment for
 * controls that have no data behind them yet.
 *
 * Every token reference carries a literal fallback, so a theme switch degrades
 * to less pretty rather than to unreadable.
 */

/* ---- Visually hidden ----
   ONE utility for content that must exist for crawlers and assistive tech but
   not on screen: table captions and column headers the design communicates
   through per-cell labels instead, skip links, live regions. Two block-scoped
   copies of this rule existed before (review-breadcrumbs, the Customize
   modal); this is the shared one they should collapse into.

   Not `display: none` and not `visibility: hidden` — both remove the content
   from the accessibility tree, which is the opposite of the intent. */
.pfg-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* A skip link is hidden until focused, then must be visible and on-screen. */
.pfg-sr--focusable:focus,
.pfg-sr--focusable:focus-visible {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 200;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	border-radius: 10px;
	background: var(--surface-1, #14171E);
	border: 1px solid var(--acc, #B14BFF);
	color: var(--text-1, #F2F3F8);
	font-size: 14px;
	text-decoration: none;
}

/* ---- Chips ---- */

.pfg-chip {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 9px;
	border-radius: 8px;
	background: var(--surface-chip, #262C3B);
	color: var(--text-2, #C6CBDD);
	font-size: clamp(11.5px, 0.66vw, 13.5px);
	font-weight: 400;
	white-space: nowrap;
}

.pfg-chip--step {
	border-radius: 8px;
}

/*
 * Shown only when a row has no facts at all — no price, no platforms, no
 * allocation, no instruments, no operating year. Without it the reader gets a
 * name over four blank columns, which reads as a page that failed to load
 * rather than research that has not been done yet.
 *
 * Deliberately quieter than every other chip: dashed, unfilled, muted, italic.
 * It is a statement about US and not a judgement of the firm, so it must never
 * compete with the grade — which is the one thing on this row that IS one.
 */
.pfg-chip--early {
	background: transparent;
	border: 1px dashed var(--border-2, #38405A);
	color: var(--text-3, #979CAD);
	font-style: italic;
}

.pfg-metric__chips .pfg-chip {
	height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: clamp(11px, 0.63vw, 13px);
}

.pfg-count {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	height: 22px;
	padding: 0 7px;
	border-radius: 8px;
	background: var(--surface-chip, #262C3B);
	color: var(--text-1, #F2F3F8);
	font-size: clamp(11.5px, 0.66vw, 13.5px);
	font-weight: 700;
}

/* ---- Logo tile / monogram ----
   The design resolves the tile to an 'AP' monogram rather than an image, which
   confirms text monograms are a first-class fallback and not a placeholder. The
   hue is derived from the slug, so a firm keeps the same tile forever without
   anyone storing one. */

.pfg-tile {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 11px;
	background: hsl(var(--pfg-tile-hue, 250) 42% 46%);
	color: #FFF;
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.01em;
	border: 0;
}

/* Canonical logo variant: the importer-materialized SVG replaces the monogram.
   Logos are white-on-transparent official marks, so the tile keeps a neutral
   dark surface instead of the slug hue. */
.pfg-tile--logo {
	background: var(--surface-chip, #262C3B);
	padding: 5px;
}

.pfg-tile__logo {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

/* Square mark variant: the tile stops being a frame and becomes a full-bleed
   slot for the mark.

   A WORDMARK NEEDS THE PADDING; A MARK IS BROKEN BY IT. A logo is a wide
   transparent asset, so 5px of the tile's own surface around it reads as
   breathing room. A mark is a square asset the same shape as the tile, and it
   MAY carry its own opaque background — the owner's alphafutures mark opens
   with a full-bleed <rect fill="#1E1E1E">. Contained inside 5px of padding
   that becomes a hard-edged 34px square of one dark floating inside a rounded
   44px tile of a slightly different dark, with the tile's colour showing as a
   ring around it.

   THE PADDING IS ESCAPED, NOT REMOVED. Setting `padding: 0` here was the
   obvious fix and it was wrong: these tiles are content-box, so the declared
   34px is the CONTENT box and the toplist row tile measures 44x44 on screen.
   Dropping the padding dropped the tile to 34x34 — a marked row sitting 10px
   smaller than every unmarked row beside it. Measured, not reasoned about.
   An absolutely positioned child resolves `inset: 0` against its containing
   block's PADDING box, which for a border-less tile is the full 44x44, so the
   mark covers the padding while the tile keeps the geometry it always had.

   CONTAIN, NOT COVER — owner's ruling, 2026-08-27, and the reasoning matters
   because `cover` is the tempting choice. On a square mark the two are
   identical: it fills the square slot either way. They differ only on a mark
   that is NOT square, and nothing in the data contract guarantees squareness —
   propfirmgrade-data has no aspect check anywhere, so a canonical release can
   legitimately carry a 3:1 mark. `cover` would centre-crop it into a
   plausible-looking tile that is silently wrong. `contain` letterboxes it
   loudly. A visible failure beats an invisible one, so the wrong asset
   announces itself instead of quietly showing a firm's logo cropped to its
   middle third. Switching back is one declaration here and one in
   review-context/style.css.

   THE TILE KEEPS ITS OWN BACKGROUND, and that is load-bearing rather than
   incidental. A mark MAY be opaque but is not required to be — the data side
   permits a transparent one and enforces nothing — so the tile surface is what
   a transparent mark's glyph sits on. Suppressing it would render white paths
   onto whatever card is behind the tile. On an opaque mark the background is
   simply never seen, and on a non-square one it is what makes the letterbox
   read as a letterbox inside a tile rather than a hole punched through it.

   Optical margin belongs in the ASSET, not here: alphafutures' glyph runs
   8..91 inside its 0..100 box, which is its own breathing room and travels
   with it.

   :has() is the house pattern (review-tabs, toplist, nav). Without it the tile
   is not positioned, the mark stays in flow inside the 5px, and it renders as
   a slightly inset square — the old letterbox, at the right tile size, not a
   broken layout. */
.pfg-tile:has(.pfg-tile__mark),
.pfg-rv-tile:has(.pfg-tile__mark) {
	position: relative;
}

/* A MARK THAT BRINGS ITS OWN GROUND GETS NO TILE SURFACE UNDER IT.

   `.pfg-tile` paints an unconditional hue, and three marks are ROUNDER than
   the tile's 32.4% radius — tradeify and trade-the-pool are circles at 50%,
   city-traders-imperium is 45.7%. The hue then shows through the corners as a
   thin arc, which reads as a rendering fault because it is one.

   `overflow: hidden` is NOT the fix and was the first thing proposed:
   `.pfg-tile__mark` already has `border-radius: inherit`, so the image is
   already clipped. Nothing overflows. Something is underneath.

   Only a MEASURED self-grounded mark qualifies — mark_background = '' in the
   read model, meaning somebody looked and the artwork is opaque to its own
   edges. An unmeasured firm keeps its surface, because removing it from a
   transparent mark would leave the glyph floating on the page. data#469. */
.pfg-tile:has(.pfg-tile__mark--selfground),
.pfg-rv-tile:has(.pfg-tile__mark--selfground) {
	background: transparent;
}

.pfg-tile__mark {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	border-radius: inherit;
}

/* ---- Non-canonical badge ---- */

.pfg-badge--mock {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 7px;
	border-radius: 6px;
	background: rgba(240, 185, 11, 0.16);
	border: 1px solid rgba(240, 185, 11, 0.4);
	color: var(--warning, #F0B90B);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

/* ---- Disclosure ---- */

.pfg-disclosure {
	margin: 12px 0 0;
	font-size: clamp(11.5px, 0.66vw, 13px);
	line-height: 1.5;
	color: var(--text-4, #838A9D);
}

/* ---- Controls with no data behind them yet ----
   Rendered outside production so the design's shape stays reviewable, never
   rendered inside it. The cursor and opacity say "not yet", and every one of
   them carries a title explaining which field it is waiting on. */

.pfg-unbacked,
.pfg-row__fav[disabled],
.pfg-fbar button[disabled] {
	opacity: 0.42;
	cursor: not-allowed;
}

/* ---- Focus, per RULING R-C ----
   The design as shipped references --focus-ring but defines it nowhere, so it
   has no keyboard focus indicator at all. That is a defect we do not reproduce:
   the fallback here is the readme's intended accent-aware treatment, so the
   ring is visible even when the theme never defines the token. */

.pfg-row a:focus-visible,
.pfg-row button:focus-visible,
.pfg-coupon:focus-visible,
/* The no-code CTA is an anchor of its own, not a child of .pfg-coupon, so it
   has to be named here or the ring vanishes in the state that is becoming the
   common one. Covers featured-deal's solo CTA, which never had one. */
.pfg-coupon__cta:focus-visible,
.pfg-mwrap:focus-visible,
.pfg-tlhead button:focus-visible,
.pfg-tlhead a:focus-visible,
.pfg-fbar button:focus-visible,
.pfg-sorts button:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 1px var(--acc, #A79FFF), 0 0 0 4px rgba(var(--acc-rgb, 167, 159, 255), 0.18));
	border-radius: 8px;
}