/*
 * RosterSlots components
 * Depth comes from 1px borders and surface shifts, not shadows.
 * Saturated colour appears only on things you are meant to click.
 */

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */

.rs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: 18px;
	border-radius: var(--r-sm);
	font: 600 15px/1 var(--font-head);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.rs-btn--primary {
	background-image: var(--accent-grad);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--on-accent);
	box-shadow: var(--hairline-strong), var(--glow-accent);
	font-weight: 600;
}

.rs-btn--primary:hover {
	background-image: var(--accent-grad-hover);
	color: var(--on-accent);
}

.rs-btn--primary:active {
	background-image: none;
	background-color: var(--accent-active);
	box-shadow: none;
}

.rs-btn--secondary {
	background: transparent;
	border: 1px solid var(--border-interactive);
	color: var(--text-primary);
}

.rs-btn--secondary:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.rs-btn[aria-disabled='true'],
.rs-btn:disabled {
	opacity: 0.45;
	pointer-events: none;
}

/* ---------------------------------------------------------------
   Cards / panels
   --------------------------------------------------------------- */

.rs-panel {
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-md);
	padding: var(--s3);
}

/* ---------------------------------------------------------------
   Compliance — component A: site-wide disclosure strip
   Sits in the reading order directly under the masthead. Set in the same
   13px secondary style as every other caption, so it reads as ordinary
   honesty rather than a legal notice. Structural prominence, not visual.
   --------------------------------------------------------------- */

.rs-disclosure {
	background: var(--bg-base);
	border-bottom: 1px solid var(--border-subtle);
}

.rs-disclosure__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2);
	padding-block: 14px;
}

.rs-disclosure__text {
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-secondary);
	margin: 0;
}

.rs-disclosure__aside {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.rs-disclosure__aside a {
	font-size: 13px;
}

/* ---------------------------------------------------------------
   Age marker
   --------------------------------------------------------------- */

.rs-age {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 20px;
	padding-inline: 4px;
	border: 1px solid var(--border-interactive);
	border-radius: 3px;
	font: 600 10px/1 var(--font-mono);
	color: var(--text-secondary);
	flex: none;
}

.rs-age--lg {
	min-width: 34px;
	height: 22px;
	font-size: 11px;
	border-color: var(--text-secondary);
	color: var(--text-primary);
}

/* ---------------------------------------------------------------
   Compliance — component B: per-CTA marker
   Carries the same visual weight as the action beside it. Visible at the
   decision point, never heavier than the decision itself.
   --------------------------------------------------------------- */

.rs-cta-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.rs-cta-note {
	font: 400 11px/1.5 var(--font-mono);
	color: var(--text-muted);
}

.rs-cta-note a {
	color: var(--text-secondary);
}

/* ---------------------------------------------------------------
   Compliance — component C: footer block
   --------------------------------------------------------------- */

.rs-safer {
	background: var(--bg-base);
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-md);
	padding: var(--s3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	align-items: flex-start;
	justify-content: space-between;
}

.rs-safer__copy {
	max-width: 520px;
}

.rs-safer__head {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 10px;
}

.rs-safer__head span {
	font: 600 13px/1.2 var(--font-head);
	letter-spacing: 0.02em;
	color: var(--text-primary);
}

.rs-safer__text {
	font-size: 13px;
	line-height: 1.6;
	color: var(--text-secondary);
	margin: 0;
}

.rs-badges {
	display: flex;
	gap: var(--s1);
	flex-wrap: wrap;
}

.rs-badge {
	display: flex;
	align-items: center;
	height: 38px;
	padding-inline: 14px;
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-sm);
	font: 500 11px/1 var(--font-mono);
	letter-spacing: 0.04em;
	color: var(--text-secondary);
}

/* ---------------------------------------------------------------
   Rating
   The score is the loudest thing on the page. Gold appears here and on
   offer figures — nowhere else — so the eye learns it in one scroll.
   --------------------------------------------------------------- */

.rs-score {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	font-variant-numeric: tabular-nums;
}

.rs-score__value {
	font: 700 52px/0.9 var(--font-head);
	letter-spacing: -0.035em;
	color: var(--accent);
}

.rs-score__out {
	font: 500 18px/1 var(--font-head);
	color: var(--text-muted);
}

.rs-score--sm .rs-score__value {
	font-size: 28px;
}

.rs-score--sm .rs-score__out {
	font-size: 13px;
}

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

.rs-subscore__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 13px;
}

.rs-subscore__weight {
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: 11px;
}

.rs-meter {
	height: 6px;
	background: var(--bg-muted);
	border-radius: var(--r-pill);
	overflow: hidden;
}

.rs-meter__fill {
	height: 100%;
	background-color: #b0b0b0;
	border-radius: var(--r-pill);
}

/* ---------------------------------------------------------------
   Pros / cons — icon plus colour, never colour alone
   --------------------------------------------------------------- */

.rs-proscons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--s3);
}

.rs-proscons ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s1);
}

.rs-proscons li {
	display: flex;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-secondary);
}

.rs-proscons li::before {
	flex: none;
	font-weight: 700;
	font-family: var(--font-mono);
}

.rs-pros li::before {
	content: '✓';
	color: var(--positive);
}

.rs-cons li::before {
	content: '−';
	color: var(--negative);
}

/* ---------------------------------------------------------------
   Key facts table
   --------------------------------------------------------------- */

.rs-facts {
	font-size: 14px;
}

.rs-facts th,
.rs-facts td {
	text-align: left;
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-subtle);
	vertical-align: top;
}

.rs-facts th {
	font: 600 11px/1.4 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	width: 40%;
	font-weight: 600;
}

.rs-facts td {
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}

.rs-facts tr:last-child th,
.rs-facts tr:last-child td {
	border-bottom: 0;
}

/* ---------------------------------------------------------------
   Offer figure — the only other place gold is allowed
   --------------------------------------------------------------- */

.rs-offer {
	font: 600 17px/1.3 var(--font-head);
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}

.rs-terms {
	font: 400 12px/1.5 var(--font-mono);
	color: var(--text-muted);
}

@media (max-width: 640px) {
	.rs-safer {
		flex-direction: column;
	}

	.rs-score__value {
		font-size: 40px;
	}
}