/* Sign-in — design v3.1: the header's account area (1F), its sign-in modal
   (1E), and the sign-up widget both the modal and the gate use (1A, 1B,
   1H, 1G). Loaded for signed-out visitors, on every page with the header,
   and for signed-in readers, whose header carries the account menu
   (Reader\HeaderAccount). The gate adds gate.css on top, on gated briefs
   only (Gate\Render).

   The widget's rules are the approved design's own stylesheet (index.html
   l.223-447, phone rules l.583-605) as D1 ported it onto the plugin's
   `cre-` names; the header's and the modal's are its l.264-279, 449-458
   and 568-572. The design's variables map onto the theme.json presets; its
   spacing is the fixed px the design uses. The only literal colours are
   the ones with no preset: the form-validation red #AD3322, the thank-you
   greens #3B9231, Google's #747775 and #1F1F1F, and the design's shadows.

   The theme styles bare elements — `button` (uppercase, 600, 43/54px tall),
   `input` (54px, and !important padding and size on text inputs), `h2`
   (Proxima Nova 900) and `p > a` (primary-03, no underline). Every control
   and heading below therefore sets each of those properties itself.

   Nothing here may hide any part of the theme's page: this file loads on
   every page. (Subscribe for a recognised reader is one inline rule,
   HeaderAccount::assets(), there only while hiding is switched on.) */

/* --- 1. Hidden parts ------------------------------------------------------

   Parts that start hidden and are revealed by script set their own display
   below, which would otherwise beat the browser's own [hidden] rule. */
.cre-auth [hidden],
.cre-modal[hidden],
.cre-header-account [hidden],
.cre-usermenu [hidden] {
	display: none !important;
}

.cre-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- 2. The widget's views (.c-gate__grid) -------------------------------- */

/* The design's base type (its .vp frame): theme.json's own body settings.
   Set here because the theme drops the body to small-text on phones, and
   the few widget parts that inherit (the "Change" link) must not follow it. */
.cre-auth {
	color: var(--wp--preset--color--black-secondary);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	line-height: 1.35;
}

/* One step at a time: message left, action right. */
.cre-gate__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: 32px 64px;
	align-items: center;
}

.cre-gate__message {
	min-width: 0;
}

/* CRE Daily Insider lockup: the wordmark plus a purple tag. */
.cre-gate__lockup {
	position: relative;
	display: flex;
	width: max-content;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
}

.cre-gate__lockup img {
	display: block;
	width: 124px;
	height: auto;
}

.cre-gate__lockup-tag {
	padding: 6px 8px 5px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--primary-03);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-small-text);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* "Almost there: confirm it's you", "Code expired", and the free-brief
   count with its pips (one per free brief). */
.cre-gate__meter {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--wp--preset--color--spanish-gray);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-small-text);
	font-weight: 600;
	line-height: 1.35;
}

.cre-pips {
	display: inline-flex;
	gap: 4px;
}

.cre-pips i {
	display: block;
	width: 22px;
	height: 4px;
	background-color: var(--wp--preset--color--primary-05);
}

.cre-pips i.is-on {
	background-color: var(--wp--preset--color--primary-03);
}

/* The in-article h3 look (utopia, heading-3, 600, 1.1), not the theme's h2. */
.cre-gate__title {
	position: relative;
	margin: 0 0 12px;
	color: var(--wp--preset--color--primary-02);
	font-family: var(--wp--preset--font-family--utopia-std);
	font-size: var(--wp--preset--font-size--heading-3);
	font-style: normal;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: normal;
	text-transform: none;
}

/* Article body text (body-01, 1.4). */
/* A view's title takes focus when the view changes under the reader (a spent
   code), so screen readers announce it; it is not a control, so no ring. */
.cre-gate__title:focus {
	outline: 0;
}

.cre-gate__text {
	position: relative;
	max-width: 560px;
	margin: 0;
	color: var(--wp--preset--color--granite-gray);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-01);
	line-height: 1.4;
}

.cre-gate__text b {
	color: var(--wp--preset--color--primary-03);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.cre-gate__text .cre-link {
	white-space: nowrap;
}

/* The action column: capture, help, OR, Google, legal — 12px apart. */
.cre-gate__action {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 12px;
}

/* The code step uses the email step's minmax(0, 520px) column (R4). */

/* The design's stroke icons. */
.cre-ic {
	flex: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cre-ic--16 {
	width: 16px;
	height: 16px;
}

/* --- 3. Buttons and links (.btn, .link) ---------------------------------- */

/* form.scss .gform_button: small-text, 46px tall, 12px 24px; hover softens
   the shadow and shows the gradient. */
.cre-btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	margin: 0;
	padding: 12px 24px;
	border: 0;
	border-radius: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--primary-03) 0%, var(--wp--preset--color--primary-02) 100%);
	box-shadow: 0 12px 20px rgba(95, 33, 217, 0.2);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small-text);
	font-style: normal;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: box-shadow 0.2s;
}

/* button.scss's layers (R1): the box is the hover gradient; ::before is the
   flat primary-03 face, which fades away on hover while the shadow
   tightens. Nothing moves. */
.cre-btn::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--primary-03);
	content: "";
	transition: opacity 0.2s;
}

.cre-btn:hover {
	box-shadow: 0 4px 12px rgba(95, 33, 217, 0.2);
	color: var(--wp--preset--color--white);
}

