/**
 * Offering Plate — the giving form.
 *
 * Two things shape this file.
 *
 * First, it has to survive whatever theme it lands in. A WordPress theme will
 * happily restyle every input, select and button on the page, so the rules
 * here are scoped under .cg and re-state the properties themes most often
 * hijack rather than assuming a clean slate.
 *
 * Second, there are no gradients anywhere. With flat colour, definition has
 * to come from edges, weight and spacing instead of from light, so borders
 * are crisper and the colour blocks are left unmodulated.
 *
 * Green carries one meaning throughout: money that reaches the church.
 */

.cg {
	/* Brand values. PHP writes these three inline from the settings screen. */
	--cg-primary: #0862db;
	--cg-accent: #028b2c;
	--cg-ink: #111111;
	--cg-font: inherit;

	/* Derived, and each earns its place. The brand green measures 4.44:1 on
	   white, a hair under the 4.5 body text needs, so small green type uses
	   the deepened variant and the raw colour is kept for fills and large
	   numerals where 3:1 applies. Neither brand colour is legible on the
	   near-black hero, hence the lifted pair. */
	--cg-primary-deep: #0044bd;
	--cg-primary-lift: #308aff;
	--cg-accent-deep: #007718;
	--cg-accent-lift: #2ab354;

	--cg-paper: #ffffff;
	--cg-wash: #f4f7fb;
	--cg-rule: #e2e8f2;
	--cg-rule-strong: #cfd8e6;
	--cg-muted: #5b6472;
	--cg-muted-soft: #8b94a4;
	--cg-bad: #c4362b;
	--cg-bad-wash: #f7dedb;

	--cg-ease: cubic-bezier(.22, 1, .36, 1);

	box-sizing: border-box;
	max-width: 34rem;
	margin-inline: auto;

	/* Room reserved above the form so a jump to its anchor does not park it
	   underneath a sticky header. Override per shortcode with offset="".  */
	scroll-margin-top: var(--cg-anchor-offset, 7rem);

	font-family: var(--cg-font);
	font-size: 16px;
	color: var(--cg-ink);
	line-height: 1.55;
	text-align: left;
}

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

/* Themes love to restyle these. Neutralise before building back up. */
.cg input,
.cg select,
.cg textarea,
.cg button {
	font-family: inherit;
	font-size: 100%;
	line-height: inherit;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
}

.cg button { -webkit-appearance: none; appearance: none; }
.cg fieldset { min-width: 0; }

/* ---- Heading, following the site's eyebrow-then-headline rhythm ---- */

.cg-head { margin-bottom: 1.5rem; text-align: center; }

.cg .cg-eyebrow {
	margin: 0 0 .6rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--cg-accent-deep);
}

.cg .cg-title {
	margin: 0;
	padding: 0;
	font-size: clamp(1.875rem, 5vw, 2.5rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.035em;
	color: var(--cg-ink);
}

.cg .cg-intro {
	margin: .8rem auto 0;
	max-width: 26rem;
	font-size: .9375rem;
	color: var(--cg-muted);
}

/* ---- Card ---- */

.cg-card {
	position: relative;
	border-radius: 16px;
	background: var(--cg-paper);
	border: 1px solid var(--cg-rule);
	overflow: hidden;
	box-shadow: 0 1px 1px rgba(17, 17, 17, .03), 0 24px 48px -32px rgba(17, 17, 17, .28);
}

/* ---- Hero: the amount sits on the brand black ---- */

.cg-hero {
	position: relative;
	padding: 1.9rem 1.75rem 1.5rem;
	background: var(--cg-ink);
	text-align: center;
}

.cg-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--cg-primary);
}

.cg .cg-hero-label {
	margin: 0 0 .55rem;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--cg-accent-lift);
}

.cg .cg-amount {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .06em;
	padding-bottom: .5rem;
	cursor: text;
}

/* The rule under the amount grows out from the centre on focus. It is the
   only line on the page allowed to move. */
.cg .cg-amount::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 2px;
	background: var(--cg-accent-lift);
	opacity: .5;
	transition: left .45s var(--cg-ease), right .45s var(--cg-ease), opacity .3s;
}

