/**
 * PFG Challenge Table — offerings by account size (World Accent).
 * Dark table on surface-3, hairline row dividers, tabular numerals.
 * Wide content scrolls inside its own container.
 */

.pfg-challenge-table {
	/* ONE SOURCE OF TRUTH FOR THE PANEL COLOUR. The frozen header row and the
	   frozen first column paint over rows that scroll beneath them, so their
	   background has to BE the panel rather than merely match it today: two
	   copies of #171B26 that drift by one digit read as a seam through the
	   middle of the table. `--surface-3` (bare) is NOT defined anywhere in
	   this codebase and would fall silently through to the literal; the
	   WordPress preset that theme.json publishes is the one that resolves,
	   measured at #171B26. */
	--pfg-ct-bg: var(--wp--preset--color--surface-3, #171B26);
	--pfg-ct-line: var(--border-1, rgba(255, 255, 255, 0.06));

	/* The height of the frozen header row, published so the frozen column can
	   park beneath it instead of behind it. 12px padding + an 18px line box +
	   12px padding + the 1px rule = 43px, and it holds at every width because
	   the line-height below is a constant while only the font size clamps.
	   Measured against the head as it rendered before this file changed:
	   42.84px at 1440. */
	--pfg-ct-head-h: 43px;

	background: var(--pfg-ct-bg);
	border: 1px solid var(--pfg-ct-line);
	border-radius: 20px;
	padding: clamp(14px, 1.6vw, 22px);
}

/* THE SCROLL BOX IS WHAT MAKES BOTH FROZEN AXES POSSIBLE.
 *
 * `position: sticky` resolves against the nearest SCROLLING ancestor, and this
 * element was already one without meaning to be: `overflow-x: auto` forces the
 * computed `overflow-y` from `visible` to `auto`, so a header pinned to
 * `top: 0` in here would have pinned to a box whose scrollHeight equalled its
 * clientHeight and travelled nowhere. Measured on /firms/tradeify/ before this
 * change: clientH 867, scrollH 867, computed overflow `auto auto`. Capping the
 * height is what gives the header somewhere to stick — without it these rules
 * are dead CSS, not a subtle bug.
 *
 * The cap is inert until a table is genuinely long. At a 900px viewport it
 * resolves to 630px: FTMO (556px) and Hyrotrader (607px) never scroll and look
 * exactly as they did; Tradeify (867px) gains 237px of travel and a pinned
 * header. The 320px floor keeps a landscape phone from collapsing it to a slot.
 */
.pfg-challenge-table__scroll {
	overflow: auto;
	max-height: clamp(320px, 70dvh, 640px);

	/* Ends the sideways swipe at the end of a row triggering the browser's
	   back gesture. Vertical chaining is deliberately left ON so the page
	   keeps moving once the reader scrolls past the bottom of the table. */
	overscroll-behavior-x: contain;
}

/* WCAG 2.1.1: a scrollable region hides content, so it must be reachable and
   operable by keyboard. tabindex=0 on the scroller (set in render.php) makes it
   focusable; this gives that focus a visible indicator. */
.pfg-challenge-table__scroll:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 1px #A79FFF, 0 0 0 4px rgba(167, 159, 255, 0.18));
	border-radius: 12px;
}

.pfg-challenge-table table {
	width: 100%;

	/* SEPARATE, NOT COLLAPSE, AND THE STICKY CELLS ARE THE ONLY REASON.
	   With collapsed borders the hairlines belong to the TABLE, not to the
	   cells, so they stay behind while a sticky cell moves: the pinned header
	   ends up with its own rule floating a row below it. `border-spacing: 0`
	   keeps the geometry identical to collapse — every rule here is a single
	   edge per cell, so nothing doubles up. */
	border-collapse: separate;
	border-spacing: 0;
	font-size: clamp(13px, 0.75vw, 15.5px);
	color: #C6CBDD;
}

.pfg-challenge-table th,
.pfg-challenge-table td {
	text-align: left;
	padding: 12px 14px;
	border-top: 1px solid var(--pfg-ct-line);
	vertical-align: top;
	white-space: nowrap;
}

/* The head's separator used to belong to the first BODY row, which now scrolls
   away underneath the pinned header and would leave it edgeless. It moves onto
   the head so it travels with it, and the first body row gives its own up so
   the line stays exactly 1px. */
