/**
 * Hooray SourceSignal for Google Preferred Sources — front end.
 *
 * Written to sit inside somebody else's design without arguing with it:
 * inherits the theme's font and colours by default, sets nothing globally,
 * and exposes every value a publisher can change as a custom property that the
 * plugin prints on the element itself. Nothing here needs to be pasted into
 * Additional CSS, and nothing here can leak onto the rest of the page.
 */

.psfp-cta {
	--psfp-radius: 6px;
	--psfp-padding: 20px;
	--psfp-border: 1px solid;
	--psfp-border-color: rgba(128, 128, 128, 0.32);
	--psfp-bg: transparent;
	/* currentColor, not inherit: a CSS-wide keyword in a token inherits the
	   token from the parent, not the property — see the text link below. */
	--psfp-color: currentColor;
	--psfp-button-bg: #1a73e8;
	--psfp-button-color: #fff;
	--psfp-gap: 0.85em;

	/*
	 * The focus ring, in two tones.
	 *
	 * It used to be `currentColor`, which on the solid button is the *label*
	 * colour — white — drawn two pixels outside the button on a white page.
	 * A keyboard reader got no visible focus at all on card, inline and
	 * custom. Two rings instead: a dark one for a light page and a light
	 * halo between it and the control, so one of the two always contrasts,
	 * whichever ground the invitation has been dropped onto.
	 */
	--psfp-focus-ring: #1a1a1a;
	--psfp-focus-halo: #fff;

	/*
	 * The control's shape, as tokens.
	 *
	 * Everything below that decides how the button is *shaped* is applied
	 * from one of these, so a presentation sets a token rather than
	 * re-declaring a property — see "Themes that shout" below for why the
	 * declarations themselves have to be !important, and why a variant that
	 * set the property directly would then lose to its own base rule.
	 */
	--psfp-btn-display: inline-block;
	--psfp-btn-width: auto;
	--psfp-btn-gap: 0;
	--psfp-btn-padding: 0.75em 1.35em;
	/* A comfortable tap target on a phone, which is where most of these are
	 * pressed. */
	--psfp-btn-min-height: 44px;
	--psfp-btn-border: 0;
	--psfp-btn-radius: var(--psfp-radius);
	--psfp-btn-bg: var(--psfp-button-bg);
	--psfp-btn-color: var(--psfp-button-color);
	--psfp-btn-font-size: 1em;
	--psfp-btn-font-weight: 600;
	--psfp-btn-line-height: 1.2;
	--psfp-btn-align: center;
	--psfp-btn-decoration: none;
	--psfp-btn-shadow: none;
	--psfp-btn-wrap: normal;

	box-sizing: border-box;
	margin: 1.75em 0;
	max-width: 100%;
	font-family: inherit;
	color: var(--psfp-color);
}

.psfp-cta *,
.psfp-cta *::before,
.psfp-cta *::after {
	box-sizing: inherit;
}

/*
 * Visibility.
 *
 * A suppressible invitation starts hidden and is revealed only once the tiny
 * inline script at the top of the page has confirmed this browser has not been
 * asked recently. Doing it this way round means a suppressed invitation never
 * flashes up and disappears, and the HTML stays byte-identical for every
 * visitor so full-page caching still works.
 *
 * If `psfp-ready` never arrives the bootstrap did not run — JavaScript is off,
 * or a content-security policy refused the inline script. Either way nothing
 * on the page will work, so every invitation drops to its <noscript> link:
 * the wrapper shows, its interactive contents do not, and the frame around it
 * goes too. Without that last part a site with a strict CSP is left with an
 * empty bordered box, because <noscript> content is not rendered when
 * scripting is merely blocked rather than switched off.
 *
 * This applies to every invitation, not only the suppressible ones. A CTA with
 * "hide it from readers who have used it" turned off is exactly as dead
 * without JavaScript as one with it turned on, and used to be left showing a
 * button that did nothing next to a link that worked.
 */
.psfp-cta[data-psfp-suppressible="1"] {
	display: none;
}

.psfp-fresh .psfp-cta[data-psfp-suppressible="1"] {
	display: block;
}

