diff --git a/viz/board.html b/viz/board.html index 339ec63ccd..f0034d6ccf 100644 --- a/viz/board.html +++ b/viz/board.html @@ -67,6 +67,40 @@ .tile.a .n{color:var(--amber)} .tile.t .n{color:var(--teal)} .ledger{font-size:10px; color:var(--muted2); border-top:1px solid var(--line-soft); padding-top:11px; line-height:1.6} + .ledger b{color:var(--ink); font-weight:600} + + /* ---- drill-down modal ---- */ + .county{cursor:pointer} + .modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center} + .modal[hidden]{display:none} + .backdrop{position:absolute; inset:0; background:rgba(4,7,11,.75)} + .sheet{position:relative; width:min(660px,92vw); max-height:86vh; overflow:auto; + background:var(--panel); border:1px solid var(--line); padding:22px 24px 26px; + box-shadow:0 24px 70px rgba(0,0,0,.55)} + .close{position:absolute; top:14px; right:14px; font-family:var(--mono); font-size:11px; + letter-spacing:.1em; color:var(--muted); background:transparent; border:1px solid var(--line); + padding:5px 9px; cursor:pointer} + .close:hover{color:var(--ink); border-color:var(--statel)} + .close:focus-visible{outline:2px solid var(--teal); outline-offset:2px} + .sheet-name{font-family:var(--sans); font-size:23px; font-weight:640; letter-spacing:-.01em; text-wrap:balance} + .sheet-sub{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); margin-top:3px} + .dgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); + border:1px solid var(--line-soft); margin:16px 0 4px} + .dcell{background:var(--panel2); padding:9px 11px} + .dk{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)} + .dv{font-size:15px; font-variant-numeric:tabular-nums; margin-top:2px} + .osec{margin-top:16px} + .osec h3{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; + color:var(--teal); margin:0 0 7px; display:flex; gap:8px; align-items:baseline; + border-bottom:1px solid var(--line-soft); padding-bottom:6px} + .osec h3 em{font-style:normal; color:var(--muted2); font-size:10px} + .off{display:flex; justify-content:space-between; gap:14px; font-size:12.5px; padding:4px 0; + border-bottom:1px dotted var(--line-soft)} + .off .on{color:var(--ink)} .off .or{color:var(--muted); text-align:right; flex:none; max-width:55%} + .empty{margin-top:16px; font-size:12.5px; color:var(--muted); line-height:1.6} + .ghlink{display:inline-block; margin-top:20px; font-family:var(--mono); font-size:11px; + letter-spacing:.06em; color:var(--teal); text-decoration:none; border:1px solid #1c5f59; padding:8px 12px} + .ghlink:hover{background:rgba(67,214,196,.09)}
@@ -81,7 +115,7 @@ + +