index.css

1	@import 'leaflet/dist/leaflet.css';
2
3	/* Add global styles here */
4	body {
5	margin: 0;
6	font-family: system-ui, sans-serif;
7	background: #f8f9fa;
8	}
9
10	/* App shell + responsive two-column layout. On wide screens the map/controls and
11	the answers sit side by side so you don't have to scroll past the map to read
12	the answers; on narrow screens they stack. */
13	.app {
14	max-width: 1180px;
15	margin: 0 auto;
16	padding: 24px 20px 48px;
17	}
18	.app-cols {
19	display: grid;
20	grid-template-columns: 1fr;
21	gap: 24px;
22	align-items: start;
23	}
24	@media (min-width: 900px) {
25	.app-cols {
26	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
27	}
28	/* Keep the answers visible while the (taller) answer list scrolls. */
29	.app-answers {
30	position: sticky;
31	top: 16px;
32	max-height: calc(100vh - 32px);
33	overflow-y: auto;
34	}
35	}
36	.app-map {
37	height: 380px;
38	border-radius: 8px;
39	overflow: hidden;
40	border: 1px solid #e3e5e8;
41	}
42
43	/* Timeline sliders (day-of-year and year): a transparent-track range input with
44	a thin "playhead" thumb, laid over a track drawn behind it. Shared so both
45	bars look identical and the thin thumb lines up with the ticks/bands. */
46	.timeline-slider {
47	-webkit-appearance: none;
48	appearance: none;
49	position: relative;
50	z-index: 1;
51	width: 100%;
52	height: 28px;
53	margin: 0;
54	background: transparent;
55	cursor: pointer;
56	}
57
58	/* Clickable year-axis labels: jump the date to that key year. Reset button
59	chrome so they read as plain ticks, with a hover/focus cue that they're
60	interactive. */
61	.year-tick {
62	padding: 2px 1px;
63	border: 0;
64	background: none;
65	font: inherit;
66	color: inherit;
67	line-height: 1;
68	cursor: pointer;
69	}
70	.year-tick:hover,
71	.year-tick:focus-visible {
72	color: #1a1a1a;
73	text-decoration: underline;
74	}
75	.timeline-slider::-webkit-slider-runnable-track {
76	height: 28px;
77	background: transparent;
78	}
79	.timeline-slider::-moz-range-track {
80	height: 28px;
81	background: transparent;
82	}
83	.timeline-slider::-webkit-slider-thumb {
84	-webkit-appearance: none;
85	appearance: none;
86	width: 3px;
87	height: 36px;
88	margin-top: -4px;
89	background: #1a1a1a;
90	border: 1px solid #fff;
91	border-radius: 2px;
92	}
93	.timeline-slider::-moz-range-thumb {
94	width: 3px;
95	height: 36px;
96	background: #1a1a1a;
97	border: 1px solid #fff;
98	border-radius: 2px;
99	}