/* ============================================
   CSS Variables — Editorial Design System
   Inspired by Works in Progress magazine:
   serif headings, monospace data, warm palette,
   clean borders, no shadows, generous whitespace.
   ============================================ */

/* For this part we consulted Claude who recommended CSS Custom Properties (variables).
   The :root selector targets the top-level HTML element, making these variables available
   everywhere in the stylesheet. Instead of writing the same color code (#1a1a1a) in 50
   places, we define it once as --color-primary and reference it with var(--color-primary).
   If we later want to change the color scheme, we only update it here — every element
   using that variable updates automatically. This is similar to variables in Python. */
/* CSS variables (also called "custom properties") let you define a value once
   and reuse it everywhere. If you want to change a color, you change it in ONE
   place here instead of hunting through the whole file. They always start with --.
   :root means "the whole page" — these variables are available everywhere. */
:root {
    /* -- Colors (earth tone palette) -- */
    --color-primary: #1a1a1a;
    --color-text: #333333;
    --color-text-light: #6b6b6b;
    --color-background: #faf8f5;
    --color-background-alt: #f0ece6;
    --color-border: #d4d0cc;
    --color-accent: #8b6f47;
    --color-accent-hover: #6b5535;
    --color-success: #8b6f47;
    --color-warning: #c4841d;
    --color-danger: #8b2020;
    --color-number: #5c4a2e;

    /* -- Typography -- */
    --font-display: 'Source Serif 4', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    /* -- Spacing -- */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* -- Layout -- */
    --max-width: 1100px;
    --content-width: 720px;
    --step-width: 420px;

    /* -- Transitions -- */
    /* transition: makes CSS changes happen smoothly over time instead of instantly.
       "all 0.2s ease" means: animate all properties, take 0.2 seconds, ease in/out. */
    --transition: all 0.2s ease;
    --transition-slow: all 0.5s ease;
}

/* ============================================
   Reset & Base
   ============================================ */

/* box-sizing: border-box makes width/height include padding and border.
   Without it, a 100px-wide box with 10px padding would actually be 120px wide.
   With it, the box stays 100px total. This is way more intuitive.
   ::before and ::after are pseudo-elements — invisible extras CSS can add
   before/after any element (used for decorative things like the FAQ +/- icons). */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    /* transition makes the color change smooth on hover instead of instant */
    transition: var(--transition);
}

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

/* ============================================
   Progress Bar (top of page)
   ============================================ */
.progress-bar {
    /* position: fixed means this element stays in the same spot on screen
       even when you scroll. It's "fixed" to the browser window, not the page. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.06);
    /* z-index controls stacking order — higher numbers appear on top of lower ones.
       1001 means this bar sits above almost everything else on the page. */
    z-index: 1001;
}

.progress-fill {
    height: 100%;
    background: var(--color-number);
    width: 0%;
    transition: width 0.1s linear;
}

/* ============================================
   Navigation (sticky header)
   ============================================ */
.navbar {
    /* position: fixed keeps the nav bar visible at the top as you scroll */
    position: fixed;
    top: 3px;
    left: 0;
    right: 0;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    transition: var(--transition);
}

.navbar.scrolled {
    background: var(--color-background);
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-sm) var(--spacing-md);
    /* display: flex arranges child elements in a row (or column).
       It's the modern way to lay out elements side-by-side. */
    display: flex;
    /* justify-content: space-between pushes items to opposite ends */
    justify-content: space-between;
    /* align-items: center vertically centers items in the row */
    align-items: center;
}

.nav-logo {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: var(--spacing-md);
}

.nav-links a {
    color: var(--color-text-light);
    font-weight: 500;
    font-size: 0.85rem;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid transparent;
    letter-spacing: 0.02em;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Hamburger menu button (hidden on desktop) */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    margin: 5px 0;
    transition: var(--transition);
}

/* ============================================
   Section Layout (shared by all sections)
   ============================================ */
.section-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* For this part we consulted Claude who recommended clamp() for responsive font sizes.
   clamp(minimum, preferred, maximum) sets a value that scales with the viewport but
   stays within bounds. For example, clamp(2rem, 5vw, 3.5rem) means: "use 5% of the
   viewport width as the font size, but never go below 2rem or above 3.5rem." This
   single line replaces what used to require multiple @media breakpoints to achieve.
   vw = viewport width units (1vw = 1% of the browser window width). */
.section-title {
    font-family: var(--font-display);
    /* clamp(min, preferred, max) picks a responsive font size:
       at least 1.75rem, ideally 4% of viewport width, but never more than 2.5rem.
       This makes text scale smoothly between phone and desktop. */
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.section-subtitle {
    font-size: 1rem;
    color: var(--color-text-light);
    max-width: var(--content-width);
    margin-bottom: var(--spacing-lg);
}

.section-intro {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text);
    max-width: var(--content-width);
    margin-bottom: var(--spacing-md);
}