html:not(.psfp-ready) .psfp-cta[data-psfp-live] {
	display: block;
	padding: 0;
	border: 0;
	background: none;
}

html:not(.psfp-ready) .psfp-cta[data-psfp-live] .psfp-cta__inner {
	display: none;
}

.psfp-cta[hidden],
.psfp-cta__inner[hidden] {
	display: none !important;
}

/*
 * For a publisher's own markup: put this class on anything that should
 * disappear once a reader has used the invitation — a whole section, a menu
 * item, a card wrapping their own button.
 */
.psfp-asked .psfp-hide-when-asked {
	display: none !important;
}

/*
 * 1.15em, not the 1.05em this shipped with: at 1.05 the heading and the
 * sentence under it are the same size to the eye, and the only thing telling
 * them apart is the weight. A step of one size is the least that reads as a
 * heading, and it still sits below the article's own headings.
 */
/* The <strong> inside carries the weight when the stylesheet is missing; here
 * the paragraph owns it, so the two do not compound into something heavier. */
.psfp-cta__heading strong {
	font-weight: inherit;
}

.psfp-cta__heading {
	margin: 0 0 0.3em;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.3;
	font-family: inherit;
	color: inherit;
}

.psfp-cta__text {
	margin: 0 0 var(--psfp-gap);
	line-height: 1.5;
	color: inherit;
}

.psfp-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	align-items: center;
}

/*
 * The button.
 *
 * The selector is heavier than it looks like it needs to be, on purpose.
 * Themes style bare `button` elements with rules such as Twenty Twenty-One's
 * `button:not(:hover):not(:active):not(.has-background)` — three pseudo-classes
 * deep — and a single class loses to that. The result was a publisher choosing
 * a colour in the settings and getting the theme's instead, silently.
 *
 * Every part of this selector is an attribute or class the markup already
 * carries, so it costs nothing. A publisher who would rather have their
 * theme's own button look has a better route: build the button with the
 * Button block and tick "Open the preferred sources card".
 *
 * Themes that shout.
 *
 * That selector is heavy enough to beat any ordinary theme rule, and for a
 * year that was enough. It is not enough for a theme that writes
 * `button { … !important }` — and page builders do: dropping such a rule onto
 * this page turns the pill into a full-width square, the promotional panel's
 * button into a block, and the little × in the corner of the card into a
 * cyan bar painted across the heading. That last one is not hypothetical; it
 * is what a Kadence site did to 1.0 in the field.
 *
 * !important is the only thing that answers !important, so the properties
 * that decide the *shape* of a control we drew carry it. Two rules keep that
 * from becoming a nuisance:
 *
 *   1. It is confined to the two controls this plugin renders — the fire
 *      button and the close control. Nothing else on the page is touched,
 *      and the theme keeps every one of its own buttons.
 *   2. Each value comes from a custom property, so a publisher who does want
 *      their theme's look sets `--psfp-btn-…` on the invitation and needs no
 *      !important of their own to be heard. Setting the button up with the
 *      Button block and "Open the preferred sources card" is still the
 *      better route for that.
 *
 * The font *family* stays an ordinary declaration — inheriting the theme's
 * type is the whole point of the design, and a theme that gives its buttons a
 * face of their own is welcome to give ours one too. The colours do not: they
 * are values the publisher chose on the settings screen, and a theme repainting
 * our blue button in its own brand colour is how a "Make us a preferred source"
 * button ends up unreadable.
 */
.psfp-cta[data-psfp-cta] .psfp-cta__button[data-psfp-fire] {
	font: inherit;
	font-size: var(--psfp-btn-font-size) !important;
	font-weight: var(--psfp-btn-font-weight) !important;
	line-height: var(--psfp-btn-line-height) !important;
	display: var(--psfp-btn-display) !important;
	align-items: center;
	justify-content: center;
	gap: var(--psfp-btn-gap) !important;
	box-sizing: border-box !important;
	width: var(--psfp-btn-width) !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: var(--psfp-btn-min-height) !important;
	margin: 0 !important;
	padding: var(--psfp-btn-padding) !important;
	border: var(--psfp-btn-border) !important;
	border-radius: var(--psfp-btn-radius) !important;
	background: var(--psfp-btn-bg) !important;
	color: var(--psfp-btn-color) !important;
	box-shadow: var(--psfp-btn-shadow) !important;
	text-align: var(--psfp-btn-align) !important;
	text-decoration: var(--psfp-btn-decoration) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: var(--psfp-btn-wrap) !important;
	cursor: pointer;
	transition: filter 0.15s ease;
}

