/* Registration gate — design v3.1, screens 1A, 1B (with the recognised
   newsletter reader's view, 1B a), 1C, 1D, 1G, 1H, 1I.
   Loaded on gated briefs only (Render::assets()), after auth.css.

   The sign-up widget inside the gate — its views, fields, buttons, the
   code, Google and the two steps after the code — is auth.css, which the
   header's sign-in modal shares. This file is the gate around it: what
   waits behind the gate, the box and its mascot, the recognised newsletter
   reader's "Continue as …" (the gate's alone), the toast (1C), the
   heads-up bar (1D) and Key Takeaways above the gate (1I).

   This is the approved design's own stylesheet (index.html l.223-447 and
   its phone rules, l.583-605), ported onto the plugin's `cre-` class names —
   the design's bare names (.btn, .link, .c-sidebar…) collide with the
   theme's. Its colour, type and font 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 thank-you greens #3B9231 /
   #F5FDEF / #9DDE85, and the purple/navy shadows the theme itself writes as
   literals (form.scss, button.scss). */

/* --- 1. What waits behind the gate ---------------------------------------

   The HTML is untouched — the full brief is always in the page — and these
   are only display rules in the reader's browser. They need two classes:
   - body.cre-gate-active, printed by the server on every anonymous view of a
     gated brief (so the HTML is identical for everyone), and removed by
     gate.js when the reader is let through;
   - html.cre-gate-js, added by the inline head script (Render::HEAD_SCRIPT)
     and taken off again at `load` if gate.js never initialised.
   So with scripts off, blocked or broken the brief simply shows: the gate
   fails open, never blank. Every rule that hides the theme's page is scoped
   under both.

   As designed (1A note 8), the page goes straight from the gate to the
   footer: the article, the share rail and the sidebar (with its subscribe
   box, which turns into a fixed bar on phones) all sit in
   .c-archive__wrapper, together with the "Recent Newsletters" slider; the
   "Join 65k+" section is .c-daily-brief. .c-breadcrumbs__post-related is the
   "Related To" tags block. */
html.cre-gate-js body.cre-gate-active .cre-gated,
html.cre-gate-js body.cre-gate-active .c-section__wrap-share,
html.cre-gate-js body.cre-gate-active .c-breadcrumbs__post-related,
html.cre-gate-js body.cre-gate-active .c-daily-brief {
	display: none;
}

/* On its own: a template the plugin does not know puts the gate above the
   article instead (Render::filter_block()), which can be inside this
   wrapper, and hiding it would then hide the gate too. A browser without
   :has() drops this rule and shows the page, the safe direction. */
html.cre-gate-js body.cre-gate-active .c-archive__wrapper:not(:has([data-cre-gate])) {
	display: none;
}

/* --- 1a. Below the gate (R3-1 item 2, decision Z1) -------------------------

   The rule above hides the whole .c-archive__wrapper — Related Briefs
   included — while the gate is up: today, nothing shows below it. The
   Gate page's "Below the gate" setting (Options `below_gate`, printed as
   body.cre-below-gate-<value> by Render::body_class(), the same site-wide
   value for every visitor so the served HTML stays byte-identical) decides
   whether that stays true:
   - 'none' — unchanged: the rule above already covers it.
   - 'related' (the default: the user wants Related Briefs shown) — these
     rules override it: .c-archive__wrapper itself renders again (its
     higher specificity, more classes, wins over the rule above), the
     sidebar is hidden outright (it was only ever caught by the wrapper
     rule), and every direct child of .c-section__wrap-content except
     .cre-related-briefs (the theme's Related Briefs wrapper,
     templates/single-briefs.html) is hidden individually — the sponsor
     box, the article (.cre-gated, already hidden above, but harmless
     twice), "Related to" and the sponsor list — leaving Related Briefs the
     one thing left standing, directly under the gate, in the page's normal
     section flow (no design frame in the approved v3.1 review shows
     content below the gate to match instead).

   Two scopes keep this from undoing what the rules above guarantee:
   - Only once gate.js has decided (body.cre-gate-decided, round 3 final
     review A-I2). Until then the wrapper stays hidden by the rule above,
     so Related Briefs never sits under the hero on its own and then
     jumps down as the gate appears (a layout shift of 0.16 at 1440px), or
     as the brief appears above it for a reader with briefs left (0.21):
     it comes on screen in the same frame as the gate and the footer.
   - Only while the gate is not inside the wrapper, exactly like the rule
     above (A-I1): when Render::filter_block() can't find the hero it puts
     the gate above the article, inside <article> — a direct child of
     .c-section__wrap-content — and hiding every child but Related Briefs
     would then hide the gate with the article: a blank page. Every rule
     here that hides anything carries the same
     .c-archive__wrapper:not(:has([data-cre-gate])) as the one it narrows
     (GateRenderTest pins it); with the gate inside, none of them applies
     and the page falls back to the rules above alone.
   A signed-in reader or a visitor with free briefs left never has this
   apply: should_run() keeps signed-in readers off the gate's assets
   entirely, and gate.js's unlock() removes body.cre-gate-active the moment
   it decides either of them is through. */