.explore-prompts {
    max-width: var(--content-width);
    margin-bottom: var(--spacing-lg);
    font-size: 0.95rem;
    color: var(--color-text);
}

.explore-prompts ul {
    margin-top: var(--spacing-xs);
    padding-left: 1.5rem;
}

.explore-prompts li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.6;
}

.alt-bg {
    background-color: var(--color-background-alt);
}

/* ============================================
   SCROLLYTELLING — Map Section
   ============================================ */
.scrolly-section {
    /* position: relative makes this element the reference point for any
       position: absolute or position: sticky children inside it. */
    position: relative;
}

.map-scrolly {
    min-height: 600vh;
}

/* Sticky map that stays fixed while text scrolls over it */
.sticky-map-container {
    /* position: sticky is a hybrid: the element scrolls normally until it hits
       the top of the screen, then it "sticks" there while its parent is visible.
       This is how the map stays on screen while the text cards scroll past. */
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

.full-map {
    width: 100%;
    height: 100%;
}

/* Dark overlay on the left side to improve text readability */
.map-overlay {
    /* position: absolute positions this relative to its nearest positioned parent
       (the sticky-map-container). Unlike fixed, it scrolls with its parent. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* pointer-events: none means clicks pass through this overlay to the map below.
       Without this, the overlay would block all map interactions. */
    pointer-events: none;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.08) 40%,
        transparent 60%
    );
    /* opacity controls transparency: 0 = invisible, 1 = fully visible */
    opacity: 0;
    transition: opacity 0.5s ease;
}

.map-overlay.active {
    opacity: 1;
}

/* "Scroll to explore" hint at the bottom of the first screen */
.scroll-hint {
    position: absolute;
    bottom: 40px;
    left: 50%;
    /* transform moves/rotates/scales an element. translateX(-50%) shifts it
       left by half its own width, which perfectly centers it. */
    transform: translateX(-50%);
    text-align: center;
    color: white;
    font-size: 0.85rem;
    font-family: var(--font-mono);
    z-index: 10;
    opacity: 1;
    transition: opacity 0.5s ease;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.scroll-hint.hidden {
    opacity: 0;
    pointer-events: none;
}

.scroll-arrow {
    width: 18px;
    height: 18px;
    border-right: 1.5px solid white;
    border-bottom: 1.5px solid white;
    transform: rotate(45deg);
    margin: var(--spacing-sm) auto 0;
    /* animation plays a @keyframes sequence on loop (see "bounce" below) */
    animation: bounce 2s infinite;
}

/* For this part we consulted Claude who recommended @keyframes for defining reusable
   animations. A @keyframes rule defines the stages of an animation by specifying CSS
   properties at different points (0% = start, 100% = end, or use "from"/"to"). Elements
   then reference the animation by name using the `animation` property, which also controls
   duration, timing function (ease, linear, etc.), and how many times it plays. The browser
   automatically calculates all the in-between frames (interpolation). */
/* @keyframes defines a named animation sequence.
   The browser smoothly transitions between each percentage step.
   This one makes the arrow bounce up and down to draw attention. */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(45deg); }
    40% { transform: translateY(-10px) rotate(45deg); }
    60% { transform: translateY(-5px) rotate(45deg); }
}

/* ============================================
   Scrolly Steps — Text cards over the map
   ============================================ */
.scrolly-steps {
    position: relative;
    z-index: 5;
    /* pointer-events: none lets clicks pass through to the map behind */
    pointer-events: none;
    margin-top: -100vh;
}

.scrolly-step {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--spacing-lg);
}

/* First step: position hero card higher so it's visible on load */
.scrolly-step:first-child {
    align-items: flex-start;
    padding-top: 18vh;
}

.step-content {
    background: rgba(250, 248, 245, 0.95);
    /* backdrop-filter: blur() blurs whatever is behind this element (the map).
       This gives the text cards a frosted-glass effect for readability. */
    backdrop-filter: blur(8px);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    max-width: var(--step-width);
    pointer-events: auto;
    opacity: 0;
    /* transform: translateY(20px) starts the card 20px below its final position */
    transform: translateY(20px);
    /* transition animates the change — so when opacity and transform change,
       it happens smoothly over 0.5s instead of instantly */
    transition: var(--transition-slow);
}

/* When the step is in view, fade it in and slide it up to its final position */
.scrolly-step.is-active .step-content {
    opacity: 1;
    transform: translateY(0);
}