/*
 * The same values without the attribute selectors, for anything rendering the
 * markup outside a live page — the block editor's canvas, a preview iframe —
 * where the wrapper's attributes may have been stripped by the editor.
 */
.psfp-cta__button {
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
	padding: 0.75em 1.35em;
	min-height: 44px;
	width: auto;
	border: 0;
	border-radius: var(--psfp-radius);
	background: var(--psfp-button-bg);
	color: var(--psfp-button-color);
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/*
 * The same fallback for the two presentations that are not a card-shaped
 * button. Without these, a page builder that strips the wrapper's attributes
 * turns the text link and the pill into the solid blue button above.
 */
.psfp-cta--link .psfp-cta__button {
	padding: 0;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: underline;
}

.psfp-cta--pill .psfp-cta__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 0;
	padding: 0.4em 0.9em 0.4em 0.7em;
	border: 1px solid rgba(60, 64, 67, 0.3);
	border-radius: 999px;
	background: #fff;
	color: #1f1f1f;
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
}

/*
 * Repeated on :hover rather than left to the rule above, because a theme's own
 * `button:hover` is both more specific and, on the sites this is written for,
 * !important — so the resting state can be defended and the hover state still
 * flash the theme's colour under the reader's pointer.
 */
.psfp-cta[data-psfp-cta] .psfp-cta__button[data-psfp-fire]:hover {
	filter: brightness(0.92);
	background: var(--psfp-btn-bg) !important;
	color: var(--psfp-btn-color) !important;
	border: var(--psfp-btn-border) !important;
	border-radius: var(--psfp-btn-radius) !important;
	padding: var(--psfp-btn-padding) !important;
	width: var(--psfp-btn-width) !important;
}

/*
 * Two rings: a dark one and a light halo in the gap between it and the
 * control. On a white page the dark ring carries it; on a dark one the halo
 * does. `currentColor` used to draw a white ring on a white page — a focus
 * indicator that was technically present and completely invisible.
 */
.psfp-cta[data-psfp-cta] .psfp-cta__button[data-psfp-fire]:focus-visible {
	outline: 3px solid var(--psfp-focus-ring) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px var(--psfp-focus-halo) !important;
}

.psfp-cta__status {
	margin: 0.6em 0 0;
	font-size: 0.9em;
	line-height: 1.4;
	opacity: 0.85;
}

/*
 * The status line is a live region, so it has to be in the accessibility tree
 * *before* anything is written into it — a change inside a `display: none`
 * element is not announced. So it is clipped rather than removed: no visual
 * footprint, still spoken.
 */
