/** Firm review — PFG grade panel (mark + verdict + evidence reasons). */

.pfg-rv-grade {
	display: flex;
	align-items: center;
	gap: clamp(13px, 1.4vw, 20px);
	flex-wrap: wrap;
	padding: 14px 17px;
	border-radius: 16px;
	background: rgba(var(--acc-rgb, 167, 159, 255), 0.06);
	border: 1px solid rgba(var(--acc-rgb, 167, 159, 255), 0.26);
	min-width: 0;
}

.pfg-rv-grade__seal {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	cursor: help;
	border-radius: 10px;
}

.pfg-rv-grade__wordmark {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--rv-text-1, #F2F3F8);
}

/* The ratified status word beside the letter — muted UI text (Manrope via
   inheritance), never accent: a qualifier on a verdict is functional text. */
.pfg-rv-grade__status {
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--rv-text-3, #979CAD);
}

.pfg-rv-grade__rule {
	align-self: stretch;
	flex: 0 0 1px;
	width: 1px;
	background: rgba(var(--acc-rgb, 167, 159, 255), 0.22);
}

@media (max-width: 560px) {
	.pfg-rv-grade__rule {
		display: none;
	}
}

.pfg-rv-grade__body {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.pfg-rv-grade__verdict {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-size: clamp(16px, 1.05vw, 21px);
	font-weight: 400;
	line-height: 1.35;
	color: var(--rv-text-1, #F2F3F8);
	text-wrap: pretty;
}

.pfg-rv-grade__why {
	display: flex;
	flex-direction: column;
	gap: 5px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pfg-rv-grade__reason {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: clamp(12px, 0.69vw, 13.5px);
	line-height: 1.45;
	color: var(--rv-text-2, #C6CBDD);
}

.pfg-rv-grade__reason svg {
	flex: 0 0 12px;
	margin-top: 3px;
	color: var(--acc, var(--wp--preset--color--accent, #A79FFF));
}

.pfg-rv-grade__reason b {
	color: var(--rv-text-1, #F2F3F8);
	font-weight: 800;
}

/* The grading caps: same rhythm as the reasons list, muted throughout — the
   dash marker and the text both take text-3 so the list reads as a limit on
   the grade, not as evidence for the firm. */
.pfg-rv-grade__caps {
	display: flex;
	flex-direction: column;
	gap: 5px;
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.pfg-rv-grade__cap {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: clamp(12px, 0.69vw, 13.5px);
	line-height: 1.45;
	color: var(--rv-text-3, #979CAD);
}

.pfg-rv-grade__cap svg {
	flex: 0 0 12px;
	margin-top: 3px;
	color: var(--rv-text-3, #979CAD);
}

.pfg-rv-grade__cap b {
	color: var(--rv-text-2, #C6CBDD);
	font-weight: 800;
}

.pfg-rv-grade__method {
	margin: 0;
	font-size: clamp(11.5px, 0.66vw, 13px);
}

.pfg-rv-grade__method a {
	color: var(--rv-text-3, #979CAD);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pfg-rv-grade__method a:hover {
	color: var(--acc, #A79FFF);
}

/* -------------------------------------------------------- grade tooltip */

/* Anchored to the seal's LEFT edge and opening rightward, NOT centred on it.
   The seal sits at the left edge of the grade panel, which is at the left edge
   of the hero — a centred 344px tooltip put half its width (and at narrow
   viewports its whole first column of text) outside the card, where the hero's
   `overflow: clip` cut it off. Opening rightward is always safe here because
   there is a full page column to the right of the seal. */
.pfg-rv-tip--grade {
	top: auto;
	bottom: calc(100% + 11px);
	left: 0;
	transform: translate(0, 2px);
	/* border-box or the padding is added to this width and the tooltip runs off
	   a narrow screen. The subtraction covers the page + card padding the seal
	   is already inset by, so the clamp is measured from the tooltip's own left
	   edge rather than the viewport's. */
	box-sizing: border-box;
	width: min(344px, calc(100vw - 76px));
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}

.pfg-rv-tipwrap:hover .pfg-rv-tip--grade,
.pfg-rv-tipwrap:focus-visible .pfg-rv-tip--grade,
.pfg-rv-tipwrap:focus-within .pfg-rv-tip--grade {
	transform: translate(0, 0);
}

.pfg-rv-tip--grade b {
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-weight: 500;
	font-size: 14.5px;
	color: var(--rv-text-1, #F2F3F8);
}

.pfg-rv-tip--grade em {
	font-style: normal;
	color: var(--rv-text-1, #F2F3F8);
	font-weight: 700;
}

.pfg-rv-tip--grade small {
	font-size: 11.5px;
	color: var(--rv-text-3, #979CAD);
	line-height: 1.45;
}

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

.pfg-rv-grade__step {
	display: inline-grid;
	place-items: center;
	min-width: 28px;
	height: 24px;
	padding: 0 7px;
	border-radius: 7px;
	background: var(--rv-hover-wash, rgba(255, 255, 255, 0.04));
	border: 1px solid var(--rv-b2, rgba(255, 255, 255, 0.08));
	color: var(--rv-text-3, #979CAD);
	font-size: 11.5px;
	font-weight: 800;
}

/* R-B: NR never borrows the accent's authority, so the active NR chip stays grey. */
.pfg-rv-grade__step.is-on {
	background: rgba(var(--acc-rgb, 167, 159, 255), 0.16);
	border-color: rgba(var(--acc-rgb, 167, 159, 255), 0.45);
	color: var(--rv-text-1, #F2F3F8);
}

.pfg-rv-grade[data-grade="NR"] .pfg-rv-grade__step.is-on {
	/*
	 * AA: the NR chip is grey-on-grey, so its own tint is what was eating the
	 * contrast — 0.16 lifted the fill to #383D4B and left the label at 3.96:1.
	 * The hairline carries the active state instead of the fill, which is the
	 * design's borders-over-fills rule, and the label clears at 4.69:1.
	 */
	background: rgba(151, 156, 173, 0.06);
	border-color: rgba(151, 156, 173, 0.55);
	color: var(--rv-grade-nr, #979CAD);
}

/* No narrow-viewport flip: right-anchoring pushed the tooltip off the left of
   a 390px screen entirely (−225px). The seal is near the left edge at every
   width, so left-anchoring plus the width clamp above keeps it on screen. */

/*
 * HERO SEAL SIZE — temporary, and deliberately narrow in scope.
 *
 * PFG\Core\Render\GradeMark::svg() snaps to 22 | 24 | 30 | 34px, which are the
 * sizes the toplist and grade-row need. The review hero uses the large seal from
 * the design, which is roughly twice that, and the shared partial writes width,
 * height and flex-basis inline — so nothing but !important can resize it from
 * here. Only the BOX is overridden: viewBox, arc length, letter and colour still
 * come from the single shared implementation, so the mark cannot drift.
 *
 * REMOVE THIS when the shared partial gains a hero size and pass it instead.
 */
.pfg-rv-grade__seal .pfg-gring {
	width: clamp(58px, 5vw, 76px) !important;
	height: clamp(58px, 5vw, 76px) !important;
	flex: 0 0 auto !important;
}