.cg .cg-amount:focus-within::after,
.cg .cg-amount.is-filled::after { left: 8%; right: 8%; opacity: 1; }

.cg .cg-symbol {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	color: var(--cg-accent-lift);
	transform: translateY(-.85em);
	transition: transform .35s var(--cg-ease);
}

.cg .cg-amount:focus-within .cg-symbol { transform: translateY(-.95em); }

.cg input.cg-amount-input {
	width: 100%;
	max-width: 7.5ch;
	height: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	font-size: clamp(3rem, 14vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.055em;
	text-align: center;
	color: #fff;
	font-variant-numeric: tabular-nums lining-nums;
	caret-color: var(--cg-primary-lift);
}

.cg input.cg-amount-input::placeholder { color: rgba(255, 255, 255, .18); opacity: 1; }

.cg-fund-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	margin-top: 1rem;
	font-size: .9375rem;
}

.cg .cg-toward { color: rgba(255, 255, 255, .5); }

.cg select.cg-fund {
	width: auto;
	max-width: 16rem;
	height: auto;
	min-height: 0;
	padding: .32rem 1.6rem .32rem .6rem;
	border: 0;
	border-radius: 7px;
	background-color: rgba(255, 255, 255, .08);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232ab354' stroke-width='1.7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .55rem center;
	box-shadow: none;
	font-size: .9375rem;
	font-weight: 650;
	color: #fff;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: background-color .25s;
}

.cg select.cg-fund:hover { background-color: rgba(255, 255, 255, .14); }
.cg select.cg-fund:focus-visible { outline: 2px solid var(--cg-accent-lift); outline-offset: 2px; }
.cg select.cg-fund option { color: var(--cg-ink); background: #fff; }

.cg .cg-blurb {
	min-height: 1.3rem;
	margin: .65rem 0 0;
	font-size: .875rem;
	color: rgba(255, 255, 255, .48);
	transition: opacity .28s;
}

.cg .cg-blurb.is-swapping { opacity: 0; }

/* ---- Progress meter ----
   Two segments, because a campaign has two truths: what has cleared and what
   has been promised. The pledged part is hatched as well as lighter, so the
   distinction survives for anyone who cannot separate the two greens. */

.cg-meter { margin-top: 1rem; text-align: left; }

.cg-meter-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .4rem;
	font-size: .75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .72);
}

.cg-meter-goal { color: rgba(255, 255, 255, .48); }
.cg-meter.is-met .cg-meter-goal { color: var(--cg-accent-lift); font-weight: 700; }

.cg-meter-track {
	display: flex;
	height: 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	overflow: hidden;
}

.cg-meter-raised,
.cg-meter-pledged {
	display: block;
	height: 100%;
	width: 0;
	transition: width .6s var(--cg-ease);
}

.cg-meter-raised { background: var(--cg-accent-lift); }

.cg-meter-pledged {
	background-color: rgba(42, 179, 84, .35);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 1l2 2M0 6l6-6M5 7l2-2' stroke='%232ab354' stroke-width='1.5' opacity='.9'/%3E%3C/svg%3E");
}

/* On a white card rather than the dark hero. */
.cg .cg-meter--light .cg-meter-top { color: var(--cg-muted); }
.cg .cg-meter--light .cg-meter-goal { color: var(--cg-muted-soft); }
.cg .cg-meter--light .cg-meter-track { background: var(--cg-wash); }
.cg .cg-meter--light .cg-meter-raised { background: var(--cg-accent); }
.cg .cg-meter--light .cg-meter-pledged { background-color: rgba(2, 139, 44, .22); }
.cg .cg-meter--light.is-met .cg-meter-goal { color: var(--cg-accent-deep); }

.cg-goal .cg-meter-track { background: var(--cg-wash); }
.cg-goal .cg-meter-raised { background: var(--cg-accent); }
.cg-goal .cg-meter-pledged { background-color: rgba(2, 139, 44, .22); }

/* ---- Suggested amounts, on the hero ---- */

.cg-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
	margin-top: 1.35rem;
}

