/* Interactive Map app for map.html.
   Ported from website/interactive-map/style.css (approved look). Every rule is scoped to .map-app so it cannot
   restyle the site header or footer, and it re-states what site.css sets globally (headings, paragraph spacing,
   links, images) so site.css cannot restyle the map. Sizes are the original pixel values converted to rem
   (px / 16) and breakpoints to em, so the map looks the same at default settings and grows with the reader's
   text size. The preview's own logo header is dropped: the site header carries the branding. */

.map-app {
  --m-navy: #1d3040; --m-green: #2f5f3a; --m-teal: #4a7575; --m-paper: #f5f6f4;
  --m-ink: #2e3a33; --m-line: #dbe1db; --m-muted: #5e6c65;
  position: relative;
  display: grid; grid-template-columns: 19.375rem minmax(0, 1fr);
  /* --map-top is the header plus the page intro, measured by map.js when the page opens. */
  height: max(28rem, min(calc(100svh - var(--map-top, 11rem)), 60rem));
  border-top: .1875rem solid var(--sea, #83b1b1);
  background: var(--m-paper); color: var(--m-ink);
  font: 400 .875rem/1.5 "DM Sans", "Segoe UI", system-ui, sans-serif;
  --focus: var(--m-teal);
}
.map-app *, .map-app *::before, .map-app *::after { box-sizing: border-box; }
.map-app button, .map-app input, .map-app select { font: inherit; }
.map-app button, .map-app a, .map-app input, .map-app select, .map-app summary { -webkit-tap-highlight-color: transparent; }
.map-app button { cursor: pointer; touch-action: manipulation; }
.map-app :where(a) { touch-action: manipulation; color: var(--m-navy); }
.map-app :focus-visible { outline: .1875rem solid var(--m-teal); outline-offset: .1875rem; }
.map-app p { margin: 0; }
.map-app h2 { font-family: Lora, Georgia, serif; font-weight: 400; letter-spacing: 0; hyphens: manual; }
.map-app svg { display: inline; }
.map-app .mapboxgl-canvas-container, .map-app canvas { max-width: none; }
/* :where keeps these below Mapbox's own control styles (zoom buttons, attribution). */
.map-app :where(button) { border: 1px solid var(--m-line); background: #fff; color: var(--m-navy); border-radius: .3125rem; padding: .5625rem .75rem; }
.map-app :where(button):hover { background: #edf1ed; }
.map-app [hidden] { display: none !important; }

/* ---------- Layer and location panel ---------- */
.map-app #panel { background: var(--m-paper); overflow: auto; padding: 1.5625rem 1.5rem 1.125rem; border-right: 1px solid var(--m-line); z-index: 3; }
.map-app .panel-heading h2 { font-size: 1.375rem; line-height: 1.15; color: var(--m-navy); margin: 0 0 .5rem; }
.map-app .panel-heading p { font-size: .75rem; color: var(--m-muted); margin: 0 0 1.25rem; }
.map-app .search-label { font-size: .75rem; font-weight: 600; display: block; margin-bottom: .375rem; }
.map-app #search { width: 100%; min-height: 2.625rem; border: 1px solid #bdc9c0; border-radius: .3125rem; padding: .5rem .6875rem; background: #fff; min-width: 0; color: var(--m-ink); }
.map-app .filter-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .625rem; font-size: .75rem; }
.map-app .filter-line select { border: 0; background: transparent; color: var(--m-navy); padding: .375rem 0; max-width: 8.75rem; }
.map-app fieldset { border: 0; margin: 1.25rem 0 0; padding: 0; min-width: 0; }
.map-app legend { font-weight: 600; color: var(--m-navy); padding: 0; margin-bottom: .625rem; font-size: .8125rem; }
.map-app .toggle { display: flex; align-items: center; gap: .625rem; cursor: pointer; min-height: 2.375rem; font-size: .8125rem; }
.map-app .toggle input { appearance: none; -webkit-appearance: none; width: 1.8125rem; height: 1.0625rem; border-radius: .9375rem; background: #c4cdc7; position: relative; flex: none; margin: 0 0 0 auto; border: 1px solid #a7b4ab; }
.map-app .toggle input::before { content: ''; width: .6875rem; height: .6875rem; position: absolute; top: .125rem; left: .125rem; background: #fff; border-radius: 50%; transition: transform .15s; }
.map-app .toggle input:checked { background: var(--m-navy); border-color: var(--m-navy); }
.map-app .toggle input:checked::before { transform: translateX(.75rem); }
.map-app .symbol { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; flex: none; color: #fff; border-radius: 50%; }
.map-app .symbol svg { width: .9375rem; height: .9375rem; }
/* Recreation types: small switches indented under the Recreation switch. */
.map-app .subtypes { margin: .125rem 0 .5rem 2.125rem; padding-left: .75rem; border-left: 2px solid var(--m-line); }
.map-app .subtype { display: flex; align-items: center; gap: .5rem; min-height: 2rem; font-size: .8125rem; cursor: pointer; }
.map-app .subtype input { accent-color: var(--m-green); margin: 0; flex: none; width: 1rem; height: 1rem; }
.map-app .subtype small { margin-left: auto; color: var(--m-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.map-app .subtype-featured { align-items: flex-start; padding-top: .25rem; }
.map-app .subtype-featured input { margin-top: .1rem; }
.map-app .subtype-featured small { display: block; margin: .1rem 0 0; color: var(--m-muted); font-size: .75rem; line-height: 1.35; }
.map-app .subtype-note { font-size: .75rem; color: var(--m-muted); margin: .25rem 0 0; line-height: 1.4; }
.map-app .check { font-size: .75rem; display: block; margin-top: .5625rem; padding: .5625rem 0 0; border-top: 1px solid var(--m-line); }
.map-app .check + .check { border-top: 0; padding-top: 0; }
.map-app .check input { accent-color: var(--m-navy); vertical-align: middle; margin: 0 .375rem 0 0; }
.map-app .check small { display: block; margin-left: 1.5rem; color: var(--m-muted); font-size: .8125rem; }
.map-app .line-key { width: 1.5rem; height: 0; flex: none; border-top: 2px solid #6b7a72; }
.map-app .line-key.rail { border-top: 3px dashed #606775; }
.map-app .line-key.interstates { border-top: 3px solid #76736d; }
.map-app .line-key.highways { border-top: 2px solid #879684; }
.line-key.river-miles { height: .875rem; border: 1.5px solid var(--m-navy); border-radius: .25rem; background: #fff; display: grid; place-items: center; }
.line-key.river-miles::after { content: "MM"; font: 600 .5rem/1 "DM Sans", system-ui, sans-serif; color: var(--m-navy); letter-spacing: .02em; }
.map-app .waterway-key { display: flex; gap: .625rem; align-items: center; font-size: .75rem; margin: .8125rem 0 1.375rem; }
.map-app .waterway-key span { width: 1.5rem; height: .4375rem; flex: none; background: var(--m-sea, #83b1b1); border-radius: .25rem; box-shadow: 0 0 0 .125rem var(--m-navy), 0 0 .375rem .1875rem rgba(131, 177, 177, .45); }
.map-app .waterway-key small { margin-left: auto; color: var(--m-muted); font-size: .8125rem; }
.map-app #results { border-top: 1px solid var(--m-line); padding-top: .9375rem; }
.map-app summary { display: flex; justify-content: space-between; cursor: pointer; font-size: .75rem; font-weight: 600; gap: .625rem; }
.map-app summary span:last-child { color: var(--m-teal); }
.map-app #list { list-style: none; padding: 0; margin: .625rem 0; }
.map-app #list button { width: 100%; border: 0; border-bottom: 1px solid var(--m-line); border-radius: 0; text-align: left; padding: .625rem .1875rem; background: none; font-size: .75rem; }
.map-app #list small { display: block; color: var(--m-muted); font-size: .8125rem; margin-top: .1875rem; }
.map-app #empty { font-size: .75rem; }
.map-app .source-note { font-size: .8125rem; line-height: 1.6; color: var(--m-muted); margin-top: 1.4375rem; }

/* ---------- Map area ---------- */
.map-app .map-area { position: relative; min-width: 0; overflow: hidden; }
.map-app #map { position: absolute; inset: 0; }
.map-app .map-tools { position: absolute; z-index: 2; display: flex; flex-wrap: wrap; gap: .4375rem; left: 1.5625rem; top: 1.25rem; right: 4rem; pointer-events: none; }
.map-app .map-tools button { font-size: .75rem; box-shadow: 0 2px 10px #1d30400c; border-color: #fff; pointer-events: auto; }
.map-app #showPanel { display: none; }
.map-app #detail { position: absolute; right: 1.375rem; top: 1.25rem; width: 18.75rem; max-height: calc(100% - 5rem); overflow: auto; background: #fff; border-radius: .375rem; padding: 1.6875rem 1.5rem; box-shadow: 0 8px 40px #1d304022; z-index: 4; }
.map-app #closeDetail { position: absolute; right: .5625rem; top: .4375rem; border: 0; font-size: 1.375rem; line-height: 1; background: transparent; padding: .25rem .4375rem; }
.map-app #detail h2 { font-size: 1.5625rem; line-height: 1.25; color: var(--m-navy); margin: 1.125rem 0 .75rem; overflow-wrap: break-word; }
.map-app #detail p { font-size: .8125rem; }
.map-app #detail .kind { color: var(--m-teal); font-size: .75rem; margin: 0; }
.map-app #detail .source-note { font-size: .8125rem; margin-top: 1rem; }
.map-app #detail dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); font-size: .75rem; gap: .5rem; margin: 1.375rem 0; }
.map-app #detail dd { margin: 0; text-align: right; }
.map-app #detail dt { color: var(--m-muted); }
.map-app #detail a { display: block; margin-top: .625rem; padding: .625rem; border: 1px solid var(--m-line); border-radius: .25rem; text-decoration: none; text-align: center; font-size: .75rem; }
.map-app #detail a:first-of-type { background: var(--m-navy); color: #fff; }
.map-app .mapboxgl-ctrl-top-right { top: 4.25rem; right: .75rem; }
.map-app #message { position: absolute; bottom: 2.5rem; right: 1.25rem; background: #fff; padding: .5rem .8125rem; border-radius: .25rem; font-size: .75rem; max-width: 16.875rem; z-index: 5; }
.map-app #message:empty { display: none; }
.map-app #error { position: absolute; bottom: 5.9375rem; left: 1.5625rem; max-width: 23.75rem; background: #fff; border-left: 3px solid var(--m-navy); padding: .75rem; font-size: .75rem; z-index: 5; }
.map-app .mobile-only { display: none; }

@media (min-width: 93.75em) {
  .map-app { grid-template-columns: 20.9375rem minmax(0, 1fr); }
  .map-app #panel { padding: 1.875rem; }
}
@media (max-width: 65.625em) {
  .map-app { grid-template-columns: 17.8125rem minmax(0, 1fr); }
  .map-app #panel { padding: 1.25rem; }
  .map-app #detail { width: 16.875rem; }
}

/* Phones: the panel becomes a drawer over the map and details become a bottom card. */
@media (max-width: 45em) {
  .map-app { display: block; height: max(26rem, min(calc(100svh - var(--map-top, 10rem)), 52rem)); }
  .map-app #panel { display: none; position: absolute; left: 0; top: 0; bottom: 0; width: min(21.25rem, 92%); box-shadow: 12px 0 40px #1d304022; padding: 1.4375rem; z-index: 6; }
  .map-app #panel.open { display: block; }
  .map-app .panel-heading { display: flex; gap: .5rem; }
  .map-app .mobile-only { display: block; align-self: flex-start; border: 0; background: none; font-size: 1.4375rem; line-height: 1; padding: .25rem; margin-left: auto; }
  .map-app .map-area { height: 100%; }
  .map-app #showPanel { display: block; }
  .map-app .map-tools { left: .75rem; top: .75rem; gap: .3125rem; right: 3.25rem; }
  .map-app .map-tools button { padding: .5625rem .625rem; font-size: .8125rem; }
  .map-app #detail { top: auto; left: .625rem; right: .625rem; bottom: 2.25rem; width: auto; max-height: 50%; padding: 1.375rem; }
  .map-app #detail h2 { margin-top: .625rem; }
  .map-app #message { bottom: 8.75rem; right: .75rem; max-width: 14.375rem; }
  .map-app .mapboxgl-ctrl-top-right { top: 3.875rem; right: .25rem; }
  .map-app #error { bottom: 10rem; left: .75rem; right: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .map-app * { transition: none !important; }
}

/* ---------- Page intro (site chrome, not part of the kept map) ---------- */
/* Kept short so more of the map shows on first load (Betsy, 2026-09-30): h1 left, lede in its own column right
   on wide screens, stacked on narrow ones. */
.page-hero.plain.map-intro .wrap { padding-block: clamp(1rem, .75rem + 1vw, 1.75rem); }
.page-hero.plain.map-intro h1 { font-size: min(clamp(2rem, 1.6rem + 1.6vw, 3rem), 12.5vw); max-width: none; }
.page-hero.plain.map-intro .hero-lede { margin-top: .5rem; max-width: 36rem; color: var(--on-dark, rgba(245, 246, 244, .86)); }
@media (min-width: 48em) {
  .page-hero.plain.map-intro .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem clamp(2rem, 1rem + 3vw, 4.5rem); }
  .page-hero.plain.map-intro .hero-lede { margin-top: 0; justify-self: end; }
}