.cre-btn:hover::before {
	opacity: 0;
}

/* The outline and danger buttons keep their own fills. */
.cre-btn--ghost::before,
.cre-btn--ghost-danger::before,
.cre-btn--danger::before {
	display: none;
}

/* form.scss .c-gform-inline submit at lg: 56px tall, 0.5rem 2.5rem. */
.cre-btn--lg {
	height: 56px;
	padding: 0.5rem 2.5rem;
}

.cre-btn--block {
	width: 100%;
}

.cre-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	box-shadow: none;
}

.cre-btn[disabled]::after {
	display: none;
}

/* "Continue free", "Continue", "Continue as …", "Activate free account"
   (R1): a soft ring every 2.4s on its own layer. The keyframe only ever
   animates this layer's one shadow; hover and keyboard focus fade the
   layer out over 0.4s while the ring keeps running underneath, so it
   dissolves where it is instead of snapping off, and comes back mid-cycle. */
.cre-btn--pulse::after {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	content: "";
	animation: cre-ring 2.4s ease-out infinite;
	transition: opacity 0.4s ease-out;
}

.cre-btn--pulse:hover::after,
.cre-btn--pulse:focus-visible::after {
	opacity: 0;
}

@keyframes cre-ring {
	0% {
		box-shadow: 0 0 0 0 rgba(95, 34, 216, 0.45);
	}

	70%,
	100% {
		box-shadow: 0 0 0 14px rgba(95, 34, 216, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cre-btn--pulse::after {
		animation: none;
		opacity: 0;
	}
}

/* A button at work (client feedback, 8 Oct: a faded "Continue" looked
   frozen). feedback.js's busy() sets aria-busy="true" and disabled, and
   holds the button's width. It keeps its full flat face, no shadow, a progress
   cursor, and a 14px spinner in its text colour before the label (the
   button's 8px gap apart): the free ::after layer, since a disabled button
   draws no pulse ring. Reduced motion: the same ring, still. */
.cre-btn[aria-busy="true"],
.cre-auth__google[aria-busy="true"] {
	opacity: 1;
	cursor: progress;
}

/* The flat face stays on, hovered or not (a tap leaves :hover behind). */
.cre-btn[aria-busy="true"]::before {
	opacity: 1;
}

.cre-btn[aria-busy="true"]::after,
.cre-auth__google[aria-busy="true"]::after {
	position: static;
	z-index: auto;
	display: block;
	box-sizing: border-box;
	flex: none;
	order: -1;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	box-shadow: none;
	opacity: 1;
	content: "";
	animation: cre-spin 0.7s linear infinite;
	transition: none;
}

@keyframes cre-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cre-btn[aria-busy="true"]::after,
	.cre-auth__google[aria-busy="true"]::after {
		animation: none;
	}
}

/* Inline text links: 600, in the colour of the text around them (the
   design's `.vp a { color: inherit }` wins over its `.link` black), with a
   2px primary-05 bar that turns primary-03 on hover. The :hover selectors
   outrank the theme's `p > a:hover`. */
.cre-link,
.cre-link:hover,
.cre-link:focus {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--primary-05);
	transition: border-color 0.2s;
	cursor: pointer;
}

.cre-link:hover {
	border-bottom-color: var(--wp--preset--color--primary-03);
}

.cre-link.cre-link--p3 {
	color: var(--wp--preset--color--primary-03);
}

/* One focus ring for every control (R6): primary-03, 2px, 2px out — 7.76:1
   on white, 6.99:1 on lavender. */
.cre-btn:focus-visible,
.cre-link:focus-visible,
.cre-toast__x:focus-visible,
.cre-auth__terms a:focus-visible,
.cre-meterbar__x:focus-visible,
.cre-auth__code input[type="text"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-03);
	outline-offset: 2px;
}

/* --- 4. The email capture (EmailCapturing-Form) --------------------------- */

/* Field and button joined, 56px. */
.cre-auth__row {
	position: relative;
	display: flex;
	height: 56px;
	margin: 0;
}

/* form.scss .gfield input: body-02, 1px platinum, hover/focus → primary-05
   (the design's focus indicator; no outline), placeholder battleship-gray.
   The whole wrapper carries the border, so the mail icon sits inside it. */
.cre-auth__field {
	display: flex;
	flex: 1;
	min-width: 0;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--platinum);
	background-color: var(--wp--preset--color--white);
	cursor: text;
	transition: border-color 0.25s ease-in-out;
}

.cre-auth__field img {
	display: block;
	width: 22px;
	height: 22px;
}

.cre-auth__field .cre-auth__input {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 1px 2px;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--black-secondary);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-02);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: normal;
}

.cre-auth__field .cre-auth__input::placeholder {
	color: var(--wp--preset--color--battleship-gray);
	opacity: 1;
}

.cre-auth__field:hover {
	border-color: var(--wp--preset--color--primary-05);
}

/* Fields draw the ring inside (R6): the button joined to the field would
   cut through an outside one. A 2px primary-03 edge: the border and a 1px
   inset. */
.cre-auth__field:focus-within {
	border-color: var(--wp--preset--color--primary-03);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary-03);
	transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.cre-auth__row .cre-btn {
	height: 56px;
	padding: 0.5rem 2.5rem;
}

/* Validation colours come from the site's form.scss, which predates
   theme.json and has no preset. */
