/* web/t1_atlas.html — the consolidated atlas.
---------------------------------------------------------------------------
Kept as its own file rather than extending t1_deep.css: this page replaces
that one's bespoke SVG projection with Leaflet, so it shares no structural
class with it. A shared stylesheet would be two stylesheets in one file with
the risk that a tweak to the live page silently moves the retired one.
---------------------------------------------------------------------------
WP4.2c, 2026-08-08 — THE PRIVATE PALETTE IS GONE, and with it the 24
declarations and 42 literals this file was carrying. The block it replaces
opened by claiming the greys were "MEASURED against --bg, not eyeballed",
which was true of the values and irrelevant to the outcome: they were
tokens.css's DARK values written out as literals, so the measurement held in
dark and nothing at all held in light. The page rendered black-on-black the
moment the map beside it went to paper. A palette that cannot follow the
theme is not a palette, it is a hardcode with a variable name.
THE MAP, IN ORDER, of what each retired name became. Recorded because the
names were not synonyms — several of them were answering two questions, and
the split is the interesting part:
--bg, --line, --ink kept: same name, tokens.css's value
--panel -> --surface the raised card
--panel2 -> --surface-2 the recessed strip a card sits on
--dim -> --ink-body supporting text
--faint -> --ink-faint captions and axis furniture
--off -> --ink-faint a SECOND name for the same job; the two were
within dL 4 of each other and no rule ever
told them apart
--cyan -> gone it was only ever the link colour, and R3.11
says a link takes --ink and an underline
--amber -> --ink / it painted eight headings, the product mark
--ink-body and a selected row. R3.3 reserves amber for
"unexplained or unresolved"; a section title
is neither, and eight permanent amber
headings are what makes the ONE amber thing
on the page stop working (R3.13)
--amber-dim -> --line-strong it was a RULE, not a warning
--withheld -> --warn the one genuine survivor: a value that was
filed and suppressed
--recv -> --series-1 receipts, and see the R3.4 note below —
--deliv -> --series-3 these now paint MARKS, never text
--stock -> --series-6 matching hub_sd's stock-draw column
--mono -> --font-data
DELIVERIES WAS --series-4 IN THAT MAP UNTIL WP5. The re-registered ramp put
slot 4 at H 251.0, 1.5 degrees from slot 1 — so receipts and deliveries would
have been two LIGHTNESSES of one blue, which encodes rank, not category. It
moved to --series-3 (brick, dH 140.8 light / 140.3 dark from receipts), which
is the only slot that also clears --warn and --accent-measured, both of which
appear on this page. The full arithmetic, and the condition that would force
another move, is in t1_deep.css's header — this page and that one MUST agree,
because a reader carries the legend across from one to the other.
R3.4, AND WHY THREE COLUMNS LOST THEIR COLOUR. `.kv .v.recv`, `.kv .v.deliv`
and the three `
` sites in t1_atlas.js painted
FIGURES in a series token. That is the case R3.4 names outright: it spends a
hue on every row to say one thing the column head can say once, and it drags
the six-hue ramp — built for 3:1 against a fill — to the 4.5:1 floor that
governs text. The header carries the swatch now (app.css's --swatch pair);
the figures are --ink like every other figure on the page.
THE LEAFLET CHROME IS RE-THEMED, NOT HIDDEN. The attribution is a licence
condition. Note the `.leaflet-container` prefix on its two rules: leaflet.css
splits this widget across a bare `.leaflet-control-attribution` for `color`
and a `.leaflet-container .leaflet-control-attribution` for `background`, so
an unprefixed override wins the text and silently loses the strip — which is
the half a reader sees. style.css learned this the expensive way on
2026-08-07; the lesson is copied here rather than re-learned. */
*{box-sizing:border-box}
/* font-size ON `body`, NEVER ON `html` — a rem font-size on the ROOT re-bases
every other rem on the page against itself (--t-data is .8rem, so the root
goes 16px -> 12.8 and --t-label follows it down to 8.70px). Found on
hub_sd.css 2026-08-08, where the long version of this note lives; it was the
same single line in six sheets. */
html{background:var(--bg);margin:0}
body{margin:0;background:var(--bg);color:var(--ink);
font-family:var(--font-data);font-size:var(--t-data);
-webkit-font-smoothing:antialiased}
button,select,input{font-family:var(--font-data);font-size:var(--t-data)}
/* R3.11 — a navigation affordance is not a data channel and gets no hue. */
a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
text-decoration-color:var(--line-strong)}
a:hover{text-decoration-color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ---------- top bar ---------- */
.top{display:flex;align-items:center;gap:var(--sp-3);padding:7px var(--sp-3);
border-bottom:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap;
position:sticky;top:0;z-index:1200}
/* The product mark. --pine, the brand token, not --warn: a permanent amber
block in the corner of every screenshot is a page that looks like it is
complaining about itself. --on-pine for the text, NOT --bg: --pine is dark in
BOTH themes, so its foreground must be light in both, and --bg inverts. This
rule measured 14.68:1 on paper and 1.52:1 in dark, where the word inside the
mark disappeared. A pair whose contrast is the invariant needs both halves
named; see tokens.css. */
.top .tag{background:var(--pine);color:var(--on-pine);font-weight:700;
padding:2px 9px;letter-spacing:.06em;border-radius:var(--r-ctl)}
.top h1{font-size:var(--t-data);font-weight:600;margin:0;letter-spacing:.04em}
.top .hint{color:var(--ink-body)}
.top .right{margin-left:auto;display:flex;gap:14px;align-items:center}
.top .stat b{color:var(--ink);font-weight:600}
.top .stat span{color:var(--ink-faint)}
/* ---------- section chrome ---------- */
section{border-bottom:1px solid var(--line)}
.shead{display:flex;align-items:baseline;gap:10px;padding:var(--sp-2) var(--sp-3);
background:var(--surface-2);border-bottom:1px solid var(--line)}
.shead h2{margin:0;font-size:var(--t-label);letter-spacing:var(--label-tracking);
text-transform:uppercase;color:var(--ink-body)}
.shead .sub{color:var(--ink-faint);font-size:var(--t-label)}
.shead .spacer{margin-left:auto}
/* ---------- core: map + relationship board side by side ---------- */
.core{display:grid;grid-template-columns:minmax(0,1fr) 400px;min-height:600px}
@media (max-width:1100px){.core{grid-template-columns:1fr}}
.mapwrap{position:relative;min-width:0;height:640px;background:var(--bg)}
#map{position:absolute;inset:0}
/* Overrides leaflet.css's `.leaflet-container{background:#ddd}` — the colour
behind the tiles, seen on first paint and past the edge of the world. */
.leaflet-container{background:var(--bg);font-family:var(--font-data);
font-size:var(--t-label)}
.leaflet-container .leaflet-control-attribution{background:var(--surface);
color:var(--ink-body);border-top:1px solid var(--line)}
.leaflet-container .leaflet-control-attribution a{background:none;
color:var(--ink)}
.leaflet-bar a{background:var(--surface);color:var(--ink);
border-bottom:1px solid var(--line)}
.leaflet-bar a:hover{background:var(--surface-2);color:var(--ink)}
.leaflet-tooltip{background:var(--surface);border:1px solid var(--line-strong);
color:var(--ink);box-shadow:var(--shadow-panel);font-family:var(--font-data);
font-size:var(--t-label)}
.leaflet-tooltip::before{display:none}
/* max-width sized to the longest label + its count on one line. At 250px the
count wrapped under the label and the checkbox column stopped scanning as a
column, which is the only thing a legend has going for it. */
.legend{position:absolute;left:10px;bottom:26px;z-index:900;
background:var(--surface);border:1px solid var(--line-strong);
border-radius:var(--r-panel);padding:var(--sp-2) 10px;max-width:330px;
box-shadow:var(--shadow-panel)}
.legend h4{margin:0 0 5px;font-size:var(--t-label);
letter-spacing:var(--label-tracking);color:var(--ink-faint);
text-transform:uppercase}
.legend h4:not(:first-child){margin-top:var(--sp-2)}
.legend label,.legend .key{display:flex;align-items:center;gap:6px;padding:1px 0;
white-space:nowrap}
.legend label{cursor:pointer}
/* A .key row carries no checkbox, so without this it would sit one control to
the left of the toggles above it and read as a separate list rather than as
the same list's un-toggleable half. The indent is the checkbox's own width. */
.legend .key{padding-left:19px}
/* THE SWATCH IS AN