.cg button.cg-chip {
	padding: .45rem .9rem;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	font-size: .875rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .82);
	cursor: pointer;
	transition: transform .18s var(--cg-ease), background-color .22s, border-color .22s, color .22s;
}

.cg button.cg-chip:hover {
	border-color: var(--cg-primary-lift);
	color: #fff;
	transform: translateY(-1px);
}

.cg button.cg-chip:active { transform: scale(.94); }

.cg button.cg-chip[aria-pressed="true"] {
	background: var(--cg-primary);
	border-color: var(--cg-primary);
	color: #fff;
}

/* ---- Body ---- */

.cg-body { padding: 1.5rem 1.75rem 1.75rem; }

/* ---- Split invitation ----
   Splitting one payment across funds is the feature most givers do not know
   exists, and a quiet text link buried under the amount got missed. This is
   deliberately loud: a dashed outline reads as "there is room for more here"
   rather than as a finished control. */

.cg button.cg-add {
	display: flex;
	position: relative;
	align-items: center;
	gap: .75rem;
	width: 100%;
	margin-top: 1.15rem;
	padding: .85rem 1rem;
	border: 2px dashed var(--cg-primary);
	border-radius: 12px;
	background: #eef4fe;
	text-align: left;
	cursor: pointer;
	transition: background-color .22s, border-color .22s, transform .16s var(--cg-ease);
}

.cg button.cg-add:hover {
	background: var(--cg-primary);
	border-style: solid;
	transform: translateY(-1px);
}

.cg button.cg-add:active { transform: translateY(0) scale(.995); }
.cg button.cg-add:focus-visible { outline: 3px solid var(--cg-primary-lift); outline-offset: 3px; }

.cg .cg-add-mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--cg-primary);
	font-style: normal;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	transition: background-color .22s, transform .3s var(--cg-ease);
}

.cg button.cg-add:hover .cg-add-mark { background: #fff; color: var(--cg-primary); transform: rotate(90deg); }

.cg .cg-add-text { display: block; }

.cg .cg-add-lead {
	display: block;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cg-primary);
	transition: color .22s;
}

.cg .cg-add-hint {
	display: block;
	font-size: .75rem;
	line-height: 1.4;
	color: var(--cg-muted);
	transition: color .22s;
}

.cg button.cg-add:hover .cg-add-lead { color: #fff; }
.cg button.cg-add:hover .cg-add-hint { color: rgba(255, 255, 255, .8); }

/* The ring that pings outward. It is a separate layer so the button itself
   never moves, which is far less jarring than a control that grows and
   shrinks under a finger already reaching for it. */
.cg button.cg-add::after {
	content: "";
	position: absolute;
	inset: -2px;
	border: 2px solid var(--cg-primary);
	border-radius: 12px;
	opacity: 0;
	pointer-events: none;
}

/* The class is added by the script only once an amount has been entered,
   because before that there is nothing to split. It runs three times and
   stops, and stops immediately on any interaction. A control that pulses
   forever stops being a signal and becomes wallpaper. */
.cg button.cg-add.is-calling { animation: cgAddNudge 2.1s var(--cg-ease) 3; }
.cg button.cg-add.is-calling::after { animation: cgAddRing 2.1s var(--cg-ease) 3; }
.cg button.cg-add.is-calling .cg-add-mark { animation: cgAddMark 2.1s var(--cg-ease) 3; }

@keyframes cgAddNudge {
	0%, 100% { background-color: #eef4fe; }
	18% { background-color: #dbe8fd; }
}

@keyframes cgAddRing {
	0% { opacity: .55; transform: scale(1); }
	70% { opacity: 0; transform: scale(1.045); }
	100% { opacity: 0; transform: scale(1.045); }
}

@keyframes cgAddMark {
	0%, 100% { transform: scale(1); }
	18% { transform: scale(1.18); }
	36% { transform: scale(1); }
}

/* ---- Split rows ---- */

.cg-row {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: .5rem;
	padding: .6rem .7rem;
	background: var(--cg-wash);
	border: 1px solid var(--cg-rule);
	border-radius: 10px;
	animation: cgRowIn .4s var(--cg-ease) both;
}

@keyframes cgRowIn {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}

.cg-row.is-leaving { animation: cgRowOut .26s ease forwards; }

@keyframes cgRowOut {
	to { opacity: 0; transform: translateX(14px); margin-bottom: -3.2rem; }
}

.cg .cg-mini { display: flex; align-items: baseline; gap: .15rem; flex: 0 0 7rem; }
.cg .cg-mini span { font-size: .9rem; font-weight: 600; color: var(--cg-accent-deep); }

.cg .cg-mini input {
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--cg-ink);
	font-variant-numeric: tabular-nums;
}

.cg .cg-row select {
	flex: 1;
	width: auto;
	height: auto;
	min-height: 0;
	padding: .35rem 1.5rem .35rem .55rem;
	border: 1px solid var(--cg-rule);
	border-radius: 8px;
	background-color: var(--cg-paper);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b6472' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .5rem center;
	box-shadow: none;
	font-size: .875rem;
	font-weight: 650;
	color: var(--cg-ink);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.cg button.cg-remove {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--cg-muted);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, color .2s, transform .22s var(--cg-ease);
}

.cg button.cg-remove:hover {
	background: var(--cg-bad-wash);
	color: var(--cg-bad);
	transform: rotate(90deg);
}

.cg-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: .95rem;
	padding-top: .85rem;
	border-top: 1px dashed var(--cg-rule-strong);
}

.cg .cg-total-key {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cg-muted);
}

