.gcp21-stack { max-width: 920px; }
.gcp21-stack > .gcp-card { max-width: none; }

.gcp21-answer {
	background: linear-gradient(135deg, #fff9e9, #fff);
	border: 1px solid #f0dfad;
	border-inline-start: 4px solid var(--gcp-gold);
	border-radius: 12px;
	font-size: clamp(1rem, 2.5vw, 1.12rem);
	line-height: 1.85;
	margin: 0 0 1rem;
	padding: 1rem;
}

.gcp21-answer strong {
	color: #77530c;
	font-size: clamp(1.35rem, 4vw, 2rem);
	white-space: nowrap;
}

.gcp21-facts {
	display: grid;
	gap: .8rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block-end: 1rem;
}

.gcp21-facts > div {
	background: #f8f8f7;
	border: 1px solid var(--gcp-line);
	border-radius: 12px;
	display: grid;
	gap: .35rem;
	padding: .9rem 1rem;
}

.gcp21-facts span,
.gcp21-range span,
.gcp21-calculator__result span { color: var(--gcp-muted); font-size: .85rem; }
.gcp21-facts strong { color: var(--gcp-ink); font-size: 1.25rem; }

.gcp21-movement {
	border: 1px solid currentColor;
	border-radius: 12px;
	line-height: 1.75;
	margin: 1rem 0 0;
	padding: .85rem 1rem;
}

.gcp21-movement--up { background: #edf9f2; color: var(--gcp-positive); }
.gcp21-movement--down { background: #fff2f2; color: var(--gcp-negative); }
.gcp21-movement--flat,
.gcp21-movement--unknown { background: #f4f6f8; color: var(--gcp-neutral); }

.gcp21-weights caption,
.gcp21-history-table caption {
	color: var(--gcp-muted);
	font-size: .8rem;
	line-height: 1.55;
	padding: 0 0 .55rem;
	text-align: start;
}

.gcp21-note {
	background: #f7f8fa;
	border-radius: 10px;
	color: var(--gcp-muted);
	font-size: .86rem;
	line-height: 1.7;
	margin: 1rem 0 0;
	padding: .8rem 1rem;
}

.gcp21-history h3 {
	color: var(--gcp-ink);
	font-size: clamp(1.05rem, 3vw, 1.3rem);
	line-height: 1.4;
	margin: 1.35rem 0 .7rem;
}

.gcp21-chart {
	background: #fbfaf6;
	border: 1px solid #eee4c9;
	border-radius: 12px;
	margin: 0 0 1rem;
	padding: .75rem;
}

.gcp21-chart svg { color: var(--gcp-gold); display: block; height: auto; max-height: 250px; width: 100%; }
.gcp21-chart__grid line { stroke: #e6dfcc; stroke-width: 1; }
.gcp21-chart__line { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.gcp21-chart__point { fill: currentColor; stroke: #fff; stroke-width: 2; }
.gcp21-chart__point--single { stroke-width: 2.5; }
.gcp21-chart figcaption { color: var(--gcp-muted); font-size: .78rem; line-height: 1.55; margin-block-start: .45rem; }

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

.gcp21-range > div {
	background: #f8f8f7;
	border: 1px solid var(--gcp-line);
	border-block-start: 3px solid var(--gcp-gold);
	border-radius: 12px;
	display: grid;
	gap: .3rem;
	padding: 1rem;
}

.gcp21-range strong { color: var(--gcp-ink); font-size: 1.35rem; }
.gcp21-range time { color: var(--gcp-muted); font-size: .8rem; }

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

.gcp21-calculator label { display: grid; font-size: .88rem; font-weight: 650; gap: .35rem; }
.gcp21-calculator input,
.gcp21-calculator select {
	background: #fff;
	border: 1px solid #cfd4dc;
	border-radius: 9px;
	color: var(--gcp-ink);
	font: inherit;
	min-height: 44px;
	padding: .55rem .7rem;
	width: 100%;
}

.gcp21-calculator input:focus,
.gcp21-calculator select:focus {
	border-color: var(--gcp-gold);
	box-shadow: 0 0 0 3px rgba(167, 121, 21, .14);
	outline: none;
}

.gcp21-calculator__result {
	align-items: center;
	background: #f7f8fa;
	border-radius: 12px;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-block-start: 1rem;
	padding: 1rem;
}

.gcp21-calculator__result output {
	color: #77530c;
	font-size: clamp(1.25rem, 4vw, 1.7rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	.gcp21-facts,
	.gcp21-range,
	.gcp21-calculator__grid { grid-template-columns: 1fr; }
	.gcp21-calculator__result { align-items: stretch; flex-direction: column; }
	.gcp21-history-table th,
	.gcp21-history-table td { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	.gcp21-stack * { scroll-behavior: auto !important; transition: none !important; }
}