html.cre-gate-js body.cre-gate-active.cre-gate-decided.cre-below-gate-related .c-archive__wrapper:not(:has([data-cre-gate])) {
	display: block;
}

html.cre-gate-js body.cre-gate-active.cre-below-gate-related .c-archive__wrapper:not(:has([data-cre-gate])) .c-sidebar,
html.cre-gate-js body.cre-gate-active.cre-below-gate-related .c-archive__wrapper:not(:has([data-cre-gate])) .c-section__wrap-content > *:not(.cre-related-briefs) {
	display: none;
}

/* Related Briefs takes the gate's full width under it. The theme sizes
   .c-section__wrap for the article column next to the sidebar, and the
   column itself leaves 5rem for the share rail; both are hidden here, so
   the wrap fills the row and the column drops its max-width. Same scope as
   the rules above (decided, gate not inside the wrapper), so a brief that
   is not gated, a signed-in reader and a reader let through keep the
   theme's layout, sidebar and all. gate.js relatedCards() shows four cards
   (three on a tablet) in this width. */
html.cre-gate-js body.cre-gate-active.cre-gate-decided.cre-below-gate-related .c-archive__wrapper:not(:has([data-cre-gate])) .c-section__wrap {
	flex: 1 1 auto;
	width: 100%;
}

html.cre-gate-js body.cre-gate-active.cre-gate-decided.cre-below-gate-related .c-archive__wrapper:not(:has([data-cre-gate])) .c-section__wrap-content {
	max-width: none;
}

/* The theme's footer is all that is left under the hero while gate.js
   decides, and it jumped down the page when the gate (or, for a reader with
   briefs left, the brief) appeared: a layout shift of 0.16 at 1440px, 0.47
   for a reader let through. It keeps its place, unseen, until gate.js puts
   .cre-gate-decided on <body> (the gate shown, the brief unlocked, or any
   failure opened); the head script's own fail-open takes .cre-gate-js
   away, which lifts it too. */
html.cre-gate-js body.cre-gate-active:not(.cre-gate-decided) .site-footer {
	visibility: hidden;
}

/* 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-gate[hidden],
.cre-gate [hidden],
.cre-meterbar[hidden],
.cre-meterbar [hidden] {
	display: none !important;
}

/* --- 2. The gate (.c-gatewrap, .c-gate) ------------------------------------ */

/* Straight under the hero, 64px below it and 72px above the footer (the
   design's .c-gatewrap padding). In 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 gate parts that inherit must not
   follow it. */
.cre-gate {
	position: relative;
	margin: 64px auto 72px;
	color: var(--wp--preset--color--black-secondary);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	line-height: 1.35;
}

/* As wide as the hero's content (CRE Daily, 15 Sept), so the two edges line
   up at every width. The hero breaks out of the body's 1rem root padding
   (the theme's `main > div` rule), its constrained layout caps
   .c-single-head__wrapper at the content size, and post-head.scss insets
   that wrapper by 1.25rem a side. These are the theme's own values, not
   presets — matching them is the point. The general sibling (~) keeps it
   true when the Key Takeaways option (1I) puts .cre-preview in between. */
.c-single-head ~ .cre-gate,
.c-single-head ~ .cre-preview {
	width: calc(100% + 2rem - 2.5rem);
	max-width: calc(var(--wp--style--global--content-size) - 2.5rem);
	margin-right: auto;
	margin-left: auto;
}

.c-single-head ~ .cre-gate {
	margin-top: 64px;
	margin-bottom: 72px;
}

