/* ========================================================================== ZIP Mapper Tool - Tool-Specific Styles ========================================================================== */ /* -------------------------------------------------------------------------- Tool Container Layout !important on display/height/overflow: global.css's shared card-grid ".tool-container { display: grid; ... }" (no max-height, no overflow control) is bundled by Astro into a stylesheet that loads AFTER this file in , so on equal specificity it wins per-property - grid beats this file's flex, and with no definite height for the sidebar to stretch into, .tool-sidebar grew to its full content height (1896px measured with 50 plotted ZIPs) and spilled past this box into the SEO content below, since overflow was never forced to hidden either. Explicit height (not just max-height) plus !important closes all three gaps regardless of Astro's bundle order. -------------------------------------------------------------------------- */ .tool-container { display: flex !important; height: 700px !important; max-height: 700px !important; overflow: hidden !important; background-color: var(--bg); } .tool-sidebar { width: 380px; background-color: var(--card); border-right: 1px solid var(--border); overflow-y: auto; flex-shrink: 0; box-shadow: var(--shadow); } .sidebar-content { padding: 20px; } .sidebar-content label { display: block; font-size: 13px; margin-bottom: 8px; margin-top: 12px; color: var(--text-muted); font-weight: 600; } .tool-section { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .tool-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .tool-section h3 { font-size: 15px; margin-bottom: 16px; color: var(--text); font-weight: 700; display: flex; align-items: center; gap: 8px; } .badge { display: inline-flex; align-items: center; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: auto; } /* -------------------------------------------------------------------------- Info Box -------------------------------------------------------------------------- */ .tool-info { background-color: var(--glass); border-radius: var(--radius-lg); padding: 14px; margin: 12px 0; border: 1px solid var(--border); } .tool-item { font-size: 13px; color: var(--text); padding: 6px 0; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .button-group { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .btn-full { width: 100%; justify-content: center; } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: var(--primary); color: #fff; } /* -------------------------------------------------------------------------- Results / Status Box -------------------------------------------------------------------------- */ .results-box { background-color: var(--glass); border-radius: var(--radius-lg); padding: 14px; border: 1px solid var(--border); font-size: 13px; line-height: 1.6; } .results-box strong { color: var(--primary); } /* -------------------------------------------------------------------------- Attention banner - a plain sentence of counts reads as success even when rows failed; this has to be impossible to miss, in a colour distinct from the amber already used for "plotted but approximate" so the two meanings never blur together. -------------------------------------------------------------------------- */ .attention-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: rgba(239, 68, 68, 0.1); border: 1px solid var(--danger); color: var(--danger); border-radius: var(--radius-lg); padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 12px; } .attention-banner-text { flex: 1; min-width: 180px; } .attention-banner-btn { background: var(--danger); color: #fff; border: none; border-radius: var(--radius); padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } .attention-banner-btn:hover { opacity: 0.9; } /* Map-side echo of the same warning, for anyone looking only at the map and not the sidebar list - a full-looking map of dots is the same silent-drop problem in a different place. */ .zm-map-warning { background: var(--danger); color: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 8px 12px; font-size: 12px; font-weight: 600; max-width: 240px; } /* This warning is hidden (display: none) until a row actually fails to plot, so it usually takes zero layout space - but when it IS visible it lives at the same topright corner the fullscreen button defaults to. Moved defensively rather than left to collide only in the data-quality-warning case, which is the one case a user most needs both controls to actually work. */ .map-fullscreen-btn { right: auto; left: 50px; } /* -------------------------------------------------------------------------- Results list - one row per pasted line, always, so the total can never be smaller than the input without saying why. -------------------------------------------------------------------------- */ .results-list { list-style: none; padding: 0; margin: 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass); } .result-item { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; position: relative; } .result-item:last-child { border-bottom: none; } .result-item.active { background: var(--hover-bg); border-left: 3px solid var(--primary); padding-left: 9px; } .result-item.status-ambiguous { background: rgba(217, 119, 6, 0.06); } .result-item.status-failed { opacity: 0.75; } .result-input { display: block; color: var(--text); font-weight: 500; cursor: pointer; padding-right: 22px; } .result-precision { display: inline-block; margin-top: 2px; font-size: 12px; } /* A ZIP area/place-name centre point is always approximate - never "exact" the way a landmark point can be. */ .precision-landmark { color: #16a34a; font-weight: 600; } .precision-zip { color: #d97706; font-weight: 600; } .precision-landmarkArea { color: #d97706; font-weight: 600; } .precision-settlement { color: #d97706; font-weight: 600; } .precision-region { color: #d97706; font-weight: 600; } .result-note { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; } /* What the line actually resolved to, when that says more than the raw pasted text already does (a state-qualified place, a ZIP+4 collapsed to its five-digit centre). */ .result-matched { font-size: 12px; color: var(--text); margin-top: 2px; } .result-failed { color: var(--text-muted); font-size: 12px; } .result-remove { position: absolute; top: 6px; right: 6px; background: transparent; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: var(--radius); transition: background 0.12s ease, color 0.12s ease; } .result-remove:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; } .ambiguous-select { width: 100%; margin-top: 6px; padding: 6px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; } .batch-progress { font-size: 13px; color: var(--text-muted); margin-top: 10px; } .summary-box { font-size: 13px; color: var(--text); line-height: 1.6; } /* -------------------------------------------------------------------------- Map markers - exact (pin) vs approximate (dot), visible on the map itself, not just in the results list. -------------------------------------------------------------------------- */ .zm-marker-pin { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)); } .zm-marker-centre-dot { display: block; width: 100%; height: 100%; border-radius: 50%; background: #d97706; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .zm-marker-highlighted .zm-marker-centre-dot { background: #f59e0b; width: 130%; height: 130%; margin: -15%; } .popup-matched { font-size: 12px; margin: 2px 0; } .popup-precision { font-weight: 600; margin: 4px 0; } .popup-caveat { font-size: 12px; color: var(--text-muted); margin: 0; } /* Map legend: a small, permanent key, not a tooltip that has to be discovered - matches the pin/dot it explains in shape and colour. */ .zm-map-legend { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 8px 10px; font-size: 12px; line-height: 1.4; max-width: 230px; } .zm-legend-row { display: flex; align-items: center; gap: 7px; margin: 3px 0; } .zm-legend-icon { flex-shrink: 0; display: inline-block; } .zm-legend-dot { flex-shrink: 0; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #d97706; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* -------------------------------------------------------------------------- Related links -------------------------------------------------------------------------- */ .related-links { display: flex; flex-direction: column; gap: 8px; } .related-link { display: block; padding: 10px 12px; background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); transition: background 0.12s ease, border-color 0.12s ease; } .related-link:hover { background: var(--hover-bg); border-color: var(--primary); } .related-link strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 2px; } .related-link span { display: block; font-size: 12px; color: var(--text-muted); } /* -------------------------------------------------------------------------- Map Container -------------------------------------------------------------------------- */ .map-container { max-height: calc(100vh - 120px); flex: 1; position: relative; overflow: hidden; min-height: 500px; max-height: 700px; } .map { width: 100%; height: 100%; min-height: 500px; } #map .leaflet-container { width: 100% !important; height: 100% !important; } /* -------------------------------------------------------------------------- FAB -------------------------------------------------------------------------- */ .fab { display: none; width: 56px; height: 56px; background-color: var(--primary); color: #fff; border: none; border-radius: 50%; font-size: 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); cursor: pointer; z-index: 9999; } /* Toast: styled only by the shared .toast component in src/styles/global.css. Do not restyle it here (see the contract comment there). */ /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 900px) { .tool-container { flex-direction: column; max-height: calc(100vh - 120px) !important; overflow-y: auto !important; height: auto !important; } .tool-sidebar { width: 100%; max-height: 60vh; overflow-y: auto; border-right: none; border-bottom: 1px solid var(--border); transition: max-height 0.3s ease; } .tool-sidebar.collapsed { max-height: 0; overflow: hidden; } .map-container { flex: none; height: 500px; min-height: 400px; max-height: 500px; } .map { min-height: 400px; height: 500px; } .fab { display: flex; align-items: center; justify-content: center; position: fixed; bottom: 20px; right: 20px; } } @media (max-width: 600px) { .sidebar-content { padding: 16px; } .tool-section { margin-bottom: 20px; padding-bottom: 20px; } .map-container { height: 400px; min-height: 350px; max-height: 450px; } .map { min-height: 350px; height: 400px; } }