/* ==========================================================================
   Home Care Runway Calculator — Calculator #2
   Shared elements (panel, sliders, results, bar, breakdown-item) are
   styled by assets/css/engines/care-runway.css via identical class
   names — do not duplicate those rules here. This file only covers
   what's unique to this calculator: the 24-hour timeline, the 4-item
   breakdown grid, and the scenario comparison cards.
   ========================================================================== */

/* ---------- 24-hour timeline ---------- */

.cc-hcr-timeline-wrap {
	margin-top: 0.5rem;
}

.cc-hcr-timeline-header {
	display: flex;
	justify-content: space-between;
	font-family: var(--cc-font-sans, sans-serif);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	margin-bottom: 0.5rem;
}

#cc-hcr-covered-label {
	color: var(--cc-color-gold, #C99A3D);
}

#cc-hcr-uncovered-label {
	color: var(--cc-color-sage, #8FA397);
}

.cc-hcr-timeline-track {
	width: 100%;
	height: 20px;
	border-radius: 999px;
	background: rgba(244, 238, 220, 0.15);
	overflow: hidden;
}

.cc-hcr-timeline-covered {
	height: 100%;
	background: var(--cc-color-gold, #C99A3D);
	border-radius: 999px 0 0 999px;
	transition: width 0.3s ease;
}

/* ---------- 4-item breakdown grid (overrides the 3-column default) ---------- */

.cc-hcr-breakdown {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
	.cc-hcr-breakdown {
		grid-template-columns: repeat(4, 1fr);
	}

	.cc-hcr-breakdown .cc-runway-breakdown-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}

/* ---------- Scenario comparison ---------- */

.cc-hcr-scenarios {
	background: var(--cc-color-card-white, #FFFDF7);
	padding: 2rem;
	border-top: 1px solid var(--cc-color-border, rgba(11, 36, 29, 0.12));
}

.cc-hcr-scenarios-title {
	font-family: var(--cc-font-serif, serif);
	font-size: 1.125rem;
	color: var(--cc-color-deep-green, #0B241D);
	margin: 0 0 1.25rem;
	text-align: center;
}

.cc-hcr-scenario-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.cc-hcr-scenario-card {
	background: var(--cc-color-warm-cream, #F4EEDC);
	border: 1px solid var(--cc-color-border, rgba(11, 36, 29, 0.12));
	border-radius: 8px;
	padding: 1rem;
	text-align: center;
}

.cc-hcr-scenario-hours {
	font-family: var(--cc-font-sans, sans-serif);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--cc-color-muted-text, #606E67);
	margin: 0 0 0.5rem;
}

.cc-hcr-scenario-cost {
	font-family: var(--cc-font-serif, serif);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--cc-color-deep-green, #0B241D);
	margin: 0 0 0.25rem;
}

.cc-hcr-scenario-runway {
	font-size: 0.75rem;
	color: var(--cc-color-gold-text, #826427);
	margin: 0;
}

.cc-hcr-scenario-note {
	text-align: center;
	font-size: 0.75rem;
	color: var(--cc-color-muted-text, #606E67);
	font-style: italic;
	margin: 1.25rem 0 0;
}

/* ---------- Responsive ---------- */

@media (min-width: 768px) {
	.cc-hcr-scenario-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}