/* DitchBook /map/ — Leaflet map page. Builds on styles.css + directory.css tokens; only map-specific layout lives here. Rebuilt for v3 (specs/ditch-map-v3.md, D7): the map frame is near-full-screen with floating overlay controls, capped at two persistent ones on phones (search + satellite) plus Leaflet's own attribution/zoom — everything else (legend, shape key, slider, coverage count) lives in one collapsible info sheet. */ /* PRODUCTION BUG FIX (2026-08-07): canal lines/reservoir pools rendered invisible despite correct `d` paths -- root cause was styles.css's generic `img, svg{max-width:100%}` collapsing DitchBook's own CUSTOM pane (ditchbook-geometry-pane) to 0×0, since Leaflet's OWN built-in `svg{max-width:none}` reset in leaflet.css only covers its own pane, never a consumer-created one. Pane class below is Leaflet's generated `leaflet--pane` for GEOMETRY_PANE_NAME ("ditchbook-geometry-pane") in map.js — keep both in sync by hand if that constant ever changes. */ .leaflet-container .leaflet-ditchbook-geometry-pane-pane svg, .leaflet-container .leaflet-ditchbook-basins-pane-pane svg, .leaflet-container .leaflet-ditchbook-waterbodies-pane-pane svg { max-width: none !important; max-height: none !important; } .map-page { /* styles.css's generic section top-padding pushed the map down/off the bottom of the viewport once it became the first thing on the page (.map-frame's own height calc already accounts for the header). Zeroed here, page-scoped only. */ padding-top: 0; padding-bottom: 2rem; } /* Map-first layout (round-1 fix, DoD M20): the map is the first thing in the page; breadcrumb/H1/intro/oldest-ten live in .map-below, AFTER the map-frame (see the layout guard in www/generate-directory.mjs). --map-header-h tracks the header's own real rendered height per breakpoint, so .map-frame's height calc always fills what's left. */ body.map-body { /* Measured in the browser: the header's nav wraps to two rows at EVERY width above the 860px breakpoint below (.container caps at ~1024px available, less than the nav's own ~1068px). 134px measured at 1280x720; rounded up for margin. */ --map-header-h: 140px; } @media (max-width: 860px) { body.map-body { --map-header-h: 60px; /* the slimmed single-row header this breakpoint switches to below */ } /* The global header (styles.css) stacks brand + nav into ~3 rows below 860px -- fine everywhere else, but it ate most of the first viewport on this page. Scoped to body.map-body (this page's own class) only; no other page's header is touched. */ body.map-body .site-header { padding: 0.4rem 0; } body.map-body .site-header .container { flex-direction: row; flex-wrap: nowrap; gap: 0.6rem; } body.map-body .brand img { width: 128px; } body.map-body .site-nav { flex-wrap: nowrap; gap: 0.6rem; } /* Keep the phone CTA -- this audience calls more than it clicks -- and drop the six text links from view. They stay in the DOM (crawlable, unchanged for SEO) and are one tap away in the footer at the bottom of this same page; hiding them is what turns 3 rows into 1. */ body.map-body .site-nav a:not(.phone) { display: none; } body.map-body .site-nav .phone { font-size: 0.85rem; } } .map-frame-outer { width: 100%; margin: 0; } .map-intro { max-width: var(--measure); color: var(--ink-mid); margin: 1rem 0 1.25rem; } .map-intro strong { color: var(--ink); } .map-frame { position: relative; width: 100%; /* 100dvh with a 100vh fallback (round-1 fix M20/M20-adjacent): browsers that don't understand dvh ignore the whole second declaration and keep the vh one, so this degrades safely. No max-height cap -- the map is meant to fill whatever viewport height is left after the header, full stop, on any screen size (specs/ditch-map-v3.md's "full-screen statewide map"). */ height: calc(100vh - var(--map-header-h, 80px)); height: calc(100dvh - var(--map-header-h, 80px)); min-height: 360px; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); overflow: hidden; background: var(--paper-dim); margin-bottom: 1.5rem; } /* round-3 fix item 6: the 360px floor above overflowed a genuinely short-HEIGHT viewport (landscape phone, ~660x375), pushing the attribution control off-screen. Height-only query (not combined with the width condition above), so a narrow-but-tall viewport (768x1024) keeps the normal 360px floor. */ @media (max-height: 500px) { .map-frame { min-height: 240px; } } #ditch-map { width: 100%; height: 100%; background: var(--paper-dim); } .map-noscript { max-width: var(--measure); background: var(--water-tint); border: 1px solid var(--water-line); border-radius: 6px; padding: 1rem 1.25rem; margin: 1.5rem 0; } .map-loading { position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%); z-index: 850; background: var(--paper); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.4em 1em; font-size: var(--step--1); color: var(--ink-mid); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } /* ---------- floating search (one of exactly two persistent controls) ---------- */ .map-overlay-search { position: absolute; top: 0.75rem; left: 0.75rem; right: 4.75rem; /* clears hero mode's topright "Open the full map" button at narrow widths */ max-width: 22rem; z-index: 900; margin: 0; } .map-search-input { display: block; width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-size: 1rem; line-height: 1.3; color: var(--ink); background: var(--paper); border: 2px solid var(--water-deep); border-radius: 8px; padding: 0.7em 0.85em; min-height: 44px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .map-search-input::placeholder { color: var(--ink-soft); opacity: 1; } .map-search-input:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; } .map-search-results { max-width: none; margin: 0.4rem 0 0; background: var(--paper); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); max-height: min(60vh, 26rem); overflow-y: auto; } .map-search-cta { padding: 0.9em 0.9em; font-size: var(--step--1); color: var(--ink-mid); line-height: 1.5; } /* These render as plain inline sentences (CTA copy, no-match message, address row) — override directory.css's .company-search-results a rule (display:flex; flex-direction:column; min-height:56px), meant for the full-row matched-company link, not a link/button sitting mid-sentence. */ .map-search-cta a, .map-search-results .search-empty a { display: inline; flex-direction: initial; min-height: 0; padding: 0.3em 0.15em; color: var(--water-deep); font-weight: 600; } .map-search-results li { padding: 0 0.1em; } .map-search-address-row { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 0.75em 0.9em 0.2em; font-family: var(--font-sans); font-size: var(--step-0); font-weight: 600; color: var(--water-deep); min-height: 44px; } .map-search-address-row:hover, .map-search-address-row:focus-visible { background: var(--water-tint); outline: none; } .map-search-address-note { margin: 0 0 0.75em; padding: 0 0.9em; font-size: 0.8rem; color: var(--ink-soft); } .map-layers-control { position: relative; } /* leaflet.css's `.leaflet-bottom .leaflet-control{margin-bottom:10px}` (2-class) beats a 1-class override. --map-layers-strip-extra is the legend strip's OWN live-measured height (0px empty/hidden, set by layers-panel.js's updateStrip()), added on top of the 6.5rem peek-row clearance so the button (Leaflet z-index 1000) can never paint over the sheet's peek (z-index 880) as the strip grows. Left UNCHANGED by the sheet retirement (specs/sheet-retirement.md move 7) despite the typical peek height shrinking (browser-measured, 375px: ~31px vs. ~54px with the old chevron) -- the worst realistic case (longest coverage string + satellite.js's two notes both showing) already measures ~168px at 375px, over budget before the chevron's removal; shrinking further would only tighten a pre-existing edge case. */ .leaflet-bottom .map-layers-control { margin-bottom: calc(6.5rem + var(--map-layers-strip-extra, 0px)); } /* v2 mobile sheet (browser verification): Leaflet's own bottomleft/ bottomright corner containers share z-index:1000 -- equal-z-index siblings paint in DOM order (bottomright emits after bottomleft), so the zoom +/- buttons painted OVER the open sheet regardless of .map-layers-panel's own z-index:1200 (only wins WITHIN this corner's stacking context, never against an equal sibling). Harmless bump -- zoom has no reason to render above this corner. */ .leaflet-bottom.leaflet-left { z-index: 1001; } /* v2 (specs/layers-panel-v2.md D1): 56px Google-style photo chip, detached from .btn/.map-open-full-btn (a pill shape, wrong job here). Pure-CSS gradient face + glyph at first paint (no image fetch before `load`); layers-panel.js's warm-load hook swaps the face to the real thumbnail later. Visible "Layers" label (D13) is the only non-aria- hidden content -- also the accessible name. */ .map-layers-btn { position: relative; width: 56px; height: 56px; padding: 0; border: 2px solid #fff; border-radius: 14px; overflow: hidden; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); background: none; display: block; } .map-layers-btn-face { position: absolute; inset: 0; background-image: linear-gradient(135deg, #5c7a4a 0%, #8a6a45 50%, #3f6e8c 100%); background-size: cover; background-position: center; } .map-layers-btn-glyph { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; } .map-layers-btn-glyph::before, .map-layers-btn-glyph::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1.5px solid #fff; border-radius: 1px; } .map-layers-btn-glyph::before { top: 0; left: 0; opacity: 0.7; } .map-layers-btn-glyph::after { top: 5px; left: 5px; background: rgba(255, 255, 255, 0.9); opacity: 0.95; } .map-layers-btn-label { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; color: var(--ink); font-size: 11px; font-weight: 600; line-height: 1.3; text-align: center; padding: 2px 0; } /* specs/sheet-retirement.md move 6: desktop-only enlargement, additive on the 56px mobile-default rule above (still pinned by test-map-controls-v2 DoD 9). No focus-visible override -- the sitewide rule (styles.css) applies untouched. */ @media (min-width: 769px) { .map-layers-btn { width: 76px; height: 76px; border-radius: 16px; transition: box-shadow 150ms ease, transform 150ms ease; } .map-layers-btn:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32); transform: translateY(-1px); } .map-layers-btn-label { font-size: 13px; padding: 3px 0; } .map-layers-btn-glyph { width: 19px; height: 19px; } .map-layers-btn-glyph::before, .map-layers-btn-glyph::after { width: 12px; height: 12px; } .map-layers-btn-glyph::after { top: 7px; left: 7px; } } /* ---------- coverage bar (D7) ---------- */ /* specs/sheet-retirement.md: the sheet's old collapsible legend/shape-key/ slider+Play moved into the Layers panel (layers-panel.js, incl. a new Timeline section) -- this is now a permanent bar: the coverage sentence + fetch-error Retry (#map-count), plus satellite.js's notes / the legend-chip strip as siblings. Docked panel wide, overlay narrow/short (max-width:768px / max-height:500px block below). */ .map-sheet { position: absolute; left: 0.75rem; bottom: 0.75rem; width: min(22rem, calc(100% - 1.5rem)); z-index: 880; background: var(--paper); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22); max-height: calc(100% - 1.5rem); display: flex; flex-direction: column; overflow: hidden; } /* specs/sheet-retirement.md: the chevron toggle + collapsible body are retired -- this plain, non-interactive

is the permanent bar now, nothing here is clickable. */ .map-sheet-peek { display: flex; align-items: center; gap: 0.6em; width: 100%; padding: 0.35em 0.5em 0.35em 0.9em; font-family: var(--font-sans); font-size: var(--step--1); color: var(--ink); } .map-sheet-count { /* v2 (specs/layers-panel-v2.md point 5): quieter, smaller peek-row typography, matching the rest of the redesigned control area -- content/wording unchanged, visual weight only. round-2 fix item 10: at narrow widths the coverage sentence (now longer -- "715 verified structures published (366 of 367 matched companies) — zoom out for the company view") must wrap onto multiple lines and stay fully legible rather than being squeezed by its flex sibling (the chevron) or clipped. */ font-size: 12.5px; font-weight: 500; color: var(--ink-soft); min-width: 0; flex: 1 1 auto; white-space: normal; } /* round-2 fix item 8: the inline Retry control setCoverageError() builds inside #map-count. round-3 fix item 7 (release blocker): now a REAL