/* ==========================================================================
   Wright County Time Machine: map page styles.
   Moved over from the original single-file page. The old header block was removed
   (the shared nav bar in site.css replaces it); everything else is unchanged.
   ========================================================================== */
.app { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.stage { position: relative; min-height: 0; }
#map { position: absolute; inset: 0; background: #2b3340; }
.leaflet-container { font-family: var(--font-body); }
.leaflet-control-attribution { font-size: 10px; }
.leaflet-bottom.leaflet-right .leaflet-control-zoom { margin-bottom: 26px; }

.year-stamp { position: absolute; top: 12px; z-index: 700; pointer-events: none; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 6vw, 46px); line-height: 1; letter-spacing: 0.04em; color: var(--stamp-ink); background: var(--stamp); padding: 6px 12px 4px; border-radius: 4px; }
.year-stamp small { display: block; font-family: var(--font-data); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; margin-top: 3px; }
#stamp-left { left: 12px; }
#stamp-right { right: 12px; text-align: right; }

.divider { position: absolute; top: 0; bottom: 0; width: 0; z-index: 800; pointer-events: none; }
.divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--flag); box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
.handle { position: absolute; top: 26%; left: 0; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; background: var(--flag); color: var(--flag-ink); display: grid; place-items: center; cursor: ew-resize; pointer-events: auto; box-shadow: var(--shadow); touch-action: none; padding: 0; }
.handle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hint { position: absolute; top: calc(26% + 34px); left: 0; transform: translateX(-50%); white-space: nowrap; font: 600 13px var(--font-body); color: #fff; background: var(--stamp); padding: 5px 10px; border-radius: 999px; pointer-events: none; transition: opacity 0.4s; }
.hint.gone { opacity: 0; }

.search { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 900; width: min(420px, calc(100% - 32px)); display: flex; background: var(--panel); border-radius: 8px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 15px var(--font-body); padding: 11px 12px; }
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--flag); }
.search button { border: 0; background: transparent; color: var(--ink-soft); padding: 0 12px; cursor: pointer; }
.coverage-note { position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%); z-index: 900; width: max-content; max-width: min(420px, calc(100% - 32px)); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; text-align: center; font: 500 14px var(--font-body); color: #fff; background: var(--stamp); padding: 9px 12px; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
.coverage-note[hidden] { display: none; }
.coverage-note button { font: 700 13px var(--font-body); color: var(--flag-ink); background: var(--flag); border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.coverage-note button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.town-label { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; white-space: nowrap; text-shadow: 0 0 3px rgba(5,10,20,0.95), 0 0 6px rgba(5,10,20,0.85), 0 1px 2px rgba(5,10,20,0.9); pointer-events: none; transform: translate(-50%, -50%); display: inline-block; }
.town-label.big { font-size: 18px; }
.prop-pin { width: 34px; height: 42px; margin: -42px 0 0 -17px; cursor: grab; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45)); }
.prop-pin svg { display: block; width: 34px; height: 42px; }
.leaflet-dragging .prop-pin { cursor: grabbing; }
.spot-card { position: absolute; left: 12px; bottom: 74px; z-index: 950; width: min(390px, calc(100% - 24px)); max-height: calc(100% - 74px - 96px); overflow-y: auto; overscroll-behavior: contain; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.spot-card h3 { margin: 0; font: 700 17px var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; }
.spot-card p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.spot-card .years { display: flex; flex-wrap: wrap; gap: 6px; }
.spot-card .yr-btn { font: 700 15px var(--font-display); letter-spacing: 0.04em; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.spot-card .yr-btn:hover, .spot-card .yr-btn:focus-visible { border-color: var(--flag); outline: none; }
.spot-card .close-x { position: absolute; top: 6px; right: 8px; border: 0; background: transparent; color: var(--ink-soft); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; }
.viewer-back { position: fixed; inset: 0; z-index: 2100; background: rgba(5, 8, 14, 0.88); display: grid; grid-template-rows: auto 1fr auto; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; color: #fff; }
.viewer-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.viewer-top h3 { margin: 0; font: 700 22px var(--font-display); letter-spacing: 0.03em; }
.viewer-top .spacer { flex: 1; }
.viewer-top a, .viewer-top button { font: 600 14px var(--font-body); color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; padding: 7px 12px; text-decoration: none; cursor: pointer; }
.viewer-years { display: flex; gap: 6px; flex-wrap: wrap; }
.viewer-years button.on { background: var(--flag); color: var(--flag-ink); border-color: var(--flag); }
.viewer-stage { position: relative; overflow: auto; min-height: 0; border-radius: 6px; background: #000; display: grid; place-items: center; }
.viewer-stage img { max-width: 100%; max-height: 100%; cursor: zoom-in; display: block; }
.viewer-stage.zoomed { place-items: start; }
.viewer-stage.zoomed img { max-width: none; max-height: none; width: 260%; cursor: zoom-out; }
.viewer-msg { position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px var(--font-body); color: #fff; pointer-events: none; }
.viewer-note { font-size: 13px; color: #c9d3e2; line-height: 1.45; max-width: 900px; }
@media (max-width: 560px) { .spot-card { left: 8px; width: calc(100% - 16px); bottom: 64px; max-height: 56%; } .viewer-top h3 { font-size: 19px; } }
.drag-pin { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #f5c518; border: 3px solid #fff; box-shadow: 0 0 0 1.5px rgba(5,10,20,0.55), 0 3px 8px rgba(0,0,0,0.45); cursor: grab; box-sizing: border-box; }
.leaflet-dragging .drag-pin, .drag-pin:active { cursor: grabbing; }
.found-label { font: 600 13px var(--font-body); color: #fff; background: var(--stamp); padding: 4px 8px; border-radius: 4px; white-space: nowrap; transform: translate(-50%, -64px); display: inline-block; pointer-events: none; }
.search-msg { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); font-size: 13px; color: #fff; background: var(--stamp); padding: 6px 10px; border-radius: 6px; }

.sheet { background: var(--panel); border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; z-index: 1000; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.yearpick { display: flex; align-items: center; gap: 8px; }
.yearpick label { font: 600 12px var(--font-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.yearpick select { font: 600 17px var(--font-display); letter-spacing: 0.03em; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 6px 28px 6px 10px; }
.swap { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 6px; width: 36px; height: 36px; cursor: pointer; display: grid; place-items: center; }
.spacer { flex: 1; }
.btn { font: 600 14px var(--font-body); border-radius: 6px; padding: 9px 14px; cursor: pointer; border: 1px solid var(--line); background: var(--paper); color: var(--ink); white-space: nowrap; }
.btn-flag { background: var(--flag); border-color: var(--flag); color: var(--flag-ink); }
.btn:focus-visible, .swap:focus-visible, .chip:focus-visible, select:focus-visible { outline: 2px solid var(--flag); outline-offset: 2px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; font: 600 14px var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.chip:hover { border-color: var(--flag); }

.modal-back { position: fixed; inset: 0; background: rgba(8, 12, 20, 0.55); z-index: 2000; display: grid; place-items: center; padding: 16px; }
.modal { width: min(440px, 100%); max-height: 100%; overflow-y: auto; background: var(--panel); color: var(--ink); border-radius: 10px; padding: 20px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.modal h2 { margin: 0; font: 700 26px var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; text-wrap: balance; }
.modal p { margin: 0; line-height: 1.5; color: var(--ink-soft); }
.field { display: grid; gap: 4px; }
.field label { font-size: 13px; font-weight: 600; }
.field input, .field textarea { font: 15px var(--font-body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; width: 100%; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--flag); outline-offset: 0; border-color: transparent; }
.field .req, .field .opt { font-weight: 400; color: var(--ink-soft); font-size: 12px; }
.err { font-size: 13px; color: #c2410c; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.fine { font-size: 12px; color: var(--ink-soft); }

.splash { position: fixed; inset: 0; z-index: 3000; background: var(--navy); color: #fff; display: grid; place-items: center; text-align: center; padding: 24px; transition: opacity 0.5s; }
.splash.out { opacity: 0; pointer-events: none; }
.splash .splash-title { margin: 6px 0 0; font: 700 clamp(34px, 8vw, 56px) var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; line-height: 0.95; text-wrap: balance; }
.splash-inner { display: grid; justify-items: center; gap: 6px; }
.splash img { height: clamp(120px, 22vh, 180px); width: auto; margin: 10px 0 6px; }
.splash p { margin: 0; color: #c9d3e2; font-size: 16px; }
.splash .splash-by { font: 600 clamp(22px, 4vw, 28px) var(--font-display); color: #fff; letter-spacing: 0.02em; }
.splash .frame { font: 500 11px var(--font-data); letter-spacing: 0.14em; color: var(--flag); text-transform: uppercase; }

.toast { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 9px 14px; border-radius: 6px; font-size: 14px; z-index: 2500; }

@media (max-width: 560px) {
  .sheet .btn-share { display: none; }
  .year-stamp small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .splash, .hint { transition: none; } }

/* Click card sections: lakeshore line, soil, sunset (spot-card.js fills these in) */
.spot-card .spot-lake { margin: 0; padding-right: 22px; font: 600 13px var(--font-body); color: var(--navy); }
:root[data-theme="dark"] .spot-card .spot-lake { color: var(--flag); }
.spot-card .spot-sec { display: grid; gap: 6px; }
.spot-card .spot-sec + .spot-sec, .spot-card .spot-loading + .spot-sec { border-top: 1px solid var(--line); padding-top: 10px; }
.spot-card .spot-loading, .spot-card .spot-empty { margin: 0; font-size: 13px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 10px; }
.spot-card h4 { margin: 0; font: 700 15px var(--font-body); line-height: 1.3; }
.spot-card dl { margin: 0; display: grid; gap: 2px; }
.spot-card dt { margin-top: 8px; font: 600 12px var(--font-data); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.spot-card dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.spot-card .soil-rate { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-soft); }
.spot-card .soil-summary, .spot-card .sun-lead { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.spot-card .sun-lead { font-weight: 600; }
.spot-card .soil-note { font-size: 12.5px; color: var(--ink-soft); }
.spot-card .soil-disclaimer { margin: 4px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12.5px; font-style: italic; color: var(--ink-soft); }

/* "What this is" text under the map: real words on the page for people (and search engines) who land here */
.about-tool { background: var(--paper); color: var(--ink); padding: 44px 16px 52px; }
.about-tool-inner { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.about-tool h2 { margin: 0; font: 700 clamp(26px, 4vw, 34px) var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.about-tool h3 { margin: 14px 0 0; font: 700 20px var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; }
.about-tool p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.about-tool a { color: var(--ink); font-weight: 600; }

/* "Property lines" check box (parcels.js), top right under the later year label */
.layer-box { position: absolute; right: 12px; top: 90px; z-index: 900; max-width: min(220px, calc(100% - 24px)); padding: 8px 11px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.layer-check { display: flex; align-items: center; gap: 8px; font: 600 14px var(--font-body); cursor: pointer; user-select: none; }
.layer-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--flag); cursor: pointer; }
.layer-check input:focus-visible { outline: 2px solid var(--flag); outline-offset: 2px; }
.layer-hint { margin: 5px 0 0; font-size: 12px; line-height: 1.35; color: var(--ink-soft); }
@media (max-width: 560px) { .layer-box { top: 72px; right: 8px; padding: 7px 10px; } }

/* The lines get a thin dark edge so white stays readable on both the black-and-white and the color photos */
.leaflet-parcel-pane canvas { filter: drop-shadow(0 0 1.2px rgba(0, 0, 0, 0.9)); }

/* Property section of the click card */
.spot-card .prop-place { margin: 0; font-size: 13.5px; color: var(--ink); }
.spot-card .prop-links { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.spot-card .prop-links a { color: var(--ink); font-weight: 600; }

/* Phones: the photo credit wraps to two lines, so lift the search bar (and everything stacked above it) clear of it */
@media (max-width: 560px) {
  .leaflet-control-attribution { font-size: 9px; line-height: 1.25; max-width: calc(100vw - 16px); }
  .search { bottom: 40px; }
  .spot-card { bottom: 98px; }
  .coverage-note { bottom: 98px; }
  .leaflet-bottom.leaflet-right .leaflet-control-zoom { margin-bottom: 76px; }
}

/* Desktop: make the Property lines box easy to spot (phones keep the compact version) */
@media (min-width: 561px) {
  .layer-box { top: 92px; padding: 10px 14px 9px; background: var(--flag); color: var(--flag-ink); border-color: rgba(0, 0, 0, 0.25); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
  .layer-check { gap: 10px; font-size: 16px; font-weight: 700; }
  .layer-check input { width: 22px; height: 22px; accent-color: var(--flag-ink); }
  .layer-hint { margin-top: 6px; font-size: 12.5px; color: rgba(27, 43, 69, 0.85); }
}

/* Phones.
   1) iPhones zoom the whole page in when you tap a text box whose text is under 16px, and don't zoom back out.
      That made the page (and the card) look "a little wide" after using the search box. 16px stops the zoom.
   2) The click card gets a little more breathing room at both edges, and can never run past the screen. */
@media (max-width: 560px) {
  .search input, .field input, .field textarea, .field select, .yearpick select { font-size: 16px; }
  .spot-card { left: 12px; right: 12px; width: auto; max-width: calc(100vw - 24px); overflow-x: hidden; overflow-wrap: anywhere; }
  .spot-card dd, .spot-card p { overflow-wrap: anywhere; }
}

/* Belt and braces: keep every grid column the width of the screen so nothing can stretch the page sideways */
.screen { grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.screen > *, .app > *, .sheet > * { min-width: 0; }
.app, .sheet { grid-template-columns: minmax(0, 1fr); }
html, body { overflow-x: hidden; }