/* The Key Takeaways lavender panel, with the newsletter pop-up's purple
   border and mascot. Square corners. */
.cre-gate__box {
	position: relative;
	margin: 0;
	padding: 56px;
	border: 1px solid var(--wp--preset--color--primary-03);
	border-radius: 0;
	background-color: var(--wp--preset--color--primary-07);
}

/* The mascot peeks over the top-right corner, clear of the form. */
.cre-gate__bull {
	position: absolute;
	top: -50px;
	right: 28px;
	width: 60px;
	max-width: none;
	height: auto;
	margin: 0;
}

/* --- 3. The recognised newsletter reader's start (1B a) -------------------- */

/* "CONTINUE AS jane@firm.com" (1B a): the label is uppercase, the address
   keeps its own case. */
.cre-nocase {
	text-transform: none;
}

/* An address too long for one line wraps under "Continue as" instead of
   running out of the button. A usual address still sits on one 56px line,
   exactly as designed; the design has no long-address case, so this is the
   design spec's phone interpolation applied at every width. */
.cre-btn[data-cre-continue] {
	flex-wrap: wrap;
	row-gap: 0;
	height: auto;
	min-height: 56px;
	white-space: normal;
}

.cre-btn[data-cre-continue] .cre-nocase {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* --- 5. Last free brief (1D): the heads-up bar ----------------------------

   In the announcement-bar navy, at the bottom of the viewport. Above the
   theme's own fixed subscribe bar (z-index 100) on phones. */
.cre-meterbar {
	position: fixed;
	z-index: 101;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 18px 64px;
	background-color: var(--wp--preset--color--primary-01);
	color: var(--wp--preset--color--primary-05);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small-text);
	line-height: 1.35;
}

.cre-meterbar p {
	flex: 1;
	margin: 0;
}

.cre-meterbar b {
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

.cre-meterbar__x {
	height: auto;
	margin: 0;
	padding: 1px 6px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary-05);
	cursor: pointer;
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
}

.cre-pips--light i {
	background-color: rgba(189, 180, 234, 0.35);
}

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

/* --- 6. Key Takeaways above the gate (1I) ---------------------------------

   The existing box, unchanged, moved by gate.js into this wrapper above the
   gate and set to the gate's width (rule in section 2), 64px under the hero;
   the gate follows 64px below it. Only ever present when preview_mode is
   'takeaways'. */
.cre-preview {
	position: relative;
	margin: 64px auto 0;
}

.c-single-head ~ .cre-preview {
	margin-top: 64px;
	margin-bottom: 0;
}

.cre-preview .c-takeways {
	margin: 0;
}

/* --- 7. Narrower screens --------------------------------------------------

   The same breakpoints as the widget (auth.css): below the theme's lg the
   theme's subscribe box turns into a fixed bar; the design's phone rules
   apply from 560px down. */
@media (max-width: 61.99em) {
	/* Below lg the theme's subscribe box is a fixed bar on the bottom edge
	   (subscribe.scss). While the heads-up bar holds that edge it steps
	   aside: this reader already subscribes (1D, 1F b). gate.js puts the
	   class on only while the bar is up. */
	html.cre-gate-js body.cre-meterbar-on .c-subscribe-box {
		display: none;
	}
}

@media (max-width: 35em) {
	.cre-gate,
	.c-single-head ~ .cre-gate {
		margin-top: 16px;
		margin-bottom: 40px;
	}

	.cre-gate__box {
		padding: 2rem 1.25rem 1.75rem;
	}

	.cre-gate__bull {
		top: 20px;
		right: 16px;
		width: 40px;
	}

	/* Clear of the mascot: the design's rule for the line under the lockup
	   (.c-done), applied to the free-brief count that takes the same place
	   in 1B a and g, which the design draws at desktop only. */
	.cre-gate .cre-gate__meter[data-cre-meter] {
		padding-right: 48px;
	}

	.cre-preview,
	.c-single-head ~ .cre-preview {
		margin-top: 16px;
	}

	/* The design has no phone frame for 1B a: the design spec's
	   interpolation, 46px like every phone button, more room when wrapped. */
	.cre-btn[data-cre-continue] {
		min-height: 46px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.cre-meterbar {
		flex-wrap: wrap;
		gap: 12px;
		padding: 14px 16px;
	}
}