.cre-auth__row.is-error .cre-auth__field {
	border-color: #ad3322;
	box-shadow: none;
}

/* The honeypot must be unreachable for people and invisible to assistive
   technology, but still submitted, so it is positioned away rather than
   display:none — some bots skip hidden fields. */
.cre-auth__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Only present when a Turnstile site key is configured (off at launch). */
.cre-auth .cf-turnstile {
	margin: 0;
}

/* reCAPTCHA v3 (when it is the bot check): Google's badge is hidden and its
   required words show under the form instead (Markup::recaptcha_notice()).
   Only while a form carrying those words is on screen: the gate once it
   opens (it ships `hidden`), the sign-in modal while it is open, the account
   page's sign-in. A closed gate or modal still holds the words, unseen, so
   their being in the page is not enough; and auth.css is on every page for
   signed-out visitors, where another plugin's badge (the Gravity Forms
   reCAPTCHA add-on's) must stay. A browser without :has() shows the badge,
   which is always allowed. */
body:has([data-cre-gate]:not([hidden]) .cre-auth__recaptcha) .grecaptcha-badge,
body:has([data-cre-modal]:not([hidden]) .cre-auth__recaptcha) .grecaptcha-badge,
body:has([data-cre-account-signin] .cre-auth__recaptcha) .grecaptcha-badge {
	visibility: hidden;
}

/* Helper, countdown, spam and legal lines (.fine: form.scss
   .gfield_description). */
.cre-auth__help,
.cre-auth__terms {
	margin: 0;
	color: var(--wp--preset--color--granite-gray);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-small-text);
	line-height: 1.6;
}

/* Google's reCAPTCHA disclosure is the one legal line in the theme's
   xx-small-text size (10px); "By continuing..." keeps x-small-text. */
.cre-auth__terms.cre-auth__recaptcha {
	font-size: var(--wp--preset--font-size--xx-small-text);
	line-height: 1.5;
}

.cre-auth__terms a,
.cre-auth__terms a:hover,
.cre-auth__terms a:focus {
	color: var(--wp--preset--color--granite-gray);
	font-weight: 600;
	text-decoration: underline;
	border-bottom: 0;
}

/* The wrong-code state (1B c) drops the spam line, whichever line says it. */
.cre-msg--error:not([hidden]) ~ .cre-auth__spam,
.cre-msg--field:not([hidden]) ~ .cre-auth__spam {
	display: none;
}

/* Inline message (R3b): errors, a field's line, a success inside a modal or
   the gate, and notes, next to what they are about. Shared tokens: square,
   a 16px icon, x-small-text / 1.45, 10px 12px, a 1px edge and a tint; body
   text granite, so every message passes contrast. */
.cre-msg {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid transparent;
	color: var(--wp--preset--color--granite-gray);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-small-text);
	line-height: 1.45;
}

.cre-msg .cre-ic {
	width: 16px;
	height: 16px;
	margin-top: 1px;
}

.cre-msg b {
	color: inherit;
	font-weight: 600;
}

/* A save or load failed: validation red on its tint (5.7:1). */
.cre-msg--error {
	border-color: #e7b8b1;
	background-color: #fbefed;
	color: #ad3322;
}

/* A field's own line (form.scss .validation_message): no box. */
.cre-msg--field {
	margin-top: -4px;
	padding: 0;
	border: 0;
	background: none;
	color: #ad3322;
}

/* Only inside a modal or the gate: granite text, the green on the icon and
   the edge. */
.cre-msg--success {
	border-color: #9dde85;
	background-color: #f5fdef;
}

.cre-msg--success .cre-ic {
	color: #3b9231;
}

/* A note the reader needs at that point. */
.cre-msg--info {
	border-color: var(--wp--preset--color--primary-05);
	background-color: var(--wp--preset--color--primary-07);
}

.cre-msg--info .cre-ic {
	color: var(--wp--preset--color--primary-03);
}

/* --- 5. "Continue with Google" (hidden until Google is configured) -------- */

.cre-auth__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--wp--preset--color--battleship-gray);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--xx-small-text);
	font-weight: 600;
	line-height: 1.35;
	text-transform: uppercase;
}

.cre-auth__or::before,
.cre-auth__or::after {
	flex: 1;
	height: 1px;
	background-color: var(--wp--preset--color--primary-05);
	content: "";
}

/* Google's Light theme from its Sign in with Google branding guidelines:
   #747775 stroke, #1F1F1F Google Sans Medium 14/20, 12px before the G, 10px
   after it. The fixed 14px is Google's, not a theme.json preset. */
.cre-auth__google {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 56px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #747775;
	border-radius: 0;
	background: var(--wp--preset--color--white);
	box-shadow: none;
	color: #1f1f1f;
	cursor: pointer;
	font-family: "Google Sans", var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: normal;
	text-transform: none;
	transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out;
}

.cre-auth__google:hover {
	background: var(--wp--preset--color--cultured);
}

/* Pressed: platinum. Keyboard focus: cultured and the one ring (R6), 2px
   outside Google's outline, which never changes colour. */
.cre-auth__google:active {
	background: var(--wp--preset--color--platinum);
}

.cre-auth__google:focus-visible {
	background: var(--wp--preset--color--cultured);
	outline: 2px solid var(--wp--preset--color--primary-03);
	outline-offset: 2px;
}