.cg .cg-total-val {
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--cg-ink);
}

/* ---- Labels and fields ---- */

.cg .cg-label,
.cg legend.cg-label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 .5rem;
	padding: 0;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cg-muted);
}

.cg .cg-field { margin: 1.6rem 0 0; padding: 0; border: 0; }

.cg input.cg-input,
.cg textarea.cg-input {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 0;
	padding: .72rem .85rem;
	border: 1.5px solid var(--cg-rule);
	border-radius: 10px;
	background: var(--cg-paper);
	box-shadow: none;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--cg-ink);
	transition: border-color .2s, box-shadow .25s;
}

.cg input.cg-input:focus,
.cg textarea.cg-input:focus {
	outline: 0;
	border-color: var(--cg-primary);
	box-shadow: 0 0 0 4px rgba(8, 98, 219, .13);
}

.cg textarea.cg-input { resize: vertical; }

.cg .cg-hint { margin: .35rem 0 0; font-size: .8125rem; color: var(--cg-muted-soft); }

/* ---- Frequency, one pill that glides ---- */

.cg-segmented {
	position: relative;
	display: flex;
	padding: 4px;
	background: var(--cg-wash);
	border-radius: 11px;
}

.cg-glider {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: 0;
	border-radius: 8px;
	background: var(--cg-ink);
	transition: transform .42s var(--cg-ease), width .42s var(--cg-ease);
	pointer-events: none;
}

.cg-seg { flex: 1; position: relative; z-index: 1; margin: 0; text-align: center; }

.cg .cg-seg input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.cg .cg-seg span {
	display: block;
	padding: .55rem .25rem;
	font-size: .8125rem;
	font-weight: 650;
	color: var(--cg-muted);
	cursor: pointer;
	transition: color .3s;
}

.cg .cg-seg input:checked + span { color: #fff; }

/* Until the script has measured and positioned the sliding pill, the checked
   label paints its own background. Without this the white text would sit on
   the pale track with nothing behind it — which is what a giver would see if
   the script failed to load. */
.cg .cg-segmented:not(.is-ready) .cg-seg input:checked + span {
	background: var(--cg-ink);
	border-radius: 8px;
}

.cg .cg-seg input:focus-visible + span {
	outline: 2px solid var(--cg-primary);
	outline-offset: -2px;
	border-radius: 6px;
}

/* ==========================================================================
   The ledger. Each method carries a bar showing the whole gift: the solid
   green is what reaches the church, the hatched remainder is what the
   processor keeps. The hatch matters as much as the tint, because red
   against green is exactly the comparison a colour-blind giver cannot make.
   ========================================================================== */

.cg-ledger { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--cg-rule); }
.cg-rails { position: relative; }

