/**
 * Goal meter — the skin for [gcw_simple], [gcw_fullwidth], [gcw_goal_tracker],
 * [gcw_goal_tracker_peter] and [myif_match_tracker].
 *
 * WHY THIS FILE AND NOT THE SIX SHIPPED BESIDE IT. The other carried-over
 * component stylesheets style the Impact Report 2025 pages and the sector
 * reports, and every one of those was excluded BY NAME from the palette sweep
 * because it carries its own approved design - their old colours are a decision.
 * This widget has no such design: it appears inside ordinary pages whose
 * surroundings are already new-brand.
 *
 * TWO PASSES, AND THIS IS THE SECOND. On 2026-09-04 (improvement #348) the file
 * was recoloured onto the tokens: same shapes, brand colours. On 2026-09-07
 * Sandro asked for the trackers to be styled in the new brand rather than
 * merely recoloured, so the GEOMETRY now comes from the board as well.
 *
 * THE BOARD. _scratch/2026-09-04-boards/_board-campaign.svg draws this exact
 * component - the card at x=74.69 y=455.57, 926.68 x 178.79. Its artboard is
 * 1500 wide, the same 1500px mockup the type scale in 00-tokens.css was fitted
 * to, so a board pixel is a desktop pixel here:
 *
 *   card          rx 10.5, fill #e9ded7      -> --b26-radius-md, --b26-paper
 *   tinted strip  fill #fff at .6 over that  -> --b26-sand
 *   rail          stroke-width 20, round caps, an ink gradient 100% -> 10%
 *                 with the whole line at opacity .5
 *   fill          #ffb200                    -> --b26-yellow  (it was red)
 *   figures       Plus Jakarta SemiBold 38.21 -> display face, --b26-size-h2
 *   labels        Plus Jakarta SemiBold 20.06 -> display face, --b26-size-standfirst
 *   strip text    Instrument Sans 19.56, the numbers semibold, the words regular
 *   text inset    104.04 - 74.69 = 29.35      -> --b26-card-inset
 *
 * The board draws no marker on the rail. Sandro asked for one in the same
 * message, and these widgets already carry the brand mark through the plugin's
 * inc/shortcodes/campaign-progress-icon.php; what changed here is only its size,
 * which had been tuned to a 2px hairline that no longer exists.
 *
 * The card and strip are drawn on the board at 90% and 60% opacity over a dark
 * hero. Compositing THOSE against THAT ground would bake the board's own
 * backdrop into a component that mostly renders on white pages, so the two
 * nearest tokens are used instead - which is also what lets a re-colour reach
 * this file. Every value below resolves through a token; there is no colour
 * literal in this file, and tests/test-b26-campaign-marker.php enforces that.
 *
 * THE FACE IS A TOKEN TOO, and that is a correction rather than a carry-over.
 * The previous theme's copy of this file asked for "Neutrif Studio" at both
 * sites below. NOTHING DECLARED THAT FAMILY: its own bundle declares
 * NeutrifStudio - no space - and CSS matches a family name as a string, folding
 * case but not whitespace. So the meter rendered in the generic sans-serif in
 * the OLD theme as well. Nothing threw and the widget looked finished, which is
 * exactly why it survived the rebrand and arrived here verbatim.
 *
 * This theme's sitewide bundle declares no @font-face and fetches Instrument
 * Sans from Google Fonts, built from brand/tokens.json - so the body token is
 * both the brand-correct answer and the only one whose face is certainly on the
 * page. NeutrifStudio does still exist in the standalone-modals bundle, which
 * some views inject at runtime, which is precisely why a widget must not name
 * it. The token resolves here because the stylesheet defining :root is enqueued
 * on every front-end view, not because this file depends on it.
 */

/* ==========================================================================
   Version A - [gcw_simple], the compact card

   The board draws the full-width meter, not this one, so its shapes are the
   ones carried over. Only the palette and the faces are new, and they are the
   same tokens the full-width card below uses.
   ========================================================================== */

.global-campaign-widget {
	max-width: 400px;
	margin: 0 auto;
	text-align: center;
	font-family: var(--b26-font-body);
	color: var(--b26-ink);
}