.cre-auth__google img {
	display: block;
	width: 20px;
	height: 20px;
}

/* Unavailable (not working: a busy button is drawn above, unfaded). */
.cre-auth__google[disabled]:not([aria-busy="true"]) {
	opacity: 0.45;
	cursor: not-allowed;
}

.cre-auth__google[disabled]:hover {
	background: var(--wp--preset--color--white);
}

/* --- 6. The 6-digit code -------------------------------------------------- */

.cre-auth__code {
	position: relative;
	display: flex;
	gap: 8px;
	margin: 0;
}

/* The theme sets padding and font-size on text inputs with !important
   (input.scss), so these three must too. The six boxes share their row:
   exactly as wide as the button under them (R4). */
.cre-auth__code input[type="text"] {
	display: block;
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
	height: 56px !important;
	margin: 0;
	padding: 0 !important;
	border: 1px solid var(--wp--preset--color--platinum);
	border-radius: 0;
	outline: 0;
	background: var(--wp--preset--color--white);
	box-shadow: none;
	color: var(--wp--preset--color--black-secondary);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--heading-5) !important;
	font-weight: 600;
	text-align: center;
	align-items: normal;
	caret-color: var(--wp--preset--color--primary-03);
	transition: border-color 0.25s ease-in-out;
}

/* Hover, and a filled box keeps a primary-05 edge, so progress shows. */
.cre-auth__code input[type="text"]:hover,
.cre-auth__code input[type="text"]:not(:placeholder-shown) {
	border-color: var(--wp--preset--color--primary-05);
}

/* Wrong: red edges and digits (form.scss's aria-invalid colour) until the
   reader types again. */
.cre-auth__code.is-error input[type="text"] {
	border-color: #ad3322;
	color: #ad3322;
}

/* "Let's send you a new code" (1B d): the address the new code goes to. */
.cre-auth__address {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	max-width: 520px;
	min-height: 56px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--platinum);
	background-color: var(--wp--preset--color--cultured);
}

.cre-auth__address img {
	display: block;
	flex: none;
	width: 22px;
	height: 22px;
}

.cre-auth__address-value {
	flex: 1;
	color: var(--wp--preset--color--black-secondary);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-02);
	overflow-wrap: anywhere;
}

/* --- 7. The two steps after the code (1H) ---------------------------------

   Today's /signup/ newsletters, then today's /onboarding/ questions, inside
   the gate (index.html l.342-370; phone rules l.590-595). Each is a whole
   view in one column: the message, then the form under it. */
.cre-gate__grid--stack {
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
}

.cre-gate__grid--stack .cre-gate__text {
	max-width: 760px;
}

.cre-welcome {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

/* The button, the skip link and the fine print, on a primary-06 rule. */
.cre-welcome__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--primary-06);
}

.cre-welcome__foot .cre-auth__help {
	flex: 1;
	min-width: 240px;
}

/* "No thanks" and "Skip for now": spanish-gray on a platinum bar, which
   turns primary-03 on hover like every other link. */
.cre-link.cre-link--muted,
.cre-link.cre-link--muted:focus {
	color: var(--wp--preset--color--spanish-gray);
	border-bottom-color: var(--wp--preset--color--platinum);
}

.cre-link.cre-link--muted:hover {
	color: var(--wp--preset--color--spanish-gray);
	border-bottom-color: var(--wp--preset--color--primary-03);
}

/* "More newsletters" (1H a): one card per edition, three a row with
   National, two when auth.js leaves National out. */
.cre-editions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.cre-editions--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The Gravity Forms checkbox look (.check). The theme gives every input a
   54px height and no outline, so the box sets both itself. */
.cre-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--wp--preset--color--granite-gray);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-small-text);
	font-weight: 400;
	line-height: 1.5;
}

.cre-check input[type="checkbox"] {
	display: grid;
	flex: none;
	place-content: center;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	padding: 0;
	border: 1.5px solid var(--wp--preset--color--spanish-gray);
	border-radius: 0;
	background: var(--wp--preset--color--white);
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.cre-check input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--primary-03);
	background: var(--wp--preset--color--primary-03);
}

.cre-check input[type="checkbox"]:checked::after {
	width: 10px;
	height: 5px;
	border-bottom: 2px solid var(--wp--preset--color--white);
	border-left: 2px solid var(--wp--preset--color--white);
	content: "";
	transform: rotate(-45deg) translate(1px, -1px);
}

/* The design draws no focus state for the box; keyboard readers still need
   one, and the theme's `input { outline: none }` removes the browser's. */
.cre-check input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-03);
	outline-offset: 2px;
}

.cre-edition {
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--platinum);
	background-color: var(--wp--preset--color--white);
}

.cre-edition b {
	display: block;
	color: var(--wp--preset--color--black-secondary);
	font-size: var(--wp--preset--font-size--small-text);
	font-weight: 700;
}

.cre-edition input:checked + span b {
	color: var(--wp--preset--color--primary-03);
}

.cre-edition__freq {
	display: block;
	margin: 2px 0 6px;
	color: var(--wp--preset--color--spanish-gray);
	font-size: var(--wp--preset--font-size--xx-small-text);
	font-weight: 600;
	text-transform: uppercase;
}

