/**
 * Offering Plate — the giving portal.
 *
 * A front-end page, so it has to hold its own inside a theme. Everything is
 * scoped under .cgp and the properties themes most often hijack are restated
 * rather than assumed. Flat colour, no gradients, as everywhere else.
 */

.cgp {
	--cgp-ink: #111111;
	--cgp-primary: #0862db;
	--cgp-accent: #028b2c;

	--cgp-accent-deep: #007718;
	--cgp-bad: #c4362b;
	--cgp-paper: #ffffff;
	--cgp-wash: #f4f7fb;
	--cgp-rule: #e2e8f2;
	--cgp-muted: #5b6472;
	--cgp-soft: #8b94a4;

	box-sizing: border-box;
	max-width: 68rem;
	margin-inline: auto;
	font-family: inherit;
	color: var(--cgp-ink);
	line-height: 1.5;
}

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

/* ---- Masthead ---- */

.cgp-top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding: 1.35rem 1.5rem;
	background: var(--cgp-ink);
	border-bottom: 3px solid var(--cgp-primary);
	border-radius: 12px 12px 0 0;
}

.cgp-top > div:first-child { margin-right: auto; }

.cgp .cgp-eyebrow {
	margin: 0 0 .3rem;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--cgp-accent);
}

.cgp .cgp-title {
	margin: 0;
	padding: 0;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.03em;
	color: #fff;
}

.cgp-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }

.cgp-range label {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.cgp-range input {
	min-height: 34px;
	padding: .3rem .5rem;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 7px;
	background: rgba(255, 255, 255, .08);
	font-family: inherit;
	font-size: .8125rem;
	color: #fff;
}

.cgp-range button {
	min-height: 36px;
	padding: .45rem 1rem;
	border: 0;
	border-radius: 8px;
	background: var(--cgp-primary);
	font-family: inherit;
	font-size: .8125rem;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}

.cgp-flash {
	margin: 0 0 1rem;
	padding: .7rem .9rem;
	border-left: 3px solid var(--cgp-accent-deep);
	border-radius: 0 8px 8px 0;
	background: #e6f4ea;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--cgp-accent-deep);
}

/* ---- KPIs ---- */

.cgp-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1px;
	margin-bottom: 1rem;
	background: var(--cgp-rule);
	border: 1px solid var(--cgp-rule);
	border-radius: 12px;
	overflow: hidden;
}

.cgp-kpi { padding: 1.05rem 1.2rem; background: var(--cgp-paper); }

.cgp .cgp-key {
	display: block;
	margin-bottom: .35rem;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cgp-muted);
}

.cgp .cgp-val {
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -.035em;
	font-variant-numeric: tabular-nums;
}

.cgp .cgp-sub {
	display: block;
	margin-top: .25rem;
	font-size: .75rem;
	font-weight: 600;
	color: var(--cgp-muted);
}

.cgp-kpi--good .cgp-val { color: var(--cgp-accent-deep); }
.cgp-kpi--bad .cgp-val { color: var(--cgp-bad); }

/* ---- Panels ---- */

.cgp-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.cgp-panel {
	padding: 1.15rem 1.3rem 1.3rem;
	background: var(--cgp-paper);
	border: 1px solid var(--cgp-rule);
	border-radius: 12px;
}

.cgp-panel--wide { grid-column: 1 / -1; }

.cgp .cgp-h {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: 0;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cgp-muted);
}

.cgp-count {
	padding: .1rem .45rem;
	border-radius: 999px;
	background: var(--cgp-bad);
	font-size: .625rem;
	color: #fff;
	letter-spacing: 0;
}

.cgp-empty {
	margin: 0;
	padding: 1rem 0;
	font-size: .875rem;
	text-align: center;
	color: var(--cgp-soft);
}

/* ---- Fund bars ---- */

.cgp-bar { margin-bottom: .85rem; }
.cgp-bar:last-child { margin-bottom: 0; }

.cgp-bar-top {
	display: flex;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .3rem;
	font-size: .875rem;
}

.cgp-bar-top strong { font-variant-numeric: tabular-nums; }

.cgp-track { height: 7px; background: var(--cgp-wash); border-radius: 999px; overflow: hidden; }
.cgp-fill { height: 100%; background: var(--cgp-primary); border-radius: 999px; }
.cgp-bar:first-child .cgp-fill { background: var(--cgp-ink); }
.cgp-bar:nth-child(3) .cgp-fill { background: var(--cgp-accent); }

/* ---- Queue and gifts ---- */

.cgp-queue, .cgp-gift {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .65rem 0;
	border-bottom: 1px solid var(--cgp-rule);
}

.cgp-queue:last-child, .cgp-gift:last-child { border-bottom: 0; padding-bottom: 0; }

.cgp-ref {
	flex: 0 0 auto;
	padding: .25rem .45rem;
	border-radius: 5px;
	background: var(--cgp-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--cgp-accent);
}

.cgp-queue-body, .cgp-gift-who { flex: 1; min-width: 0; font-size: .875rem; }
.cgp-queue-body strong, .cgp-gift-who strong { display: block; }
.cgp .cgp-dim { display: block; font-size: .75rem; color: var(--cgp-soft); }

