@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap'); /* Design tokens */ :root { --hdr-h: 52px; --panel-w: 375px; --drawer-w: 305px; --maroon: #4a4a55; --maroon-dk:#3a3a44; --maroon-lt:#f0f0f4; --surface: #ffffff; --bg: #f0f0f4; --border: #e0e0ea; --border-md:#c4c4d2; --text: #1a1a28; --muted: #60607a; --subtle: #9494aa; --font: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --r: 10px; --r-sm: 7px; --focus: 0 0 0 3px rgba(107,31,42,.28); } /* Reset */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html,body { width:100%; height:100%; overflow:hidden; font-family:var(--font); font-size:13px; line-height:1.5; color:var(--text); -webkit-font-smoothing:antialiased; background: #e8e8ed; } button { font-family:var(--font); cursor:pointer; } input,select { font-family:var(--font); } /* HEADER */ #legacyHeader { position:fixed; inset:0 0 auto 0; height:var(--hdr-h); background:var(--maroon); z-index:100; box-shadow:0 2px 12px rgba(0,0,0,.22); display:flex; align-items:center; padding:0 14px; gap:10px; } .hdr-icon { width:30px; height:30px; border-radius:6px; flex-shrink:0; } .hdr-text { flex:1; min-width:0; display:flex; flex-direction:column; } .hdr-actions { flex-shrink:0; } .lblAppName { font-size:14px !important; font-weight:700 !important; color:#fff !important; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; } #status { font-size:11.5px !important; color:rgba(255,255,255,.68) !important; font-weight:400 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .btn-clear-global { font-size:12px; font-weight:600; padding:6px 13px; border-radius:var(--r-sm); background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.28); color:#fff; white-space:nowrap; transition:background 140ms; } .btn-clear-global:hover { background:rgba(255,255,255,.24); } .global-actions { display:none !important; } /* SEARCH BAR */ /* #searchContainer is a direct child of , NOT inside #content. It floats fixed over the map area (left: 0, right: panel-w). Centered horizontally within the map area. */ #searchContainer, .search-container { position:fixed !important; top:calc(var(--hdr-h) + 12px) !important; /* Map area spans from left:0 to right:var(--panel-w) Center = (100vw - panel-w) / 2, then shift left by half the widget width */ left:calc((100vw - var(--panel-w)) / 2) !important; transform:translateX(-50%) !important; width:min(420px, calc(100vw - var(--panel-w) - 30px)) !important; z-index:150 !important; pointer-events:auto !important; } #searchContainer .esri-search, .search-container .esri-search { border-radius:var(--r) !important; overflow:hidden; border:1px solid rgba(0,0,0,.10) !important; box-shadow:0 4px 20px rgba(0,0,0,.16) !important; width:100% !important; } #searchContainer .esri-search__input { height:42px !important; font-size:13.5px !important; } .esri-search,.esri-search * { visibility:visible !important; } body.app-loading #content, body.app-loading #legacyHeader, body.app-loading #searchContainer { opacity:0; pointer-events:none; } body.app-loading #loadingOverlay { opacity:1; visibility:visible; } #legacyHeader, #content, #searchContainer { transition:opacity 180ms ease; } /* MAIN LAYOUT */ #content { position:fixed; top:var(--hdr-h); left:0; right:0; bottom:0; display:flex; flex-direction:row; /* viewDiv on LEFT, legacyBottom on RIGHT */ overflow:hidden; } /* Map */ #viewDiv { flex:1 1 0; min-width:0; height:100%; position:relative; background: #e8e8ed; /* prevents white flash before map tiles render */ /* NO z-index here — let ArcGIS manage its own stacking */ } /* RIGHT PANEL */ /* CRITICAL: Do NOT set z-index on the panel. z-index creates a stacking context, which would trap the ArcGIS popup (rendered inside #viewDiv) below the panel. The panel overlaps the map purely via flex layout order. */ #legacyBottom, #legacyBottom.transparentBackground { flex:0 0 var(--panel-w); width:var(--panel-w); height:100%; display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--border); box-shadow:-4px 0 18px rgba(0,0,0,.10); overflow:hidden; color:var(--text); /* NO position:relative, NO z-index — prevents stacking context */ } /* Panel header band */ #panelHeader, .divDetailsHeader { flex-shrink:0; background:var(--maroon); border:none !important; } .filter-header { display:flex; align-items:center; gap:8px; padding:11px 14px 9px; } .filter-title { font-size:14px; font-weight:700; color:#fff; } .panel-toggle, #panelToggle, .panel-toggle-fab { display:none !important; } #filterToggle, .filter-toggle { font-size:12px; font-weight:600; height:30px; padding:0 11px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); color:#fff; border-radius:var(--r-sm); transition:background 140ms; white-space:nowrap; } #filterToggle:hover { background:rgba(255,255,255,.22); } /* Chip bar */ .chipbar { display:flex; align-items:center; gap:5px; padding:7px 12px 9px; background:var(--maroon-dk); border-top:1px solid rgba(255,255,255,.09); overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; } .chipbar::-webkit-scrollbar { display:none; } .chip { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#fff; font-size:11.5px; font-weight:500; white-space:nowrap; flex-shrink:0; cursor:pointer; transition:background 130ms; } .chip:hover { background:rgba(255,255,255,.20); } .chip span { color:#fff; } .chip-k { color:rgba(255,255,255,.55); font-size:10.5px; } .chip-v { font-weight:700; } .chip-clear { font-size:11px; font-weight:600; background:transparent; border:none; color:rgba(255,255,255,.6); padding:3px 5px; flex-shrink:0; text-decoration:underline; text-decoration-color:transparent; transition:color 130ms; visibility:hidden; } .chip-clear:hover { color:#fff; text-decoration-color:rgba(255,255,255,.4); } /* Results scroll area */ #results { flex:1 1 0; min-height:0; overflow-y:auto; overflow-x:hidden; padding:10px 10px 16px; background:var(--bg); scrollbar-width:thin; scrollbar-color:#c8c8d4 transparent; } #results::-webkit-scrollbar { width:4px; } #results::-webkit-scrollbar-thumb { background:#c8c8d4; border-radius:99px; } /* Service group cards */ .service-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); margin:0 0 7px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.05); } .service-card h3, .service-header { display:flex !important; align-items:center !important; gap:8px; padding:9px 12px; margin:0; font-size:12.5px; font-weight:700; color:var(--text); background:var(--surface); cursor:pointer; user-select:none; border-bottom:1px solid transparent; transition:background 120ms; } .service-card:not(.collapsed) h3 { border-bottom-color:var(--border); } .service-card h3:hover { background:#fafafa; } .service-card h3 img { width:18px; height:18px; border-radius:4px; flex-shrink:0; } .service-card .caret { font-size:9px; color:var(--subtle); flex-shrink:0; } .service-card.collapsed .service-body { display:none; } .service-body { padding:7px 8px 9px; background:#f8f8fb; } .meta { font-size:11px; color:var(--muted); margin:0 0 5px 2px; font-weight:500; } .count-badge { margin-left:auto; flex-shrink:0; font-size:11px; font-weight:600; color:var(--muted); background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:1px 8px; white-space:nowrap; } .count-badge strong { font-weight:700; color:var(--text); } /* Result items */ .result { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 10px; margin:0 0 4px; cursor:pointer; transition:border-color 120ms, box-shadow 120ms, transform 120ms; } .result:hover { border-color:var(--border-md); box-shadow:0 2px 8px rgba(0,0,0,.08); transform:translateY(-1px); } .result:active { transform:translateY(0); } .result .name { font-size:12.5px; font-weight:700; color:var(--text); line-height:1.35; margin-bottom:2px; } .result .sub { font-size:11px; color:var(--muted); font-weight:400; line-height:1.3; } .result .detail { align-self:flex-start; margin-top:5px; font-size:10.5px; font-weight:700; color:var(--maroon); background:var(--maroon-lt); border:none; border-radius:999px; padding:2px 8px; } .result-item.is-hover { background:var(--maroon-lt) !important; border-color:#d4a0a8 !important; } .group-header { display:flex; align-items:center; gap:8px; } .group-header .title-wrap { display:flex; align-items:center; gap:8px; min-width:0; flex:1; } .group-header .title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .group-header img, .service-icon { width:18px !important; height:18px !important; } /* FILTER DRAWER */ /* JS moves #filterPanel to (position:fixed, viewport coords). right:var(--panel-w) places the drawer's right edge at the panel's left edge. Hidden: pushed right by its own width. */ #filterPanel, .filter-drawer { position:fixed !important; top:var(--hdr-h) !important; right:0 !important; /* JS will override this with actual panel width */ bottom:0 !important; width:var(--drawer-w) !important; height:auto !important; display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--border); box-shadow:-6px 0 24px rgba(0,0,0,.14); transform:translateX(calc(var(--drawer-w) + 8px)) !important; pointer-events:none !important; transition:transform 220ms cubic-bezier(.4,0,.2,1) !important; z-index:160 !important; overflow:hidden; } #filterPanel.is-open, .filter-drawer.is-open { transform:translateX(0) !important; pointer-events:auto !important; } #filterPanel.is-collapsed, .filter-drawer.is-collapsed { transform:translateX(calc(var(--drawer-w) + 8px)) !important; pointer-events:none !important; } .drawer-head { display:flex; align-items:center; padding:0 14px; height:48px; flex-shrink:0; background:var(--maroon); border-bottom:1px solid rgba(255,255,255,.12); } .drawer-title { font-size:13px; font-weight:700; color:#fff; flex:1; } .drawer-close { width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:var(--r-sm); color:#fff; font-size:13px; transition:background 130ms; } .drawer-close:hover { background:rgba(255,255,255,.22); } .drawer-body { flex:1; overflow-y:auto; padding:10px 12px; background:var(--bg); scrollbar-width:thin; } .drawer-foot { display:flex; align-items:center; gap:10px; padding:10px 12px; flex-shrink:0; border-top:1px solid var(--border); background:var(--surface); } .panel-tip { font-size:11px; color:var(--subtle); font-style:italic; } .filters-backdrop { position:fixed; inset:var(--hdr-h) 0 0 0; background:rgba(0,0,0,.18); z-index:159; display:none; } .filters-backdrop.open { display:block; } /* Accordions */ details.acc { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); margin-bottom:8px; overflow:hidden; } details.acc > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; font-size:12.5px; font-weight:700; color:var(--text); cursor:pointer; user-select:none; } details.acc > summary::-webkit-details-marker { display:none; } details.acc > summary::after { content:"›"; font-size:18px; font-weight:300; color:var(--subtle); line-height:1; transition:transform 180ms ease; } details.acc[open] > summary::after { transform:rotate(90deg); } details.acc > summary:hover { background:#fafafa; } .acc-body { padding:10px 12px 12px; border-top:1px solid var(--border); } /* Filter controls */ .filter-label { display:block; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:5px; } .filter-field { display:flex; flex-direction:column; flex:1; min-width:0; } .filter-row { display:flex; gap:10px; } .filter-field select, .filter-field input[type="date"] { width:100%; height:34px; padding:0 10px; border:1px solid var(--border-md); border-radius:var(--r-sm); background:var(--surface); color:var(--text); font-size:12.5px; appearance:auto; transition:border-color 140ms, box-shadow 140ms; } .filter-field select:focus, .filter-field input[type="date"]:focus { outline:none; border-color:var(--maroon); box-shadow:var(--focus); } .agency-tools { display:grid; grid-template-columns:1fr auto auto; gap:6px; align-items:center; margin-bottom:8px; } .agency-search { width:100%; padding:7px 10px; font-size:12px; border:1px solid var(--border-md); border-radius:var(--r-sm); background:var(--surface); color:var(--text); } .agency-search:focus { outline:none; border-color:var(--maroon); box-shadow:var(--focus); } .agency-list { border:1px solid var(--border); background:#fafafa; border-radius:var(--r-sm); padding:5px 7px; max-height:170px; overflow-y:auto; } .agency-item { display:flex !important; align-items:center !important; gap:8px !important; padding:5px 4px !important; font-size:12px !important; color:var(--text) !important; cursor:pointer; border-radius:5px; transition:background 100ms; } .agency-item:hover { background:var(--bg); } .agency-item input[type="checkbox"] { accent-color:var(--maroon); flex-shrink:0; } .btn-secondary { font-size:12.5px; font-weight:600; height:32px; padding:0 13px; border-radius:var(--r-sm); border:1px solid var(--border-md); background:var(--surface); color:var(--text); transition:background 130ms; } .btn-secondary:hover { background:var(--bg); } .btn-link { font-size:11.5px; font-weight:600; border:none; background:transparent; color:var(--maroon); padding:4px; } .btn-link:hover { text-decoration:underline; } /* ArcGIS UI widgets */ /* #viewDiv is sized to (100vw - panel-w) by flex layout. ArcGIS renders UI widgets relative to #viewDiv — not the viewport. So top-right widgets naturally appear at the right edge of the map. */ .esri-ui-top-right { right:10px !important; } .esri-ui-bottom-right { right:10px !important; } .esri-attribution { right:4px !important; max-width:100% !important; } /* POPUP */ /* Popup is docked to bottom-left of #viewDiv (the map area). #viewDiv is already sized to exclude the right panel via flex, so bottom-left stays fully visible on the map. */ .esri-view-root .esri-overlay-surface { z-index:50 !important; } /* Hide the floating popup pointer arrow when docked */ .esri-popup--is-docked .esri-popup__pointer { display:none !important; } /* Docked bottom popup: rounded top, flat bottom */ .esri-popup--is-docked-bottom-left .esri-popup__main-container, .esri-popup--is-docked-bottom-center .esri-popup__main-container, .esri-popup--is-docked-bottom-right .esri-popup__main-container { border-radius:var(--r) var(--r) 0 0 !important; margin:0 !important; } .esri-popup__main-container { overflow:hidden !important; box-shadow:0 -4px 28px rgba(0,0,0,.20) !important; font-family:var(--font) !important; min-width:220px !important; max-width:280px !important; width:280px !important; } .esri-popup__header { background:#4a4a5a !important; padding:0 6px 0 14px !important; min-height:44px !important; display:flex !important; align-items:center !important; } .esri-popup__header-title { color:#fff !important; font-family:var(--font) !important; font-size:13px !important; font-weight:700 !important; line-height:1.3 !important; padding:8px 0 !important; } .esri-popup__button { color:rgba(255,255,255,.75) !important; border-radius:5px !important; } .esri-popup__button:hover { color:#fff !important; background:rgba(255,255,255,.15) !important; } .esri-popup__content { font-family:var(--font) !important; font-size:12.5px !important; max-height:240px !important; overflow-y:auto !important; } .esri-popup__footer { border-top:1px solid var(--border) !important; padding:6px 12px !important; background:var(--surface) !important; } /* ArcGIS map tools — top-left, below search bar gap */ .esri-ui-top-left { top: 10px !important; left: 10px !important; } /* Distance-banded results */ .distance-group{border:1px solid #e8eaf2;border-radius:12px;margin-top:10px;background:#fff;overflow:hidden;} .distance-group-summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;padding:10px 12px;font-weight:700;color:#24314d;background:#f7f9fc;} .distance-group-summary::-webkit-details-marker{display:none;} .distance-group-count{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 8px;border-radius:999px;background:#e7eefc;color:#16325c;font-size:12px;font-weight:700;} .distance-group-body{padding:8px 10px 10px 10px;background:#fff;} .distance-empty{font-size:12px;color:#7b8190;background:#fafbfe;border:1px dashed #e2e8f0;border-radius:10px;padding:10px 12px;} /* ── HEADER ICON BUTTONS */ .hdr-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; } .hdr-icon-btn { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--r-sm); background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); color:#fff; transition:background 140ms, transform 100ms; padding:0; } .hdr-icon-btn:hover { background:rgba(255,255,255,.24); } .hdr-icon-btn:active { transform:scale(.93); } .hdr-icon-btn img { display:block; filter:brightness(0) invert(1); opacity:.9; } .hdr-icon-btn:hover img { opacity:1; } .hdr-icon-btn svg { display:block; color:#fff; opacity:.9; } .hdr-icon-btn:hover svg { opacity:1; } /* ── SHARED OVERLAY */ .hdr-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:299; } .hdr-overlay.is-open { display:block; } /* ── BASEMAP DROPDOWN */ #basemapPanel { display:none; position:fixed; top:calc(var(--hdr-h) + 6px); right:180px; /* near the basemap button */ width:300px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:0 8px 32px rgba(0,0,0,.22); z-index:300; overflow:hidden; } #basemapPanel.is-open { display:block; } .hdr-dropdown-head { display:flex; align-items:center; justify-content:space-between; background:var(--maroon); padding:10px 14px; } .hdr-dropdown-title { font-size:13px; font-weight:700; color:#fff; } .hdr-dropdown-close { background:none; border:none; color:rgba(255,255,255,.75); font-size:16px; line-height:1; padding:2px 6px; border-radius:4px; transition:background 120ms; } .hdr-dropdown-close:hover { background:rgba(255,255,255,.2); color:#fff; } #basemapGalleryContainer { padding:10px; max-height:340px; overflow-y:auto; } /* Let the ArcGIS BasemapGallery fill the container naturally */ #basemapGalleryContainer .esri-basemap-gallery { width:100% !important; background:transparent !important; border:none !important; box-shadow:none !important; } #basemapGalleryContainer .esri-basemap-gallery__item { border-radius:var(--r-sm) !important; } /* Share & Help */ .hdr-modal { display:none; position:fixed; inset:0; z-index:300; align-items:center; justify-content:center; } .hdr-modal.is-open { display:flex; } .hdr-modal-box { background:var(--surface); border-radius:var(--r); box-shadow:0 12px 48px rgba(0,0,0,.28); width:min(420px, calc(100vw - 32px)); max-height:calc(100vh - 60px); display:flex; flex-direction:column; overflow:hidden; position:relative; z-index:1; } .hdr-modal-box--wide { width:min(640px, calc(100vw - 32px)); } .hdr-modal-head { display:flex; align-items:center; justify-content:space-between; background:var(--maroon); padding:12px 16px; flex-shrink:0; } .hdr-modal-title { font-size:14px; font-weight:700; color:#fff; } .hdr-modal-close { background:none; border:none; color:rgba(255,255,255,.75); font-size:18px; line-height:1; padding:2px 7px; border-radius:4px; transition:background 120ms; } .hdr-modal-close:hover { background:rgba(255,255,255,.2); color:#fff; } .hdr-modal-body { overflow-y:auto; padding:18px 20px; } /* ── SPLASH MODAL */ .splash-modal { display:none; position:fixed; inset:0; z-index:400; align-items:center; justify-content:center; background:rgba(0,0,0,.45); backdrop-filter:blur(3px); } .splash-modal.is-open { display:flex; } .splash-box { background:var(--surface); border-radius:var(--r); box-shadow:0 16px 56px rgba(0,0,0,.32); width:min(460px, calc(100vw - 32px)); padding:28px 28px 22px; display:flex; flex-direction:column; gap:20px; } .splash-head { display:flex; align-items:center; gap:14px; } .splash-logo { width:48px; height:48px; border-radius:10px; flex-shrink:0; } .splash-title { font-size:16px; font-weight:700; color:var(--text); line-height:1.3; } .splash-subtitle { font-size:11.5px; color:var(--muted); margin-top:2px; } .splash-steps { display:flex; flex-direction:column; gap:12px; } .splash-step { display:flex; align-items:flex-start; gap:12px; font-size:13px; color:var(--text); line-height:1.45; } .splash-step-icon { font-size:18px; flex-shrink:0; margin-top:1px; } .splash-btn { background:var(--maroon); color:#fff; border:none; border-radius:var(--r-sm); padding:11px 0; font-size:14px; font-weight:700; cursor:pointer; transition:background 140ms; width:100%; } .splash-btn:hover { background:var(--maroon-dk); } .splash-skip { display:flex; align-items:center; gap:7px; justify-content:center; font-size:11.5px; color:var(--muted); cursor:pointer; user-select:none; } /* ── SHARE MODAL BODY */ .share-intro { font-size:13px; color:var(--muted); margin-bottom:16px; } .share-btns { display:flex; gap:12px; justify-content:center; margin-bottom:18px; } .share-btn { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 16px; border-radius:var(--r); border:1px solid var(--border); text-decoration:none; color:var(--text); font-size:12px; font-weight:600; transition:background 130ms, border-color 130ms, transform 100ms; min-width:80px; } .share-btn:hover { background:var(--bg); border-color:var(--border-md); } .share-btn:active { transform:scale(.95); } .share-url-row { display:flex; gap:8px; align-items:center; } .share-url-input { flex:1; height:36px; border:1px solid var(--border-md); border-radius:var(--r-sm); padding:0 10px; font-size:12px; color:var(--muted); background:var(--bg); outline:none; } .share-copy-btn { height:36px; padding:0 14px; border-radius:var(--r-sm); background:var(--maroon); border:none; color:#fff; font-size:12px; font-weight:600; transition:background 130ms; } .share-copy-btn:hover { background:var(--maroon-dk); } .share-copied { font-size:12px; color:#2a7a3b; min-height:20px; margin-top:6px; text-align:center; font-weight:600; } /* ── HELP MODAL BODY*/ .help-body h4 { font-size:13px; font-weight:700; color:var(--maroon); margin:16px 0 6px; padding-bottom:4px; border-bottom:1px solid var(--border); } .help-body h4:first-child { margin-top:0; } .help-body p, .help-body ol, .help-body li { font-size:13px; line-height:1.6; color:var(--text); } .help-body ol { padding-left:20px; margin-top:4px; } .help-body li { margin-bottom:4px; } .help-notice-types { display:flex; flex-direction:column; gap:6px; margin-top:6px; } .help-notice-row { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text); } .help-notice-row img { flex-shrink:0; } .help-dl { display:grid; grid-template-columns:minmax(130px,auto) 1fr; gap:4px 12px; font-size:13px; margin-top:6px; } .help-dl dt { font-weight:700; color:var(--text); } .help-dl dd { color:var(--muted); } /*RESPONSIVE: tighten basemap panel on mobile*/ @media (max-width:600px) { #basemapPanel { right:8px; width:calc(100vw - 16px); } } /* ── Loading overlay */ .loading-overlay { position: fixed; inset: var(--hdr-h) 0 0 0; display: none; align-items: center; justify-content: center; background: rgba(240,240,244,.32); z-index: 240; pointer-events: none; } .loading-overlay.is-visible { display: flex; } .loading-card { display:flex; align-items:center; gap:10px; background: rgba(255,255,255,.96); border:1px solid var(--border); border-radius: 999px; padding:10px 16px; box-shadow: 0 8px 28px rgba(0,0,0,.12); color: var(--text); font-weight: 600; } .loading-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #d8d8e3; border-top-color: var(--maroon); animation: pnspin .85s linear infinite; } @keyframes pnspin { to { transform: rotate(360deg); } } /* ── Mobile bottom-sheet layout */ .hdr-mobile-btn { display:none; height:34px; padding:0 12px; border-radius:var(--r-sm); background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); color:#fff; font-size:12px; font-weight:700; white-space:nowrap; } .mobile-sheet-handle { display:none; } @media (max-width:900px) { :root { --hdr-h: 58px; --panel-peek: 170px; --panel-open-h: min(54vh, 430px); } #legacyHeader { padding: 0 8px; gap: 8px; } .hdr-icon { width:26px; height:26px; } .lblAppName { font-size:13px !important; } #status { display:none; } .hdr-actions { gap:4px; } .hdr-icon-btn { width:32px; height:32px; } .btn-clear-global { display:none; } .hdr-mobile-btn { display:inline-flex; align-items:center; justify-content:center; } #searchContainer, .search-container { top: calc(var(--hdr-h) + 8px) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: calc(100vw - 18px) !important; max-width: none !important; } #searchContainer .esri-search__input { height:40px !important; } #content { display:block; top:var(--hdr-h); } #viewDiv { position:absolute; inset:0; width:100%; height:100%; } #legacyBottom, #legacyBottom.transparentBackground { position:absolute; left:0; right:0; bottom:0; width:auto; height:var(--panel-open-h); max-height:72vh; border-left:none; border-top:1px solid var(--border); border-radius:18px 18px 0 0; box-shadow:0 -8px 28px rgba(0,0,0,.18); z-index:30; transition:transform 220ms cubic-bezier(.4,0,.2,1), height 220ms cubic-bezier(.4,0,.2,1); } .mobile-sheet-handle { display:block; width:44px; height:5px; border-radius:999px; background:#c9c9d8; margin:8px auto 2px; flex-shrink:0; } #panelHeader, .divDetailsHeader { border-radius:18px 18px 0 0; } .filter-header { padding:8px 12px 8px; } .chipbar { padding:6px 10px 8px; } #results { padding:8px 8px 18px; } body.mobile-panel-hidden #legacyBottom, body.mobile-panel-hidden #legacyBottom.transparentBackground { transform:translateY(calc(100% - var(--panel-peek))); } #filterPanel, .filter-drawer { top:auto !important; left:0 !important; right:0 !important; bottom:0 !important; width:100% !important; max-width:none !important; height:min(78vh, 620px) !important; border-left:none; border-top:1px solid var(--border); border-radius:18px 18px 0 0; transform:translateY(calc(100% + 8px)) !important; } #filterPanel.is-open, .filter-drawer.is-open { transform:translateY(0) !important; } #filterPanel.is-collapsed, .filter-drawer.is-collapsed { transform:translateY(calc(100% + 8px)) !important; } .filters-backdrop { inset:0; } .esri-ui-top-left { top:58px !important; left:10px !important; } .esri-ui-top-right, .esri-ui-bottom-right { right:10px !important; } .esri-popup__main-container { width:min(92vw, 360px) !important; max-width:min(92vw, 360px) !important; } .help-dl { grid-template-columns:1fr; } .share-btns { gap:8px; } }