.cre-edition__state {
	display: block;
	margin-top: 10px;
	color: var(--wp--preset--color--primary-03);
	font-size: var(--wp--preset--font-size--xx-small-text);
	font-weight: 600;
	text-transform: uppercase;
}

/* "Select" until ticked, then "Selected". */
.cre-edition input:checked + span .cre-edition__off,
.cre-edition input:not(:checked) + span .cre-edition__on {
	display: none;
}

/* National: subscribed at the gate, locked. */
.cre-edition--subscribed {
	background-color: var(--wp--preset--color--cultured);
	cursor: default;
}

.cre-edition--subscribed input[type="checkbox"] {
	cursor: default;
}

/* Granite, not green (R6: green only on icons and borders). */
.cre-edition--subscribed .cre-edition__state {
	color: var(--wp--preset--color--granite-gray);
}

/* "About you" (1H b): three questions a row, bottom-aligned so the boxes
   line up under the longer labels. */
.cre-welcome__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 20px;
}

.cre-welcome__grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
}

.cre-welcome__field {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.cre-welcome__label {
	color: var(--wp--preset--color--black-secondary);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small-text);
	font-weight: 600;
	line-height: 1.35;
}

/* form.scss .gfield input and select, 46px. The inputs carry no type, so
   the theme's input[type="text"] !important rules never reach them; its
   bare `input` height does, hence the explicit height. */
.cre-welcome__input,
.cre-welcome__select select {
	display: block;
	width: 100%;
	max-width: none;
	height: 46px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--platinum);
	border-radius: 0;
	outline: 0;
	background: var(--wp--preset--color--white);
	box-shadow: none;
	color: var(--wp--preset--color--black-secondary);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-02);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	transition: border-color 0.25s ease-in-out;
}

.cre-welcome__input::placeholder {
	color: var(--wp--preset--color--battleship-gray);
	opacity: 1;
}

.cre-welcome__input:hover,
.cre-welcome__select select:hover {
	border-color: var(--wp--preset--color--primary-05);
}

.cre-welcome__input:focus,
.cre-welcome__select select:focus {
	border-color: var(--wp--preset--color--primary-03);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary-03);
}

/* The select box (.c-selectfield): a real <select>, with the chevron drawn
   over its right edge (14px in, 12px clear of the text). */
.cre-welcome__select {
	position: relative;
	display: block;
}

.cre-welcome__select select {
	padding-right: 42px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* "Please Select" in the placeholder grey, an answer in black. */
.cre-welcome__select select:invalid {
	color: var(--wp--preset--color--battleship-gray);
}

.cre-welcome__select option {
	color: var(--wp--preset--color--black-secondary);
}

.cre-welcome__select .cre-ic {
	position: absolute;
	top: 50%;
	right: 14px;
	color: var(--wp--preset--color--granite-gray);
	pointer-events: none;
	transform: translateY(-50%);
}

/* A question left unanswered gets the form's red border (form.scss). */
.cre-welcome__input[aria-invalid="true"],
.cre-welcome__select select[aria-invalid="true"] {
	border-color: #ad3322;
}

/* --- 8. Narrower screens --------------------------------------------------

   The design draws two frames: 1280 wide, and a phone (its container rules
   at ≤560px). Below the theme's lg breakpoint the 520px action column would
   squeeze the message to nothing, so the two columns stack there; the
   phone sizes apply from 560px down, as in the design. */
@media (max-width: 61.99em) {
	.cre-gate__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 35em) {
	.cre-gate__grid {
		gap: 24px;
	}

	.cre-gate__lockup {
		margin-bottom: 16px;
	}

	.cre-gate__lockup img {
		width: 104px;
	}

	/* form.scss: inputs and buttons are 46px below lg; the button goes full
	   width under the field. */
	.cre-auth__row {
		flex-direction: column;
		height: auto;
		gap: 10px;
	}

	.cre-auth__field {
		flex: none;
		height: 46px;
	}

	.cre-auth__row .cre-btn {
		width: 100%;
		height: 46px;
	}

	.cre-btn--lg {
		height: 46px;
	}

	.cre-auth__google {
		height: 46px;
	}

	.cre-auth__code {
		gap: 6px;
	}

	.cre-auth__code input[type="text"] {
		height: 48px !important;
	}

	.cre-auth__address {
		min-height: 46px;
	}

	/* The phone frames (1G) say "Change" and "Terms", and leave the spam
	   line off the code step. */
	.cre-wide-only,
	.cre-auth__spam {
		display: none;
	}

	/* 1H on a phone (1G): one card and one question a row, the button full
	   width and the skip link centred under it. */
	.cre-welcome__grid,
	.cre-editions,
	.cre-editions--3,
	.cre-welcome__grid--3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.cre-welcome__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.cre-welcome__foot .cre-btn {
		width: 100%;
	}

	.cre-welcome__foot .cre-link {
		align-self: center;
	}
}

/* --- 9. The header: "Sign in" and the account menu (1F) --------------------

   Filled into the theme's header by Reader\HeaderAccount: in the bar next
   to search from 36em up (.c-header__cta, the theme's own flex row and its
   32px gap), and in the phone header next to the menu button below that,
   where the theme hides the whole bar. */
.cre-header-account {
	display: flex;
	align-items: center;
}

/* Just before the menu button; the design's phone header keeps its
   right-hand items 16px apart (l.571). */
.cre-header-account--mobile {
	margin-right: 16px;
}

@media (min-width: 36em) {
	.cre-header-account--mobile {
		display: none;
	}
}

/* "Sign in" (.c-signin): a plain text link with no underline and no border,
   so it never competes with Subscribe (note 1F-1). A link to the account
   page, which header.js turns into the modal's opener; every property the
   theme's button and link rules could set is set here, so it looks the
   same whichever element it is. */
.cre-signin,
.cre-signin:visited {
	position: relative;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--black-secondary);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small-text);
	font-style: normal;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	transition: color 0.25s ease-in-out;
}

