/* ============================================================================= Anatomy of a Budget — what only this tool uses ----------------------------------------------------------------------------- Tokens and the shared components (bar, buttons, segmented controls, panels, tooltip, drawer) are in projects/static/projects/tools/tool.css, linked first by projects/_tool_base.html; the design direction is docs/unga-design.md. Plain CSS, linked with {% static_v %}; the treemaps stay crisp (no textures, filters or tilt — core/tests.py enforces it). Layout: one viewport from 1024 x 600 up (section 7): the bar, the options band, then the two country panels, each map taking half of what is left of its panel. budgets.js reads the maps' boxes after layout and draws into them, so the CSS decides the size and the JS only fills it. Smaller screens stack the panels and scroll. Tiles: flat fills with straight edges on whole pixels; the treemap's 3px inner padding is the border, so the panel surface shows between tiles. Hover changes the outline only, as everywhere in the tools. Category colours: the owner's palette for this tool, #001219 #005f73 #0a9396 #94d2bd #e9d8a6 #ee9b00 #ca6702 #bb3e03 #ae2012 #9b2226 as flat fills, the same hexes in both themes. These are data, not UI, so they stay hex here. Which colour went where was computed (2026-10-03): every country's maps were laid out at four viewports (1440x900, 1280x720, 1024x768, 375x812), the tiles that touch were listed with their shared border, and every assignment was scored by the closest touching pair (OKLab dE, the worst of normal, protan and deutan vision, the dataviz validator's model), then by the touching border weighted over all pairs. Revenue uses seven of the ten (closest touching pair dE 14.2). Spending uses all ten; its categories touch almost every other one somewhere, and the palette holds three near-identical dark reds (#bb3e03 #ae2012 #9b2226), so the best possible closest pair is dE 6.3: the two closest reds went to General public services and Culture, which never touch. Re-run the assignment before swapping two colours. Contrast below 3:1 against the panel (light: the sand, mint and amber; dark: the navy, petrol and reds) is relieved by the labels, the hover card and the table. No legend. Spending has 12 categories for 10 colours: Interest on the debt is a neutral "ink" grey (not a service, the cost of past borrowing, kin to the empty dashed Borrowing tile), dark on the light page and light on the dark one; Other / unallocated a mid grey. The two sit at least dE 15 apart in each theme, and as far from all ten colours as a neutral can (dE 12-16). ============================================================================= */ /* 1. Data colours -------------------------------------------------------------- */ .wmg { /* spending */ --c-social: #bb3e03; --c-health: #001219; --c-education: #e9d8a6; --c-defence: #005f73; --c-economic: #ca6702; --c-gps: #9b2226; --c-order: #ee9b00; --c-housing: #94d2bd; --c-environment: #0a9396; --c-culture: #ae2012; --c-interest: #353230; /* neutral, outside the palette (see above) */ --c-other: #a39d98; /* revenue */ --r-income: #94d2bd; --r-ssc: #005f73; --r-goods: #001219; --r-property: #ae2012; --r-trade: #0a9396; --r-othertax: #e9d8a6; --r-nontax: #ee9b00; --paper-tile: var(--surface); /* the empty Borrowing / surplus tile (budgets.js fillFor) */ --alert: rgb(var(--pe-down)); /* the deficit figure, "not to scale" */ font-variant-numeric: tabular-nums; } html.dark .wmg { /* The palette stays; only the two greys flip with the page. */ --c-interest: #a39d97; --c-other: #736e69; } .wmg-defs { position: absolute; width: 0; height: 0; } .wmg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 2. Top bar: the two countries and the drawer button ------------------------ */ .wmg-pick { display: flex; align-items: center; gap: 6px; min-width: 0; } .wmg-pick .u-select { width: clamp(150px, 13vw, 190px); font-weight: 700; cursor: pointer; } .wmg-pick .u-select:hover { border-color: var(--text-3); } /* A click on a