/* ── Design tokens ─────────────────────────────────────────────── */
/* CSS custom properties (variables) -- the single source of truth for
colors/shadows/radius used throughout this whole file via var(--name).
Change a color scheme here once instead of hunting down every hardcoded
hex value. Defined on :root so they're available to every selector on the page. */
:root {
--bg: #f8fafc; /* page background */
--panel: #ffffff; /* card/panel background (white) */
--muted: #64748b; /* secondary/dimmed text color */
--text: #0f172a; /* primary text color */
--border: #e2e8f0; /* light border color, most common */
--border-2: #cbd5e1; /* slightly darker border, used for inputs/dropdowns */
--shadow: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06); /* larger elevation shadow (cards on hover, chart panel) */
--shadow-sm: 0 1px 3px 0 rgba(0,0,0,.08), 0 1px 2px 0 rgba(0,0,0,.04); /* smaller/subtler shadow (default card state) */
--primary: #3b82f6; /* main brand blue */
--primary-2: #2563eb; /* darker blue, used for hover states / links */
--success: #10b981; /* green, used for citizen-science accents and success states */
--success-2: #059669; /* darker green, hover state */
--radius: 8px; /* standard corner rounding used almost everywhere */
}
/* ── Reset ─────────────────────────────────────────────────────── */
/* Removes every browser's inconsistent default margin/padding and forces
border-box sizing (so padding/border are included IN an element's
declared width, not added on top of it) -- applied to literally every
element, plus their ::before/::after pseudo-elements. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%; /* lets .app-wrapper below fill the full viewport height */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* "System font stack" -- uses whatever native UI font the visitor's own
OS provides (San Francisco on Mac, Segoe UI on Windows, Roboto on
Android/Chrome OS) instead of loading a custom web font, for speed and
a familiar native feel. */
font-size: 14px;
color: var(--text);
background: var(--bg);
}
/* ── App wrapper ───────────────────────────────────────────────── */
/* Outermost layout container (see index.html) -- a full-height flex
column holding the header on top and the scrollable body below it.
overflow:hidden here (combined with height:100vh) is what stops the
whole page itself from scrolling -- scrolling instead happens inside
.app-main further down. */
.app-wrapper { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
/* ── Full-width header ─────────────────────────────────────────── */
.app-header {
min-height: 120px;
background: var(--panel);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
flex-wrap: nowrap;
row-gap: 6px;
padding: 6px 16px;
flex: 0 0 auto; /* the header block itself never grows/shrinks against the body below it */
}
.app-title {
/* Note: index.html's actual logo/title markup uses a plain ![]()
inside
.app-title now (not a separate text label) -- these text-styling rules
(font-weight/size/color) are effectively unused leftovers from an
earlier version of the header that showed a text title next to the logo. */
font-weight: 800;
font-size: 22px;
letter-spacing: .01em;
color: var(--text);
transition: color .18s, opacity .18s;
user-select: none; /* stops the title text from being selectable/highlightable like a button label would be */
}
.app-title:hover {
opacity: .8; /* subtle dim-on-hover, reinforcing that the logo area is clickable (see index.html's onclick="showPage('landing')") */
}
.title-icon {
/* Also appears to be an unused leftover -- no matching element in the current index.html. */
width: 22px; height: 22px;
border-radius: 5px;
background: #e2e8f0;
border: 1px solid var(--border);
flex: 0 0 auto;
}
/* ── Body: sidebar + main ──────────────────────────────────────── */
.app-body {
display: flex;
flex: 1; /* fills all remaining height below the fixed-height header */
overflow: hidden;
/* Three soft, barely-visible radial color blobs layered over the flat
background color -- a subtle decorative gradient wash rather than a
plain solid background. */
background:
radial-gradient(circle at 10% 0%, rgba(59,130,246,.10) 0%, transparent 40%),
radial-gradient(circle at 90% 10%, rgba(16,185,129,.08) 0%, transparent 45%),
radial-gradient(circle at 60% 90%, rgba(245,158,11,.06) 0%, transparent 45%),
var(--bg);
}
/* ── Sidebar (floating map panel) ──────────────────────────────── */
/* The filter panel that floats on top of the landing page's map (see
index.html's