/*
 * RoofCostChecker.com - Roof Lifespan styles
 * File: estimator/assets/rcc-life.css
 * Depends on rcc-core.css for tokens. Scoped under .rcc-est--life. Matte only:
 * no glows, no shadows, no gradients.
 *
 * v0.6.1: rewritten for the dark hero. The previous sheet predated the
 * v0.3.0 redesign and used retired light-theme tokens; the bugs were latent
 * (status line and age scale only appear once an age is entered). Every
 * element now uses hero tokens and owns its 26px hero inset.
 */

/* Expected-life headline. Sized by .rcc-est__total-value in core (46px
 * mini); this scope relaxes the display line-height for sentences. */
.rcc-est--life .rcc-est--life__expected {
	margin: 0 0 6px;
	line-height: 1.05;
	letter-spacing: -.02em;
}

/* Lifecycle stage line (appears once an age is entered). */
.rcc-est--life .rcc-est--life__status {
	font-weight: 700;
	color: var(--rcc-hero-fg);
	margin: 8px 26px 2px;
	padding-left: 12px;
	border-left: 3px solid var(--rcc-hero-line);
}
.rcc-est--life .rcc-est--life__status[data-rcc-stage="early"],
.rcc-est--life .rcc-est--life__status[data-rcc-stage="mid"] { border-left-color: var(--rcc-amber); }
.rcc-est--life .rcc-est--life__status[data-rcc-stage="late"] { border-left-color: var(--rcc-hero-mute); }
.rcc-est--life .rcc-est--life__status[data-rcc-stage="end"],
.rcc-est--life .rcc-est--life__status[data-rcc-stage="overdue"] { border-left-color: var(--rcc-hero-fg); }

/* Age scale */
.rcc-est--life .rcc-est--life__scale { margin: 16px 26px 6px; }
.rcc-est--life .rcc-est--life__track {
	position: relative;
	height: 10px;
	background: var(--rcc-hero-2);
	border: 1px solid var(--rcc-hero-line);
	border-radius: 999px;
	margin: 20px 0 6px;
}
.rcc-est--life .rcc-est--life__tick {
	position: absolute;
	top: -5px;
	width: 1px;
	height: 20px;
	background: var(--rcc-hero-mute);
	transform: translateX(-50%);
}
.rcc-est--life .rcc-est--life__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--life .rcc-est--life__scale-labels {
	display: flex;
	justify-content: space-between;
	font-size: 11.5px;
	color: var(--rcc-hero-faint);
	font-variant-numeric: tabular-nums;
}

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