/* Hero step — centered and wider, visible immediately */
.step-hero {
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
    opacity: 1;
    transform: translateY(0);
}

.step-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-text-light);
    border-bottom: 1px solid var(--color-text-light);
    padding-bottom: 2px;
    margin-bottom: var(--spacing-md);
}

.step-content h1 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    line-height: 1.2;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.step-content h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.step-content p {
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.step-content p:last-child {
    margin-bottom: 0;
}

.step-byline {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xs);
}

.step-context {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-light);
    max-width: 380px;
    margin: var(--spacing-sm) auto 0;
    line-height: 1.5;
    font-style: italic;
}

.step-purpose {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-light);
    max-width: 380px;
    margin: var(--spacing-xs) auto var(--spacing-sm);
    line-height: 1.6;
}

.step-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-top: var(--spacing-md);
}

.step-note {
    font-size: 0.9rem;
    color: var(--color-text-light);
    font-style: italic;
}

/* ============================================
   Crash Detail Panel (sidebar)
   ============================================ */
.crash-detail-panel {
    position: fixed;
    top: 50%;
    right: 40px;
    /* Two transforms combined: center vertically AND slide offscreen to the right */
    transform: translateY(-50%) translateX(100%);
    width: 380px;
    max-height: 80vh;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
    overflow: hidden;
}

/* When active, slide back into view */
.crash-detail-panel.active {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.panel-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    transition: var(--transition);
    z-index: 10;
}

.panel-close:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.panel-content {
    padding: var(--spacing-lg);
    overflow-y: auto;
    max-height: 80vh;
}

.panel-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.panel-header h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.panel-meta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.panel-section {
    margin-bottom: var(--spacing-md);
}

.panel-section h4 {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xs);
}

.panel-section p {
    color: var(--color-text);
}

.panel-narrative {
    font-size: 0.9rem;
    line-height: 1.8;
}

.panel-note {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

/* Severity badges — restrained, editorial */
.severity-badge {
    display: inline-block;
    font-family: var(--font-mono);
    padding: 2px 8px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid;
}

.severity-low {
    border-color: var(--color-border);
    color: var(--color-text-light);
}

.severity-medium {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.severity-high {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* ============================================
   Photo Break
   ============================================ */
.photo-break {
    margin: 0;
    padding: 0;
}

.photo-break-container {
    max-width: 1200px;
    margin: 0 auto;
}

.photo-break-container img {
    width: 100%;
    max-height: 60vh;
    object-fit: cover;
}

.photo-caption {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--color-text-light);
    padding: var(--spacing-xs) var(--spacing-md);
}

.photo-credit {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.8rem;
}

/* Inline photo within page content (e.g., About page) */
.photo-break-inline {
    margin: var(--spacing-lg) 0;
}

.photo-break-inline img {
    width: 100%;
    max-height: 50vh;
    object-fit: cover;
    border-radius: 2px;
}

/* ============================================
   Stats Section
   ============================================ */
.stats-section {
    padding: var(--spacing-xl) 0;
}

.stats-grid {
    /* display: grid creates a grid layout (like a spreadsheet).
       grid-template-columns defines how many columns and how wide each is.
       repeat(4, 1fr) = 4 equal-width columns. "1fr" means "1 fraction of available space". */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-bottom: var(--spacing-lg);
}

.stat-card {
    padding: var(--spacing-md) var(--spacing-sm);
    text-align: center;
    border-right: 1px solid var(--color-border);
}

.stat-card:last-child {
    border-right: none;
}

.stat-number {
    font-family: var(--font-mono);
    font-size: 2.75rem;
    font-weight: 600;
    color: var(--color-number);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-light);
}

/* Safety Context (Waymo comparison stats) */
.safety-context {
    background: var(--color-background-alt);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.safety-context h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.context-stats {
    display: grid;
    /* repeat(auto-fit, minmax(200px, 1fr)) = as many columns as will fit,
       each at least 200px wide. Columns wrap to new rows automatically. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

.context-stat {
    text-align: center;
}

.context-number {
    display: block;
    font-family: var(--font-mono);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.context-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.context-source {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-top: var(--spacing-sm);
}

/* ============================================
   Analysis Sections (Temporal + Spatial)
   ============================================ */
.analysis-section {
    padding: var(--spacing-xl) 0;
}

.analysis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: var(--spacing-lg);
}

.analysis-card {
    padding: var(--spacing-md) var(--spacing-sm);
    text-align: center;
    border-right: 1px solid var(--color-border);
}

.analysis-card:last-child {
    border-right: none;
}

.analysis-card.highlight {
    /* no special border — the number color speaks for itself */
}

.analysis-number {
    font-family: var(--font-mono);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--color-number);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.analysis-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.analysis-desc {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

/* Figure (chart images — will be replaced by canvas charts) */
.figure-container {
    margin: var(--spacing-lg) 0;
    overflow: hidden;
}

.analysis-figure {
    width: 100%;
    height: auto;
}

/* Interactive chart containers */
.chart-row {
    display: grid;
    /* auto-fit with minmax: charts sit side-by-side on wide screens,
       stack vertically when the screen is too narrow for 320px columns */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.chart-container {
    padding: var(--spacing-md);
    background: transparent;
}

.chart-container canvas {
    max-height: 300px;
}

.chart-title {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.chart-note {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-top: var(--spacing-sm);
    line-height: 1.5;
}

.chart-source {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-light);
    margin-top: var(--spacing-xs);
    line-height: 1.4;
}

/* City Cards (spatial section) */
.city-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.city-card {
    width: 175px;
    padding: var(--spacing-sm) 0;
    text-align: center;
}

.city-card-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.city-card-count {
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-number);
    line-height: 1.2;
}

.city-card-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xs);
}

.city-card-peak {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.city-card-miles {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-accent);
    margin-top: 0.25rem;
}

.city-card-rate {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-light);
}

