/* ── Reset & base ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; font-family: 'Segoe UI', system-ui, Arial, sans-serif; font-size: 13px; color: #2c2c2c; background: #f2efe5; } /* ── Keyboard focus (a11y) ────────────────────────────────────────────────── */ /* Baseline focus-visible ring for any interactive element that doesn't already define its own (select and #country-search keep their box-shadow focus style below — this doesn't fight with those). */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #a5ffb4; outline-offset: 2px; } /* ── Layout ───────────────────────────────────────────────────────────────── */ body { display: flex; } /* ── Sidebar (floating menu card) ─────────────────────────────────────────── */ /* Detached card overlaying the map's top-left — the map is full-bleed underneath it, so collapsing only changes the overlay (no map.resize() needed). Keeps the dark-teal palette so it stays visually distinct from the white legend / popup cards. z-index: above the map, below the tooltip (1000) and error banner (2000); no MapLibre control lives top-left. */ #sidebar { position: fixed; top: 12px; left: 12px; z-index: 900; width: 300px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); /* fallback for browsers without dvh */ max-height: calc(100dvh - 24px); /* iOS: tracks the dynamic toolbar viewport */ font-size: 14px; background: #004351; color: #eaffff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; } #sidebar-header { position: relative; /* anchors the collapse toggle */ padding: 12px 48px 12px 14px; /* symmetric; right inset clears the 32px toggle */ background: #00313b; color: #eaffff; flex-shrink: 0; } #sidebar-header h1 { font-size: 18px; font-weight: 700; letter-spacing: 0.3px; color: #eaffff; } /* Title + about-the-app info button on one line (country.html) */ #title-row { display: flex; align-items: center; gap: 4px; } /* ── Menu collapse toggle ─────────────────────────────────────────────────── */ #menu-toggle { position: absolute; top: 50%; /* vertically centered in the title bar — the header is identical expanded/collapsed, so the chevron never shifts when toggling */ transform: translateY(-50%); right: 10px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 6px; background: #166a7c; color: #eaffff; cursor: pointer; transition: background 0.15s, color 0.15s; } #menu-toggle:hover { background: #92d2d2; color: #00313b; } #menu-toggle svg { transition: transform 0.15s; } /* Collapsed: only the title bar remains, as a compact pill in the same corner. Controls/footer are hidden (not removed) so all control state — selections, toggles, typed countries — persists across collapse cycles. State class lives on so the head script can apply it pre-paint. */ .menu-collapsed #controls, .menu-collapsed #sidebar-footer { display: none; } /* Collapsed card keeps the expanded width and title size — only the height shrinks to the title bar. Padding goes symmetric and the toggle centers vertically so title and chevron both sit balanced within the pill. */ .menu-collapsed #menu-toggle svg { transform: rotate(180deg); } #sidebar-header .subtitle { margin-top: 4px; font-size: 11px; color: #92d2d2; } a { color: #166a7c; text-decoration: none; } a:hover { color: #00313b; text-decoration: underline; } /* ── Controls ─────────────────────────────────────────────────────────────── */ #controls { flex: 1; overflow-y: auto; padding: 10px 12px; } .control-block { margin-bottom: 14px; } .control-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #92d2d2; margin-bottom: 5px; } /* ── Control info button + popover (Urban classification "ⓘ") ────────────── */ /* Label text + info button as flex siblings (NOT the button inside a label, which would forward label-text clicks to it): only the button's own hit area toggles the popover, and align-items centers the button against the label text's line exactly. The row carries the label's usual 5px gap. */ .control-label-row { display: flex; align-items: center; gap: 2px; margin-bottom: 5px; } .control-label-row .control-label { margin-bottom: 0; } .info-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; /* ≥22px hit target around the 15px glyph */ height: 22px; flex-shrink: 0; border: none; border-radius: 50%; background: transparent; color: #92d2d2; cursor: pointer; transition: color 0.15s; } .info-btn:hover { color: #a5ffb4; } .info-btn svg { display: block; } /* White card matching the popup/legend language, shared by every sidebar info popover (#ur-info-popover, #var-info-popover). position:fixed (placed from the button's rect on open, see country.js) so the sidebar card's overflow:hidden and #controls' overflow-y:auto can't clip it. z-index: above the sidebar card (900), below the tooltip (1000). */ .info-popover { position: fixed; z-index: 950; max-width: 280px; max-height: 60vh; /* fallback for browsers without dvh */ max-height: 60dvh; /* iOS: tracks the dynamic toolbar viewport */ overflow-y: auto; padding: 10px 12px; background: #ffffff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; line-height: 1.45; color: #1f2a2e; } .info-popover p + p { margin-top: 6px; } /* The Variable popover holds four dataset entries — a bit wider, with clear breathing room between entries. */ #var-info-popover { max-width: 320px; } /* The about-the-app popover is long-form prose — wider still. */ #app-info-popover { max-width: 360px; } .info-entry + .info-entry { margin-top: 12px; } .info-cite { font-size: 11px; color: #4a6f7a; } .info-cite a { color: #166a7c; text-decoration: underline; } .info-cite a:hover { color: #00313b; } select { width: 100%; padding: 6px 8px; border: 1px solid #166a7c; border-radius: 4px; background: #fff; font-size: 14px; color: #2c2c2c; cursor: pointer; appearance: auto; } select:focus { outline: none; border-color: #a5ffb4; box-shadow: 0 0 0 2px rgba(165,255,180,0.35); } /* ── Toggle buttons ───────────────────────────────────────────────────────── */ .toggle-row { display: flex; gap: 4px; } .toggle-btn { flex: 1; padding: 5px 0; border: 1px solid #166a7c; border-radius: 4px; background: #166a7c; color: #eaffff; font-size: 14px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .toggle-btn:hover:not(:disabled):not(.active) { background: #92d2d2; color: #00313b; border-color: #92d2d2; } .toggle-btn.active { background: #a5ffb4; color: #00313b; border-color: #a5ffb4; } .toggle-btn:disabled { opacity: 0.35; cursor: default; } /* ── Legend ───────────────────────────────────────────────────────────────── */ #legend { display: flex; flex-direction: column; gap: 3px; } /* Legend sizing matches the Country / UR Class pages (13px rows, 12px captions, 20px swatches) so all four pages present the same legend. */ .legend-title { font-size: 13px; font-weight: 600; color: #eaffff; margin-bottom: 4px; } /* Year and unit each on their own line under the title, so long titles don't force the floating panel wide ("EDGAR Emissions" / "2015" / "kt CO2"). */ .legend-title .legend-year, .legend-title .unit { display: block; font-weight: 400; font-size: 12px; color: #92d2d2; } .legend-item { display: flex; align-items: center; gap: 7px; } .legend-swatch { display: inline-block; width: 20px; height: 10px; border-radius: 2px; flex-shrink: 0; border: 1px solid rgba(234,255,255,0.4); } .legend-label { font-size: 13px; color: #eaffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .legend-empty { font-size: 13px; color: #92d2d2; font-style: italic; } .legend-caption { font-size: 12px; color: #92d2d2; font-style: italic; margin-top: 4px; line-height: 1.3; } /* ── Floating legend panel (Country + Global pages) ──────────────────────── */ /* The legend lives over the map (bottom-right) instead of in the sidebar. On country.html the panel sits inside #map-container (position:relative); on global.html it's a body child, where `absolute` resolves against the viewport — same corner either way since the map fills right of the sidebar. The bottom offset clears MapLibre's bottom-right stack (attribution bar + ScaleControl — measured: the scale's top edge sits 76px above the viewport bottom). z-index: above the map canvas, below the tooltip (1000) and error banner (2000). */ #legend-panel { position: absolute; right: 10px; bottom: 84px; z-index: 800; max-width: 260px; max-height: 40vh; /* fallback for browsers without dvh */ max-height: 40dvh; /* iOS: tracks the dynamic toolbar viewport */ overflow-y: auto; padding: 10px 12px; background: #ffffff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.18); } /* Legend collapse toggle: lives OUTSIDE #legend, so the JS-driven legend re-renders (innerHTML swaps) never touch it. Collapsed state is the html.legend-collapsed class (set pre-paint from localStorage): the rows hide and the panel shrinks to a "Legend" pill in the same corner. */ #legend-toggle { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: #166a7c; cursor: pointer; transition: background 0.15s; } #legend-toggle:hover { background: #e5f1f1; } #legend-toggle svg { transition: transform 0.15s; } /* Keep the legend title clear of the 24px toggle. */ #legend-panel .legend-title { padding-right: 22px; } #legend-collapsed-label { display: none; font-size: 13px; font-weight: 600; color: #1f2a2e; padding-right: 22px; } .legend-collapsed #legend { display: none; } .legend-collapsed #legend-collapsed-label { display: inline-block; } .legend-collapsed #legend-panel { padding: 7px 12px; } .legend-collapsed #legend-toggle { top: 50%; transform: translateY(-50%); } .legend-collapsed #legend-toggle svg { transform: rotate(180deg); } /* Small screens: tighter legend so it doesn't dominate the map. */ @media (max-width: 500px) { #legend-panel { max-width: 200px; padding: 8px 10px; } #legend-panel .legend-title { font-size: 11px; } #legend-panel .legend-label { font-size: 11px; } #legend-panel .legend-caption, #legend-panel .legend-empty { font-size: 10px; } #legend-panel .legend-swatch { width: 14px; height: 8px; } } /* The base .legend-* classes above are styled for the dark sidebar (used by updateLegend()'s markup on other pages) — these scoped overrides give the white floating panel dark text without touching that base look. */ #legend-panel .legend-title { color: #1f2a2e; } #legend-panel .legend-title .legend-year, #legend-panel .legend-title .unit { color: #4a6f7a; } #legend-panel .legend-label { color: #2c2c2c; } #legend-panel .legend-empty, #legend-panel .legend-caption { color: #4a6f7a; } #legend-panel .legend-swatch { border-color: rgba(0,0,0,0.25); } /* ── Sidebar footer ───────────────────────────────────────────────────────── */ #sidebar-footer { padding: 8px 12px; border-top: 1px solid rgba(234,255,255,0.15); flex-shrink: 0; } #sidebar-footer p { font-size: 10px; color: #92d2d2; line-height: 1.5; } /* Footer links live on the dark card — the global teal link color would vanish here, so they stay light with an underline. */ #sidebar-footer a { color: #92d2d2; text-decoration: underline; } #sidebar-footer a:hover { color: #a5ffb4; } /* ── Map / split view ─────────────────────────────────────────────────────── */ #map-container { flex: 1; height: 100%; min-width: 0; display: flex; position: relative; } #map, #map2 { flex: 1 1 0%; height: 100%; min-width: 0; } #map-divider { flex: 0 0 6px; height: 100%; background: #166a7c; cursor: col-resize; touch-action: none; z-index: 5; } /* Narrow-viewport split runs vertically (panes stacked; see country.js's applySplitLayout) — the divider becomes a full-width horizontal bar. */ #map-divider.horizontal { height: auto; width: 100%; cursor: row-resize; } #map-divider:hover, #map-divider.dragging { background: #a5ffb4; } /* ── Country search + selection chips ─────────────────────────────────────── */ /* One search bar for both panes; selections render as removable chips below it (1st chip = main pane, 2nd = compare pane). Matches the sidebar's