.cgp-amt {
	flex: 0 0 auto;
	font-size: .9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cgp-gift-when {
	flex: 0 0 3rem;
	font-size: .75rem;
	font-weight: 600;
	color: var(--cgp-soft);
}

.cgp-confirm { flex: 0 0 auto; margin: 0; }

.cgp-confirm button {
	padding: .35rem .7rem;
	border: 1.5px solid var(--cgp-accent);
	border-radius: 7px;
	background: transparent;
	font-family: inherit;
	font-size: .75rem;
	font-weight: 700;
	color: var(--cgp-accent-deep);
	cursor: pointer;
	transition: background-color .18s, color .18s;
}

.cgp-confirm button:hover { background: var(--cgp-accent); color: #fff; }

/* ---- Months ---- */

.cgp-months {
	display: flex;
	align-items: flex-end;
	gap: .5rem;
	height: 9rem;
}

.cgp-month {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
	gap: .35rem;
}

.cgp-month-val { font-size: .6875rem; font-weight: 700; color: var(--cgp-muted); font-variant-numeric: tabular-nums; }
.cgp-col { width: 100%; max-width: 3.5rem; background: var(--cgp-primary); border-radius: 4px 4px 0 0; }
.cgp-month:last-child .cgp-col { background: var(--cgp-accent); }
.cgp-month-key { font-size: .6875rem; font-weight: 600; color: var(--cgp-soft); }

/* ---- Gate ---- */

.cgp-gate {
	max-width: 28rem;
	margin-inline: auto;
	padding: 2.25rem 1.75rem;
	background: var(--cgp-paper);
	border: 1px solid var(--cgp-rule);
	border-radius: 14px;
	text-align: center;
}

.cgp-gate .cgp-title { color: var(--cgp-ink); }
.cgp-gate p { margin: .6rem 0 1.4rem; font-size: .9375rem; color: var(--cgp-muted); }

.cgp .cgp-button {
	display: inline-block;
	padding: .8rem 1.6rem;
	border-radius: 9px;
	background: var(--cgp-primary);
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}

.cgp .cgp-foot {
	margin: 1.25rem 0 0;
	font-size: .75rem;
	text-align: center;
	color: var(--cgp-soft);
}

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

@media (max-width: 52rem) {
	.cgp-grid { grid-template-columns: minmax(0, 1fr); }
	.cgp-top { border-radius: 12px; }
	.cgp-months { height: 7rem; }
	.cgp-month-val { font-size: .625rem; }
}

@media (prefers-reduced-motion: reduce) {
	.cgp * { transition-duration: .01ms !important; }
}

.cgp .cgp-note {
	margin: -.5rem 0 .9rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--cgp-muted);
}

/* ---- Tabs ---- */

.cgp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin-bottom: 1rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--cgp-rule);
}

.cgp .cgp-tab {
	padding: .5rem .9rem;
	border-radius: 8px;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--cgp-muted);
	text-decoration: none;
	transition: background-color .18s, color .18s;
}

.cgp .cgp-tab:hover { background: var(--cgp-wash); color: var(--cgp-ink); }
.cgp .cgp-tab.is-on { background: var(--cgp-ink); color: #fff; }
.cgp .cgp-tab--action { margin-left: auto; color: var(--cgp-primary); }
.cgp .cgp-tab--action:hover { background: var(--cgp-primary); color: #fff; }

.cgp-count--calm { background: var(--cgp-muted); }

/* ---- Bulk selection ---- */

.cgp-bulk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-bottom: .75rem;
	padding: .65rem .8rem;
	background: var(--cgp-wash);
	border-radius: 9px;
}

.cgp-tickall { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; }
.cgp-bulk-actions { margin-left: auto; display: flex; gap: .4rem; }

.cgp-bulk-actions button,
.cgp .cgp-confirm button {
	padding: .4rem .8rem;
	border: 1.5px solid var(--cgp-primary);
	border-radius: 7px;
	background: var(--cgp-primary);
	font-family: inherit;
	font-size: .75rem;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: background-color .18s, color .18s, opacity .18s;
}

.cgp-bulk-actions .cgp-ghost { background: transparent; color: var(--cgp-primary); }
.cgp-bulk-actions .cgp-ghost:hover { background: var(--cgp-primary); color: #fff; }
.cgp-bulk-actions button[disabled] { opacity: .4; cursor: not-allowed; }

.cgp-tick { flex: 0 0 auto; display: flex; align-items: center; }
.cgp-year { margin-left: auto; }
.cgp-year select { padding: .25rem .4rem; border: 1px solid var(--cgp-rule); border-radius: 6px; font-family: inherit; font-size: .75rem; }

/* ---- Pledge rows ---- */

.cgp-pledge-bar { flex: 0 0 9rem; display: flex; flex-direction: column; gap: .25rem; }
.cgp-pledge-bar .cgp-track { height: 6px; }
.cgp .cgp-late { color: var(--cgp-bad); font-weight: 700; }

@media (max-width: 40rem) {
	.cgp-pledge-bar { flex-basis: 100%; }
	.cgp-tabs { gap: .2rem; }
	.cgp .cgp-tab { padding: .45rem .65rem; font-size: .75rem; }
	.cgp .cgp-tab--action { margin-left: 0; }
}

/* Which build is live. Small, but it turns "is this updated?" from a guess
   into something anyone can read off the page. */
.cgp .cgp-build {
	display: block;
	margin-top: .3rem;
	font-size: .6875rem;
	color: var(--cgp-rule);
}