/* ============================================
   Explore Section (filters + map)
   ============================================ */
.explore-section {
    padding: var(--spacing-xl) 0;
    background: var(--color-background-alt);
}

.explore-layout {
    display: grid;
    /* 260px sidebar + the rest goes to the map (1fr = remaining space) */
    grid-template-columns: 260px 1fr;
    gap: var(--spacing-md);
    min-height: 600px;
}

/* Filter sidebar */
.explore-filters {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    overflow-y: auto;
    max-height: 700px;
}

.explore-filters h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.filter-group {
    margin-bottom: var(--spacing-md);
}

.filter-group label {
    display: block;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xs);
}

/* City filter buttons */
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-btn {
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    background: white;
    color: var(--color-text);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
}

.filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Filter text toggles (new style — replaces checkboxes) */
.filter-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-sm);
}

.filter-toggle {
    background: none;
    border: none;
    padding: 2px 0;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-light);
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: var(--transition);
}

.filter-toggle:hover {
    color: var(--color-text);
}

.filter-toggle.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 500;
}

/* Zip code search */
.zip-input-group {
    display: flex;
    gap: 6px;
    align-items: center;
}

.zip-input-group input {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-background);
    color: var(--color-text);
    width: 100px;
}

.zip-input-group input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.zip-note {
    font-size: 0.7rem;
    color: var(--color-text-light);
    margin-top: 4px;
    line-height: 1.3;
}

.zip-result {
    font-size: 0.8rem;
    color: var(--color-accent);
    margin-top: 4px;
    line-height: 1.4;
}

/* Crash type / time period checkboxes (legacy — kept for backwards compat during transition) */
.filter-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--color-text);
    cursor: pointer;
}

.filter-checkbox input[type="checkbox"] {
    accent-color: var(--color-number);
}

.type-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Live filter stats */
.filter-stats {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.filter-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.filter-stat #filtered-count {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
}

.filter-stat span:last-child {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

/* Reset button */
.reset-filters {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    background: white;
    color: var(--color-text-light);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
}

.reset-filters:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Explore map */
.explore-map-container {
    position: relative;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.explore-map {
    width: 100%;
    height: 600px;
}

/* Fullscreen toggle button — floats over the map's top-right corner */
.explore-fullscreen-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;           /* Above map tiles but below popups */
    width: 34px;
    height: 34px;
    background: #fff;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #333;
    padding: 0;
}
.explore-fullscreen-btn:hover {
    background: #f4f4f4;
}

/* Fullscreen state — the explore layout fills the viewport */
.explore-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: var(--color-bg, #faf8f5);
    overflow-y: auto;
    padding: 0;
}
/* In fullscreen, make the map fill the available height */
.explore-fullscreen .explore-map {
    height: calc(100vh - 20px);
}
/* In fullscreen, move the button slightly inward to stay visible */
.explore-fullscreen .explore-fullscreen-btn {
    z-index: 10001;
}

/* ============================================
   MarkerCluster Custom Styles
   ============================================ */
.marker-cluster div {
    width: 32px;
    height: 32px;
    margin-left: 4px;
    margin-top: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.7rem;
    color: white;
}

.marker-cluster-small div {
    background: rgba(139, 111, 71, 0.85);
}

.marker-cluster-medium div {
    background: rgba(139, 111, 71, 0.85);
}

.marker-cluster-large div {
    background: rgba(139, 111, 71, 0.85);
}

.marker-cluster {
    background: transparent;
}

.marker-cluster-small {
    background: rgba(139, 111, 71, 0.2);
    border-radius: 50%;
}

.marker-cluster-medium {
    background: rgba(139, 111, 71, 0.2);
    border-radius: 50%;
}

.marker-cluster-large {
    background: rgba(139, 111, 71, 0.2);
    border-radius: 50%;
}

/* ============================================
   Leaflet Popup Custom Styles
   ============================================ */
.leaflet-container {
    font-family: var(--font-body);
}

.leaflet-popup-content-wrapper {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--color-border);
}

