:root{ --ink:#1c2126; /* primary text */ --paper:#ffffff; --panel:#f6f7f8; /* sidebar */ --line:#dde2e6; /* hairline borders */ --line-strong:#c8cfd5; --muted:#5b6670; /* secondary text */ --accent:#2f6f95; /* single institutional accent */ --notice:#7a6a3a; /* delayed-data strip text */ --notice-bg:#f6efda; --error:#8a2b2b; --error-bg:#f7e4e4; --topbar-bg:#1c2126; /* header bar — kept dark in both themes */ --topbar-fg:#eef1f3; --map-bg:#e9ecef; /* tile gutter behind the basemap */ --popup-bg:#ffffff; /* leaflet popup box */ --hover:#eef1f3; /* row hover */ /* categorical scale — muted, kept distinct */ --c-violent:#b23a48; --c-property:#cf7e2b; --c-traffic:#2e6f95; --c-disorder:#74808a; --c-alarm:#8a6d3b; --c-welfare:#3f8f5b; --c-medical:#2a9d8f; --c-crisis:#9b5089; --c-other:#9aa6ae; /* neutral; distinct from DISORDER's slate */ --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* Dark theme: only the semantic surface/text colors flip; the category scale and the topbar stay put. Applied via data-theme="dark" on (set by app.js). */ html[data-theme="dark"]{ --ink:#e6eaed; --paper:#14181c; --panel:#1b2127; --line:#2a323a; --line-strong:#3a444d; --muted:#9aa6ae; --accent:#5ba3cd; --notice:#d9c790; --notice-bg:#312b16; --error:#e6a3a3; --error-bg:#3a2020; --map-bg:#0f1317; --popup-bg:#1b2127; --hover:#232b32; } *{box-sizing:border-box;} html,body{height:100%;margin:0;} body{ font-family:var(--sans); color:var(--ink); background:var(--paper); display:flex; flex-direction:column; font-size:14px; line-height:1.4; } /* ---------- header ---------- */ .topbar{ background:var(--topbar-bg); color:var(--topbar-fg); display:flex; align-items:baseline; gap:14px; padding:9px 16px; border-bottom:1px solid #000; } .topbar button.theme{ font-family:var(--sans); font-size:12px; color:#cfd6db; background:transparent; border:1px solid #3a434b; border-radius:2px; padding:2px 8px; cursor:pointer; align-self:center; } .topbar button.theme:hover{color:#fff;border-color:#9aa6ae;} .topbar h1{ font-size:15px; font-weight:600; letter-spacing:.01em; margin:0; } .topbar .tag{ font-family:var(--mono); font-size:11px; color:#9aa6ae; border:1px solid #3a434b; border-radius:2px; padding:1px 6px; } .topbar .spacer{flex:1;} .topbar .updated{ font-family:var(--mono); font-size:11.5px; color:#aeb8bf; } .topbar a.src{ color:#cfd6db; text-decoration:none; font-size:12px; border-bottom:1px solid #4a545c; } .topbar a.src:hover{color:#fff;border-bottom-color:#9aa6ae;} .notice{ background:var(--notice-bg); color:var(--notice); font-size:12px; padding:5px 16px; border-bottom:1px solid #e7ddc2; } .notice strong{font-weight:600;} /* error strip (hidden unless a fetch fails) */ .error{ display:none; background:var(--error-bg); color:var(--error); font-size:12px; padding:6px 16px; border-bottom:1px solid #eccaca; } .error.show{display:block;} /* ---------- body layout ---------- */ .app{flex:1;display:flex;min-height:0;} .sidebar{ width:312px; flex:0 0 312px; background:var(--panel); border-right:1px solid var(--line); overflow-y:auto; padding:0; } #map{flex:1;min-width:0;} .block{padding:13px 16px;border-bottom:1px solid var(--line);} .block:last-child{border-bottom:none;} .count{ font-family:var(--mono); font-size:12.5px; color:var(--ink); } .count b{font-weight:600;} .count .of{color:var(--muted);} .label{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:0 0 8px; font-weight:600; } select{ width:100%; font-family:var(--sans); font-size:13px; padding:6px 8px; border:1px solid var(--line-strong); border-radius:3px; background:#fff; color:var(--ink); } select:focus,input:focus,.callrow:focus{ outline:2px solid var(--accent); outline-offset:1px; } /* category filter rows */ .filter{ display:flex; align-items:center; gap:9px; padding:4px 0; cursor:pointer; user-select:none; } .filter input{margin:0;accent-color:var(--accent);width:14px;height:14px;} .filter .sw{ width:11px;height:11px;border-radius:50%; flex:0 0 11px;border:1px solid rgba(0,0,0,.18); } .filter .name{flex:1;font-size:13px;} .filter .n{ font-family:var(--mono); font-size:11.5px; color:var(--muted); } .filter.off .name,.filter.off .n{color:#aab2b8;} .filter.off .sw{opacity:.3;} .toolbtns{display:flex;gap:8px;margin-top:10px;} .toolbtns button{ flex:1;font-family:var(--sans);font-size:11.5px; padding:5px 0;border:1px solid var(--line-strong); background:#fff;color:var(--muted);border-radius:3px;cursor:pointer; } .toolbtns button:hover{border-color:var(--accent);color:var(--accent);} .toggle{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:13px;} .toggle input{accent-color:var(--accent);width:14px;height:14px;margin:0;} /* recent-calls CAD-style readout (the signature element) */ .feed{padding:0;} .feed .hd{ padding:11px 16px 7px; border-bottom:1px solid var(--line); } .feed .empty{ padding:11px 16px; font-size:12.5px; color:var(--muted); } .callrow{ display:flex;align-items:flex-start;gap:0; padding:7px 16px 7px 0; border-bottom:1px solid #eaedef; cursor:pointer; border-left:3px solid transparent; } .callrow:hover{background:var(--hover);} .callrow .bar{width:3px;align-self:stretch;margin-right:12px;flex:0 0 3px;} .callrow .meta{flex:1;min-width:0;} .callrow .ct{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .callrow .ad{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .callrow .tm{ font-family:var(--mono);font-size:11px;color:#8b949b; margin-top:1px; } .approx{ display:inline-block;font-family:var(--mono);font-size:10px; color:#8b949b;border:1px solid var(--line);border-radius:2px; padding:0 4px;margin-left:6px;vertical-align:1px; } /* leaflet popup, toned to match (themed) */ .leaflet-popup-content-wrapper, .leaflet-popup-tip{background:var(--popup-bg);color:var(--ink);} .leaflet-popup-content-wrapper{border-radius:3px;} .leaflet-container a.leaflet-popup-close-button{color:var(--muted);} .pop .pt{font-family:var(--mono);font-weight:600;font-size:13px;} .pop .pa{font-size:12.5px;color:var(--ink);margin-top:2px;} .pop .pm{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:4px;} .pop .pn{font-size:11.5px;color:var(--notice);margin-top:5px;} .leaflet-container{background:var(--map-bg);font-family:var(--sans);} /* mobile-only toggle for the collapsible control panel (hidden on desktop) */ .panel-toggle{display:none;} @media (prefers-reduced-motion: reduce){ *{transition:none!important;} } @media (max-width:760px){ /* Header: wrap + compact so the items stop cramming into one row. The long "Updated …" stamp drops to its own line below the title. */ .topbar{flex-wrap:wrap;align-items:center;gap:5px 10px;padding:8px 12px;} .topbar h1{font-size:14px;} .topbar .tag{font-size:10px;padding:1px 5px;} .topbar .spacer{display:none;} .topbar button.theme{font-size:11px;padding:2px 7px;} .topbar a.src{font-size:11px;} .topbar .updated{order:99;flex-basis:100%;font-size:10.5px;margin-top:1px;} /* Layout: the map gets the screen by default; filters + recent calls collapse behind a toggle so they no longer eat half the viewport. */ .app{flex-direction:column;} .panel-toggle{ display:block;width:100%;text-align:left; font-family:var(--sans);font-size:13px;font-weight:600; color:var(--ink);background:var(--panel); border:none;border-bottom:1px solid var(--line); padding:11px 16px;cursor:pointer; } .panel-toggle::after{content:" \25BE";color:var(--muted);} /* ▾ */ .sidebar.open .panel-toggle::after{content:" \25B4";} /* ▴ */ .sidebar{ width:100%;flex:0 0 auto;max-height:none;overflow:visible; border-right:none;border-bottom:1px solid var(--line); } /* Collapsed by default: only the toggle (and the count) show. */ .sidebar .block,.sidebar .feed{display:none;} .sidebar .block:first-of-type{display:block;} /* keep the "N of M shown" count */ .sidebar.open{max-height:55vh;overflow-y:auto;} .sidebar.open .block,.sidebar.open .feed{display:block;} #map{flex:1;min-height:40vh;} }