.pfg-challenge-table tbody tr:first-child > th,
.pfg-challenge-table tbody tr:first-child > td {
	border-top: 0;
}

.pfg-challenge-table thead th {
	border-top: 0;
	border-bottom: 1px solid var(--pfg-ct-line);
	font-size: clamp(10.5px, 0.6vw, 12.5px);
	/* Pinned to a constant so --pfg-ct-head-h is a fact and not an estimate.
	   The head's font size clamps between 10.5px and 12.5px; both sit inside
	   an 18px line box, so the row is 43px tall at every viewport. */
	line-height: 18px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9AA1B5;
}

/* =========================================================================
   FROZEN HEADER ROW AND FROZEN FIRST COLUMN

   A sticky cell is not opaque. Without a background the rows scroll straight
   through the header and the column, which is the single most common reason
   people conclude sticky "does not work on tables". Both take the panel's own
   colour from `--pfg-ct-bg`.

   The corner cell belongs to BOTH the frozen row and the frozen column, so it
   needs to sit above both: 3 over the header's 2 over the column's 1.
   ========================================================================= */

.pfg-challenge-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--pfg-ct-bg);
}

/* The offering cell is the identity of the row — the product name, its model
 * and its evidence tier — and on a wide table it is the one thing worth
 * keeping on screen while the prices scroll past.
 *
 * IT IS FROZEN IN BOTH DIRECTIONS, and the second one is not decoration. This
 * cell carries `rowspan`, so one label serves five or six account sizes; with
 * only `left` set, scrolling into the middle of a long product left a frozen
 * column that was blank exactly where the reader needed the name. A sticky
 * table cell's containing block is the area it spans, which is what makes this
 * work per product rather than pinning all three labels on top of each other —
 * verified in the browser at scrollTop 0/150/263 on /firms/tradeify/, where
 * label 1 pinned at 43 while labels 2 and 3 kept travelling.
 *
 * `top` clears the frozen header rather than hiding behind it: the header is
 * z-index 2 and this is 1, so an overlap would erase the label, not layer it. */
.pfg-challenge-table__offering {
	position: sticky;
	left: 0;
	top: var(--pfg-ct-head-h, 43px);
	z-index: 1;
	background: var(--pfg-ct-bg);

	/* A pinned column with no edge reads as a rendering artifact sliding over
	   the data rather than as a frozen panel. This is the same white-6%
	   hairline as the row rules, drawn as a border and not as a shadow. */
	border-right: 1px solid var(--pfg-ct-line);
}

.pfg-challenge-table thead th:first-child {
	left: 0;
	z-index: 3;
	border-right: 1px solid var(--pfg-ct-line);
}

.pfg-challenge-table td.pfg-num {
	font-variant-numeric: tabular-nums;
	color: #F2F3F8;
	font-weight: 600;
}