/* As the header's other controls (search, Menu) do. */
.cre-signin:hover {
	color: var(--wp--preset--color--primary-03);
	text-decoration: none;
}

.cre-signin:focus {
	text-decoration: none;
}

/* The design draws no focus state; keyboard readers still need one. */
.cre-signin:focus-visible,
.cre-usermenu__trigger:focus-visible,
.cre-usermenu__link:focus-visible,
.cre-usermenu__add-name:focus-visible,
.cre-modal__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-03);
	outline-offset: 2px;
}

/* The account menu (.c-usermenu): the avatar and a chevron open a panel
   with who is signed in and a link to each tab of the account page. */
.cre-usermenu {
	position: relative;
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--black-secondary);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small-text);
	font-weight: 600;
	line-height: 1.35;
}

/* The avatar alone, no name (note 1F-3), 8px from the chevron. */
.cre-usermenu__trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	/* The theme's button rule transitions everything over 0.5s; nothing on
	   this element itself needs a transition (its icon and avatar carry
	   their own), so without this the focus-visible ring animates in
	   instead of snapping on (R6). */
	transition: none;
}

/* Initials in Proxima Nova Black, primary-03 on primary-06. 15px (13px on
   phones) is the design's own size: there is no preset between x-small and
   small. */
.cre-avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary-06);
	color: var(--wp--preset--color--primary-03);
	font-family: var(--wp--preset--font-family--proxima-nova);
	font-size: 15px;
	font-style: normal;
	font-weight: 900;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	overflow: hidden;
}

/* The reader's photo, when they have one, in place of the initials. */
.cre-avatar img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
}

/* The chevron turns primary-03 on hover, as the Menu button does; open, it
   points up; the avatar gets the panel's primary-05 border as a ring. */
.cre-usermenu__trigger .cre-ic {
	transition: transform 0.325s cubic-bezier(0.66, 0.44, 0.11, 0.9), color 0.25s ease-in-out;
}

.cre-usermenu__trigger:hover .cre-ic,
.cre-usermenu.is-open .cre-usermenu__trigger .cre-ic {
	color: var(--wp--preset--color--primary-03);
}

.cre-usermenu.is-open .cre-usermenu__trigger .cre-ic {
	transform: rotate(180deg);
}

.cre-usermenu .cre-avatar {
	transition: box-shadow 0.25s ease-in-out;
}

.cre-usermenu.is-open .cre-usermenu__trigger .cre-avatar {
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary-05);
}

/* The panel (R2b): 280 wide, 14px under the trigger, square, 8px inside so
   a row's fill and focus ring never touch the border. It fades and slides
   8px with the header panels' easing, at half their 650ms: it travels 8px,
   not a screen. header.js takes `hidden` off before it opens and puts it
   back 325ms after it closes. */
.cre-usermenu__drop {
	position: absolute;
	z-index: 10;
	top: calc(100% + 14px);
	right: 0;
	width: 280px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--wp--preset--color--primary-05);
	border-radius: 0;
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 18px 48px rgba(35, 22, 72, 0.12);
	text-align: left;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.325s cubic-bezier(0.66, 0.44, 0.11, 0.9), transform 0.325s cubic-bezier(0.66, 0.44, 0.11, 0.9);
}

.cre-usermenu.is-open .cre-usermenu__drop {
	opacity: 1;
	transform: none;
}

/* Who (R2 note 2): 40px avatar; name small-text 600 (a weight the site
   loads); the address x-small-text spanish-gray; text 20px from the edge. */
.cre-usermenu__who {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px 12px 16px;
}

.cre-usermenu__id {
	min-width: 0;
}

.cre-usermenu__id b {
	display: block;
	font-size: var(--wp--preset--font-size--small-text);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.cre-usermenu__id span {
	display: block;
	color: var(--wp--preset--color--spanish-gray);
	font-size: var(--wp--preset--font-size--x-small-text);
	font-weight: 400;
	overflow-wrap: anywhere;
}

/* "Add your name" (note 1F-5), to the Profile tab. */
.cre-usermenu__add-name,
.cre-usermenu__add-name:hover,
.cre-usermenu__add-name:focus {
	display: inline-block;
	margin: 2px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary-03);
	font-size: var(--wp--preset--font-size--x-small-text);
	font-weight: 600;
	text-decoration: none;
}

/* Three groups, two full-width platinum dividers, 8px above and below. */
.cre-usermenu__sep {
	height: 1px;
	margin: 0 -8px 8px;
	background: var(--wp--preset--color--platinum);
}

.cre-usermenu__group + .cre-usermenu__sep {
	margin-top: 8px;
}

.cre-usermenu__group {
	display: block;
	margin: 0;
	padding: 0;
}

/* Rows (R2 note 3): 44px, a comfortable tap; primary-03 on primary-07 on
   hover, easing in 0.25s like the mega-menu tabs. */
