/**
 * Caldera — presales and airdrops.
 *
 * Loaded only by templates/presales.php and templates/airdrops.php. Same flat
 * system as everything else: Pumice canvas, Limestone cards, Ember for the one
 * thing that matters on a card, Sulfur only on a badge. No shadows, no gradients,
 * no raw hex — the funnel indicator in particular is six flat blocks, not a bar
 * with a sheen on it.
 */

/* =========================================================== Page furniture */

.caldera-rewards {
	margin-block: var(--section-gap);
}

.caldera-rewards__intro {
	margin-bottom: var(--spacing-48);
}

.caldera-rewards__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--spacing-16);
	margin-bottom: var(--spacing-24);
}

.caldera-rewards__title {
	margin: 0;
	font-size: var(--text-heading);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
}

.caldera-rewards__updated {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-4);
	margin: 0;
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	color: var(--text-muted);
}

.caldera-rewards__note,
.caldera-rewards__empty {
	margin-top: var(--spacing-24);
}

.caldera-rewards__note {
	padding: 0;
	background: none;
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	color: var(--text-muted);
}

/* =========================================================== Controls */

.caldera-rewards__controls {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-12);
	margin-bottom: var(--spacing-32);
}

/* The bars carry their own bottom margin from components.css, which would stack
   on top of the flex gap and pull the grid too far down. */
.caldera-rewards__controls .caldera-filter-bar {
	margin-bottom: 0;
}

.caldera-filter-bar__count {
	margin-left: var(--spacing-8);
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	color: var(--text-muted);
}

.caldera-filter-bar [aria-current='page'] .caldera-filter-bar__count,
.caldera-filter-bar [aria-pressed='true'] .caldera-filter-bar__count {
	color: var(--text-primary);
}

.caldera-rewards-sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-12);
	padding: var(--spacing-12) var(--spacing-24);
	border-radius: var(--radius-pills);
	background: var(--surface-raised);
}

.caldera-rewards-sort__label {
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

.caldera-rewards-sort__select {
	padding: var(--spacing-8) var(--spacing-16);
	border: var(--border-hairline) solid var(--border-color);
	border-radius: var(--radius-inputs);
	background: var(--surface-raised);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-medium);
}

.caldera-rewards-sort__submit {
	padding: var(--spacing-8) var(--spacing-16);
	font-size: var(--text-body-sm);
}

@media (min-width: 1024px) {
	.caldera-rewards__controls {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.caldera-rewards__controls .caldera-filter-bar {
		flex: 1 1 auto;
	}
}

/* =========================================================== Combined toolbar */

/*
 * Status, sale type and sort filter the same grid, so they share one frame
 * instead of stacking three raised pills down the page. Each control keeps its
 * own markup and its own no-JavaScript behaviour; only the surface is pooled,
 * with hairlines marking the rows and the labels sharing a column so the three
 * read as one instrument.
 */
.caldera-toolbar {
	gap: 0;
	padding: var(--spacing-4) var(--spacing-16);
	border-radius: var(--radius-medium);
	background: var(--surface-raised);
}

.caldera-toolbar > .caldera-filter-bar,
.caldera-toolbar > .caldera-rewards-sort {
	padding: var(--spacing-12) 0;
	margin: 0;
	border-radius: 0;
	background: transparent;
}

.caldera-toolbar > * + * {
	border-top: var(--border-hairline) dotted var(--color-obsidian-15);
}

.caldera-toolbar .caldera-filter-bar__label,
.caldera-toolbar .caldera-rewards-sort__label {
	padding-inline: 0;
}

/* The select inherits width:100% from the global input rule, which stretched it
   across the whole toolbar for seven short option labels. */
.caldera-toolbar .caldera-rewards-sort__select {
	width: auto;
	min-width: 220px;
	max-width: 100%;
	background: var(--surface-canvas);
}

@media (min-width: 768px) {
	/* One label column, so the three rows line up rather than each starting
	   wherever its own label happens to end. */
	.caldera-toolbar .caldera-filter-bar__label,
	.caldera-toolbar .caldera-rewards-sort__label {
		flex: 0 0 84px;
	}
}

@media (min-width: 1024px) {
	/* The row layout the bars get on wide screens would put all three side by
	   side and undo the toolbar; inside it they stay stacked. */
	.caldera-rewards__controls.caldera-toolbar {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.caldera-rewards__controls.caldera-toolbar .caldera-filter-bar {
		flex: 0 0 auto;
	}
}

/* =========================================================== Shared card bits */

.caldera-sale,
.caldera-campaign,
.caldera-candidate {
	gap: var(--spacing-20);
	padding: var(--spacing-32);
}

.caldera-sale__head,
.caldera-campaign__head {
	display: flex;
	align-items: center;
	gap: var(--spacing-16);
}

.caldera-sale__logo,
.caldera-campaign__logo {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pills);
	background: var(--surface-canvas);
	object-fit: contain;
}

/*
 * Name over ticker, not name beside ticker.
 *
 * These were laid out as a wrapping baseline row, which only looked aligned when
 * both fitted on one line. Project names here run from "OGC" to "Bitcoin Hyper
 * Protocol", so most cards wrapped the ticker onto its own line at a ragged
 * indent, and the display face and the meta face sit on different baselines
 * anyway. Stacking them gives every card the same left edge and the same two
 * rows regardless of name length.
 */
.caldera-sale__identity,
.caldera-campaign__identity {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-4);
	min-width: 0;
}