.gcw-top-row {
	background-color: var(--b26-paper);
	border-radius: var(--b26-radius-md);
	padding: var(--b26-space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.gcw-raised,
.gcw-goal {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.gcw-raised span {
	align-self: start;
}

.gcw-goal span {
	align-self: end;
}

.gcw-raised-amount,
.gcw-goal-amount {
	font-family: var(--b26-font-display);
	font-weight: var(--b26-weight-h4);
	font-size: var(--b26-size-h4);
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	color: var(--b26-ink);
}

/* Font only. This class is also used INSIDE .gcw-matching-label, where a
   display or spacing rule here would break the sentence it sits in. */
.gcw-raised-label,
.gcw-goal-label {
	font-family: var(--b26-font-display);
	font-weight: var(--b26-weight-standfirst);
	font-size: var(--b26-size-small);
	color: var(--b26-ink);
}

/* The line between RAISED and GOAL. The -11px lift aligns it with the figures
   rather than with the labels under them. */
.gcw-separator {
	flex: 1;
	max-width: 150px;
	height: 1px;
	background-color: var(--b26-rule-strong);
	margin: 0 var(--b26-space-3);
	transform: translateY(-11px);
}

.gcw-bottom-row {
	text-align: center;
	margin-top: var(--b26-space-2);
}

.gcw-matching-amount {
	font-family: var(--b26-font-display);
	font-weight: var(--b26-weight-h4);
	font-size: var(--b26-size-h4);
	font-variant-numeric: tabular-nums;
	color: var(--b26-ink);
}

.gcw-matching-label {
	font-size: var(--b26-size-small);
	font-weight: var(--b26-weight-standfirst);
	color: var(--b26-ink-80);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: var(--b26-space-1);
}

/* ==========================================================================
   Version B / C - [gcw_fullwidth], [gcw_goal_tracker], [myif_match_tracker]

   This is the card the board draws. It was two pieces with a -10px overlap
   faking one rounded box; it is one box now, so the strip cannot drift away
   from the row above it at any width.
   ========================================================================== */

.global-campaign-widget-fullwidth {
	max-width: unset;
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--b26-radius-md);
	background: var(--b26-paper);
	/* The board draws a white hairline round the card. It is invisible where
	   the meter sits on a light page and reads where it sits on a dark band,
	   which is the case the board itself shows. */
	border: 1px solid color-mix(in srgb, var(--b26-white) 60%, transparent);
	text-align: center;
	font-family: var(--b26-font-body);
	color: var(--b26-ink);
}

.gcw-fw-top-row {
	padding: var(--b26-space-6) var(--b26-space-6) var(--b26-space-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.gcw-fw-raised,
.gcw-fw-goal {
	display: flex;
	flex-direction: column;
	flex: none;
}

.gcw-fw-raised-amount,
.gcw-fw-goal-amount {
	font-family: var(--b26-font-display);
	font-weight: var(--b26-weight-h2);
	font-size: var(--b26-size-h2);
	line-height: 1.05;
	letter-spacing: var(--b26-ls-h2);
	font-variant-numeric: tabular-nums;
	color: var(--b26-ink);
}

.gcw-fw-raised-label,
.gcw-fw-goal-label {
	font-family: var(--b26-font-display);
	font-weight: var(--b26-weight-standfirst);
	font-size: var(--b26-size-standfirst);
	line-height: var(--b26-lh-standfirst);
	color: var(--b26-ink);
	margin-top: var(--b26-space-1);
}

.gcw-fw-raised-label {
	align-self: flex-start;
}

.gcw-fw-goal-label {
	align-self: flex-end;
}

/* Emitted by no shortcode today. Kept because a stored Elementor document may
   still carry the markup, and a rule costs less than finding out. */
.gcw-fw-separator {
	flex: 1;
	height: 1px;
	background-color: var(--b26-rule-strong);
	margin: 0 var(--b26-space-4);
	transform: translateY(-12px);
}

/* The rail. The side margin is not decoration: the marker is 32px wide and is
   centred on the rail's end points, so it overhangs by 16px at 0% and at 100%,
   and the card clips its own overflow. */
.gcw-fw-progress-container {
	position: relative;
	height: 20px;
	flex: 1;
	min-width: 0;
	margin: 0 var(--b26-space-6);
	border-radius: var(--b26-radius-pill);
	/* The board's rail is one stroke painted with a gradient from ink to
	   ink-at-10%, the whole line then set to opacity .5 - so the ends are ink
	   at 50% and at 5%. Written out rather than borrowed from --b26-rule*,
	   none of which is either of those two values. */
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--b26-ink) 50%, transparent),
		color-mix(in srgb, var(--b26-ink) 5%, transparent)
	);
}

.gcw-fw-progress-bar-left {
	height: 100%;
	background-color: var(--b26-yellow);
	border-radius: var(--b26-radius-pill);
	width: 0%; /* starts from zero, set by the shortcode's own script */
	position: absolute;
	left: 0;
	top: 0;
}

.gcw-fw-progress-icon {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 32px;
	left: 0%; /* dynamically set by JS */
	z-index: 10;
}

.gcw-fw-bottom-row {
	background-color: var(--b26-sand);
	padding: var(--b26-space-3) var(--b26-space-6);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: var(--b26-space-1);
	font-size: var(--b26-size-standfirst);
	line-height: var(--b26-lh-standfirst);
	color: var(--b26-ink);
}

.gcw-fw-matching-amount {
	font-weight: var(--b26-weight-standfirst);
	font-variant-numeric: tabular-nums;
	color: var(--b26-ink);
}

.gcw-fw-bottom-details {
	color: var(--b26-ink);
	font-variant-numeric: tabular-nums;
}

/* The failure message the three scripts write when the proxy answers with an
   error or does not answer at all. It was an inline `color:red` in the PHP -
   the CSS keyword, not the brand's red, and invisible to a re-colour. */
.gcw-error {
	margin: 0;
	padding: var(--b26-space-4);
	font-family: var(--b26-font-body);
	font-size: var(--b26-size-small);
	color: var(--b26-red);
}

/* ===============================
   MOBILE PORTRAIT FIXES (<=600px)
   =============================== */
@media (max-width: 600px) {
	.global-campaign-widget-fullwidth {
		margin-top: var(--b26-space-4);
	}

	.gcw-fw-top-row {
		padding: var(--b26-space-4) var(--b26-space-4) var(--b26-space-3);
	}

	.gcw-fw-progress-container {
		margin: 0 var(--b26-space-5);
	}

	.gcw-fw-bottom-row {
		/* Keep the matching amount and details on one inline text flow on mobile
		   (was flex-direction: column, which forced a break after the amount). */
		display: block;
		gap: 0;
		padding: var(--b26-space-2) var(--b26-space-4);
		font-size: var(--b26-size-small);
	}

	.gcw-fw-matching-amount,
	.gcw-fw-bottom-details {
		font-size: var(--b26-size-small);
		text-align: center;
	}
}

/* ========== GOAL TRACKER (no-match variant) ========== */
.gcw-goal-tracker .gcw-fw-bottom-row {
	justify-content: center;
}

.gcw-goal-tracker .gcw-fw-bottom-details {
	font-weight: var(--b26-weight-standfirst);
}

/* Peter Singer goal-tracker: his face rather than the brand mark, scoped by the
   image src so ONLY this widget is affected - the [src*=...] attribute raises
   specificity above the base rule, so no !important is needed, and height:auto
   preserves the portrait aspect ratio.
   36px is the width gcw_goal_tracker_peter already declares in its shortcode
   registration, and it is one step above the 32px mark for the reason a face
   needs more room than a symbol. The previous 27px and its `top: -3px` lift
   were tuned to a 2px hairline rail - the lift floated him just above the line,
   which on a 20px rail would put him half off it - so the lift is gone and he
   is centred like every other marker. NOT yet seen in a browser: verify on
   /peter-singer-80-gift/ before this reaches production. */
.gcw-fw-progress-icon[src*="peter_singer"] {
	width: 36px;
	height: auto;
}