.leaflet-popup-content {
    margin: 14px;
    font-size: 0.85rem;
}

.crash-popup {
    line-height: 1.6;
}

.popup-city {
    color: var(--color-number);
    font-weight: 500;
}

.popup-date {
    font-family: var(--font-mono);
    color: var(--color-text-light);
    font-size: 0.8rem;
}

.popup-type {
    color: var(--color-text-light);
    font-size: 0.8rem;
}

.popup-estimated {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-warning);
}

/* Enriched popup styles — Part F: detailed crash info in explore section */
.crash-popup-enriched {
    line-height: 1.5;
    max-width: 320px;
}

.popup-header {
    margin-bottom: 4px;
}

/* Severity badges next to crash type */
.popup-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.popup-badge-serious {
    background: #8b2020;
    color: #fff;
}

.popup-badge-injury {
    background: #c4841d;
    color: #fff;
}

/* Crash circumstances: speed, movements, other party */
.popup-circumstances {
    margin: 6px 0;
    padding: 6px 8px;
    background: var(--color-bg-alt, #f0ece6);
    border-radius: 4px;
    font-size: 0.8rem;
}

.popup-detail {
    line-height: 1.5;
}

.popup-detail-label {
    color: var(--color-text-light, #6b6b6b);
    font-size: 0.75rem;
}

.popup-severity {
    font-weight: 600;
    font-size: 0.8rem;
    margin: 4px 0;
}

/* Narrative text with read more/less toggle */
.popup-narrative {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border, #e0dcd4);
    font-size: 0.78rem;
    color: var(--color-text, #2c2c2c);
    line-height: 1.5;
}

.popup-readmore {
    color: var(--color-accent, #8b6f47);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.75rem;
}

.city-tooltip {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 0;
}

/* ============================================
   Footer — light, editorial
   ============================================ */
.site-footer {
    background: white;
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
    padding: var(--spacing-lg) 0 var(--spacing-md);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.footer-info h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.footer-info p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

.footer-links h4 {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.footer-links ul {
    list-style: none;
}

.footer-links a {
    color: var(--color-text);
    font-size: 0.9rem;
    display: block;
    padding: 2px 0;
}

.footer-links a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-light);
}

/* ============================================
   Error Overlay (shown if data fails to load)
   ============================================ */
.error-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.error-content {
    background: white;
    padding: var(--spacing-lg);
    max-width: 500px;
    text-align: center;
}

.error-content h2 {
    color: var(--color-danger);
    margin-bottom: var(--spacing-sm);
}

.error-content code {
    display: inline-block;
    font-family: var(--font-mono);
    background: var(--color-background-alt);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.85rem;
    margin: var(--spacing-xs) 0;
}

/* ============================================
   Supplementary Page Styles (about, methodology, faq)
   ============================================ */
.page-section {
    padding: var(--spacing-xl) 0;
    padding-top: 80px;
}

.page-content {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.page-content h1 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.page-content h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.page-content h3 {
    font-size: 1.15rem;
    color: var(--color-primary);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.page-content p {
    margin-bottom: var(--spacing-sm);
    line-height: 1.8;
}

.page-content ul,
.page-content ol {
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-md);
}

.page-content li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.7;
}

.page-content blockquote {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border-left: 3px solid var(--color-number);
    background: var(--color-background-alt);
    font-style: italic;
    color: var(--color-text-light);
}

.page-content code {
    font-family: var(--font-mono);
    background: var(--color-background-alt);
    padding: 2px 6px;
    font-size: 0.85rem;
}

.page-content a {
    border-bottom: 1px solid currentColor;
}

/* Team cards (about page) */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

.team-card {
    background: white;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
}

.team-card h3 {
    margin-top: 0;
    color: var(--color-primary);
}

.team-card p {
    font-size: 0.95rem;
}

/* FAQ accordion styles */
.faq-item {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}

.faq-question {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
}

/* ::after adds a "+" icon after each FAQ question using pure CSS (no image needed).
   This is a pseudo-element — it doesn't exist in the HTML, CSS creates it. */
.faq-question::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 1.25rem;
    color: var(--color-text-light);
    transition: var(--transition);
}

/* When the FAQ item is open, switch the "+" to a minus sign */
.faq-item.open .faq-question::after {
    content: "\2212";
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    /* transition animates max-height so the answer slides open/closed smoothly */
    transition: max-height 0.3s ease;
}

.faq-item.open .faq-answer {
    max-height: 1000px;
}

.faq-answer p {
    padding-top: var(--spacing-xs);
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* @media (max-width: 1024px) means: "apply these styles ONLY when the browser
   window is 1024px wide or less (tablets)." This is called a responsive breakpoint.
   It lets us change the layout for different screen sizes. */

/* Tablet */
@media (max-width: 1024px) {
    .explore-layout {
        /* Switch from sidebar+map side-by-side to stacked vertically */
        grid-template-columns: 1fr;
    }

    .explore-filters {
        max-height: none;
    }

    .explore-map {
        height: 500px;
    }
}

/* Mobile — same idea as above but for screens 768px or narrower (phones) */
@media (max-width: 768px) {
    /* Show hamburger menu */
    .nav-toggle {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-background);
        border-bottom: 1px solid var(--color-border);
        flex-direction: column;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .nav-links.active {
        display: flex;
    }

    /* Hamburger animation — transform rotates the 3 lines into an X shape */
    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Scrollytelling adjustments */
    .step-content {
        max-width: 100%;
        margin: 0 var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .step-content h1 {
        font-size: 1.75rem;
    }

    /* Stats grid single column on small screens */
    .stats-grid,
    .analysis-grid,
    .context-stats {
        grid-template-columns: 1fr;
    }

    .stat-card,
    .analysis-card {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .stat-card:last-child,
    .analysis-card:last-child {
        border-bottom: none;
    }

    .stat-number {
        font-size: 2.25rem;
    }

    /* Crash panel fullscreen on mobile */
    .crash-detail-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: 60vh;
        transform: translateY(100%);
    }

    .crash-detail-panel.active {
        transform: translateY(0);
    }

    /* Explore section full width */
    .explore-map {
        height: 400px;
    }

    .city-cards {
        gap: var(--spacing-sm) var(--spacing-md);
    }

    .city-card {
        width: 150px;
    }

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

    .analysis-grid {
        grid-template-columns: 1fr;
    }

    /* Charts stack vertically */
    .chart-row {
        grid-template-columns: 1fr;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .step-hero {
        max-width: 100%;
    }

    .step-content h1 {
        font-size: 1.5rem;
    }

}

/* ============================================
   Overhaul additions (June 2026)
   ============================================ */

/* Skip link — hidden until focused, for keyboard/screen-reader users */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--spacing-sm);
    z-index: 2000;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-decoration: none;
    transition: var(--transition);
}

.skip-link:focus {
    top: var(--spacing-xs);
}

/* Footnote under the stat cards */
.stats-footnote {
    max-width: var(--content-width);
    margin: var(--spacing-sm) auto 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-light);
}

/* Freshness note in the explore section */
.explore-freshness {
    max-width: var(--content-width);
    margin: 0 auto var(--spacing-sm);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-light);
}

/* Supervised-testing checkbox in the explore sidebar */
.supervised-label {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.supervised-label input[type="checkbox"] {
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* Status line on city cards (testing metros / OTHER bucket) */
.city-card-status {
    margin-top: var(--spacing-xs);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-warning);
}

/* ============================================
   Visual redesign (June 2026): hero, scrolly
   stat callouts, severity waffle
   ============================================ */

/* --- Hero: tighter, number-forward --- */
.step-dek {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--color-text);
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.hero-stat-number {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-number);
    line-height: 1;
}

.hero-stat-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
}

.hero-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-light);
}

