/* ==========================================================================
   1. GLOBAL VARIABLES & THEME
   ========================================================================== */
:root {
	/* Primary Data Palette */
	--col1: #4a7c8c;         /* Cold / Snow */
	--col2: #c86b3c;         /* Heat */
	--col3: #5c8262;         /* Mild / Rain / Base Green */
	--col4: #8a6a82;         /* Dry */
	--col5: #a84646;         /* Severe / Error */
	--col-muggy: #b85a32;    /* Muggy Nights */
	--col-mosquito: #6e733b; /* Mosquito Window */
	
	/* Structural & Neutral Palette */
	--bg-color: #f6f0e2; 
	--card-bg: #fffbf0;
	--text-color: #3e3128; 
	--border-color: #c9bda5; 
	--grayed-out: #635b4f; 
	--white: #ffffff;

	/* Transparent Overlays for UI Button States */
	--ssp245-hover: rgba(212, 154, 54, 0.15);
	--ssp245-active: rgba(212, 154, 54, 0.35);
	--ssp126-hover: rgba(92, 130, 98, 0.15);
	--ssp126-active: rgba(92, 130, 98, 0.35);
	--ssp585-hover: rgba(168, 70, 70, 0.15);
	--ssp585-active: rgba(168, 70, 70, 0.35);

	/* Z-Index Hierarchy */
	--z-dropdown: 100;

	/* Fluid Spacing Scale (scales based on viewport height/width) */
	--space-xs: clamp(2px, 0.5svh, 4px);
	--space-sm: clamp(4px, 1svh, 8px);
	--space-md: clamp(8px, 1.5svh, 16px);
	--space-lg: clamp(12px, 2.5svh, 24px);
	--space-xl: clamp(24px, 5svh, 40px);
}

/* ==========================================================================
   2. CSS RESETS & BASE STYLES
   ========================================================================== */
* { 
	box-sizing: border-box; 
	margin: 0; 
	padding: 0; 
}

body { 
	background-color: var(--bg-color); 
	color: var(--text-color); 
	font-family: 'Play', Arial, sans-serif; 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	min-height: 100vh; 
	padding: var(--space-xl) var(--space-lg); 
}

/* ==========================================================================
   3. TYPOGRAPHY & LAYOUT
   ========================================================================== */
