/**
 * The PFG grade mark.
 *
 * The SVG carries NO stroke-dashoffset attribute, so with this stylesheet
 * missing — or blocked, or still loading — the ring is FULLY DRAWN. The draw-on
 * animation can only ever subtract from a readable baseline; it can never be the
 * reason a grade is invisible.
 *
 * Two mechanisms are supported, in this order:
 *   1. `data-g="0"` → `data-g="1"`, the design's own contract, for any consumer
 *      that flips the attribute on first view.
 *   2. a plain CSS animation for the default case, with `both` fill mode so it
 *      settles on the drawn state.
 * `prefers-reduced-motion: reduce` forces the drawn state through both paths.
 *
 * Every token reference carries a literal fallback: a theme switch must degrade
 * to less pretty, never to unreadable.
 */

.pfg-gring {
	/* overflow:visible is set inline; A+ overshoots the ellipse perimeter and
	   would otherwise be clipped by the 100x100 viewBox. */
	display: block;
}

@keyframes pfg-gdraw {
	from { stroke-dashoffset: var(--ga, 0); }
	to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.pfg-gring:not([data-g]) .pfg-gcirc {
		animation: pfg-gdraw 1.1s cubic-bezier(0.43, 0.13, 0.23, 0.96) both;
	}
}

/* The design's explicit two-state contract. */
.pfg-gring[data-g="0"] .pfg-gcirc {
	stroke-dashoffset: var(--ga, 0);
	animation: none;
}

.pfg-gring[data-g="1"] .pfg-gcirc {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.1s cubic-bezier(0.43, 0.13, 0.23, 0.96);
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.pfg-gring .pfg-gcirc {
		stroke-dashoffset: 0 !important;
		animation: none !important;
		transition: none !important;
	}
}

/* ---- Grade tooltip wrapper (hover AND :focus-visible, never hover alone) ---- */

.pfg-mwrap {
	position: relative;
	align-self: center;
	flex: 0 0 auto;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	margin: -8px 0;
	cursor: help;
	color: var(--wp--preset--color--text-label, #828BA6);
}

/* Anchored to the trigger's LEFT edge, opening rightward — the trigger sits
   at the left end of the grade strip, so rightward is always on-screen. The
   previous centring pulled the card left with a negative CSS minimum of
   (-172px, -42vw); a minimum over NEGATIVE lengths picks the MORE negative
   value, so at 1440px the card sat 605px off the left of the window. Same
   fix as the review hero's grade tooltip: anchor to the trigger edge that
   has room, never centre an overlay near an edge. */
.pfg-mtip {
	position: absolute;
	z-index: 95;
	bottom: calc(100% + 11px);
	left: -6px;
	width: min(344px, calc(100vw - 32px));
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(-2px);
	pointer-events: none;
	transition: opacity 150ms ease, transform 150ms ease;
}

/*
 * FOCUS-WITHIN, OR THE LINK INSIDE IS MOUSE-ONLY (propfirmgrade-data#537).
 *
 * The card now carries a link to the grading scale. Without :focus-within,
 * tabbing to that link moves focus off .pfg-mwrap, :focus-visible stops
 * matching, the tooltip hides, and the link a keyboard user just reached
 * disappears under them. On the one component whose whole job is explaining
 * what a grade means, that is the wrong half of the audience to lose.
 */
.pfg-mwrap:hover .pfg-mtip,
.pfg-mwrap:focus-within .pfg-mtip,
.pfg-mwrap:focus-visible .pfg-mtip {
	opacity: 1;
	transform: translateY(0);

	/*
	 * THE CARD ACCEPTS THE POINTER ONLY WHILE IT IS SHOWN.
	 *
	 * `.pfg-mtip` is `pointer-events: none` at rest, which was right while it
	 * was purely explanatory: an invisible 344px card must not eat clicks meant
	 * for the table beneath it. But it stayed none when SHOWN too, so the link
	 * added for propfirmgrade-data#537 could not be clicked at all — reported by
	 * the account holder within the hour, and correctly.
	 *
	 * Enabled only in the shown state, so nothing is clickable that is not
	 * visible.
	 */
	pointer-events: auto;
}

/*
 * A BRIDGE ACROSS THE GAP, because the card sits 11px above the mark.
 *
 * Moving the pointer from the mark to the link crossed 11px of unhovered space,
 * :hover dropped, and the tooltip vanished mid-journey. That is the other half
 * of the same report, and no delay fixes it honestly — a delay hides the seam
 * rather than closing it, and still fails a slow pointer.
 *
 * This is a transparent extension of the card's own hover area down to the
 * mark. It is inside .pfg-mwrap, so hovering it keeps the wrapper hovered and
 * the card open, and it exists only while the card is shown because it
 * inherits the pointer-events state above.
 */
.pfg-mtip::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 13px;
}

