/* map.html — a standalone, full-bleed instance of the .map-pane/.map-wrap/
#map shell from style.css (no sidebar), reachable directly or via
index.html's mobile home feed. */
/* style.css's app shell pins to one viewport with no page scroll.
That was fine while this page was only the map, but the .map-about
article below it — what the map shows, how to read it, where else to
report — is the only thing on this page a search visitor (or anyone
arriving without context) can actually read, and a fixed viewport hid
all of it. Let the page scroll; the map still owns the first screen. */
body:has(.map-page-main) {
height: auto;
min-height: 100vh;
min-height: 100dvh;
}
.map-page-main {
/* now holds the map *and* the .map-about article, so it is a
plain block that grows with its content — the fixed height belongs
to .map-pane below. */
flex: 0 0 auto;
display: block;
padding: 16px;
}
.map-page-main .map-pane {
/* Explicit height, not flex:1 — with no longer a fixed-height
flex container there is nothing left for the map to stretch against.
Short of a full viewport on purpose, so the article below peeks in
and reads as scrollable rather than as the end of the page. */
width: 100%;
height: 80vh;
height: 80dvh;
min-height: 400px;
}
/* Desktop: no toggle needed, filters just sit inline in the toolbar like
before this button/panel split existed. Mobile overrides both below
(900px query) — these have to come *before* that query in source order,
since both sides are single-class selectors of equal specificity and
the later one wins a tie regardless of which media query wraps it. */
.map-filters-toggle {
display: none;
}
.map-filters-panel {
display: flex;
gap: 8px;
}
/* This page used to pin itself to one fixed viewport at every width —
it had nothing to scroll to. It does now (.map-about), so it follows
style.css's shared mobile scrolling behaviour again; only the map's
own height is set here. */
@media (max-width: 900px) {
.map-page-main .map-pane {
/* Less than desktop's 80dvh: the toolbar wraps to two rows at this
width, and an 80dvh map left too little of the article showing to
read as scrollable. */
height: 72vh;
height: 72dvh;
min-height: 340px;
}
.map-page-main .map-wrap {
flex: 1 1 auto;
}
.map-page-main #map {
flex: 1 1 auto;
height: auto;
min-height: 0;
}
/* Trim the toolbar to what isn't already reachable another way: the
bottom nav already has "Sākums" and "Ziņot" (which auto-starts
picking via ?report=1), so the in-toolbar back-link and report
button are pure duplication here — each one is real screen space
the map isn't getting. Kept on desktop, where there's no bottom nav
covering the same ground. */
.map-toolbar .back-link,
.map-toolbar #report-btn {
display: none;
}
/* Leaflet's own +/- buttons are redundant on a touchscreen (pinch
already zooms) and cost more vertical toolbar space than they're
worth here. */
.leaflet-control-zoom {
display: none;
}
/* Static "click the map" hint duplicates the orange picking-banner's
own (more specific) instructions once picking starts, and — with
the in-toolbar report button gone above — there's no persistent way
left on this page to enter picking mode without it already being
active, so the hint no longer describes anything actionable when
it's not. */
.map-hint {
display: none;
}
.map-filters-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px solid var(--border);
border-radius: var(--radius-btn);
background: var(--surface-1);
color: var(--text-primary);
padding: 7px 12px;
font-size: 0.85rem;
font-family: inherit;
cursor: pointer;
}
.map-filters-panel {
display: none;
flex-direction: column;
gap: 6px;
width: 100%;
}
.map-filters-panel.open {
display: flex;
}
}
.map-toolbar .back-link {
color: var(--text-secondary);
font-size: 0.85rem;
text-decoration: none;
margin-right: 4px;
/* guide.css (pulled in for .map-about below) gives every .back-link a
20px bottom margin — right for the content pages, where it sits above
a heading, but in this flex/align-items:center toolbar that margin is
counted in the item's box and shunts the link off-centre. */
margin-bottom: 0;
}
.map-toolbar .back-link:hover {
text-decoration: underline;
}
/* Mirrors .map-legend/.map-legend-toggle/.map-legend-panel, positioned on
the opposite corner so the two panels never overlap. */
.map-recency {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 501;
}
.map-recency-toggle {
border: none;
border-radius: 999px;
padding: 7px 12px;
background: rgba(11, 11, 11, 0.6);
color: #fff;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
}
.map-recency-toggle:hover {
background: rgba(11, 11, 11, 0.75);
}
.map-recency-panel {
position: absolute;
right: 0;
bottom: calc(100% + 6px);
width: 190px;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-btn);
padding: 10px 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
/* Leaflet's attribution control (bottom-right, OSM-license-required, can't
be hidden or covered) sits at bottom:0 with no offset of its own — at
phone width its text is wide enough to reach under both .map-legend
(bottom-left) and .map-recency (bottom-right), which both defaulted to
the same bottom:10px band. Lift them clear of it instead of touching
the attribution itself. Placed after both buttons' base rules (this
file and style.css load in that order via map.html's tags, and
.map-recency's own base rule is above, in this same file) so this wins
the cascade tie on mobile without needing !important. */
@media (max-width: 900px) {
.map-legend,
.map-recency {
bottom: 36px;
}
}
/* Prose below the map. Reuses guide.css's .guide-card/.guide-note/
.guide-report-list (all unscoped) so it matches guide.html, tracks.html
and the rest of the written pages instead of inventing a second style
for the same kind of content. */
.map-about {
max-width: 1000px;
margin: 0 auto;
padding: 20px 4px 32px;
}
.map-about > h2 {
margin: 0 0 8px;
font-size: 1.35rem;
}
.map-about .guide-card h3 {
margin: 0 0 8px;
font-size: 1.02rem;
}
.map-about .guide-card p:not(.guide-note) {
margin: 0 0 12px;
font-size: 0.9rem;
line-height: 1.6;
}
.map-about .guide-card p:not(.guide-note):last-child {
margin-bottom: 0;
}