.cg .cg-empty {
	margin: 0;
	padding: 1.4rem 0;
	font-size: .9375rem;
	color: var(--cg-muted);
	text-align: center;
}

.cg .cg-rail {
	display: block;
	position: relative;
	margin: 0 0 .55rem;
	padding: .9rem 1rem .9rem 2.7rem;
	background: var(--cg-paper);
	border: 1.5px solid var(--cg-rule);
	border-radius: 12px;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .28s, background-color .28s, box-shadow .28s;
}

/* The accent edge grows down the side of the chosen method. */
.cg .cg-rail::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	bottom: 50%;
	width: 3px;
	background: var(--cg-accent);
	transition: top .4s var(--cg-ease), bottom .4s var(--cg-ease);
}

.cg .cg-rail:hover { border-color: var(--cg-rule-strong); }

.cg .cg-rail.is-on {
	border-color: var(--cg-ink);
	background: var(--cg-wash);
	box-shadow: inset 0 0 0 1px var(--cg-ink);
}

.cg .cg-rail.is-on::before { top: 0; bottom: 0; }

.cg .cg-rail input {
	position: absolute;
	top: 1.1rem;
	left: 1rem;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	accent-color: var(--cg-ink);
}

.cg .cg-rail:focus-within { outline: 2px solid var(--cg-primary); outline-offset: 2px; }

.cg-rail-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }

.cg-rail-name {
	display: flex;
	align-items: baseline;
	gap: .45rem;
	font-size: .9375rem;
	font-weight: 700;
}

/* Position in the ordering. The list is already sorted cheapest first, but
   a number makes that a stated fact rather than something a giver has to
   infer from figures they are reading for the first time. */
.cg-rank {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--cg-wash);
	font-size: .6875rem;
	font-weight: 700;
	color: var(--cg-muted);
	transform: translateY(.1em);
}

.cg .cg-rail.is-best .cg-rank { background: var(--cg-accent-deep); color: #fff; }
.cg .cg-rail.is-on .cg-rank { background: var(--cg-ink); color: #fff; }
.cg .cg-rail.is-on.is-best .cg-rank { background: var(--cg-accent-deep); }

/* What this option costs above the cheapest one. */
.cg-extra {
	display: block;
	margin-top: .2rem;
	font-size: .75rem;
	font-weight: 650;
	color: var(--cg-bad);
}

.cg-rail-net {
	flex: 0 0 auto;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--cg-ink);
}

.cg-rail-desc {
	display: block;
	margin-top: .15rem;
	font-size: .8125rem;
	color: var(--cg-muted);
}

.cg-flow {
	display: block;
	height: 6px;
	margin: .7rem 0 .5rem;
	border-radius: 999px;
	background-color: var(--cg-bad-wash);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 1l2 2M0 6l6-6M5 7l2-2' stroke='%23c4362b' stroke-width='1.4' opacity='.55'/%3E%3C/svg%3E");
	overflow: hidden;
}

.cg-flow-net {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: var(--cg-accent);
	box-shadow: 0 0 0 1.5px var(--cg-paper);
	transition: width .55s var(--cg-ease);
}

.cg .cg-rail.is-free .cg-flow { background-color: #e6f4ea; background-image: none; }

.cg-rail-cost {
	display: block;
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--cg-muted);
}

.cg-rail-cost b { font-weight: 700; color: var(--cg-bad); }
.cg .cg-rail.is-free .cg-rail-cost b { color: var(--cg-accent-deep); }

.cg-flag {
	display: inline-block;
	margin-left: .45rem;
	padding: .14rem .5rem;
	border-radius: 4px;
	background: var(--cg-accent-deep);
	font-size: .625rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	vertical-align: .12em;
}

/* ---- Fee cover and checkboxes ---- */

.cg .cg-cover,
.cg .cg-check {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	margin-top: 1.1rem;
	font-size: .9375rem;
	color: var(--cg-ink);
	cursor: pointer;
}

.cg .cg-cover {
	padding: .85rem .95rem;
	background: #eef8f1;
	border: 1px solid rgba(2, 139, 44, .3);
	border-radius: 11px;
	transition: border-color .25s;
}

.cg .cg-cover:hover { border-color: var(--cg-accent); }

/* Shown instead of the checkbox when the church always passes the fee on.
   It states what is happening rather than offering a choice. */
.cg .cg-cover--fixed {
	display: block;
	margin-top: 1.1rem;
	cursor: default;
	color: var(--cg-muted);
}

.cg .cg-cover--fixed:hover { border-color: rgba(2, 139, 44, .3); }

.cg .cg-cover input,
.cg .cg-check input {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin: .2rem 0 0;
	accent-color: var(--cg-accent-deep);
}

.cg .cg-cover b {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--cg-accent-deep);
}