.caldera-sale__name,
.caldera-campaign__name,
.caldera-candidate__name {
	margin: 0;
	font-size: var(--text-subheading);
	line-height: var(--leading-subheading);
	letter-spacing: var(--tracking-heading);
	overflow-wrap: anywhere;
}

.caldera-campaign__flag {
	margin-left: auto;
}

.caldera-sale__badges {
	margin: 0;
}

/* A second badge style so the Sulfur pill stays reserved for the one fact that
   ranks a card — the sale type — and the status reads as a qualifier. */
.caldera-tag--outline {
	border: var(--border-hairline) solid var(--border-color);
	background: transparent;
}

.caldera-sale__meta-label {
	display: block;
	margin-bottom: var(--spacing-8);
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

.caldera-sale__window {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-8);
	margin: 0;
	font-family: var(--font-meta);
	font-size: var(--text-body-sm);
	line-height: var(--leading-body-sm);
	color: var(--text-primary);
}

.caldera-sale__window-open {
	color: var(--text-muted);
}

.caldera-sale__pending,
.caldera-campaign__note {
	margin: 0;
	font-size: var(--text-body-sm);
	line-height: var(--leading-body);
	color: var(--text-muted);
}

.caldera-campaign__note {
	margin-top: var(--spacing-8);
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
}

/* Facts ------------------------------------------------------------------- */

.caldera-sale__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spacing-16);
	margin: 0;
}

.caldera-sale__fact dt {
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
}

.caldera-sale__fact dd {
	margin: var(--spacing-4) 0 0;
	font-size: var(--text-body);
	font-weight: var(--font-weight-medium);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* Chips ------------------------------------------------------------------- */

.caldera-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
	padding: 0;
	margin: 0;
	list-style: none;
}

.caldera-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-4);
	padding: var(--spacing-4) var(--spacing-10);
	border: var(--border-hairline) solid var(--color-obsidian-15);
	border-radius: var(--radius-pills);
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	color: var(--text-muted);
	white-space: nowrap;
}

.caldera-chip--strong {
	border-color: var(--border-color);
	color: var(--text-primary);
}

.caldera-chip--flag {
	border-color: var(--border-color);
	color: var(--text-primary);
}

.caldera-chip--muted {
	border-style: dotted;
}

.caldera-chip__count {
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
}

/* Outbound links ---------------------------------------------------------- */

.caldera-rewards-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
	padding: 0;
	margin: 0;
	list-style: none;
}

.caldera-rewards-links__item {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-4);
	padding: var(--spacing-8) var(--spacing-12);
	border: var(--border-hairline) solid var(--color-obsidian-15);
	border-radius: var(--radius-pills);
	color: var(--text-primary);
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	text-decoration: none;
	transition: border-color var(--duration-base) var(--ease-out),
		background-color var(--duration-base) var(--ease-out);
}

.caldera-rewards-links__item:hover,
.caldera-rewards-links__item:focus-visible {
	border-color: var(--border-color);
	background: var(--surface-canvas);
}

.caldera-rewards-links__out {
	color: var(--text-muted);
}

/* =========================================================== Funnel meter */

.caldera-funnel {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.caldera-funnel__label {
	margin: 0;
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
}

.caldera-funnel__steps {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--spacing-4);
	padding: 0;
	margin: 0;
	list-style: none;
}

.caldera-funnel__step {
	height: 10px;
	border: var(--border-hairline) solid var(--color-obsidian-15);
	border-radius: var(--radius-pills);
	background: transparent;
}

.caldera-funnel__step--done {
	border-color: var(--border-color);
	background: var(--color-obsidian);
}

.caldera-funnel__step--current {
	border-color: var(--color-ember);
	background: var(--color-ember);
}

/* =========================================================== Campaigns */

.caldera-campaign__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
	margin-top: auto;
}

.caldera-campaign__actions .caldera-btn {
	padding: var(--spacing-8) var(--spacing-16);
	font-size: var(--text-body-sm);
}

/* =========================================================== Candidates */

.caldera-candidates__caveat {
	max-width: 72ch;
	margin-bottom: var(--spacing-32);
}

.caldera-candidate-grid {
	padding: 0;
	margin: 0;
	list-style: none;
}

.caldera-candidate-grid > li {
	display: flex;
}

.caldera-candidate-grid > li > .caldera-candidate {
	width: 100%;
}

.caldera-candidate__name {
	font-size: var(--text-subheading);
}

.caldera-candidate__category {
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
}

.caldera-candidate__link {
	margin: auto 0 0;
}

/* =========================================================== Narrow screens */

@media (max-width: 600px) {
	.caldera-sale,
	.caldera-campaign,
	.caldera-candidate {
		padding: var(--spacing-24);
	}

	.caldera-sale__facts {
		grid-template-columns: minmax(0, 1fr);
	}
}