.psfp-cta__status:not(.is-visible) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.psfp-cta__fallback {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------- dismissal */

/*
 * The close control. Only drawn on the framed presentations, and only when
 * closing actually buys the reader something — see Renderer::close_control().
 */
.psfp-cta--card,
.psfp-cta--custom {
	position: relative;
}

/*
 * !important here for the reason given above the fire button: a theme rule of
 * the shape `button { width: 100%; padding: 2rem; background: … !important }`
 * turns this 44px square into a bar painted across the top of the card, over
 * the heading. That is precisely what a Kadence site did to 1.0.
 */
.psfp-cta[data-psfp-cta] .psfp-cta__close[data-psfp-close] {
	position: absolute !important;
	top: 0 !important;
	/* Logical, so it sits on the correct side in a right-to-left language
	 * rather than over the text. */
	inset-inline-end: 0 !important;
	inset-inline-start: auto !important;
	/* Comfortable on a phone, and clear of the card's own padding. */
	width: auto !important;
	height: auto !important;
	min-width: 44px !important;
	min-height: 44px !important;
	max-width: 44px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: var(--psfp-radius) !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit;
	font-size: 1.15em !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	opacity: 0.6;
	cursor: pointer;
}

.psfp-cta[data-psfp-cta] .psfp-cta__close[data-psfp-close]:hover {
	opacity: 1;
	background: none !important;
	color: inherit !important;
}

.psfp-cta[data-psfp-cta] .psfp-cta__close[data-psfp-close]:focus-visible {
	outline: 3px solid currentColor !important;
	outline-offset: -3px !important;
	opacity: 1;
}

/*
 * Room for it, so a long heading does not run underneath.
 *
 * 34px, not the control's full 44px width: the × itself is about 20px wide
 * and centred in that box, so it stops around 32px in from the card's edge.
 * The rest of the control is invisible tap area, and reserving it took a
 * third of the measure out of a heading on a 320px screen.
 */
.psfp-cta--card .psfp-cta__close ~ .psfp-cta__heading,
.psfp-cta--custom .psfp-cta__close ~ .psfp-cta__heading {
	padding-inline-end: 34px;
}

/*
 * A dismissed invitation keeps its place in the document so the reader's focus
 * is not thrown to the top of the page, but stops occupying any of it.
 */
.psfp-cta--dismissed[data-psfp-cta] {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.psfp-cta--dismissed[data-psfp-cta]:focus {
	outline: none;
}

.psfp-cta__dismissed-note {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- styles */

/* Card — a bordered block. The default, and the one that reads as an
 * invitation rather than as part of the article. */
.psfp-cta--card,
.psfp-cta--custom {
	padding: var(--psfp-padding);
	border: var(--psfp-border) var(--psfp-border-color);
	border-radius: var(--psfp-radius);
	background: var(--psfp-bg);
}

.psfp-cta--borderless {
	border: 0;
}

/* Inline — the button on its own, no framing. */
.psfp-cta--inline .psfp-cta__text {
	margin-bottom: 0.6em;
}

/* Link — a quiet run of text, for a footer or a menu. */
.psfp-cta--link {
	margin: 0.75em 0;
}

.psfp-cta--link[data-psfp-cta] .psfp-cta__button[data-psfp-fire],
.psfp-cta--link[data-psfp-cta] .psfp-cta__button[data-psfp-fire]:hover {
	--psfp-btn-padding: 0;
	--psfp-btn-min-height: 0;
	--psfp-btn-bg: none;
	--psfp-btn-align: start;
	--psfp-btn-decoration: underline;

	/*
	 * Set directly, not through the tokens. `--psfp-btn-color: inherit` on a
	 * custom property inherits the *token* from the parent — where it is the
	 * button's default white — so the link came out white on a white page
	 * and nobody saw it (found by the 1.1 publisher review). These carry the
	 * same !important as the token rules and win on specificity.
	 */
	color: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	text-underline-offset: 0.2em;
}

.psfp-cta--link[data-psfp-cta] .psfp-cta__button[data-psfp-fire]:hover {
	filter: none;
	opacity: 0.75;
}

/*
 * Google's own button. We draw the frame; everything inside is Google's.
 *
 * The slot stays a flex item rather than becoming a full-width block, so the
 * alignment rules below move the control itself. As a block box it filled the
 * row, and "centre" could then only centre whatever Google happened to draw
 * inline inside it — which is Google's business, changes between drawings
 * (an iframe in one, a shadow Material button in another), and left "centre"
 * and "right" doing nothing at all on the one presentation a publisher is
 * least able to restyle.
 */
.psfp-cta--google .psfp-cta__actions > [google-add-preferred-source-btn] {
	/* Shrink to whatever Google drew rather than to the width of the row. */
	flex: 0 0 auto;
	max-width: 100%;
}

/* ------------------------------------------------------- button variants */

.psfp-button--outline[data-psfp-cta] .psfp-cta__button[data-psfp-fire],
.psfp-button--outline[data-psfp-cta] .psfp-cta__button[data-psfp-fire]:hover {
	--psfp-btn-bg: transparent;
	--psfp-btn-color: var(--psfp-button-bg);
	--psfp-btn-border: 2px solid var(--psfp-button-bg);
}

.psfp-button--text[data-psfp-cta] .psfp-cta__button[data-psfp-fire],
.psfp-button--text[data-psfp-cta] .psfp-cta__button[data-psfp-fire]:hover {
	--psfp-btn-padding: 0.2em 0;
	--psfp-btn-min-height: 0;
	--psfp-btn-bg: none;
	--psfp-btn-color: var(--psfp-button-bg);
	--psfp-btn-align: start;
	--psfp-btn-decoration: underline;

	text-underline-offset: 0.2em;
}

/* ----------------------------------------------------------- alignment */

.psfp-align-center {
	text-align: center;
}

.psfp-align-center .psfp-cta__actions {
	justify-content: center;
}

.psfp-align-right {
	text-align: right;
}

.psfp-align-right .psfp-cta__actions {
	justify-content: flex-end;
}

/* Full width reads better on a phone, where a 200px button in the middle of a
 * 380px screen looks like an accident. */
.psfp-cta--full[data-psfp-cta] .psfp-cta__button[data-psfp-fire] {
	--psfp-btn-width: 100%;
	--psfp-btn-display: block;
}

.psfp-cta--full .psfp-cta__actions {
	display: block;
}

/*
 * And on a phone it reads better whatever the setting says.
 *
 * At 375px the default label already wraps to two lines inside a button a
 * dozen pixels short of the column, so the "shrink to fit" the publisher
 * chose is not what they get: they get a ragged box with centred text in a
 * left-aligned frame. Below 480px the three stacked presentations take the
 * whole column, which is the shape every other button on a phone has. The
 * promotional panel already did this at 599px, for the same reason.
 */
@media (max-width: 480px) {
	.psfp-align-left.psfp-cta--card[data-psfp-cta] .psfp-cta__button[data-psfp-fire],
	.psfp-align-left.psfp-cta--custom[data-psfp-cta] .psfp-cta__button[data-psfp-fire],
	.psfp-align-left.psfp-cta--inline[data-psfp-cta] .psfp-cta__button[data-psfp-fire] {
		--psfp-btn-width: 100%;
		--psfp-btn-display: block;
	}

	.psfp-align-left.psfp-cta--card .psfp-cta__actions,
	.psfp-align-left.psfp-cta--custom .psfp-cta__actions,
	.psfp-align-left.psfp-cta--inline .psfp-cta__actions {
		display: block;
	}
}

/* ------------------------------------------ Google-branded presentations */

/*
 * Two presentations carry Google's coloured G: the compact pill and the
 * promotional panel. Both are ours — our markup, our wording, our fire path —
 * and neither goes anywhere near the slot Google draws into.
 *
 * The mark itself is inline SVG with its four colours painted onto the paths
 * by the renderer, and its pixel size printed as width/height attributes. So
 * everything below is layout only: if this stylesheet is stripped by an
 * optimizer — which is exactly what LiteSpeed's Unique CSS did to 1.0 on a
 * live site — the G is still four-colour and still the right size.
 */
.psfp-cta__mark {
	display: block;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------ the pill */

/*
 * A chip, not a panel. It is meant to sit in a line of type — after a byline,
 * beside a date — so the wrapper shrinks to the control rather than claiming
 * a row of its own, and it may appear more than once on a page.
 */
.psfp-cta--pill {
	display: inline-block;
	max-width: 100%;
	margin: 0.5em 0;
	vertical-align: middle;
}

/*
 * The two rules that hand a revealed invitation `display: block` were written
 * for panels. Matched here at the same specificity and later in the file, so
 * the bootstrap revealing a pill — or a page where the bootstrap never ran —
 * does not turn a chip into a full-width row.
 */
.psfp-fresh .psfp-cta--pill[data-psfp-suppressible="1"] {
	display: inline-block;
}

html:not(.psfp-ready) .psfp-cta--pill[data-psfp-live] {
	display: inline-block;
}

/*
 * The same defence the ordinary button uses, at the same specificity: every
 * part of the selector is something the markup already carries, and no
 * !important anywhere. Kadence's global button styles are the known hazard —
 * in 1.0 they turned our control into a giant blue square — so every property
 * a theme's `button` rule is likely to set is set here rather than left to
 * chance: box, colour, radius, weight, spacing and case.
 */
.psfp-cta--pill[data-psfp-cta] .psfp-cta__button[data-psfp-fire] {
	--psfp-btn-display: inline-flex;
	--psfp-btn-gap: 0.5em;
	--psfp-btn-width: auto;
	--psfp-btn-min-height: 0;
	--psfp-btn-padding: 0.4em 0.9em 0.4em 0.7em;
	--psfp-btn-border: 1px solid rgba(60, 64, 67, 0.3);
	--psfp-btn-radius: 999px;
	--psfp-btn-bg: #fff;
	--psfp-btn-color: #1f1f1f;
	--psfp-btn-font-size: 0.875em;
	--psfp-btn-font-weight: 500;
	--psfp-btn-line-height: 1.25;
	--psfp-btn-align: start;
	--psfp-btn-shadow: 0 1px 2px rgba(60, 64, 67, 0.16);
	/* Blue on white: the ring the rest of the page uses would be a dark ring
	 * against a white chip on a white ground. */
	--psfp-focus-ring: #1967d2;

	justify-content: flex-start;
	filter: none;
}

.psfp-cta--pill[data-psfp-cta] .psfp-cta__button[data-psfp-fire]:hover {
	--psfp-btn-bg: #f1f3f4;
	--psfp-btn-border: 1px solid rgba(60, 64, 67, 0.4);

	filter: none;
}

/* Wrapping is allowed — a publisher may write a longer label than ours — but
 * it wraps as a block of text beside the mark rather than pushing the mark
 * off centre. */
.psfp-cta__pill-label {
	min-width: 0;
}

/* --------------------------------------------------- the promotional panel */

/*
 * A house ad. Deliberately unlike `card`: dark, self-contained, and not
 * inheriting the page's colours, because a promotion that looks like the
 * article around it is not a promotion.
 */
.psfp-cta--promo {
	position: relative;
}

.psfp-cta--promo .psfp-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
	padding: 22px 24px;
	border-radius: 8px;
	/* A colour first, then the gradient over it: an optimizer or an old
	 * browser that drops the image still gets the panel. */
	background-color: #12141a;
	background-image: linear-gradient(180deg, #1c212b 0%, #12141a 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	/* On the inner, not the wrapper: the <noscript> link lives outside it, on
	 * the page's own background, and white text there would be invisible. */
	color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
}

.psfp-cta__promo-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex: 1 1 260px;
	min-width: 0;
}

/* Optically level with the first line of the heading rather than its box. */
.psfp-cta--promo .psfp-cta__mark {
	margin-top: 1px;
}

.psfp-cta__copy {
	min-width: 0;
}

.psfp-cta--promo .psfp-cta__heading {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	/* Where the browser has it, an even two lines rather than a long first
	 * line and one orphaned word. Ignored everywhere else. */
	text-wrap: balance;
}

.psfp-cta--promo .psfp-cta__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.76);
}

.psfp-cta--promo .psfp-cta__actions {
	flex: 0 0 auto;
}

.psfp-cta--promo[data-psfp-cta] .psfp-cta__button[data-psfp-fire] {
	--psfp-btn-min-height: 40px;
	--psfp-btn-padding: 0.65em 1.3em;
	--psfp-btn-radius: 6px;
	/* Google's blue 700 rather than 500: the same family, and white on it
	 * clears the contrast threshold that 14px bold has to clear. */
	--psfp-btn-bg: #1967d2;
	--psfp-btn-color: #fff;
	--psfp-btn-font-size: 14px;
	--psfp-btn-font-weight: 600;
	--psfp-btn-line-height: 1.2;
	--psfp-btn-wrap: nowrap;
	/* White ring, panel-coloured halo: the panel is the ground here. */
	--psfp-focus-ring: #fff;
	--psfp-focus-halo: #12141a;

	filter: none;
}

.psfp-cta--promo[data-psfp-cta] .psfp-cta__button[data-psfp-fire]:hover {
	--psfp-btn-bg: #174ea6;

	filter: none;
}

/* A whole row of its own when it has something to say, out of the flow while
 * it has not — see the clipping rule above. */
.psfp-cta--promo .psfp-cta__status {
	flex: 0 0 100%;
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	opacity: 1;
}

.psfp-cta--promo .psfp-cta__status a {
	color: #fff;
}

/*
 * Room for the close control, which sits over the panel's top corner.
 *
 * On the first line only. Reserving it on the whole column cost every line of
 * the copy 28px for the sake of one control in the corner, and at 320px that
 * is a tenth of the measure — the heading came out three ragged lines deep
 * with a hole beside the last of them.
 */
.psfp-cta--promo .psfp-cta__close ~ .psfp-cta__promo-row .psfp-cta__copy::before {
	content: "";
	float: inline-end;
	width: 30px;
	/* One line of the heading, so the second line and everything under it get
	 * the full measure back. Padding could only take the space out of every
	 * line at once. */
	height: 22px;
}

@media (max-width: 599px) {
	.psfp-cta--promo .psfp-cta__inner {
		display: block;
		padding: 18px;
	}

	.psfp-cta--promo .psfp-cta__promo-row {
		margin-bottom: 14px;
	}

	.psfp-cta--promo .psfp-cta__actions {
		display: block;
	}

	/* Full width on a phone, which is where most of these are pressed. */
	.psfp-cta--promo[data-psfp-cta] .psfp-cta__button[data-psfp-fire] {
		--psfp-btn-display: block;
		--psfp-btn-width: 100%;
		--psfp-btn-wrap: normal;
	}
}

/* ------------------------------------------------ the settings preview */

/*
 * The same two breakpoints again, measured against the box the invitation is
 * in rather than the window.
 *
 * Only ever active inside the settings screen's preview stage, which is the
 * one place that names the container (`admin/css/admin.css`). Nothing on a
 * reader's page declares `container-name: psfp-preview`, so nothing on a
 * reader's page is affected, and a browser without container queries ignores
 * the lot — the front end keeps working from the media queries above.
 *
 * It is here because a media query asks the *window*, and the preview's
 * "Phone" preset only narrows a 375px column inside a 1280px window. The
 * publisher pressed Phone and was shown the desktop layout at phone width:
 * the promotional panel's button sized to its label where a real phone gives
 * it the full width, which is the one thing the panel's own description in
 * the selector promises.
 */
@container psfp-preview (max-width: 599px) {
	.psfp-cta--promo .psfp-cta__inner {
		display: block;
		padding: 18px;
	}

	.psfp-cta--promo .psfp-cta__promo-row {
		margin-bottom: 14px;
	}

	.psfp-cta--promo .psfp-cta__actions {
		display: block;
	}

	.psfp-cta--promo[data-psfp-cta] .psfp-cta__button[data-psfp-fire] {
		--psfp-btn-display: block;
		--psfp-btn-width: 100%;
		--psfp-btn-wrap: normal;
	}
}

@container psfp-preview (max-width: 480px) {
	.psfp-align-left.psfp-cta--card[data-psfp-cta] .psfp-cta__button[data-psfp-fire],
	.psfp-align-left.psfp-cta--custom[data-psfp-cta] .psfp-cta__button[data-psfp-fire],
	.psfp-align-left.psfp-cta--inline[data-psfp-cta] .psfp-cta__button[data-psfp-fire] {
		--psfp-btn-width: 100%;
		--psfp-btn-display: block;
	}

	.psfp-align-left.psfp-cta--card .psfp-cta__actions,
	.psfp-align-left.psfp-cta--custom .psfp-cta__actions,
	.psfp-align-left.psfp-cta--inline .psfp-cta__actions {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.psfp-cta[data-psfp-cta] .psfp-cta__button[data-psfp-fire] {
		transition: none;
	}
}