/* ---- Details ---- */

.cg-details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 .9rem;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--cg-rule);
}

.cg .cg-check { grid-column: 1 / -1; margin-top: 1.2rem; }

/* ---- Summary, immediately above the button ---- */

.cg-summary {
	margin-top: 1.6rem;
	padding: 1rem 1.1rem;
	background: var(--cg-ink);
	border-radius: 12px;
}

.cg-summary-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .5rem;
}

.cg-summary-cell { text-align: center; }
.cg-summary-cell + .cg-summary-cell { border-left: 1px solid rgba(255, 255, 255, .12); }

.cg .cg-summary-key {
	display: block;
	margin-bottom: .3rem;
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.cg .cg-summary-val {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.cg .cg-summary-val.is-fee { color: #ff8a7d; }
.cg .cg-summary-val.is-net { color: var(--cg-accent-lift); }

.cg .cg-summary-foot {
	margin: .8rem 0 0;
	padding-top: .7rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: .75rem;
	line-height: 1.5;
	text-align: center;
	color: rgba(255, 255, 255, .6);
}

.cg .cg-summary-foot b { color: var(--cg-accent-lift); font-weight: 700; }

/* ---- Submit ---- */

.cg button.cg-submit {
	position: relative;
	display: block;
	width: 100%;
	margin-top: 1rem;
	padding: 1.05rem 1.25rem;
	border: 0;
	border-radius: 12px;
	background: var(--cg-primary);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
	color: #fff;
	cursor: pointer;
	overflow: hidden;
	transition: transform .18s var(--cg-ease), box-shadow .3s, background-color .2s;
}

/* A flat block of the accent slides in from the left. No fade, no sheen. */
.cg button.cg-submit::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cg-accent);
	transform: translateX(-101%);
	transition: transform .42s var(--cg-ease);
}

.cg button.cg-submit span { position: relative; z-index: 1; }

.cg button.cg-submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -12px rgba(2, 139, 44, .6);
}

.cg button.cg-submit:hover:not(:disabled)::after { transform: translateX(0); }
.cg button.cg-submit:active:not(:disabled) {
	transform: translateY(0) scale(.99);
	background: var(--cg-primary-deep);
}

.cg button.cg-submit:disabled {
	background: var(--cg-rule);
	color: var(--cg-muted);
	cursor: not-allowed;
	box-shadow: none;
}

.cg button.cg-submit:disabled::after { display: none; }
.cg button.cg-submit:focus-visible { outline: 3px solid var(--cg-primary-lift); outline-offset: 3px; }

.cg .cg-fine {
	margin: .95rem 0 0;
	font-size: .75rem;
	line-height: 1.6;
	text-align: center;
	color: var(--cg-muted);
}

.cg .cg-error {
	margin: 1.1rem 0 0;
	padding: .75rem .9rem;
	border-left: 3px solid var(--cg-bad);
	border-radius: 0 8px 8px 0;
	background: var(--cg-bad-wash);
	font-size: .9375rem;
	color: var(--cg-bad);
}

/* ---- Confirmation ---- */

.cg-done { padding: 2rem 1.75rem 1.75rem; }

.cg-seal {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0 auto 1.1rem;
	border-radius: 50%;
	background: var(--cg-accent);
	animation: cgSeal .55s var(--cg-ease) both;
}