.hero-datanote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-light);
}

.hero-datanote a {
    color: var(--color-accent);
}

.pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-success);
    flex-shrink: 0;
    animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

/* --- Scrolly steps: kicker + oversized stat --- */
.step-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
}

.stat-callout {
    margin-bottom: var(--spacing-sm);
}

.stat-callout-number {
    display: block;
    font-family: var(--font-mono);
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-number);
    margin-bottom: 0.35rem;
}

.stat-callout-label {
    display: block;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text);
    max-width: 28ch;
}

/* --- Severity waffle: one square per crash --- */
.waffle-block {
    max-width: var(--content-width);
    margin: var(--spacing-md) 0;
}

.waffle-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.waffle-cell {
    width: 9px;
    height: 9px;
    border-radius: 1px;
    flex-shrink: 0;
}

.waffle-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-top: var(--spacing-sm);
}

.waffle-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-light);
}

.waffle-swatch {
    width: 9px;
    height: 9px;
    border-radius: 1px;
    flex-shrink: 0;
}

/* --- Mobile adjustments --- */
@media (max-width: 640px) {
    .hero-stats {
        gap: var(--spacing-sm);
    }

    .hero-stat-number {
        font-size: 1.25rem;
    }

    .stat-callout-number {
        font-size: 2.4rem;
    }

    .waffle-cell,
    .waffle-swatch {
        width: 6px;
        height: 6px;
    }
}