header { 
	text-align: center; 
	margin-bottom: var(--space-xl); 
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

header h1 { 
	font-family: 'Arvo', serif; 
	font-size: clamp(2rem, 6vw, 2.5rem); 
	color: var(--text-color); 
	letter-spacing: -1px; 
}

header p { 
	font-size: clamp(0.9rem, 4vw, 1.1rem);
	color: var(--grayed-out); 
	max-width: 400px; 
	line-height: 1.4; 
	font-style: italic; 
	margin: 0 auto;
}

.container {
	width: 100%; 
	max-width: 500px; 
	display: flex; 
	flex-direction: column; 
	gap: var(--space-lg);
}

/* ==========================================================================
   4. FORMS & INPUT UI
   ========================================================================== */
.input-card {
	background-color: var(--card-bg); 
	padding: var(--space-lg); 
	border-radius: 8px; 
	border: 2px dashed var(--border-color); 
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.input-row {
	display: flex;
	gap: var(--space-lg);
	width: 100%;
}

.input-row .input-group {
	flex: 1;
}

.input-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	position: relative; 
}

label { 
	font-size: 0.85rem; 
	font-weight: bold; 
	text-transform: uppercase; 
	color: var(--text-color); 
}

input {
	font-family: inherit;
	padding: 0.75rem; 
	font-size: 1.1rem; 
	border: 2px solid var(--border-color); 
	border-radius: 4px; 
	background-color: var(--bg-color); 
	color: var(--text-color); 
	outline: none;
	width: 100%;
	transition: border-color 0.2s ease;
}

input:focus { 
	border-color: var(--col3); 
}

/* --- Autocomplete Search List Box --- */
.autocomplete-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: var(--white);
	border: 2px solid var(--border-color);
	border-top: none;
	border-radius: 0 0 4px 4px;
	z-index: var(--z-dropdown);
	max-height: 200px;
	overflow-y: auto;
	box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

.autocomplete-item {
	padding: 0.75rem;
	font-size: 0.95rem;
	cursor: pointer;
	border-bottom: 1px solid var(--bg-color);
	color: var(--text-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.autocomplete-item:hover {
	background-color: var(--bg-color);
}

/* --- Premium Segmented Switch UI (Units Toggle) --- */
.switch-group {
	max-width: 160px;
}

.switch-container {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 42px;
	cursor: pointer;
}

.switch-container input {
	opacity: 0;
	width: 0;
	height: 0;
}

.switch-slider {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: var(--bg-color);
	border: 2px solid var(--border-color);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	font-size: 0.85rem;
	font-weight: bold;
	color: var(--grayed-out);
	transition: 0.2s ease;
}

.switch-slider::before {
	content: "";
	position: absolute;
	height: 32px;
	width: calc(50% - 4px);
	left: 2px;
	bottom: 2px;
	background-color: var(--col3);
	border-radius: 4px;
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
}

.switch-slider span {
	width: 50%;
	text-align: center;
	z-index: 2;
	transition: color 0.2s ease;
}

/* Switch Animation States */
.switch-container input:checked + .switch-slider::before { transform: translateX(100%); }
.switch-container input:not(:checked) + .switch-slider span:first-of-type { color: var(--bg-color); }
.switch-container input:checked + .switch-slider span:last-of-type { color: var(--bg-color); }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
button { 
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.8rem, 2.5svh, 1rem) clamp(1.5rem, 5vw, 2.5rem); 
	font-size: clamp(1.1rem, 3svh, 1.2rem); 
	font-weight: bold; 
	color: var(--bg-color); 
	background-color: var(--col3); 
	border: none; 
	border-radius: 6px; 
	cursor: pointer;
	transition: all 0.2s ease;
}

button:hover:not(:disabled) { 
	background-color: #46664b; 
	transform: translateY(-2px);
}

button:active:not(:disabled) {
	transform: translateY(0);
}

button:disabled { 
	background-color: var(--border-color); 
	cursor: not-allowed; 
}

/* Secondary Button (Reveal Future) */
.btn-secondary { background-color: var(--col2); }
.btn-secondary:hover:not(:disabled) { background-color: #a8542c; }

/* Dark Button (Global Reset) */
.btn-dark {
	background-color: var(--text-color); 
	margin-top: var(--space-md); 
	width: 100%;
}
.btn-dark:hover:not(:disabled) { background-color: #2b211a; }

/* ==========================================================================
   6. DASHBOARD & DATA CARDS
   ========================================================================== */
#dashboard { 
	display: flex; 
	flex-direction: column; 
	gap: var(--space-lg); 
	width: 100%;
}

.location-header {
	font-family: 'Arvo', serif;
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
	color: var(--col1);
	margin-bottom: var(--space-sm);
	border-bottom: 2px dashed var(--border-color);
	padding-bottom: var(--space-lg);
}

.hero-summary {
	font-size: 1.1rem; 
	line-height: 1.5; 
	color: var(--text-color); 
	margin-bottom: var(--space-md); 
	padding: 0 var(--space-sm);
}

.metric-card {
	background-color: var(--card-bg);
	border: 2px dashed var(--border-color); 
	border-radius: 8px;
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
	box-shadow: 0 4px 6px rgba(0,0,0,0.02);
	
	/* Scrollytelling Base State */
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Added dynamically by Javascript when scrolled into view */
.metric-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.metric-title { 
	font-family: 'Arvo', serif;
	font-size: 1.2rem; 
	font-weight: bold; 
	color: var(--text-color); 
}

.metric-desc { 
	font-size: 0.9rem; 
	color: var(--grayed-out); 
	line-height: 1.3; 
}

/* --- 3-Column Data Point Layout --- */
.metric-comparison {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--bg-color); 
	padding: var(--space-md);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	margin-top: var(--space-sm);
	gap: 2px;
}

.data-point { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	flex: 1;
}

.data-year { 
	font-size: 0.75rem; 
	text-transform: uppercase; 
	font-weight: bold; 
	color: var(--grayed-out); 
}

.data-value { 
	font-size: clamp(1.1rem, 4vw, 1.5rem); 
	font-weight: bold; 
	text-align: center;
	white-space: nowrap;
}

/* Text Colors Mapping to Metrics */
.text-heat     { color: var(--col2); }
.text-muggy    { color: var(--col-muggy); }
.text-dry      { color: var(--col4); }
.text-mosquito { color: var(--col-mosquito); }
.text-mild     { color: var(--col3); }
.text-cold     { color: var(--col1); }

.arrow { 
	font-size: 1rem; 
	color: var(--grayed-out); 
	flex-shrink: 0;
}

.impact-subtitle {
	font-size: 0.95rem; 
	font-weight: bold; 
	color: var(--text-color); 
	margin-top: var(--space-sm); 
	text-align: center;
}

/* Chart Canvas Wrapper */
.chart-container {
	position: relative;
	height: 160px; 
	width: 100%;
	margin-top: var(--space-md);
}

/* ==========================================================================
   7. FUTURE SCENARIOS & TAB CONTROLS
   ========================================================================== */
/* 1. Base Visual Styling (Applies to both Dashboard and Methodology) */
   .scenario-container {
	   background-color: var(--card-bg);
	   border: 2px dashed var(--border-color);
	   border-radius: 8px;
	   padding: var(--space-lg);
	   margin-bottom: var(--space-md);
   }
   
   /* 2. Specific Sticky Behavior (Applies ONLY to the Dashboard Selector) */
   #dashboard .scenario-container {
	   position: sticky;
	   top: 10px;
	   z-index: 50;
	   box-shadow: 0 8px 24px rgba(0,0,0,0.08); 
   }

.scenario-heading {
	font-family: 'Arvo', serif;
	font-size: 1.2rem;
	color: var(--text-color);
	margin-bottom: var(--space-xs);
}

.scenario-explainer {
	font-size: 0.9rem;
	color: var(--grayed-out);
	margin-bottom: var(--space-sm);
}

/* Methodology Page List overrides */
.scenario-list {
	list-style: none;
	font-size: 0.85rem;
	color: var(--text-color);
	margin-bottom: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.scenario-list li {
	position: relative;
	padding-left: 14px;
	line-height: 1.4;
}

.scenario-list li::before {
	content: '•';
	position: absolute;
	left: 0;
	font-size: 1.2rem;
	line-height: 1;
}

/* Bullet colors for methodology mapping */
.scenario-list li:nth-child(1)::before { color: var(--col3); } 
.scenario-list li:nth-child(2)::before { color: #d49a36; }     
.scenario-list li:nth-child(3)::before { color: var(--col5); } 

/* Scenario Tabs */
.scenario-tabs {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	background-color: transparent;
	padding: 0;
}

.tab-btn {
	font-family: inherit;
	flex: 1;
	padding: 0.6rem;
	font-size: clamp(0.75rem, 3vw, 0.85rem);
	background-color: var(--bg-color);
	border: 1px solid var(--border-color);
	color: var(--text-color);
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-weight: bold;
}

/* Tab Active/Hover States */
.tab-btn[data-scenario="ssp245"]:hover { background-color: var(--ssp245-hover); border-color: #d49a36; }
.tab-btn[data-scenario="ssp245"].active { background-color: var(--ssp245-active); border-color: #d49a36; }

.tab-btn[data-scenario="ssp126"]:hover { background-color: var(--ssp126-hover); border-color: var(--col3); }
.tab-btn[data-scenario="ssp126"].active { background-color: var(--ssp126-active); border-color: var(--col3); }

.tab-btn[data-scenario="ssp585"]:hover { background-color: var(--ssp585-hover); border-color: var(--col5); }
.tab-btn[data-scenario="ssp585"].active { background-color: var(--ssp585-active); border-color: var(--col5); }

/* ==========================================================================
   8. SCROLLYTELLING PROGRESSION ENGINE (No !important overrides)
   ========================================================================== */
.progression-container {
	text-align: center; 
	margin: var(--space-lg) 0;
}

/* Base transitions for revealing the 3rd future column */
.data-point,
.arrow,
.impact-subtitle {
	transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* STATE: Historical Mode Active */
#dashboard[data-step="history"] .scenario-container {
	display: none; 
}

#dashboard[data-step="history"] .data-point:last-of-type,
#dashboard[data-step="history"] .arrow:last-of-type,
#dashboard[data-step="history"] .impact-subtitle {
	opacity: 0;
	transform: scale(0.9);
	pointer-events: none;
}

/* STATE: Future Mode Active */
#dashboard[data-step="future"] .scenario-container {
	display: block;
	/* Removed animation to preserve position: sticky constraints */
}

#dashboard[data-step="future"] .data-point:last-of-type,
#dashboard[data-step="future"] .arrow:last-of-type,
#dashboard[data-step="future"] .impact-subtitle {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   9. METHODOLOGY PAGE SPECIFICS
   ========================================================================== */
.methodology-text { 
	color: var(--grayed-out); 
	font-size: 0.95rem; 
	line-height: 1.6; 
	margin-bottom: var(--space-md); 
}

.methodology-text strong { 
	color: var(--text-color); 
}

.math-block { 
	background-color: var(--bg-color); 
	padding: var(--space-md); 
	border-radius: 4px; 
	text-align: center; 
	margin: var(--space-md) 0; 
	font-family: monospace; 
	border: 1px solid var(--border-color); 
	overflow-x: auto; /* Prevent long equations from breaking mobile view */
}

/* Site Footer & Links */
.site-footer {
	text-align: center; 
	margin-top: var(--space-xl); 
	padding-top: var(--space-md); 
	border-top: 1px solid var(--border-color);
	width: 100%;
}

.footer-link,
.back-link {
	color: var(--grayed-out); 
	font-size: 0.85rem; 
	text-decoration: none;
	font-weight: bold;
}

.back-link {
	display: inline-block; 
	margin-top: var(--space-lg); 
	color: var(--col3); 
}

.footer-link:hover,
.back-link:hover {
	text-decoration: underline;
}

/* ==========================================================================
   10. UTILITY CLASSES & SYSTEM STATES
   ========================================================================== */
/* Display utility override */
.hidden { 
	display: none !important; 
}

/* Spacing utility overrides for methodology text */
.mb-0 { margin-bottom: 0 !important; }
.mt-md { margin-top: var(--space-md) !important; }

/* Dynamic Error Message Block */
.error-msg {
	background-color: rgba(168, 70, 70, 0.1);
	color: var(--col5);
	padding: var(--space-md);
	border-radius: 4px;
	border-left: 4px solid var(--col5);
	font-size: 0.95rem;
	font-weight: bold;
	text-align: center;
}