.cg-seal svg { width: 1.5rem; height: 1.5rem; }

@keyframes cgSeal {
	0% { opacity: 0; transform: scale(.4) rotate(-22deg); }
	60% { transform: scale(1.08) rotate(3deg); }
	100% { opacity: 1; transform: none; }
}

.cg .cg-done-head {
	margin: 0 0 .4rem;
	padding: 0;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.03em;
	text-align: center;
	color: var(--cg-ink);
}

.cg .cg-done-body {
	margin: 0 auto 1.5rem;
	max-width: 26rem;
	font-size: .9375rem;
	text-align: center;
	color: var(--cg-muted);
}

.cg-slip { border: 1.5px solid var(--cg-rule); border-radius: 12px; overflow: hidden; }

.cg-slip-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .85rem 1rem;
	border-bottom: 1px solid var(--cg-rule);
	animation: cgSlip .45s var(--cg-ease) both;
}

@keyframes cgSlip {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

.cg-slip-row:last-child { border-bottom: 0; }

.cg .cg-slip-key {
	flex: 0 0 auto;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cg-muted);
}

.cg .cg-slip-val {
	flex: 1;
	text-align: right;
	font-size: 1.0625rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	white-space: pre-line;
	word-break: break-word;
}

.cg-slip-row--ref { background: var(--cg-ink); }
.cg-slip-row--ref .cg-slip-key { color: rgba(255, 255, 255, .5); }

.cg-slip-row--ref .cg-slip-val {
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--cg-accent-lift);
}

.cg button.cg-copy {
	flex: 0 0 auto;
	padding: .32rem .6rem;
	border: 1.5px solid var(--cg-rule);
	border-radius: 7px;
	background: var(--cg-paper);
	font-size: .75rem;
	font-weight: 650;
	color: var(--cg-primary);
	cursor: pointer;
	transition: border-color .2s, background-color .2s, color .2s;
}

.cg button.cg-copy:hover { border-color: var(--cg-primary); }

.cg button.cg-copy.is-done {
	background: var(--cg-accent);
	border-color: var(--cg-accent);
	color: #fff;
}

.cg-slip-row--ref .cg-copy {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .22);
	color: #fff;
}

/* ---- Goal meter and methods list ---- */

.cg-goal-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 .5rem;
}

.cg .cg-goal-raised {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--cg-ink);
}

.cg-goal-track {
	height: 8px;
	background: var(--cg-wash);
	border-radius: 999px;
	overflow: hidden;
}

.cg-goal-fill {
	height: 100%;
	background: var(--cg-accent);
	border-radius: 999px;
	transition: width .8s var(--cg-ease);
}

.cg .cg-goal-foot { margin: .4rem 0 0; font-size: .8125rem; color: var(--cg-muted); }

.cg-methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	max-width: 48rem;
}

.cg-method {
	padding: 1.1rem 1.2rem;
	background: var(--cg-wash);
	border: 1px solid var(--cg-rule);
	border-radius: 12px;
}

.cg .cg-method-body {
	margin: 0 0 .5rem;
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.5;
	color: var(--cg-ink);
}

.cg .cg-method-note {
	margin: 0;
	font-size: .8125rem;
	font-weight: 650;
	color: var(--cg-accent-deep);
}

.cg-setup-notice {
	max-width: 34rem;
	margin-inline: auto;
	padding: .9rem 1.1rem;
	border-left: 3px solid #0862db;
	background: #eef4fe;
	font-size: .9375rem;
	color: #111111;
}

/* ---- Responsive ---- */

@media (max-width: 32rem) {
	.cg-hero { padding: 1.5rem 1.15rem 1.25rem; }
	.cg-body { padding: 1.25rem 1.15rem 1.5rem; }
	.cg-done { padding: 1.6rem 1.15rem 1.4rem; }
	.cg-details { grid-template-columns: minmax(0, 1fr); }
	.cg-summary-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
	.cg-summary-cell + .cg-summary-cell {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .12);
		padding-top: .7rem;
	}
	.cg-row { flex-wrap: wrap; }
	.cg .cg-mini { flex: 1 1 6rem; }
	.cg-slip-row { flex-wrap: wrap; }
	.cg .cg-slip-val { flex: 1 0 100%; text-align: left; }
}