/*
 * A short grace period on the way OUT only. The bridge closes the gap; this
 * forgives a pointer that clips a corner on its way to the link. Opacity alone
 * is delayed, never the transform, so a re-entered card does not slide.
 */
.pfg-mtip {
	transition-delay: 0ms;
}

.pfg-mwrap:not(:hover):not(:focus-within) .pfg-mtip {
	transition-delay: 120ms;
}

/* ESCAPE CLOSES IT — the same SC 1.4.13 fix as the badge panel in
   blocks/toplist/style.css, and the same three lines of CSS, because the two
   panels differ only in which property hides them. See
   assets/js/hover-dismiss.js for why the reveal itself stays in CSS.

   `transform` is restored alongside `opacity` so a dismissed card is not left
   mid-transition two pixels high, waiting to animate from a place the reader
   cannot see. */
.pfg-mwrap[data-pfg-dismissed] .pfg-mtip {
	opacity: 0;
	transform: translateY(-2px);
}


.pfg-mtip__card {
	display: block;
	padding: 13px 15px 12px;
	border-radius: 12px;
	background: var(--surface-menu, #262B38);
	border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.14));
	box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.72);
	white-space: normal;
	text-align: left;
}

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

.pfg-mtip__body {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--text-body, #A6ACC0);
}

.pfg-mtip__scale {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-top: 11px;
	padding-top: 11px;
	border-top: 1px solid var(--border-3, rgba(255, 255, 255, 0.09));
}

.pfg-mtip__rung {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	height: 24px;
	padding: 0 6px;
	border-radius: 7px;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1;
	/*
	 * AA: an inactive rung is text on the tooltip card (#262B38), the lightest
	 * text-bearing surface on the site. --text-4 reaches only 4.10:1 there, so
	 * the rung reads at --text-3 and its fill drops from a 6% wash to
	 * --hover-wash's 4%, which together clear 4.5:1 (4.58). The hairline still
	 * draws the chip; the design's own borders-over-fills rule.
	 */
	background: var(--hover-wash, rgba(255, 255, 255, 0.04));
	color: var(--text-3, #979CAD);
	border: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
}

.pfg-mtip__rung.is-active {
	background: var(--acc, #A79FFF);
	color: var(--on-acc, #14161F);
	border-color: transparent;
}

/*
 * The way in to the scale page (propfirmgrade-data#537). Understated on
 * purpose: design.md puts the accent on the price, the seal, the CTA, the
 * coupon pill and the active pill, and a tooltip's footer link is none of
 * those. It reads as a link by its underline, not by colour.
 */
.pfg-mtip__link {
	display: inline-block;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--text-2, #C6CBDD);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pfg-mtip__link:hover,
.pfg-mtip__link:focus-visible {
	color: var(--text-1, #F2F3F8);
}

.pfg-mtip__foot {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 9px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.45;
	/*
	 * The independence disclosure. A trust surface, so it takes the brightest
	 * muted rung that still reads as secondary: --text-3 is 5.17:1 on the
	 * tooltip card, where --text-4 was 2.26:1 before the token lift and 4.10:1
	 * after it.
	 */
	color: var(--text-3, #979CAD);
}

.pfg-mtip__caret {
	position: absolute;
	bottom: -5px;
	left: 50%;
	margin-left: -5px;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	background: var(--surface-menu, #262B38);
	border-right: 1px solid var(--border-strong, rgba(255, 255, 255, 0.14));
	border-bottom: 1px solid var(--border-strong, rgba(255, 255, 255, 0.14));
}

@media (max-width: 760px) {
	/* A 344px card cannot sit at the trigger's own edge on a 390px viewport —
	   the trigger is ~80px in (row inset + wordmark), so left: 0 still ran
	   ~36px off the right. Pull the card back to the ROW's left edge instead;
	   the strip's inset is stable, so the fixed offset is too, and the caret
	   moves with it to keep pointing at the info glyph. */
	.pfg-mtip {
		left: -70px;
		margin-left: 0;
		width: min(344px, calc(100vw - 24px));
	}

	.pfg-mtip__caret {
		left: 94px;
	}
}