.pfg-challenge-table__price {
	font-family: var(--wp--preset--font-family--display, sans-serif);
	font-weight: 500;
	color: var(--acc, #A79FFF) !important;
}

.pfg-challenge-table__offering {
	font-weight: 400;
}

.pfg-challenge-table__name {
	display: block;
	font-family: var(--wp--preset--font-family--display, sans-serif);
	font-weight: 400;
	font-size: clamp(15px, 0.9vw, 18px);
	color: #F2F3F8;
}

.pfg-challenge-table__model {
	display: block;
	margin-top: 3px;
	font-size: clamp(11px, 0.63vw, 13px);
	color: #979CAD;
}

/* Evidence tier: brightness ladder, not hue. */
.pfg-challenge-table__tier {
	display: inline-flex;
	align-items: center;
	margin-top: 7px;
	padding: 1px 8px;
	border-radius: 999px;
	border: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #979CAD;
}

.pfg-challenge-table__tier[data-tier="verified"] {
	color: var(--acc, #A79FFF);
	border-color: var(--acc-border, rgba(167, 159, 255, 0.4));
}

.pfg-challenge-table__tier[data-tier="claimed"] {
	color: #979CAD;
}

.pfg-challenge-table__stages {
	color: #979CAD;
}

.pfg-challenge-table__na {
	color: #979CAD;
	font-weight: 400;
}

.pfg-challenge-table__note,
.pfg-challenge-table__empty {
	margin: 10px 2px 0;
	font-size: clamp(11.5px, 0.66vw, 13.5px);
	color: #979CAD;
}

.pfg-challenge-table__empty {
	margin: 0;
	color: #979CAD;
}

/* A promotional price is SECONDARY, and the styling has to say so.
 *
 * It renders below the price, quieter and lighter, because the editorial
 * position is that it is not the price of the product — the Tradeify review
 * states it outright. Giving it the accent, or the weight of
 * `__amount`, would contradict the copy printed beside it on the same page.
 *
 * It is also conditional and undated: every one of these rows has
 * `effectiveFrom: null`, the schema has no `effectiveTo`, and the condition
 * ("code E8, first order only") rides along in the same line. Quiet is the
 * honest register for a number we cannot promise a second buyer. */
.pfg-challenge-table__promo {
	display: block;
	margin-top: 3px;
	font-size: clamp(11px, 0.62vw, 12.5px);
	font-weight: 400;
	color: #979CAD;
}

/* The promotional figure keeps a little weight so the eye can find it, but
   stays in the muted colour — visible, and visibly not the headline. */
.pfg-challenge-table__promo-amount {
	font-weight: 600;
	color: #C6CBDD;
}

/* A FROZEN COLUMN HAS TO LEAVE ROOM FOR WHAT IT IS PINNING AGAINST.
 *
 * Measured at 375px before this rule: the offering cell was 261px of a 305px
 * scrollport — 86% of the screen — which freezes the table rather than the
 * column and leaves 44px of window for 391px of prices. The cell is wide
 * because `white-space: nowrap` applies to every cell in the table and the
 * product name sits in the display face.
 *
 * So on a phone the name wraps and the column takes a budget instead of a
 * measurement. Two frozen columns is the limit on a laptop and one is the
 * limit on a phone; this keeps that one honest.
 *
 * THREE THINGS HAD TO BE TRUE TOGETHER, and each was measured failing on its
 * own at 375px:
 *
 *   - The element selector. `white-space: nowrap` is set on
 *     `.pfg-challenge-table th, .pfg-challenge-table td` at (0,1,1); a bare
 *     `.pfg-challenge-table__offering` is (0,1,0) and loses on weight no
 *     matter where it sits in the file. Bare selector: the cell stayed 262px.
 *   - The wrap. In auto table layout a cell can never be narrower than its
 *     min-content, and under `nowrap` that is the whole product name. Wrapped,
 *     the widest child (the name) has a min-content of 79px, so the budget
 *     below is what actually decides the width.
 *   - `box-sizing`. Table cells here are content-box, so `width: 168.75px`
 *     plus 14px of padding a side plus the pinned border measured 198px, not
 *     169px. The budget has to include its own padding to mean anything.
 */
/*
 * READABLE ON A PHONE (mobile follow-up, 2026-09-17). Every clamp in this
 * table sits at its minimum on a phone: cells at 13px, the note under the table
 * at 11.5px, the model line and the promo line at 11px, the evidence pill at
 * 10px. Cells and the note take the `ui` token, 14px at these widths. The
 * uppercase column heads and the evidence pill are labels and stay small, but
 * no smaller than 12px; the model and promo lines are secondary lines under a
 * name or a price, and take the 12.5px `small` step. The table already scrolls
 * inside its own container, so wider cells cost scroll, not page overflow.
 */
@media (max-width: 760px) {
	.pfg-challenge-table table,
	.pfg-challenge-table__note,
	.pfg-challenge-table__empty {
		font-size: var(--wp--preset--font-size--ui, 14px);
	}

	.pfg-challenge-table thead th,
	.pfg-challenge-table__model,
	.pfg-challenge-table__promo {
		font-size: var(--wp--preset--font-size--small, 12.5px);
	}

	.pfg-challenge-table__tier {
		font-size: 12px;
	}
}

@media (max-width: 760px) {
	.pfg-challenge-table th.pfg-challenge-table__offering {
		box-sizing: border-box;
		white-space: normal;
		width: min(44vw, 190px);
		min-width: min(44vw, 190px);
	}
}