/* --- City card landmark drawings --- */
.city-card-art {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-xs);
    color: var(--color-accent);
    opacity: 0.75;
}

.city-card-art svg {
    width: 120px;
    height: 44px;
}

/* --- FAQ expand-all button --- */
.faq-expand-all {
    display: inline-block;
    margin-bottom: var(--spacing-sm);
    padding: 0.4rem 0.9rem;
    background: none;
    border: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    cursor: pointer;
    transition: var(--transition);
}

.faq-expand-all:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ============================================
   Centered composition (June 2026)
   Headers, intros, and single charts sit on a
   centered axis; the page reads as one column.
   ============================================ */

.section-title,
.section-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-intro,
.stats-footnote,
.waffle-block,
.waffle-legend,
.explore-freshness {
    margin-left: auto;
    margin-right: auto;
}

.waffle-legend {
    justify-content: center;
}

.explore-freshness,
.section-intro {
    text-align: center;
}

/* A lone chart in a row gets a centered, bounded stage instead of
   stretching across the whole container */
.chart-row {
    justify-content: center;
}

.chart-container:only-child {
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
}

.chart-title {
    text-align: center;
}

.chart-note,
.chart-source {
    text-align: center;
}

/* Explore intro prompts: centered block, left-aligned list inside */
.explore-prompts {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   Explore usability pass (June 2026):
   pill filters, presets, readable sidebar
   ============================================ */

/* Filter options become tappable pills with an unmistakable active state */
.filter-toggle {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    background: #fff;
    color: var(--color-text);
    font-size: 0.8rem;
    line-height: 1.2;
}

.filter-toggle:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.filter-toggle.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    font-weight: 500;
}

.filter-toggles {
    gap: 0.4rem;
}

/* Supervised checkbox: sentence case, never clipped */
.supervised-label {
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.85rem;
    color: var(--color-text);
}

.explore-filters {
    max-height: none;
    overflow: visible;
}

/* "Things to try" become one-click preset chips */
.explore-presets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    max-width: var(--content-width);
    margin: 0 auto var(--spacing-md);
}

.preset-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text);
    cursor: pointer;
    transition: var(--transition);
}

.preset-chip:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.preset-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Live count gets real prominence */
.filter-stats {
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-sm);
}

.filter-stat #filtered-count {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-number);
    margin-right: 0.4rem;
}

/* ============================================
   October 2026 overhaul — new components
   ============================================ */

/* Explore: on desktop the map fills its grid cell, so a filter column
   taller than 600px no longer leaves an empty band under the map. */
@media (min-width: 1025px) {
    .explore-layout:not(.explore-fullscreen) .explore-map-container {
        min-height: 600px;
    }
    .explore-layout:not(.explore-fullscreen) .explore-map {
        position: absolute;
        inset: 0;
        height: auto;
    }
}

.download-link {
    white-space: nowrap;
    font-weight: 600;
}

.popup-id {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-light);
}

/* City cards: launch date, rate, human comparison */
.city-card-since {
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin: -0.25rem 0 0.35rem;
}

.city-card-rate {
    margin-top: 0.15rem;
}

.city-card-rate strong {
    color: var(--color-number);
    font-weight: 600;
}

.city-card-muted {
    color: var(--color-text-light);
    font-style: italic;
}

.city-card-bench {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--color-text);
}

.city-card-ci {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-light);
}

.city-also {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-text);
    max-width: var(--content-width);
    margin: calc(-1 * var(--spacing-md)) auto var(--spacing-sm);
    line-height: 1.7;
}

.city-also-label {
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
    margin-right: 0.25rem;
}

@media (max-width: 768px) {
    .city-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-md) var(--spacing-sm);
    }
    .city-card {
        width: auto;
    }
}

/* Fatal crashes panel */
.fatal-box {
    max-width: var(--content-width);
    margin: var(--spacing-lg) auto;
    padding: var(--spacing-md);
    border-left: 3px solid var(--color-primary);
    background: var(--color-background-alt);
}

.fatal-box h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: var(--spacing-xs);
}

.fatal-intro {
    margin-bottom: var(--spacing-sm);
}

.fatal-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-sm);
}

.fatal-list li {
    padding: 0.6rem 0;
    border-top: 1px solid var(--color-border);
    line-height: 1.55;
}

.fatal-list li.fatal-pending {
    color: var(--color-danger);
}

