/* Supply & Demand — the S&D Master File's key graphs, online. * * Layered on tokens.css + app.css + country.css + reports.css: shell, rail, * panel and chart furniture are the country dashboard's; this file adds the * page's type scale, section rhythm, the growth colour pair, the heat-map * cells and the map surface. */ :root { /* Signed growth: decline warm, growth cool, zero a paper-neutral grey. * Read by sd/charts.js for the heat maps, the signed bars and the maps. */ --sd-neg: #c4442f; --sd-mid: #ebe7dc; --sd-pos: #2f6fb5; --sd-nodata: #f3efe6; --sd-sea: #f8f5ee; } [data-theme="dark"] { --sd-neg: #e0664f; --sd-mid: #3a3632; --sd-pos: #6b9ad8; --sd-nodata: #2c2926; --sd-sea: #221f1c; } /* ---------- type scale ---------- * A step above the country dashboard: the tokens' 9–10px microcaps suit a * dense balance sheet, not a report read at arm's length (owner requests, * 2026-09-10). Scoped to the page so the other dashboards keep their sizes; * sd/charts.js sizes its gutters and label clamps for the tick face (CH, M, * MR there). * * Weight and ink do as much of the work as size. Every label face is a step * heavier than the dashboard's (mono 500, headings 600), and the page's text * sits on --ink-dim (8.3:1 on the cream ground) rather than --ink-mute * (5.2:1) — the recessive grey that suits a chart the reader leans into is * the wrong ink for a report page. Figures a reader reads straight off a * chart — a country, a growth rate, a bar's value — carry full --ink, set in * sd/charts.js. */ .layout.sd { --sd-fs-tick: 11.5px; /* SVG tick labels and in-chart text */ --sd-fs-cap: 12.5px; /* microcaps: chart captions, rail headings */ --sd-fs-cap-lg: 14px; /* heat-map captions */ --sd-fs-sect: 17px; /* numbered section headings */ --sd-fs-note: 13px; /* notes, legends, rail lists */ --sd-fs-table: 12.5px; /* table figures */ } /* Microcaps: heavier, and the tracking eases as the size grows — 0.18em was * set for a 9.5px face and reads as gaps at 12.5px. */ .layout.sd .cap { font-size: var(--sd-fs-cap); font-weight: 500; letter-spacing: 0.1em; } .layout.sd .note { font-size: var(--sd-fs-note); font-weight: 500; line-height: 1.6; color: var(--ink-dim); } .layout.sd .chart .tick-lbl { font-size: var(--sd-fs-tick); font-weight: 500; letter-spacing: 0.02em; } .layout.sd .sw-legend { font-size: var(--sd-fs-note); font-weight: 500; color: var(--ink-dim); gap: var(--sp-16); margin-top: var(--sp-8); } .layout.sd .sw-row b { font-size: var(--sd-fs-cap); } .layout.sd .hstat .k { font-size: 11.5px; font-weight: 500; color: var(--ink-dim); } .layout.sd .hstat .v { font-size: 28px; font-weight: 400; } .layout.sd .hstat .s { font-size: 12px; font-weight: 500; color: var(--ink-dim); } .layout.sd table.grid { font-size: var(--sd-fs-table); } .layout.sd table.grid thead th { font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-dim); } .layout.sd table.grid tbody th.lbl, .layout.sd table.grid td { font-weight: 500; } /* The chart tooltip hangs off , outside the layout; sd/app.js tags * the body so the tooltip follows the same scale. */ body.sd-page .chart-tip { max-width: 300px; } body.sd-page .chart-tip .t-name { font-size: 13.5px; } body.sd-page .chart-tip .t-row { font-size: 13px; } body.sd-page .chart-tip .t-row b { font-size: 13px; } /* ---------- document rhythm ---------- */ .sd-section { padding: var(--sp-24) var(--sp-24) var(--sp-8); border-bottom: 0; } /* Section headings: the page's one loud voice — full ink, semibold, and * tracked tighter than a microcap because at 17px the wide setting reads * as spaced-out letters rather than one line. */ .layout.sd .sd-section > .cap.sect { font-size: var(--sd-fs-sect); font-weight: 600; letter-spacing: 0.045em; color: var(--ink); margin: 0 0 var(--sp-12); } .sd-section .two-up { margin-bottom: var(--sp-16); } /* Leaders: each group is one full-width drawing (sd/charts.js leaderBoard), * so the ranked volumes and both growth windows share a row per country. */ .sd-section > .chart-block { margin-bottom: var(--sp-16); } .sd-section .chart-block .cap { margin: 0 0 var(--sp-8); } .sd-section .chart-block .note { margin: var(--sp-6) 0 0; } .sd-row { padding: 0 var(--sp-24) var(--sp-16); } /* KPI tiles: the country page's stat strip, eight across when there is room. */ .sd-kpis { padding: var(--sp-16) var(--sp-24) 0; } .sd-kpis .hstats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .sd-kpis .hstat .s.up { color: var(--ok); } .sd-kpis .hstat .s.down { color: var(--danger); } /* ---------- heat maps ---------- */ table.grid.heat caption { text-align: left; font: 600 var(--sd-fs-cap-lg) var(--font-ui); color: var(--ink); padding: 0 0 var(--sp-8); } /* Seventeen columns at 12.5px: 3px side padding is what keeps the table * inside the document column on a 1440px screen rather than scrolling. */ .layout.sd table.grid.heat th, .layout.sd table.grid.heat td { padding: var(--sp-4) 3px; } table.grid.heat td { color: var(--ink); border: 1px solid var(--panel); } table.grid.heat td.na { color: var(--ink-faint); font-style: italic; } table.grid.heat tbody th.lbl { white-space: nowrap; } .heat-stack { display: flex; flex-direction: column; gap: var(--sp-20); } /* ---------- maps ---------- */ .sd-map { width: 100%; } .sd-map svg { display: block; overflow: visible; } .sd-map path { transition: none; } /* ---------- rail ---------- */ .jump { display: flex; flex-direction: column; gap: 2px; } .jump a { display: block; padding: 6px var(--sp-8); border-radius: var(--r-sm); color: var(--ink-dim); text-decoration: none; font: 500 var(--sd-fs-note) var(--font-ui); } .jump a:hover { background: var(--panel-strong); color: var(--ink); } .reg-key-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .reg-key-list li { display: flex; align-items: center; gap: var(--sp-8); font: 500 var(--sd-fs-note) var(--font-ui); color: var(--ink-dim); } .reg-key-list i { width: 14px; height: 9px; border-radius: 2px; display: block; flex: none; } .growth-key { display: flex; gap: var(--sp-12); margin-top: var(--sp-8); font: 500 var(--sd-fs-note) var(--font-ui); color: var(--ink-dim); } .growth-key span { display: inline-flex; align-items: center; gap: 5px; } .growth-key i { width: 14px; height: 9px; border-radius: 2px; display: block; } .growth-key .neg { background: var(--sd-neg); } .growth-key .pos { background: var(--sd-pos); } /* The published balance table: the year column leads, figures right. */ table.grid.summary tbody th.lbl { font: 600 var(--sd-fs-table) var(--font-mono); color: var(--ink); } table.grid.summary td.neg { color: var(--danger); } table.grid.summary td.pos { color: var(--ok); }