/*
 * RoofCostChecker.com - Repair vs Replace styles
 * File: estimator/assets/rcc-rr.css
 * Depends on rcc-core.css for tokens. Scoped under .rcc-est--rr. Matte only:
 * no glows, no shadows, no gradients. Distinction carried by weight, borders,
 * and the single amber accent - never by loud color.
 *
 * v0.6.1: rewritten for the dark hero. The previous sheet predated the
 * v0.3.0 redesign and used retired light-theme tokens, which resolved to a
 * near-white strip on the verdict and invisible zone styling. Every element
 * now uses hero tokens and owns its 26px hero inset.
 */

/* Verdict: the answer headline. Sized by .rcc-est__total-value in core
 * (46px mini); this scope relaxes the display line-height for sentences. */
.rcc-est--rr .rcc-est--rr__verdict {
	margin: 0 26px 4px;
	padding-left: 14px;
	border-left: 3px solid var(--rcc-hero-line);
	line-height: 1.05;
	letter-spacing: -.02em;
}
.rcc-est--rr .rcc-est--rr__verdict[data-rcc-verdict="repair"],
.rcc-est--rr .rcc-est--rr__verdict[data-rcc-verdict="replace"] {
	border-left-color: var(--rcc-amber);
}
.rcc-est--rr .rcc-est--rr__verdict[data-rcc-verdict="judgment"] {
	border-left-color: var(--rcc-hero-mute);
}

/* Cost-ratio scale */
.rcc-est--rr .rcc-est--rr__scale { margin: 18px 26px 12px; }
.rcc-est--rr .rcc-est--rr__track {
	position: relative;
	height: 10px;
	background: var(--rcc-hero-2);
	border: 1px solid var(--rcc-hero-line);
	border-radius: 999px;
	margin: 22px 0 10px;
}
.rcc-est--rr .rcc-est--rr__tick {
	position: absolute;
	top: -5px;
	width: 1px;
	height: 20px;
	background: var(--rcc-hero-mute);
	transform: translateX(-50%);
}
.rcc-est--rr .rcc-est--rr__marker {
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	background: var(--rcc-amber);
	border: 2px solid var(--rcc-hero);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
.rcc-est--rr .rcc-est--rr__zones { display: flex; gap: 8px; }
.rcc-est--rr .rcc-est--rr__zone {
	flex: 1 1 0;
	text-align: center;
	font-size: 12.5px;
	color: var(--rcc-hero-mute);
	padding: 7px 4px;
	border: 1px solid var(--rcc-hero-line);
	border-radius: 10px;
	background: transparent;
}
.rcc-est--rr .rcc-est--rr__zone small {
	display: block;
	font-size: 11.5px;
	color: var(--rcc-hero-faint);
	margin-top: 2px;
	font-variant-numeric: tabular-nums;
}
.rcc-est--rr .rcc-est--rr__zone.is-active {
	color: var(--rcc-hero-fg);
	font-weight: 700;
	border-color: var(--rcc-amber);
	background: var(--rcc-hero-2);
}
.rcc-est--rr .rcc-est--rr__zone.is-active small { color: var(--rcc-hero-mute); }

/* Inputs: the replacement field carries a helper note, so the core grid's
 * bottom alignment (align-items:end) staggered the first row. Top-align
 * this tool's grid; labels here are short and single-line. */
.rcc-est--rr .rcc-calc__inputs { align-items: start; }

@media (max-width: 560px) {
	.rcc-est--rr .rcc-est--rr__verdict { font-size: 30px; }
}