.fatal-source {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

/* Two charts side by side, each with its own scale */
.chart-row.two-up {
    margin-bottom: 0;
}

.chart-row.two-up .chart-container canvas {
    max-height: 240px;
}

/* Waymo vs. human benchmarks */
.benchmark-block {
    max-width: 860px;
    margin: var(--spacing-lg) auto 0;
}

.block-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.benchmark-rows {
    margin: var(--spacing-md) 0 var(--spacing-sm);
}

.bench-row {
    display: grid;
    grid-template-columns: 210px 1fr 230px;
    gap: var(--spacing-sm);
    align-items: center;
    padding: 0.7rem 0;
    border-top: 1px solid var(--color-border);
}

.bench-label {
    font-weight: 600;
    font-size: 0.92rem;
}

.bench-track {
    position: relative;
    height: 14px;
    background: linear-gradient(to right, var(--color-border) 1px, transparent 1px) 0 0 / 25% 100%;
    border-left: 1px solid var(--color-text-light);
}

.bench-ci {
    position: absolute;
    top: 4px;
    height: 6px;
    background: rgba(139, 111, 71, 0.35);
}

.bench-dot {
    position: absolute;
    top: 1px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-background);
}

.bench-value {
    font-size: 0.85rem;
    line-height: 1.35;
}

.bench-value strong {
    font-family: var(--font-mono);
    color: var(--color-number);
}

.bench-range,
.bench-counts {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.bench-range {
    font-family: var(--font-mono);
}

.bench-axis {
    display: grid;
    grid-template-columns: 210px 1fr 230px;
    gap: var(--spacing-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-light);
    border-top: 1px solid var(--color-border);
    padding-top: 0.3rem;
}

.bench-axis span:nth-child(1) { grid-column: 2; justify-self: start; grid-row: 1; }
.bench-axis span:nth-child(2) { grid-column: 2; justify-self: center; grid-row: 1; }
.bench-axis span:nth-child(3) { grid-column: 2; justify-self: end; grid-row: 1; }

@media (max-width: 768px) {
    .bench-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .bench-axis {
        grid-template-columns: 1fr;
    }
    .bench-axis span:nth-child(n) { grid-column: 1; }
}

.caveat-box {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    background: var(--color-background);
    font-size: 0.92rem;
    line-height: 1.6;
}

.caveat-box p + p {
    margin-top: 0.75rem;
}

/* Monthly chart legend */
.trend-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.2rem;
    font-size: 0.78rem;
    color: var(--color-text-light);
    margin-top: 0.5rem;
}

.trend-legend .sw {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 0.35rem;
    vertical-align: -1px;
}

.sw-hub { background: #8b6f47; }
.sw-fed { background: #c9b89d; }
.sw-prov { background: #e8e0d4; border: 1px solid #c9b89d; }

/* Methodology: update-history table and data dictionary */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: var(--spacing-sm) 0 var(--spacing-md);
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.data-table th {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
}

.data-table code {
    font-size: 0.8rem;
}

.table-scroll {
    overflow-x: auto;
}

.footer-links ul + h4 {
    margin-top: var(--spacing-md);
}

#text-search {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-background);
    color: var(--color-text);
}

#text-search:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* "What we found" — the story's findings up front */
.findings-section {
    padding: var(--spacing-xl) 0 var(--spacing-lg);
    background: var(--color-background);
}

.findings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.finding {
    border-top: 2px solid var(--color-primary);
    padding-top: var(--spacing-sm);
}

.finding-number {
    display: block;
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-number);
    line-height: 1.1;
    margin-bottom: 0.4rem;
}

.finding p {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 0.5rem;
}

.finding a {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-latest {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-light);
    margin-top: 0.35rem;
}

.city-card-landmark {
    font-size: 0.62rem;
    line-height: 1.3;
    color: var(--color-text-light);
    margin: -0.15rem auto 0.45rem;
    max-width: 170px;
    font-style: italic;
}

#fatal-list li.fatal-pending {
    color: var(--color-danger);
}

/* City cards: landmark captions get two lines so names line up */
.city-card-landmark {
    min-height: 2.6em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Long notes stay a comfortable measure */
.chart-note {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Roadway type: one 100% strip */
.proportion-strip {
    max-width: 760px;
    margin: var(--spacing-sm) auto;
}

.strip-bar {
    display: flex;
    height: 28px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.strip-seg {
    display: block;
    height: 100%;
    min-width: 2px;
}

.strip-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.2rem;
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--color-text);
}

.strip-key i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 0.35rem;
    vertical-align: -1px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.strip-key strong {
    font-family: var(--font-mono);
    color: var(--color-number);
}