Level 3. One line, one grid, one now-marker: how the price moved. 9 charts on 9 painted screens, 27 grid lines and 9 now-lines. It is the component behind the repository's most quoted sentence, and the sentence is about a colour that was never written. Measured 2026-08-08 in a browser, at 390 and 1280.
This section named a head, axes and a legend and showed none of the three.
Until 2026-08-10 the specimen was .ed-chart-area alone, so
.ed-chart-head, .ed-chart-now and .ed-chart-foot, on
9 screens each, and .ed-legend on 2, had never been drawn anywhere in the
kit. What was standing was the plot without its frame, which is the part of this component
a reader can least infer from a stylesheet.
The whole block now, from event-detail-multi.html: the head with
its live figure, the y-axis, the plot, the x-axis, the legend and the foot with its range rail.
Three things in it are written at run time and are written by hand here: the polylines'
points, the x-axis ticks and the legend's items. The empty
points="" and the empty .ed-xaxis are left exactly as the screen ships
them, because that is what the browser has before the script runs.
The legend's item spent two weeks in the biggest-bets list's stylesheet.
.ed-legend was declared and drawn in chart.css and
.lg-item inside it in bets-table.css, which draws a table of holders
and has nothing to do with a chart. The flat kit settled the question: before the split of
2026-07-26 the three rules sat directly under .ed-legend, beneath a comment reading
multi-outcome chart: one line per outcome + legend. It was a mechanical misfile at the
split, not a home the rule had earned, and it came back on 2026-08-10 with 0 differences over
15,802 element readings on 17 documents.
The swatch takes its colour from the element and
chart.css gives it only its box, because the script that draws the polyline in a
series colour writes the same colour onto the <i> beside the name. A run-time
value is one of the three things the rules allow on the element.
Which is the product's exemption and not this page's, and for three days
this page took it anyway. The ten swatches here carried
style="background:var(--series-N)", hand-typed, the only style=
attributes anywhere in the kit that were neither a datum width nor a photograph. A stand does
not run the product's scripts, so a run-time value written by hand is not a run-time value: it
is a colour in the one place this stand's own stylesheet cannot see it, on the kit that audits
exactly that. _page.css has declared .tk-c-series-1 through
-5 since the colour page was written, they resolve there in both themes, and the
swatches wear them now, the same way the colour page holds no inline
colour at all. The resolved value is unchanged and it was measured rather than assumed:
10 of 10 swatches paint the exact colour --series-N resolves to in their own
themed subtree, and every box is still the 8 x 4 .lg-item i draws. What moved is
which file the colour is written in, which is the whole point: a colour in a
style= attribute is a colour no sweep of this stylesheet can see.
"The chart is ported" was true while it rendered as a black rectangle,
because an SVG with no fill is black. The markup was there, the classes were
there, the port was done, and the one thing nobody had written was the value that decides what an
unfilled shape looks like.
A MISSING VALUE IS A VALUE. It is the root rule of this repository and this component is where it was paid for. Reading the source says ported; reading the page says black.
Which is why every rule in this file names fill or
stroke explicitly, including where the answer is none. The level and
its reason stay on the organisms page.
| at 390 | at 1280 | |
|---|---|---|
| the plot | 268x160 | 548x280 |
| grid lines | 3 per chart, 27 in the product | |
| the now marker | 1 per chart, and it is the only vertical | |
The plot grows in both directions, 268x160 to 548x280, and the line is
a polyline rather than a path, so it scales with the box and needs no second set of
points. The range chips above it are chip's rail face, and the file that
styles them is tabs.
And every grid line here measures 0 tall, which is correct and had to be
checked rather than reported. A horizontal <line> has a geometric bounding
box of 300x0 and its stroke is painted OUTSIDE that box, so a sweep that flags zero-size elements
flags all six of them. Read properly they carry a white stroke at 6 per cent and 1px, and the
now-marker carries brass at 45 per cent. Three components in this kit have had a zero
challenged before it could be written down, and this is the only one where the zero is a
property of the geometry rather than of a hidden host.
This chart was the poorer relative of the one on the feed.
hero.css has drawn a filled chart since the day it was written: an area under the
line with a gradient from the outcome colour to nothing, four quiet grid lines, a legend. The
event detail, which is the screen a person came to in order to read the price, drew a
1.6px polyline in an empty well with three grid lines and nothing else. One product, two
charts, and the better one was on the screen that is only passing through.
The area is the datum here, not ornament. Under a stock price the fill is decoration, because the zero it falls to is arbitrary. Under a probability the line runs 0 to 100 and the area is how much of the way to certain the market has come. It is the hero's own gradient, the outcome colour at .22 falling to 0, anchored to the path's own box so it is brightest just under the line.
One reference line instead of three. 25 and 75 are arithmetic;
50 is the only number on this axis that means something, because above it the market says
yes. Three lines of equal weight said all three were equal. There is one now, dashed, and the
label it needs is the one the y-axis already carries at exactly that height. A floating
Even beside it was built, screenshotted and deleted in the same pass: it was the
same fact written twice, and it was written on top of the line at the one place a reader is
looking.
The dot is a DOM element and not an SVG circle, and the reason is the
viewBox. This chart is viewBox="0 0 300 100" with
preserveAspectRatio="none" drawn into about 900 x 160, so the horizontal and vertical
scales differ by about six: a <circle> renders as an ellipse six times wider
than it is tall. The strokes survive because they carry
vector-effect:non-scaling-stroke, which is a property about strokes and does
nothing for a shape. So the dot stands in .ed-plot and its height is a
percentage, the same datum the odds bar writes as a width.
And the area's fill is a presentation attribute in the markup,
which is the one place this component disagrees with hero.css. That file writes
.hf-area{fill:url(#hfyes)}, and it is safe only because the hero stands once in any
document. This chart stands twice on this page. The kit's convention suffixes every id a
cell redefines together with every url(#id) pointing at it, and a url()
in a stylesheet is not in the cell and cannot be suffixed: the second cell would have filled from
the first cell's gradient. That is exactly the defect the tab panels paid for, ids
suffixed and rules not.
The multi-outcome chart takes the reference line and nothing else. Five lines cannot share one area and have five endpoints, so it keeps the dashed 50 and drops the three grid lines with the rest. Measured: 5 lines, 1 reference, 0 areas, 0 dots, 0 old grid.
The grid line used to be written in the feed's file, and the class map hands a class to the file that writes it with the fewest ancestors, so the arithmetic read the chart as CONTAINING the feed.
Nothing about the rule is a feed decision: the subject of the selector is the chart's own SVG. Ownership is taken from the subject of a selector and not from the whole of it, and this is the case that made the difference visible in the level arithmetic rather than only in a comment.
A wrapper and a caption sat here, described in an earlier report as "the grey-era version of a block the paint replaced": what the wireframe drew before the chart was rebuilt as head, plot, axis and range. They were kept because the grey tree still carried the markup.
Porting that rebuild back into the grey tree took the last element either one could match, and only then could they go. That is the honest order: the rule leaves after the markup, not before it.
Its own width query: 760 DETAIL. One declaration: the plot grows from 160 to 280px tall at DETAIL. The chart's WIDTH is the container's at every rung, so the only thing the rung buys is vertical room, and it buys it at the same pixel where the bet panel takes a third of the horizontal.
Every SVG value is written, including the ones that are none. A shape with no fill is black, and black is a decision nobody took.
A class belongs to the file whose selector it is the SUBJECT of. Not to the file that mentions it, and not to the file that happens to reach it with fewer ancestors.
Never call a chart ported without looking at it. Every class was present and it drew as a black rectangle.
Never write another component's class in this file. One line in the feed's file made the arithmetic say the chart contains the feed.
Never remove a grey-era rule before the grey markup goes. The rule is the only thing holding the old element together until then.
The level and its reason: the organisms
page. The stylesheet: components/chart.css, 100 declarations. The range chips:
chip, styled in tabs. The screen it stands
on: event detail. The rule it is the proof of:
CLAUDE.md, "reading the source is not reading the page".