/*
 * The sign-in / registration overlay.
 *
 * Palette aliased from assets/css/cw-tokens.css with literal var() fallbacks,
 * per that file's own convention - if the token sheet ever fails to load on
 * some AJAX/REST render, this overlay keeps its correct colours instead of
 * collapsing to unset.
 *
 * THE ONE RULE WORTH REPEATING: text on lime is --cw-olive, never white.
 * White on #80bc00 measures 2.3:1 and fails WCAG; the old Bricks popup did
 * exactly this on its Login button. Olive on lime measures 7.25:1.
 *
 * @package cw-bricks-child
 */

.cwpra {
	--a-lime:      var(--cw-lime, #80bc00);
	--a-lime-deep: var(--cw-lime-deep, #5f8c00);
	--a-lime-dark: var(--cw-lime-dark, #4c7000);
	--a-olive:     var(--cw-olive, #16210a);
	--a-ink:       var(--cw-ink, #263238);
	--a-ink-2:     var(--cw-ink-2, #52575a);
	--a-faint:     var(--cw-faint, #9a9a94);
	--a-line:      var(--cw-line, #e7e5df);
	--a-line-2:    var(--cw-line-2, #d6d3ca);
	--a-wash:      var(--cw-lime-wash, #f3f9e4);
	--a-row:       var(--cw-lime-row, #f9fcf0);
	--a-ground:    var(--cw-ground, #f7f7f5);
	--a-card:      var(--cw-card, #ffffff);
	--a-brick:     var(--cw-brick, #a3372c);
	--a-brick-bg:  var(--cw-brick-tint, #fbeeec);
	--a-brick-ln:  var(--cw-brick-line, #eed3ce);

	position: fixed;
	inset: 0;
	/*
	 * Above the Aisle Rail's sticky search, the FunnelKit cart, AND the mobile
	 * bottom tab bar (.cwmn-bottom-nav, z-index: 999999 - see mobile-nav.css).
	 * At 100000 this sat below that bar, so on mobile the tab bar rendered
	 * on top of the sheet's lower portion and its scrim, uncovered - visible
	 * in the report screenshot as the bar floating over the popup.
	 */
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.cwpra[hidden] { display: none; }

/* Stop the page behind scrolling while the overlay owns the screen. */
body.cwpra-open { overflow: hidden; }

.cwpra__scrim {
	position: absolute;
	inset: 0;
	background: rgba(38, 50, 56, .55);
	backdrop-filter: blur(2px);
}

.cwpra__panel {
	position: relative;
	width: 100%;
	max-width: 408px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: var(--a-card);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(38, 50, 56, .08), 0 24px 48px -12px rgba(38, 50, 56, .35);
	padding: 20px 22px 22px;
	font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
	color: var(--a-ink);
	line-height: 1.55;
}

/* ---------------------------------------------------------------- chrome */

.cwpra__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.cwpra__brand {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--a-ink);
}

.cwpra__mark {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: var(--a-lime);
	color: var(--a-olive);
	display: grid;
	place-items: center;
	font-size: 10px;
	font-weight: 800;
	flex: none;
}

.cwpra__x {
	width: 28px;
	height: 28px;
	border: 0;
	background: none;
	color: var(--a-ink-2);
	font-size: 20px;
	line-height: 1;
	border-radius: 6px;
	cursor: pointer;
	flex: none;
}

.cwpra__x:hover { background: var(--a-ground); color: var(--a-ink); }

/* ------------------------------------------------------------------ body */

.cwpra__body { display: flex; flex-direction: column; gap: 15px; }

.cwpra__hgroup { display: block; }

.cwpra__h {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: 1.2;
	margin: 0;
	color: var(--a-ink);
	text-wrap: balance;
}

.cwpra__sub {
	font-size: 13.5px;
	color: var(--a-ink-2);
	margin: 5px 0 0;
	line-height: 1.5;
	word-break: break-word;
}

/* ----------------------------------------------------------------- oauth */

.cwpra__oauth { display: flex; flex-direction: column; gap: 8px; }

.cwpra__oauth-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 11px 14px;
	border: 1px solid var(--a-line-2);
	border-radius: 8px;
	background: var(--a-card);
	font-size: 14px;
	font-weight: 600;
	color: var(--a-ink);
	text-decoration: none;
	cursor: pointer;
}

.cwpra__oauth-btn:hover {
	background: var(--a-ground);
	border-color: var(--a-ink-2);
	color: var(--a-ink);
}

.cwpra__glyph { width: 16px; height: 16px; flex: none; }

.cwpra__div {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--a-faint);
}

.cwpra__div::before,
.cwpra__div::after {
	content: "";
	height: 1px;
	background: var(--a-line);
	flex: 1;
}

/* ---------------------------------------------------------------- fields */

.cwpra__form { display: flex; flex-direction: column; gap: 14px; }

.cwpra__field { display: flex; flex-direction: column; gap: 6px; }

.cwpra__label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--a-ink);
}

/*
 * [type=] attribute selectors, not a bare class: a site-wide theme rule
 * styles every input with its own border/background/radius, which is what
 * put a second border inside the search pill on the blog. Equal specificity
 * plus explicit resets beats it without !important.
 */
.cwpra__in,
.cwpra input[type="email"].cwpra__in,
.cwpra input[type="text"].cwpra__in,
.cwpra input[type="tel"].cwpra__in,
.cwpra input[type="password"].cwpra__in {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--a-line-2);
	border-radius: 8px;
	background: var(--a-card);
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--a-ink);
	-webkit-appearance: none;
	appearance: none;
}

.cwpra__in::placeholder { color: var(--a-faint); }

.cwpra__in:focus,
.cwpra__in:focus-visible {
	outline: 2px solid var(--a-lime);
	outline-offset: 1px;
	border-color: var(--a-lime);
	background: var(--a-card);
}

.cwpra__row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

@media (max-width: 400px) {
	.cwpra__row2 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- buttons */

.cwpra__btn {
	padding: 12px 16px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.005em;
	cursor: pointer;
	text-align: center;
}

.cwpra__btn--go { background: var(--a-lime); color: var(--a-olive); }

.cwpra__btn--go:hover:not(:disabled) { background: var(--a-lime-deep); color: #fff; }

.cwpra__btn:disabled { opacity: .6; cursor: default; }

.cwpra__btn:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }

/* An inline text button that must not inherit the theme's <button> chrome. */
.cwpra__link,
.cwpra button.cwpra__link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--a-lime-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.cwpra__link:hover { color: var(--a-olive); }

/* ------------------------------------------------- busy / working states */

/*
 * Why this exists: signing in ends in a full page reload, and on this site
 * that is several seconds. Without a moving indicator the overlay looks
 * frozen and people click again — which, on a one-time code, burns an
 * attempt. So every request shows motion, and the panel stops accepting
 * clicks while one is in flight.
 */

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

.cwpra__spinner,
.cwpra__method.is-busy::after,
.cwpra__btn.is-busy::after {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-right-color: transparent;
	animation: cwpra-spin .6s linear infinite;
	flex: none;
	display: inline-block;
}

.cwpra__spinner { width: 16px; height: 16px; color: var(--a-lime-dark); }

.cwpra__btn.is-busy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}

.cwpra__method.is-busy {
	border-color: var(--a-lime);
	background: var(--a-wash);
}

/* The arrow gives way to the spinner, so the row keeps its exact height. */
.cwpra__method.is-busy .cwpra__method-arrow { display: none; }

/* Everything except the in-flight control stops responding, and the panel
   dims very slightly so the freeze reads as deliberate. */
.cwpra__panel.is-working .cwpra__method:not(.is-busy),
.cwpra__panel.is-working .cwpra__fork-card,
.cwpra__panel.is-working .cwpra__oauth-btn,
.cwpra__panel.is-working .cwpra__link {
	pointer-events: none;
	opacity: .55;
}

.cwpra__done {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 14px 13px;
	background: var(--a-wash);
	border: 1px solid var(--a-lime);
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--a-ink);
}

@media (prefers-reduced-motion: reduce) {
	.cwpra__spinner,
	.cwpra__method.is-busy::after,
	.cwpra__btn.is-busy::after {
		animation-duration: 2s;
	}
}

/* --------------------------------------------------------------- methods */

.cwpra__methods { display: flex; flex-direction: column; gap: 8px; }

.cwpra__method {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 13px;
	border: 1px solid var(--a-line-2);
	border-radius: 9px;
	background: var(--a-card);
	font-family: inherit;
	text-align: left;
	text-decoration: none;
	color: var(--a-ink);
	cursor: pointer;
}

.cwpra__method:hover {
	border-color: var(--a-lime);
	background: var(--a-row);
	color: var(--a-ink);
}

.cwpra__method:focus-visible { outline: 2px solid var(--a-lime); outline-offset: 1px; }

.cwpra__method--lead { border-color: var(--a-lime); background: var(--a-wash); }

.cwpra__method-ico {
	width: 32px;
	height: 32px;
	border-radius: 7px;
	background: var(--a-ground);
	border: 1px solid var(--a-line);
	display: grid;
	place-items: center;
	flex: none;
	font-size: 15px;
}

.cwpra__method--lead .cwpra__method-ico { background: var(--a-card); }

.cwpra__method-txt { flex: 1; min-width: 0; }

.cwpra__method-t {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--a-ink);
}

.cwpra__method-d {
	display: block;
	font-size: 12.5px;
	color: var(--a-ink-2);
	margin-top: 1px;
}

.cwpra__method-d code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	background: none;
	padding: 0;
}

.cwpra__method-arrow { color: var(--a-faint); font-size: 16px; flex: none; }

/* ------------------------------------------------------------------ fork */

.cwpra__fork { display: flex; flex-direction: column; gap: 9px; }

.cwpra__fork-card {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	width: 100%;
	padding: 14px 13px;
	border: 1px solid var(--a-line-2);
	border-radius: 10px;
	background: var(--a-card);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.cwpra__fork-card:hover { border-color: var(--a-lime); background: var(--a-row); }

.cwpra__fork-card:focus-visible { outline: 2px solid var(--a-lime); outline-offset: 1px; }

.cwpra__fork-ico {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	flex: none;
	font-size: 16px;
	background: var(--a-wash);
	border: 1px solid var(--a-line);
}

.cwpra__fork-t {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--a-ink);
}

.cwpra__fork-d {
	display: block;
	font-size: 12.8px;
	color: var(--a-ink-2);
	margin-top: 3px;
	line-height: 1.45;
}

.cwpra__pill {
	font-size: 9.5px;
	letter-spacing: .07em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--a-ground);
	border: 1px solid var(--a-line-2);
	color: var(--a-ink-2);
}

/* ------------------------------------------------------- value + consent */

.cwpra__value {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 13px;
	background: var(--a-wash);
	border: 1px solid var(--a-line);
	border-radius: 9px;
}

.cwpra__value-ico { font-size: 15px; flex: none; line-height: 1.35; }

.cwpra__value-t { font-size: 12.8px; line-height: 1.45; color: var(--a-ink); }

.cwpra__check {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 13px;
	border: 1px solid var(--a-lime);
	background: var(--a-wash);
	border-radius: 9px;
	cursor: pointer;
}

.cwpra__check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	flex: none;
	accent-color: var(--a-lime);
	cursor: pointer;
}

.cwpra__check-t {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--a-ink);
}

.cwpra__check-d {
	display: block;
	font-size: 12.3px;
	color: var(--a-ink-2);
	margin-top: 2px;
	line-height: 1.45;
}

/* --------------------------------------------------------- errors + foot */

.cwpra__err {
	margin: 0;
	padding: 10px 12px;
	background: var(--a-brick-bg);
	border: 1px solid var(--a-brick-ln);
	border-radius: 8px;
	color: var(--a-brick);
	font-size: 13px;
	line-height: 1.45;
}

.cwpra__err[hidden] { display: none; }

.cwpra__foot {
	margin: 0;
	font-size: 12.8px;
	color: var(--a-ink-2);
	text-align: center;
}

.cwpra__foot a {
	color: var(--a-lime-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cwpra__foot a:hover { color: var(--a-olive); }

/* ---------------------------------------------------------------- mobile */

/*
 * Below 480px the panel becomes a bottom sheet rather than a shrunken box.
 * The old Bricks popup kept its centred-card geometry on a phone and clipped
 * at both edges - visible in the screenshot that started this work.
 */
@media (max-width: 480px) {
	.cwpra { padding: 0; align-items: flex-end; }

	.cwpra__panel {
		max-width: none;
		border-radius: 16px 16px 0 0;
		max-height: 92vh;
		padding: 18px 18px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cwpra * { transition: none !important; animation: none !important; }
}