.cre-usermenu__link,
.cre-usermenu__link:focus {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--black-secondary);
	font-size: var(--wp--preset--font-size--small-text);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, padding-left 0.25s ease-in-out;
}

.cre-usermenu__link:hover {
	background-color: var(--wp--preset--color--primary-07);
	color: var(--wp--preset--color--primary-03);
}

/* The tab the reader is on: the account tabs' own marker. */
.cre-usermenu__link[aria-current="page"] {
	background-color: var(--wp--preset--color--primary-07);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--primary-03);
	color: var(--wp--preset--color--primary-03);
}

/* Focus: the one ring (R6), lifted over its neighbours. */
.cre-usermenu__link:focus-visible {
	position: relative;
	z-index: 2;
}

/* Sign out: a row like the others, in spanish-gray. */
.cre-usermenu__link--out,
.cre-usermenu__link--out:focus {
	color: var(--wp--preset--color--spanish-gray);
}

@media (prefers-reduced-motion: reduce) {
	.cre-usermenu__drop {
		transform: none;
	}
}

@keyframes cre-sheet-in {
	from {
		transform: translateY(-300%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes cre-sheet-out {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-300%);
	}
}

/* Phones (R2c): the theme's Menu and Search sheet — primary-07, full
   width, from under the header to the bottom of the screen, sliding from
   behind the header with the theme's keyframes (copied: the plugin never
   leans on theme CSS) over 0.65s. header.js sets --cre-sheet-top to the
   header's bottom edge. */
@media (max-width: 35em) {
	.cre-usermenu__trigger > .cre-ic {
		display: none;
	}

	.cre-usermenu .cre-avatar {
		width: 34px;
		height: 34px;
		font-size: 13px;
	}

	.cre-usermenu {
		position: static;
	}

	.cre-usermenu.is-open .cre-usermenu__trigger .cre-avatar {
		box-shadow: 0 0 0 2px var(--wp--preset--color--primary-03);
	}

	.cre-usermenu__drop {
		position: fixed;
		z-index: -1;
		top: var(--cre-sheet-top, 58px);
		right: 0;
		left: 0;
		width: auto;
		height: calc(100vh - var(--cre-sheet-top, 58px));
		padding: 16px;
		overflow-y: auto;
		border: 0;
		border-top: 1px solid var(--wp--preset--color--primary-06);
		background: var(--wp--preset--color--primary-07);
		box-shadow: none;
		opacity: 1;
		transform: translateY(-300%);
		transition: none;
	}

	.cre-usermenu.is-open .cre-usermenu__drop {
		transform: none;
		animation: cre-sheet-in 0.65s cubic-bezier(0.66, 0.44, 0.11, 0.9) forwards;
	}

	.cre-usermenu.is-closing .cre-usermenu__drop {
		animation: cre-sheet-out 0.65s cubic-bezier(0.66, 0.44, 0.11, 0.9) forwards;
	}

	.cre-usermenu__who {
		margin-bottom: 16px;
		padding: 16px;
		background: var(--wp--preset--color--white);
	}

	.cre-usermenu__sep {
		display: none;
	}

	/* White 44px blocks 2px apart; Sign out its own block 16px lower. */
	.cre-usermenu__group {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.cre-usermenu__group ~ .cre-usermenu__group {
		margin-top: 16px;
	}

	.cre-usermenu__link,
	.cre-usermenu__link:hover,
	.cre-usermenu__link[aria-current="page"] {
		background: var(--wp--preset--color--white);
	}

	/* Hover or press nudges the words 4px right (the mega-menu tab's move). */
	.cre-usermenu__link:hover {
		padding-left: 16px;
	}
}

@media (prefers-reduced-motion: reduce) and (max-width: 35em) {
	.cre-usermenu.is-open .cre-usermenu__drop,
	.cre-usermenu.is-closing .cre-usermenu__drop {
		animation: none;
	}
}

/* --- 10. The sign-in modal (1E) ---------------------------------------------

   The site's own pop-up shell (.c-pop-up--fng, pop-up.scss): the lavender
   panel with the purple border over primary-02 at 64%, and a lilac ×.
   Inside it, the gate's widget in one column. Above the theme's sticky
   header (z-index 9999). */
.cre-modal {
	position: fixed;
	z-index: 100000;
	inset: 0;
	display: flex;
	overflow-y: auto;
	padding: 16px;
	overscroll-behavior: contain;
}

/* primary-02 at 64%, drawn the way the theme's pop-up draws it. */
.cre-modal__overlay {
	position: fixed;
	inset: 0;
	background-color: var(--wp--preset--color--primary-02);
	opacity: 0.64;
}

/* Centred; a panel taller than the screen scrolls as a whole. */
.cre-modal__panel {
	position: relative;
	box-sizing: border-box;
	width: 568px;
	max-width: 100%;
	margin: auto;
	padding: 40px 40px 32px;
	border: 1px solid var(--wp--preset--color--primary-03);
	border-radius: 0;
	background-color: var(--wp--preset--color--primary-07);
	text-align: left;
}

/* A plain ×, 30px as designed; the theme's pop-up close turns primary-03
   on hover. */
.cre-modal__close {
	position: absolute;
	top: 6px;
	right: 12px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 1px 6px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--primary-05);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	transition: color 0.25s ease-in-out;
}

.cre-modal__close:hover {
	color: var(--wp--preset--color--primary-03);
}

.cre-modal__bull {
	position: absolute;
	top: 32px;
	right: 40px;
	width: 52px;
	max-width: none;
	height: auto;
	margin: 0;
}

/* The widget in one column: the message, then the form 20px under it. */
.cre-modal .cre-gate__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

/* 1E's title: heading-4, clear of the mascot. */
.cre-modal .cre-gate__title {
	max-width: calc(100% - 64px);
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--heading-4);
}

