/* Placeholder styling; the real design comes later. Colour tokens live here,
   including the simulation colours read by js/sim/render.js. */
:root {
	--bg: #f7f7f5;
	--fg: #1c1c1c;
	--muted: #6b6b6b;
	--accent: #1f5fbf;
	--panel: rgba(247, 247, 245, 0.88);
	--panel-fade: 0px; /* how far the content panel fades out into the map */

	/* Simulation colours rely on luminance contrast, not on blue, so they stay
	   visible under night-light / blue-light filters that dim the blue channel. */
	--sim-road: rgba(50, 50, 60, 0.3);
	--sim-road-width: 1;
	--sim-vehicle: rgba(40, 40, 55, 0.4);
	--sim-vehicle-busy: rgba(10, 100, 80, 0.5);
	--sim-vehicle-radius: 3;
	--sim-request: rgba(190, 110, 20, 0.4);
	--sim-request-radius: 4;
	--sim-reject: rgba(190, 50, 50, 0.45);
}

body.sim-demo {
	--sim-show-load: 1;
	--sim-origin: #d9931a;
	--sim-dest: #3a7bd5;
	--sim-station: #1c1c1c;
	--sim-assign: rgba(0, 0, 0, 0.12);
	--sim-label: #1c1c1c;
	--sim-road: #b4bac4;
	--sim-road-width: 2;
	--sim-vehicle: #5c6270;
	--sim-vehicle-busy: #0f766e;
	--sim-vehicle-radius: 4;
	--sim-request: #c8781a;
	--sim-request-radius: 6;
	--sim-reject: #c03030;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	line-height: 1.5;
	color: var(--fg);
	background: var(--bg);
}

#sim {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
}

header, main, footer {
	position: relative;
	z-index: 1;
	width: min(60rem, 100% - 2rem);
	margin-inline: auto;
}

header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 1rem 2rem;
	padding: 1.25rem 0;
}

header .brand { font-weight: 700; text-decoration: none; color: inherit; }

header nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
header nav a { 
	color: var(--muted); 
	text-decoration: none; 
}
header nav a[aria-current] { color: var(--fg); font-weight: 600; }

main {
	/* background: var(--panel); */
	/* a blurred halo in the panel colour, so vehicles fade out gradually as they
	   move under the content instead of vanishing at a hard edge */
	/* box-shadow: 0 0 calc(var(--panel-fade) * 1.5) var(--panel-fade) var(--panel); */
	border-radius: 12px;
	padding: 2rem;
	min-height: 60vh;
}
main:focus { outline: none; }

/* background for text elements */
a, p, li, h1, h2, h3, h4, h5, h6 { 
	background: var(--bg); 
	width: fit-content;
	box-shadow: 0 0 8px var(--bg);
}

footer {
	padding: 2rem 0;
	color: var(--muted);
	font-size: 0.875rem;
}

a { color: var(--accent); }

/* Demo mode: the canvas is the content, main collapses to a control strip. */
body.sim-demo main {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 1rem 1.25rem;
	--panel: rgba(255, 255, 255, 0.92);
	--panel-fade: 16px;
}
body.sim-demo footer { display: none; }
body.sim-stations #sim { cursor: crosshair; }

[hidden] { display: none !important; }

.tabs {
	display: flex;
	gap: 0.25rem;
	margin: 0 0 0.75rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.tabs button {
	font: inherit;
	font-size: 0.875rem;
	padding: 0.35rem 0.75rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--muted);
	cursor: pointer;
}
.tabs button[aria-selected="true"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }

.status { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--muted); min-height: 1.2em; }
.station-list { margin: 0.75rem 0 0; padding-left: 1.25rem; font-size: 0.875rem; }
.station-list li { width: auto; }

.controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0.75rem 1.5rem;
	align-items: center;
}
.controls label { display: flex; flex-direction: column; font-size: 0.875rem; gap: 0.25rem; }
.controls input[type="range"] { width: 100%; }
.controls .buttons { display: flex; gap: 0.5rem; }

.stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}
.stats b { font-variant-numeric: tabular-nums; }

/* CV (generated fragment on the About page) */
.cv-section { margin-top: 2rem; }
.cv-section h2 { margin-bottom: 0.5rem; }
.cv-section h3 { margin: 1rem 0 0.25rem; font-size: 1rem; color: var(--muted); }
.cv-entries, .cv-honors, .cv-skills, .cv-pubs { list-style: none; padding: 0; margin: 0; }
.cv-entry { margin: 0 0 1rem; }
.cv-title { font-weight: 600; }
.cv-org::before { content: "· "; color: var(--muted); }
.cv-meta { font-size: 0.875rem; color: var(--muted); }
.cv-details { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.cv-summary { margin: 0.25rem 0 0; }
.cv-honors li, .cv-skills li, .cv-pubs li { margin: 0 0 0.5rem; }
.cv-level { letter-spacing: 0.1em; color: var(--accent); }
.cv-citations { color: var(--muted); }
.cv-footnote { font-size: 0.8125rem; color: var(--muted); }

/* Bottom-strip layout: keep the panel short so the map keeps its space. */
@media (max-width: 1099px) {
	body.sim-demo .station-list,
	body.sim-demo [data-tab="stations"] > p:last-child { display: none; }
}

/* Demo on large screens: the control panel docks to the right side as a column. */
@media (min-width: 1100px) {
	body.sim-demo main {
		left: auto;
		top: 4.5rem;
		right: 1rem;
		bottom: auto;
		width: 20rem;
		max-height: calc(100vh - 5.5rem);
		overflow-y: auto;
	}
	body.sim-demo .controls { grid-template-columns: 1fr; gap: 0.75rem; }
	body.sim-demo .stats { flex-direction: column; gap: 0.25rem; margin-bottom: 1rem; }
	body.sim-demo .stats li { display: flex; justify-content: space-between; gap: 0.5rem; width: 100%; }
}

@media (max-width: 700px) {
	main { padding: 1.25rem; }
	body.sim-demo main { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; padding: 0.75rem; }
	body.sim-demo main p { display: none; }
	.controls { grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
	.controls .buttons { grid-column: 1 / -1; }
}

#image-home-me {
	display: block;
	float: right; 
	padding-left: 20px;
	padding-bottom: 20px;
}

@media (max-width: 700px) {
	#image-home-me { 
		float: none;
		padding-left: 0;
		max-width: 100%;
	}
}