/* lane MAPS: the Legislation-tab "Maps" sub-tab (#maps), two views built by * app/legislative-maps.js on top of the hub's own US map component * (app/us-map.js) -- Legislation over time (ported from the public * dashboard's own choropleth, site/js/main.js) and Litigation over time (fed * by litigation-worker's /api/cases-by-state-year). * * Every colour here comes from tokens.css EXCEPT the Ratchet map ramp * itself: site/js/main.js's RED_STOPS/TEAL_STOPS/ZERO_ANTI/ZERO_PRO are the * one deliberately-not-token palette on the hub (the linear, fixed-across- * years scale the owner asked for on the public dashboard), so they live * here ONCE as custom properties and app/legislative-maps.js reads them with * getComputedStyle rather than repeating the hex anywhere in JS. The * litigation map has no anti/pro side, so it needs no ramp of its own -- * legislative-maps.js builds its colour with color-mix() against var(--blue), * the same recipe app/states.js's own colorFor() already uses. */ :root { --map-anti-1:#F09595; --map-anti-2:#E24B4A; --map-anti-3:#c43535; --map-anti-4:#A32D2D; --map-anti-5:#791F1F; --map-anti-6:#651919; --map-anti-7:#501313; --map-pro-1:#9FE3CF; --map-pro-2:#5DCAA5; --map-pro-3:#45a19a; --map-pro-4:#37897F; --map-pro-5:#2A6B63; --map-pro-6:#1E5049; --map-pro-7:#143A35; --map-zero-anti:#2a6e4e; /* no anti bills = green, same as the public map */ --map-zero-pro:#7a766f; /* no pro bills = light neutral grey */ } .lm-view-toggle { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; } .lm-view-toggle button { background:var(--panel2); color:var(--muted); border:1px solid var(--control-border); border-radius:var(--radius-md); padding:7px 14px; font-size:12.5px; cursor:pointer; } .lm-view-toggle button[aria-pressed="true"] { color:var(--gold); border-color:var(--gold); font-weight:600; background:var(--panel); } .lm-row { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:12px; } .lm-seg { display:inline-flex; border:1px solid var(--control-border); border-radius:var(--radius-md); overflow:hidden; } .lm-seg button { background:var(--panel2); color:var(--muted); border:0; border-radius:0; padding:6px 11px; font-size:12px; cursor:pointer; } .lm-seg button + button { border-left:1px solid var(--border); } .lm-seg button.active { background:var(--gold-fill); color:var(--on-gold); font-weight:600; } .lm-field { display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--muted); } .lm-slider-row { display:flex; align-items:center; gap:10px; margin:10px 0; flex-wrap:wrap; } .lm-slider-row input[type=range] { flex:1 1 220px; min-width:160px; accent-color:var(--gold); } .lm-year { font-family:Consolas, monospace; color:var(--gold); min-width:3.5em; text-align:right; } .lm-play { background:var(--panel2); color:var(--text); border:1px solid var(--control-border); border-radius:var(--radius-md); padding:6px 12px; cursor:pointer; } .lm-map-wrap { position:relative; max-width:900px; } .lm-map-wrap svg { width:100%; height:auto; display:block; } .lm-tip { position:absolute; z-index:5; background:var(--sunken); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:6px 10px; font-size:12px; color:var(--text); pointer-events:none; max-width:260px; box-shadow:0 4px 14px rgba(0,0,0,.4); } .lm-tip .muted { color:var(--muted); } .lm-legend { display:flex; align-items:center; gap:3px; flex-wrap:wrap; margin:10px 0; font-size:11.5px; color:var(--muted); } .lm-legend .swatch { display:inline-block; width:16px; height:12px; border-radius:2px; border:1px solid var(--border); } .lm-legend .lm-legend-note { margin-left:8px; } .lm-chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; } .lm-chip { border-radius:var(--radius-sm); padding:3px 9px; font-size:11.5px; display:flex; gap:6px; align-items:center; } .lm-chip .n { font-weight:600; } .lm-table-toggle { background:transparent; color:var(--muted); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:4px 10px; font-size:11.5px; cursor:pointer; margin:6px 0; } .lm-table-toggle:hover { color:var(--text); } .lm-table-wrap { max-height:340px; overflow:auto; border:1px solid var(--border); border-radius:6px; } .lm-table { width:100%; border-collapse:collapse; font-size:12px; } .lm-table th, .lm-table td { padding:4px 9px; border-bottom:1px solid var(--border); text-align:left; } .lm-table th { color:var(--gold); position:sticky; top:0; background:var(--panel); } .lm-table td.n { text-align:right; font-family:Consolas, monospace; } .lm-growth { margin-top:22px; } .lm-growth h3 { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--faint); margin:0 0 8px; } .lm-growth svg { width:100%; height:auto; } .lm-growth-note { font-size:11.5px; color:var(--faint); margin-top:6px; } .lm-hint { color:var(--faint); font-size:11.5px; margin:8px 0 14px; } @media (max-width:600px) { .lm-row { gap:8px; } .lm-field { min-width:0; } } /* app/us-map.js draws the paths; its base styles live in states.html's own