.cre-modal .cre-gate__text {
	max-width: none;
	font-size: var(--wp--preset--font-size--body-02);
	line-height: 1.4;
}

/* The field, help, OR, Google and the legal line: 14px apart. */
.cre-modal .cre-gate__action {
	gap: 14px;
}

/* The two steps after the code (note 1E-2) in the modal's width: one card
   and one question a row, as on a phone (1G). At two a row an answer box is
   narrower than its placeholder. */
.cre-modal .cre-editions,
.cre-modal .cre-editions--3,
.cre-modal .cre-welcome__grid--3 {
	grid-template-columns: minmax(0, 1fr);
}

/* The page stays where it is underneath. */
html.cre-modal-open,
html.cre-modal-open body {
	overflow: hidden;
}

/* Popup Maker's pop-ups (the site's timed newsletter pop-up among them)
   stay out of the way while the modal is open: never seen on top of it,
   never clicked, never holding the keyboard. Hidden by visibility, not
   display, so Popup Maker still lays one out, places it and fades it in as
   it always does; nothing invisible can be seen, hit or focused (Popup
   Maker's attempt to focus it simply fails), and Tab passes it by. Its
   container and parts declare visibility:visible themselves, hence every
   descendant and the !important. Its open-state side effect, 15px of
   scrollbar padding on every other child of <body>, is undone for the same
   time: on this site none of them has padding of its own, and the modal
   keeps its 16px. Once the modal closes the pop-up is Popup Maker's again,
   exactly where it put it (header.js gives it focus). Inert where Popup
   Maker is not installed. */
html.cre-modal-open .pum-overlay,
html.cre-modal-open .pum-overlay * {
	visibility: hidden !important;
}

html.cre-modal-open.pum-open.pum-open-overlay.pum-open-scrollable body > :not([aria-modal="true"]):not(.cre-modal) {
	padding-right: 0;
}

html.cre-modal-open.pum-open.pum-open-overlay.pum-open-scrollable body > .cre-modal {
	padding-right: 16px;
}

/* Phones: the design has no phone frame for the modal. The theme pop-up's
   phone padding and the gate's 40px mascot. */
@media (max-width: 35em) {
	.cre-modal__panel {
		padding: 3rem 1.25rem 2rem;
	}

	.cre-modal__bull {
		top: 3rem;
		right: 1.25rem;
		width: 40px;
	}

	.cre-modal .cre-gate__meter {
		padding-right: 48px;
	}
}

/* --- 11. The toast (R3b) -----------------------------------------------------

   A finished action, in one place: fixed 20px under the header (feedback.js
   keeps it there as the header slides), centred, as wide as its words up to
   760px. Above the header (9999) and under the modals (100000). */
.cre-toast {
	position: fixed;
	z-index: 10000;
	top: 170px;
	left: 50%;
	display: flex;
	align-items: center;
	gap: 10px;
	width: max-content;
	max-width: min(760px, calc(100% - 32px));
	margin: 0;
	padding: 6px 6px 6px 20px;
	border: 1px solid #9dde85;
	background-color: #f5fdef;
	box-shadow: 0 12px 32px rgba(20, 20, 40, 0.12);
	color: var(--wp--preset--color--granite-gray);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small-text);
	line-height: 1.35;
	translate: -50% 0;
}

.cre-toast[hidden] {
	display: none !important;
}

.cre-toast > .cre-ic {
	color: #3b9231;
}

.cre-toast__text {
	padding: 6px 0;
}

.cre-toast__text b {
	color: var(--wp--preset--color--black-secondary);
	font-weight: 600;
}

/* The × (32px, "Dismiss"): spanish-gray, black on hover. */
.cre-toast__x,
.cre-toast__x:hover,
.cre-toast__x:focus {
	display: grid;
	flex: none;
	place-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--spanish-gray);
	cursor: pointer;
	transition: color 0.25s ease-in-out;
}

.cre-toast__x:hover {
	color: var(--wp--preset--color--black-secondary);
}

/* In: fades in and drops 8px, with the header panels' easing. Out: 0.6s. */
.cre-toast.is-in {
	animation: cre-toast-in 0.325s cubic-bezier(0.66, 0.44, 0.11, 0.9) both;
}

.cre-toast.is-gone {
	opacity: 0;
	transition: opacity 0.6s;
	pointer-events: none;
}

@keyframes cre-toast-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes cre-toast-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Phones: 16px from each side, and it wraps. */
@media (max-width: 35em) {
	.cre-toast {
		right: 16px;
		left: 16px;
		align-items: flex-start;
		width: auto;
		max-width: none;
		padding-left: 16px;
		translate: none;
	}

	.cre-toast > .cre-ic {
		margin-top: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cre-toast.is-in {
		animation-name: cre-toast-fade;
	}
}