/* Motion is a courtesy, not a requirement. */
@media (prefers-reduced-motion: reduce) {
	.cg *,
	.cg *::before,
	.cg *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ---- Appeal page ----
   One address, one page: where the appeal stands, and both ways to help. */

.cg .cg-appeal { max-width: 36rem; }

.cg .cg-appeal-progress {
	margin-bottom: 1.25rem;
	padding: 1.15rem 1.3rem;
	background: var(--cg-ink);
	border-radius: 14px;
}

.cg .cg-appeal-figures {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin-bottom: .6rem;
}

.cg .cg-appeal-raised {
	font-size: 1.85rem;
	font-weight: 700;
	letter-spacing: -.04em;
	color: var(--cg-accent-lift);
	font-variant-numeric: tabular-nums;
}

.cg .cg-appeal-goal {
	font-size: .9375rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .55);
}

.cg .cg-appeal-note {
	margin: .55rem 0 0;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .62);
}

.cg .cg-appeal .cg-meter-track { height: 9px; }

/* The two acts, side by side. Both forms stay in the page so switching
   loses nothing that has already been typed. */
.cg .cg-switch {
	display: flex;
	gap: .3rem;
	margin-bottom: 1rem;
	padding: .3rem;
	background: var(--cg-wash);
	border-radius: 11px;
}

.cg button.cg-switch-tab {
	flex: 1;
	padding: .65rem 1rem;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--cg-muted);
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.cg button.cg-switch-tab:hover { color: var(--cg-ink); }
.cg button.cg-switch-tab.is-on { background: var(--cg-ink); color: #fff; }
.cg button.cg-switch-tab:focus-visible { outline: 3px solid var(--cg-primary); outline-offset: 2px; }

.cg .cg-appeal .cg-head { margin-bottom: 1.1rem; }

/* The switch above the ordinary giving form, shown only when the chosen
   fund is one the church has opened to pledges. */
.cg-choose {
	max-width: 34rem;
	margin: 0 auto .9rem;
}

.cg-choose .cg-switch[hidden] { display: none; }

/* ---- The optional details ----
   Folded away by default. Four empty boxes above a Give button read as work
   to be done, even when every one of them is optional. */

.cg button.cg-more-toggle {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	margin-top: 1.1rem;
	padding: .7rem .9rem;
	border: 1px solid var(--cg-rule);
	border-radius: 10px;
	background: var(--cg-paper);
	font-family: inherit;
	font-size: .875rem;
	font-weight: 700;
	color: var(--cg-ink);
	text-align: left;
	cursor: pointer;
	transition: border-color .18s, background-color .18s;
}

.cg button.cg-more-toggle:hover { border-color: var(--cg-rule-strong); background: var(--cg-wash); }
.cg button.cg-more-toggle:focus-visible { outline: 3px solid var(--cg-primary); outline-offset: 2px; }

.cg .cg-more-mark {
	display: grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--cg-wash);
	font-size: 1rem;
	line-height: 1;
	color: var(--cg-muted);
	transition: transform .25s var(--cg-ease), background-color .18s, color .18s;
}

.cg .cg-more-toggle.is-open .cg-more-mark {
	background: var(--cg-ink);
	color: #fff;
	transform: rotate(45deg);
}

.cg .cg-more-why {
	margin-left: auto;
	font-size: .75rem;
	font-weight: 600;
	color: var(--cg-muted);
}

.cg .cg-more-why.is-needed { color: var(--cg-accent-deep); }
.cg .cg-details[hidden] { display: none; }
.cg .cg-more-toggle.is-open + .cg-details { margin-top: .75rem; }

/* The details are asked for, not offered. A gift with nobody attached to it
   cannot be receipted and cannot appear on a year-end statement. */
.cg .cg-details-head {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin: 1.3rem 0 .2rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cg-muted);
}

.cg .cg-details-head span {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cg-muted-soft);
}