/**
 * Firm review screen — shared layer.
 *
 * Loaded once (review-context always renders on the review screen) and carries:
 *   1. the token ALIAS layer,
 *   2. the primitives every review-* block reuses (panel, chip, label, rows),
 *   3. the grade-mark fallback styling,
 *   4. the admin-only provenance badge.
 *
 * ALIAS LAYER. The design markup names tokens (--surface-3, --text-1, --pos …)
 * that the theme has not defined yet; the theme ships the same values as
 * theme.json presets. Every alias therefore resolves
 *     var(--<design token>, var(--wp--preset--…, <literal>))
 * so that the moment the global chrome lane defines the canonical token name,
 * this layer picks it up without being edited, and nothing here ever clobbers a
 * global definition (all names are --rv-* prefixed).
 */

.pfg-rv {
	--rv-surface-1: var(--surface-1, var(--wp--preset--color--surface-1, #14171E));
	--rv-surface-2: var(--surface-2, var(--wp--preset--color--surface-2, #161A25));
	--rv-surface-3: var(--surface-3, var(--wp--preset--color--surface-3, #171B26));
	--rv-surface-4: var(--surface-4, var(--wp--preset--color--surface-4, #1A1F2C));
	--rv-surface-tile: var(--surface-tile, var(--wp--preset--color--surface-tile, #1E2330));

	--rv-text-1: var(--text-1, var(--wp--preset--color--text-1, #F2F3F8));
	--rv-text-2: var(--text-2, var(--wp--preset--color--text-2, #C6CBDD));
	--rv-text-body: var(--text-body, var(--wp--preset--color--text-body, #A6ACC0));
	--rv-text-3: var(--text-3, var(--wp--preset--color--text-3, #979CAD));
	--rv-text-4: var(--text-4, var(--wp--preset--color--text-4, #838A9D));
	--rv-text-label: var(--wp--preset--color--text-label, #828BA6);

	--rv-pos: var(--pos, var(--wp--preset--color--positive, #40D69A));
	--rv-neg: var(--neg, var(--wp--preset--color--negative, #EB4749));
	--rv-star: var(--star, var(--wp--preset--color--star, #F6C453));
	--rv-grid-line: var(--wp--preset--color--surface-chip, #262C3B);

	/* R-B: NR consumes the semantic --grade-nr token, which renders as --text-3. */
	--rv-grade-nr: var(--grade-nr, var(--wp--preset--color--text-3, #979CAD));

	--rv-b1: var(--border-1, rgba(255, 255, 255, 0.06));
	--rv-b2: var(--border-2, rgba(255, 255, 255, 0.08));
	--rv-b3: var(--border-3, rgba(255, 255, 255, 0.10));
	--rv-b-strong: var(--border-strong, rgba(255, 255, 255, 0.14));
	--rv-hover-wash: var(--hover-wash, rgba(255, 255, 255, 0.04));
	--rv-recess: var(--recess, rgba(13, 15, 22, 0.60));
	--rv-hero-grad: var(--hero-grad, linear-gradient(135deg, #1B2030 0%, #171B26 55%, #1A1830 100%));

	--rv-on-acc: var(--on-acc-solid, var(--on-acc, var(--wp--preset--color--on-accent, #14161F)));
	--rv-pad: clamp(20px, 2.6vw, 32px);

	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2.2vw, 28px);
	min-width: 0;
}

/* Nothing inside the review screen may push the page sideways. */
.pfg-rv,
.pfg-rv * {
	min-width: 0;
}

/* ---------------------------------------------------------------- panels */

.pfg-rv-panel {
	/*
	 * BORDER-BOX. WordPress sets it on `.wp-block-group`, so panels that happen
	 * to be groups inherit it; this is a custom block wrapper and kept the
	 * browser default. With `max-width` from the constrained layout applying to
	 * its CONTENT, its padding was added on top — measured 1816 against a
	 * container of 1760, sticking out 28px each side of every block around it.
	 *
	 * Invisible below ~1828px viewport, where the container never reaches its
	 * max-width. Same defect as `.pfg-featured` and `review-offer-bar`.
	 */
	box-sizing: border-box;
	background: var(--rv-surface-3, #171B26);
	border: 1px solid var(--rv-b1, rgba(255, 255, 255, 0.06));
	border-radius: 20px;
	padding: clamp(18px, 2vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pfg-rv-panel__head {
	display: flex;
	align-items: center;
	gap: 11px;
	flex-wrap: wrap;
}

.pfg-rv-panel__head h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-weight: 400;
	font-size: clamp(20px, 1.15vw, 24px);
	color: var(--rv-text-1, #F2F3F8);
	letter-spacing: -0.01em;
}

.pfg-rv-panel__meta {
	margin-left: auto;
	font-size: clamp(11px, 0.63vw, 13px);
	color: var(--rv-text-4, #838A9D);
}

@media (max-width: 760px) {
	.pfg-rv-panel__meta {
		margin-left: 0;
		flex-basis: 100%;
	}
}

/* --------------------------------------------------------------- labels  */

.pfg-rv-kicker {
	font-size: clamp(10.5px, 0.6vw, 12.5px);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rv-text-label, #828BA6);
}

.pfg-rv-kicker--acc {
	color: var(--acc, var(--wp--preset--color--accent, #A79FFF));
}

/* ----------------------------------------------------------- key/value rows */

.pfg-rv-rows {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.pfg-rv-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 38px;
	padding: 5px 0;
	border-top: 1px solid var(--rv-b1, rgba(255, 255, 255, 0.06));
}

.pfg-rv-row__k {
	font-size: clamp(11.5px, 0.66vw, 13px);
	color: var(--rv-text-3, #979CAD);
	margin: 0;
}

.pfg-rv-row__v {
	font-size: clamp(12.5px, 0.72vw, 14px);
	font-weight: 700;
	color: var(--rv-text-1, #F2F3F8);
	text-align: right;
	font-variant-numeric: tabular-nums;
	margin: 0;
	overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------- chips */

.pfg-rv-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 26px;
	padding: 2px 10px;
	border-radius: 8px;
	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-2, #C6CBDD);
	font-size: clamp(11.5px, 0.66vw, 13.5px);
	line-height: 1.3;
}

.pfg-rv-chip--pos {
	background: rgba(64, 214, 154, 0.10);
	border-color: rgba(64, 214, 154, 0.35);
	color: var(--rv-pos, #40D69A);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: clamp(10.5px, 0.6vw, 12.5px);
	border-radius: 7px;
}

.pfg-rv-chip--acc {
	background: rgba(var(--acc-rgb, 167, 159, 255), 0.12);
	border-color: rgba(var(--acc-rgb, 167, 159, 255), 0.30);
	color: var(--acc, #A79FFF);
	font-weight: 800;
	letter-spacing: 0.05em;
}

/* ------------------------------------------------------------- logo tile */

.pfg-rv-tile {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: var(--rv-surface-tile, #1E2330);
	border: 1px solid var(--rv-b2, rgba(255, 255, 255, 0.08));
	color: var(--rv-text-1, #F2F3F8);
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: 0.02em;
	overflow: hidden;
}

.pfg-rv-tile img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Square mark: fills the 64px tile rather than sitting inside it.

   .pfg-rv-tile sets `object-fit: contain` on every img it contains, at a
   higher specificity than the primitives rule. That happens to be the value a
   mark wants too — but it is reasserted here rather than relied upon, because
   the two rules mean different things and a change to the img rule for the
   WORDMARK's sake would silently take the mark with it.

   See primitives.css .pfg-tile__mark for the full reasoning. Short version:
   contain rather than cover, so a mark that is not square (nothing in the data
   contract guarantees one is) letterboxes visibly instead of being
   centre-cropped into a tile that looks fine and is wrong. The absolute
   positioning is what makes a square mark fill the slot at all. */
.pfg-rv-tile .pfg-tile__mark {
	object-fit: contain;
}

@media (max-width: 760px) {
	.pfg-rv-tile {
		width: 44px;
		height: 44px;
		border-radius: 12px;
		font-size: 16px;
	}
}

/* ------------------------------------------------------------ grade mark */

.pfg-rv-gmark {
	display: block;
	overflow: visible;
}

/* R-A: the arc length encodes the grade. The draw-on animation reads --ga and
   reduced motion forces the fully drawn state. */
@media (prefers-reduced-motion: no-preference) {
	.pfg-rv-gmark__ring {
		stroke-dashoffset: var(--ga, 0);
		animation: pfg-rv-draw 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
	}
}

@keyframes pfg-rv-draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* ------------------------------------------------------- scrollable data */

/*
 * Wide data tables scroll inside their own container. `tabindex="0"` on a
 * scroll container is REQUIRED (WCAG 2.1.1) so the region is keyboard
 * reachable; tabindex="-1" on a container that hides content is the failure we
 * are explicitly not repeating.
 */
.pfg-rv-scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	scrollbar-width: thin;
}

.pfg-rv-scroll: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: 12px;
}

/* -------------------------------------------------- admin-only provenance */

.pfg-rv-prov {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 9px;
	border-radius: 6px;
	border: 1px dashed rgba(240, 185, 11, 0.5);
	background: rgba(240, 185, 11, 0.08);
	color: var(--warning, var(--wp--preset--color--warning, #F0B90B));
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.4;
}

.pfg-rv-prov[data-source="canonical"] {
	border-color: rgba(64, 214, 154, 0.45);
	background: rgba(64, 214, 154, 0.08);
	color: var(--rv-pos, #40D69A);
}

.pfg-rv-notice {
	margin: 0;
}

/* --------------------------------------------------------- interactivity */

.pfg-rv :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));
}

/* Editor placeholder for every review-* block. */
.pfg-rv-placeholder {
	border: 1px dashed rgba(167, 159, 255, 0.45);
	border-radius: 12px;
	padding: 14px 16px;
	background: rgba(167, 159, 255, 0.06);
	font-size: 13.5px;
	line-height: 1.5;
}

.pfg-rv-placeholder strong {
	display: block;
	font-size: 14.5px;
	margin-bottom: 3px;
}

/* =========================================================================
   EDITORIAL ARTICLE
   The prose half of the review lives in post_content as core blocks. These
   rules dress the classes the starter pattern applies; they ship with the
   review blocks rather than the theme so the review screen stays self-
   contained in one lane.
   ========================================================================= */

.pfg-rv-article {
	min-width: 0;
}

.pfg-rv-article h2 {
	scroll-margin-top: clamp(76px, 9vh, 112px);
}

.pfg-rv-article p {
	text-wrap: pretty;
}

/*
 * Editorial tables — the house table idiom (design CSS 142–146; the same
 * language as the challenge-table block): hairline ROW separators only, no
 * vertical cell borders, no outer grid box, thead as small uppercase
 * letter-spaced muted labels, tabular numerals, top alignment.
 *
 * `overflow-x: auto` is a guard, not the layout: a `min-width` is only applied
 * from 700px up, where it always fits, so the container never actually becomes
 * scrollable. That matters because a core/table is `<figure><table>` and CSS
 * cannot put `tabindex="0"` on it — a genuinely scrolling wrapper here would be
 * unreachable by keyboard (WCAG 2.1.1). Below 700px the table reflows instead.
 *
 * SPECIFICITY IS LOAD-BEARING. Core's blocks/table/style.css enqueues AFTER
 * this file and carries `.wp-block-table td { border: 1px solid; padding: .5em;
 * vertical-align: middle }` plus `.wp-block-table thead { border-bottom: 3px
 * solid }` — the full-grid Windows-95 look. A bare `.pfg-rv-article td` ties
 * with it at (0,1,1) and loses on order, which is exactly the defect this
 * section replaces. Every cell rule below rides the `.pfg-rv-article
 * .wp-block-table` compound so the cascade cannot be undone by enqueue order.
 */
.pfg-rv-article .wp-block-table,
.pfg-rv-section .wp-block-table {
	overflow-x: auto;
	max-width: 100%;
}

.pfg-rv-article .wp-block-table table,
.pfg-rv-section .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: clamp(13px, 0.78vw, 15px);
	line-height: 1.55;
	color: var(--text-2, var(--wp--preset--color--text-2, #C6CBDD));
}

@media (min-width: 700px) {
	.pfg-rv-article .wp-block-table table,
	.pfg-rv-section .wp-block-table table {
		min-width: 480px;
	}
}

.pfg-rv-article .wp-block-table td,
.pfg-rv-article .wp-block-table th,
.pfg-rv-section .wp-block-table td,
.pfg-rv-section .wp-block-table th {
	overflow-wrap: anywhere;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
}

.pfg-rv-article .wp-block-table td,
.pfg-rv-section .wp-block-table td {
	font-variant-numeric: tabular-nums;
}

/* Core puts a 3px rule on the THEAD ELEMENT; the head's own separator is the
   strong end of the hairline band (white 10%) on the cells instead. */
.pfg-rv-article .wp-block-table thead,
.pfg-rv-section .wp-block-table thead {
	border-bottom: 0;
}

.pfg-rv-article .wp-block-table thead th,
.pfg-rv-section .wp-block-table thead th {
	/* Labels never break mid-word; the figure's overflow guard covers the
	   pathological case. Body cells keep `anywhere`. */
	overflow-wrap: normal;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	font-size: clamp(10.5px, 0.6vw, 12.5px);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-label, #828BA6);
}

.pfg-rv-article .wp-block-table figcaption,
.pfg-rv-section .wp-block-table figcaption {
	margin-top: 9px;
	font-size: clamp(11.5px, 0.66vw, 13px);
	color: var(--text-3, var(--wp--preset--color--text-3, #979CAD));
	text-align: left;
}

@media (max-width: 699px) {
	.pfg-rv-article .wp-block-table td,
	.pfg-rv-article .wp-block-table th,
	.pfg-rv-section .wp-block-table td,
	.pfg-rv-section .wp-block-table th {
		padding: 9px 10px;
	}
}

/* Readable on a phone (mobile follow-up, 2026-09-17): cells and captions take
   the 14px `ui` token, the uppercase head row stays a label at the 12.5px
   `small` step. The theme's copy in components.css carries the same rule. */
@media (max-width: 760px) {
	.pfg-rv-article .wp-block-table table,
	.pfg-rv-section .wp-block-table table,
	.pfg-rv-article .wp-block-table figcaption,
	.pfg-rv-section .wp-block-table figcaption {
		font-size: var(--wp--preset--font-size--ui, 14px);
	}

	.pfg-rv-article .wp-block-table thead th,
	.pfg-rv-section .wp-block-table thead th {
		font-size: var(--wp--preset--font-size--small, 12.5px);
	}
}

/*
 * Pros/cons cards. The tinted fills and coloured hairlines are the DESIGN'S
 * OWN (inventory "Pros and cons cards", source line 1188–1191) — the one
 * sanctioned exception to the neutral-hairline law — so they stay.
 *
 * THE DOUBLED CLASS IS LOAD-BEARING. These groups carry a constrained layout,
 * so WordPress marks them `.has-global-padding`, and its nested-padding reset
 * (`.has-global-padding :where(… > .has-global-padding …) { padding-inline:
 * 0 }`) lands in global-styles-inline-css, which enqueues AFTER this file at
 * the same (0,1,0) specificity. A single class therefore keeps its block
 * padding but silently loses both side paddings — the label jammed in the
 * corner and list text running to the right border. (0,2,0) wins on weight,
 * not on order.
 */
.pfg-rv-pros.pfg-rv-pros,
.pfg-rv-cons.pfg-rv-cons {
	padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 24px);
	border-radius: 16px;
	height: 100%;
	box-sizing: border-box;
}

.pfg-rv-pros.pfg-rv-pros {
	background: rgba(64, 214, 154, 0.07);
	border: 1px solid rgba(64, 214, 154, 0.25);
}

.pfg-rv-cons.pfg-rv-cons {
	/* R-E: one red only. The design's stray #F0554E is not reproduced. */
	background: rgba(235, 71, 73, 0.07);
	border: 1px solid rgba(235, 71, 73, 0.25);
}

/* The design labels these cards with a bold h4 in the card's colour; the
   pattern composes an h3 at the h-4 size, so the weight is set here. */
.pfg-rv-pros h3 {
	margin: 0;
	font-weight: 800;
	color: var(--pos, var(--wp--preset--color--positive, #40D69A));
}

.pfg-rv-cons h3 {
	margin: 0;
	font-weight: 800;
	color: var(--neg, var(--wp--preset--color--negative, #EB4749));
}

/* The label-to-list gap is the card's own 12px, not the page flow's 26px
   (`:root :where(.is-layout-constrained) > *` at (0,1,0) loses to (0,1,1));
   the list indents one comfortable step past the card padding instead of the
   browser's 40px, and rows breathe without drifting apart. */
.pfg-rv-pros ul,
.pfg-rv-cons ul {
	margin-block: 12px 0;
	padding-inline-start: 1.25em;
}

.pfg-rv-pros li + li,
.pfg-rv-cons li + li {
	margin-block-start: 7px;
}

.pfg-rv-section {
	min-width: 0;
}

/* =========================================================================
   METHODOLOGY
   ========================================================================= */

@media (min-width: 700px) {
	.pfg-method-table table {
		min-width: 520px;
	}
}

.pfg-method-table th {
	font-size: clamp(11px, 0.63vw, 12.5px);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9AA1B5;
}

.pfg-method-table td:nth-child(2) {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	color: var(--acc, var(--wp--preset--color--accent, #A79FFF));
	white-space: nowrap;
}