/* web/t1_explorer.html — the movers board and the filer drill-down.
---------------------------------------------------------------------------
Kept as its own file rather than an extension of t1_deep.css: that page is a
map plus a side panel and shares no structural class with this one, and a
shared stylesheet would mean a tweak here silently moving the map.
---------------------------------------------------------------------------
WP4.3, 2026-08-08 — THE PRIVATE PALETTE IS GONE (15 declarations, 50
literals). It opened with a paragraph asserting "CONTRAST IS MEASURED, NOT
EYEBALLED", which was true of the numbers and beside the point: they were
measured against a --bg this file declared for itself, so every ratio held in
dark and none of them existed in light. The page rendered a black terminal
next to a paper-white map. The ratios now come from tokens.css, where they
are measured against BOTH grounds, and this file states no colour at all.
THE MAP, IN ORDER, of what each retired name became. The interesting entries
are the ones that split, because those names were answering two questions:
--bg, --line, --ink kept: same name, tokens.css's value
--panel -> --surface the raised card and the drawer
--panel2 -> --surface-2 the recessed strip a card sits on
--dim -> --ink-body supporting text
--faint -> --ink-faint captions, table furniture, absence
--off -> DELETED declared, never referenced, in any file
--mono -> --font-data
--cyan -> --series-4 it was only the `new` verdict's colour
--amber -> --ink / it painted TEN permanent things: the product
--ink-body / mark, six section eyebrows, two registration
--pine numbers and the selected view button. R3.3
reserves amber for "unexplained or unresolved",
and ten permanent ambers are exactly what makes
the one real amber on this page stop working
(R3.13)
--moved -> --series-1 the three verdicts that describe a REAL change.
--new -> --series-4 They now paint MARKS only — see R3.4 below
--ceased -> --series-6
--coverage-> --warn the survivor. A delta whose two months are not
both completely filed is a number the archive
manufactured, which is the one thing on this
page that is actually wrong
R3.4, AND WHY THE VERDICT CHIPS LOST THEIR LETTERING. `.chip.v-*` and
`.mv .num` painted TEXT in the verdict colour. That is the case R3.4 names:
it drags a six-hue ramp built for 3:1 against a fill up to the 4.5:1 floor
that governs text, and it says in hue what the chip already says in words.
The chip's letters are --ink-body now and the hue moved to a swatch.
R3.12 BY CONSTRUCTION, WHICH IS THE PART WORTH COPYING. The verdict colour is
declared ONCE, on the row, as --swatch. The chip's ::before swatch and the
delta bar's fill both read that one property. There is no second opinion to
drift — a legend that disagrees with its mark is not reachable from here,
because the legend and the mark are the same declaration.
THE AMBER RIDES ON --swatch, WHICH THE R3.13 SCANNER COULD NOT SEE, so the
scanner was widened rather than the rule bent: tests/test_web_tokens.py's
PAINT_PROP now counts `--swatch` as a painting property, and `blocked` is in
its unhealthy vocabulary. Both changes are in that file's diff, not asserted
here. Amber on this page fires on `.mv.v-blocked`, `.col.blocked`,
`.cell.withheld`, `tr.refused` and `.chip.c-refused` — five selectors, every
one of them naming a state that only exists when something went wrong.
TYPE. R2.2's five sizes replace the eight this file had (16 / 15 / 13 / 12.5
/ 12 / 11.5 / 11 / 10.5px). The old header promised "no HTML text under
11px"; the floor is now --t-label at 10.88px, which is the scale's and is
shared with every other page rather than defended here. */
*{box-sizing:border-box}
/* font-size ON `body`, NEVER ON `html` — see the long note in hub_sd.css, where
this was found. A rem font-size on the ROOT element re-bases every other rem
on the page against itself: --t-data is .8rem, so the root went 16px -> 12.8,
and --t-label then resolved to 8.70px rather than the 10.88 promised four
lines above. test_contrast_is_measured() checked the TOKEN, which was right;
the page was not, and that is the same class of error as measuring a ratio
against a --bg the file declared for itself. */
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{font-family:var(--font-data);cursor:pointer}
.top{display:flex;align-items:center;gap:14px;padding:6px 10px;
border-bottom:1px solid var(--line);background:var(--surface-2);
flex-wrap:wrap}
/* The product mark. --pine, the brand token — a permanent amber block in the
corner of every screenshot is a page that looks like it is complaining about
itself. --on-pine, not --bg: --pine is dark in BOTH themes, so its foreground
must be light in both, and --bg inverts. See tokens.css. */
.top .tag{background:var(--pine);color:var(--on-pine);font-weight:700;
padding:2px 8px;border-radius:var(--r-ctl)}
.top .hint{color:var(--ink-body);font-size:var(--t-label)}
.top .right{margin-left:auto;color:var(--ink-body);font-size:var(--t-label)}
.views{display:flex;gap:6px}
.views button{background:var(--surface-2);color:var(--ink-body);
border:1px solid var(--line);padding:3px 10px;font-size:var(--t-label);
border-radius:var(--r-ctl)}
/* R3.11 — the selected view is a state, so it inverts the neutral ramp rather
than taking a hue. Inverted rather than merely lightened because this is the
one control on the page and it has to survive a screenshot at 50%. */
.views button.on{background:var(--ink);color:var(--bg);border-color:var(--ink);
font-weight:700}
.loading{padding:40px;color:var(--ink-body);font-size:var(--t-body)}
/* ---------------------------------------------------------------- hero */
.hero{padding:14px var(--sp-4);border-bottom:1px solid var(--line);
background:linear-gradient(180deg,var(--surface-2),var(--bg))}
.hero h1{margin:0 0 var(--sp-2);font-size:var(--t-title);letter-spacing:.02em;
color:var(--ink);font-weight:600}
.hero p{margin:0 0 6px;max-width:96ch;color:var(--ink-body);
font-size:var(--t-data);line-height:1.6}
.hero b{color:var(--ink)}
/* The count of blocked deltas — the page's headline finding, and NOT amber.
R3.13: a number that is large on every healthy render is a measurement, not a
warning, and colouring it would spend the alarm the board below still needs.
It gets weight and size, which is the channel a figure is allowed. */
.hero .big{color:var(--ink);font-weight:700;font-size:var(--t-title)}
/* ---------------------------------------------------------------- board */
/* min(430px,100%): below 430px a fixed minimum overflowed the phone viewport
(430px page at 375, W QA 2026-10-24); the column now takes the width. */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));
gap:0}
.col{border-right:1px solid var(--line);min-width:0}
.col:last-child{border-right:0}
.col > h4{margin:0;padding:var(--sp-2) var(--sp-3);font-size:var(--t-label);
letter-spacing:var(--label-tracking);text-transform:uppercase;font-weight:600;
border-bottom:1px solid var(--line);background:var(--surface-2);
color:var(--ink-body)}
/* R3.13 — one of the two columns is the fault column and only it is amber. The
Movements head stays neutral: it holds three verdicts, so a single colour
there would name whichever one it borrowed from. */
.col.blocked > h4{color:var(--warn)}
.col > h4 span{color:var(--ink-faint);text-transform:none;letter-spacing:0;
font-weight:400;font-size:var(--t-label)}
/* One mover. Grid rather than a table so the delta bar can span the full row
width without a colspan, and so the label can truncate without pushing the
number off screen — the number is the reason the row exists. */
.mv{display:grid;grid-template-columns:1fr auto;gap:2px 10px;
padding:7px var(--sp-3) var(--sp-2);border-bottom:1px solid var(--line);
cursor:pointer;align-items:baseline}
.mv:hover{background:var(--surface-2)}
/* R3.11 — a focus ring is an interaction and takes the neutral ramp. It was
amber, on a page where amber means "the archive could not tell you". */
.mv:focus-visible{outline:2px solid var(--ink);outline-offset:-1px}
.mv .who{grid-column:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;color:var(--ink);font-size:var(--t-data)}
.mv .num{grid-column:2;text-align:right;font-size:var(--t-data);font-weight:600;
white-space:nowrap;font-variant-numeric:tabular-nums}
/* R3.1 — a positive delta is the default state and gets no colour of its own;
the sign is already carried by the true minus. --data-pos resolves to --ink
and is named rather than inlined so the rule lives in tokens.css. */
.mv .num.up{color:var(--data-pos)} .mv .num.dn{color:var(--data-neg)}
/* A blocked delta's number is amber because the number itself is the defect:
it is a real subtraction between two months the archive did not both file. */
.mv .num.blocked{color:var(--warn)}
.mv .sub{grid-column:1/3;color:var(--ink-faint);font-size:var(--t-label);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv .bar{grid-column:1/3;height:3px;background:var(--line);margin-top:3px;
position:relative}
.mv .bar i{position:absolute;top:0;bottom:0;left:0;display:block;
background:var(--swatch)}
/* THE VERDICT, DECLARED ONCE PER ROW. Everything downstream — the delta bar
above and the chip's swatch below — reads --swatch, so the mark and its key
cannot disagree (R3.12). Three series slots for the three verdicts that
describe a real change, and --warn for the one that describes a hole.
THE SLOTS ARE 1/4/6 AND SLOTS 1 AND 4 ARE THE SAME BLUE AT TWO LIGHTNESSES,
which is recorded here rather than left to be re-found. WP5's re-register put
--series-1 at H 249.5 and --series-4 at H 251.0; the pair passes R3.7 only on
dL 0.168 against a 0.15 floor, so "moved" and "new" are told apart by
lightness while "ceased" (teal, dH 42.7) is told apart by hue. For a
two-member categorical pair that would not be acceptable — it is the encoding
for a RANKED quantity — and the T-1 pages moved their receipts/deliveries
pair off slot 4 for exactly that reason (t1_deep.css's header). It stands
here because this is a THREE-member set whose members are also named in
words by the chip beside the swatch, and because every alternative collides
with something already on this page:
--series-2 gold vs --warn dH 1.0 light / 3.3 dark FAIL
and --warn is the fourth verdict in this very block
--series-3 brick vs --data-neg dH 3.4 both themes FAIL
and .mv .num.dn puts --data-neg in the SAME ROW as this swatch, which
is the one arrangement the T-1 ruling names as disqualifying
--series-5 olive vs --accent-measured-ink dH 33.7 light / 33.1 dark FAIL
and --accent-measured is on .cell.complete and .chip.c-closed
That is not four unlucky coincidences, it is the arc arithmetic: R3.15's
permitted hues run 20-265 degrees, the green inside them is reserved for
--accent-measured and the amber for --warn, so a six-slot ramp cannot make
all six mutually hue-separable and the sixth has to be a lightness step.
tokens.css says the same at the ramp and names 2, 3 and 5 as the slots with
slack. If a fourth real-change verdict ever appears, this set stops fitting
and the answer is a seventh slot, not a fourth borrowed one. */
.mv.v-moved {--swatch:var(--series-1);--swatch-on:inline-block}
.mv.v-new {--swatch:var(--series-4);--swatch-on:inline-block}
.mv.v-ceased {--swatch:var(--series-6);--swatch-on:inline-block}
.mv.v-blocked{--swatch:var(--warn);--swatch-on:inline-block}
/* The filer tag and the verdict chip. Both are definitions, so both are
readable text and neither is a colour on its own — a colour-blind reader
loses nothing here. */
.tagf{display:inline-block;padding:0 5px;margin-right:6px;
font-size:var(--t-label);border:1px solid var(--line);color:var(--ink-body);
background:var(--surface-2);border-radius:var(--r-ctl)}
.chip{display:inline-block;padding:0 6px;font-size:var(--t-label);
border:1px solid var(--line-strong);color:var(--ink-body);margin-right:6px;
text-transform:uppercase;letter-spacing:.04em;border-radius:var(--r-ctl)}
/* R3.4 — the hue is a SWATCH beside --ink-body letters, never the letters.
--swatch-on defaults to none, so the closure chips below (which carry an
evidence colour on their own text, legitimately) draw no square. */
.chip::before{content:"";display:var(--swatch-on,none);width:.6em;height:.6em;
margin-right:.4em;background:var(--swatch);border-radius:1px;
vertical-align:baseline}
/* The tail. Everything that makes a mover row a mover row is removed here:
no cursor, no hover, no focus ring, no delta bar, no sign colour on the
number. It is dashed and inset so it reads as the FOOT of the column rather
than as its smallest entry — an aggregate that looks like a row invites the
click that the row cannot answer, because no single filing page vouches for
a sum spanning many filing sections. */
.mv.other{cursor:default;border-bottom:0;border-top:1px dashed var(--line);
background:var(--surface-2);padding-top:9px;--swatch-on:none}
.mv.other:hover{background:var(--surface-2)}
.mv.other .who{color:var(--ink-body)}
.mv.other .num{color:var(--ink-faint);font-weight:500}
.mv.other .tagf{border-style:dashed;color:var(--ink-faint)}
/* The tail's second subtitle is the publisher's reason it cannot be cited, a
full sentence. The mover row truncates its subtitle to one line because a
mover's subtitle is a fixed set of fields; a reason that ellipses away is
not a disclosure. */
.mv.other .sub{white-space:normal;overflow:visible;line-height:1.55}
/* The aggregation rule itself, beneath the board it governs. */
.board + .note{padding:10px var(--sp-4) 0;max-width:96ch}
.empty{padding:18px var(--sp-3);color:var(--ink-faint);font-size:var(--t-data);
line-height:1.6}
/* ---------------------------------------------------------------- filers */
.filers{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:10px;padding:var(--sp-3)}
.card{border:1px solid var(--line);background:var(--surface-2);
padding:10px var(--sp-3);cursor:pointer;border-radius:var(--r-panel)}
/* R3.11 — hover promotes the neutral ramp: the card lifts to --surface and its
rule strengthens. No hue, and nothing moves. */
.card:hover{border-color:var(--line-strong);background:var(--surface)}
.card h5{margin:0 0 2px;font-size:var(--t-data);color:var(--ink);
font-weight:600}
.card .reg{color:var(--ink-faint);font-size:var(--t-label)}
.card .kv{display:flex;justify-content:space-between;gap:10px;
color:var(--ink-body);font-size:var(--t-label);padding:1px 0}
.card .kv b{color:var(--ink);font-weight:500}
/* Filer detail */
.detail{padding:var(--sp-3) var(--sp-4)}
.detail h2{margin:0 0 2px;font-size:var(--t-title);font-weight:600}
.detail .reg{color:var(--ink-faint);font-size:var(--t-label);
margin-bottom:10px}
.sect{margin:var(--sp-4) 0 6px;font-size:var(--t-label);
letter-spacing:var(--label-tracking);text-transform:uppercase;
color:var(--ink-body);font-weight:600;border-top:1px solid var(--line);
padding-top:var(--sp-2)}
.counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:var(--sp-2) var(--sp-5)}
/* A count and its definition are one object. They are laid out as one block
and the definition is never a tooltip: four defensible answers to "how many
facilities" differ here by 29%, and a number whose definition is hidden
behind a hover is a number nobody checks. */
.cnt{border-left:2px solid var(--line);padding:2px 0 4px 9px}
.cnt .n{font-size:var(--t-title);font-weight:600;color:var(--ink)}
.cnt .k{font-size:var(--t-label);color:var(--ink-body);margin-left:7px}
.cnt .d{font-size:var(--t-label);color:var(--ink-faint);line-height:1.5;
margin-top:2px}
.strip{display:flex;flex-wrap:wrap;gap:2px;margin-top:4px}
.cell{width:34px;padding:2px 0;text-align:center;font-size:var(--t-label);
border:1px solid var(--line);background:var(--surface);cursor:pointer}
/* THE STRIP'S FOUR STATUSES, AND ITS KEY, IN ONE RULE EACH (R3.12). The
legend's square and the cell it decodes are the same declaration, so the key
cannot describe a colour the strip has stopped using.
TWO CHANNELS, NOT FOUR RUNGS OF ONE. `nil` and `absent` are the distinction
this whole page exists to protect — an unfiled tank table is not a tank that
emptied — and they were told apart by two dark tints that survive neither a
light ground nor a colour-blind reader. They are now separated by BORDER
STYLE as well as by ink: absence is dashed, everywhere on this page that
absence is drawn, matching the dashed tail row above.
`nil` gets --ink-body rather than the --faint it used to wear, because a
filed zero IS a reading and should read as data. `absent` gets --ink-faint,
which is also --map-no-data — one token, one meaning: geometry we draw but
hold no number for. R3.13 keeps amber off both: absence is not a fault. */
.cell.complete,.legend .key.complete i{color:var(--accent-measured-ink);
border-color:var(--accent-measured)}
.cell.withheld,.legend .key.withheld i{color:var(--warn);
border-color:var(--warn)}
.cell.partial,.legend .key.partial i{color:var(--accent-measured-ink);
border-color:var(--accent-measured);border-style:dashed}
/* The "(missing from detail)" figure: data we do not hold, printed as such. */
td.missing{color:var(--ink-faint);font-style:italic}
.cell.nil,.legend .key.nil i{color:var(--ink-body);background:var(--surface)}
.cell.absent,.legend .key.absent i{color:var(--ink-faint);
background:var(--surface-2);border-style:dashed;
border-color:var(--line-strong)}
/* The strip's key. Each entry is the status WORD plus its count, with the
swatch as a small square beside it — so the colour is a second channel on
top of the text, never the only one. */
.legend{display:flex;flex-wrap:wrap;gap:2px 14px;margin:5px 0 2px;
font-size:var(--t-label);color:var(--ink-body)}
.legend .key{display:inline-flex;align-items:center;gap:5px}
.legend .key i{width:8px;height:8px;display:inline-block;
border:1px solid var(--line);background:var(--surface)}
table.rows{border-collapse:collapse;width:100%;font-size:var(--t-data)}
table.rows th{text-align:left;color:var(--ink-faint);font-weight:400;
border-bottom:1px solid var(--line);padding:4px var(--sp-2) 4px 0;
font-size:var(--t-label)}
table.rows td{padding:3px var(--sp-2) 3px 0;border-bottom:1px solid var(--line);
color:var(--ink-body)}
/* A numeric header aligns with its numbers. This read `td.n` only, so the
figures were right-aligned under left-aligned captions and every value
appeared to sit one column to the right of the one it belonged to —
Plains' 1.58 MMBBL of GROSS receipts rendered under "Net", where it was
also, coincidentally, the correct number. A misaligned table is a mislabelled
table, and this one mislabelled toward a figure that looked right. */
table.rows th.n,
table.rows td.n{text-align:right;color:var(--ink);white-space:nowrap;
font-variant-numeric:tabular-nums}
table.rows th.n{color:var(--ink-faint)}
table.rows tr.click{cursor:pointer}
/* R3.11 — the row lifts to the recessed surface. No hue. */
table.rows tr.click:hover td{background:var(--surface-2)}
/* ------------------------------------------------------------- closure */
/* A cell the archive cannot fill, distinguished from one holding zero. Both
were rendering in the same ink, which is the single confusion this whole
page exists to prevent: an unfiled tank table is not a tank that emptied.
--ink-faint and not --warn, per R3.13: absence is not a fault. */
table.rows td.mute,
table.rows td.n.mute{color:var(--ink-faint)}
/* The reason a window was refused, spanning the row it belongs to. Full
sentence, wrapped, in the amber that every other refusal on this page already
wears — and indented under its own row so it reads as that window's reason
rather than as a footnote to the table. The class is `refused`, not the `why`
it used to be: R3.13 asks that a selector painting amber NAME the state it is
warning about, and "why" names a question. */
table.rows tr.refused td{color:var(--warn);font-size:var(--t-label);
line-height:1.55;padding:0 var(--sp-2) 6px 14px;
border-bottom:1px solid var(--line);white-space:normal}
/* The closure verdict. Two colours for five words: measured green when the
identity was actually evaluated, amber for every kind of refusal. These are
EVIDENCE tokens, not series slots, so they are allowed on text — that is the
difference between this chip and the verdict chips above, which had to give
their hue up to a swatch. The colour carries only the binary a reader acts on
— is there a number here or not — and the word carries which refusal it was,
so nothing is encoded in hue alone. */
.chip.c-closed{color:var(--accent-measured-ink);
border-color:var(--accent-measured)}
.chip.c-refused{color:var(--warn);border-color:var(--warn)}
/* An input's citation, as a button because it opens the source drawer. The
derived residual has no ref of its own; these are its inputs' and they are
the only clickable thing in the row. */
button.tagf{cursor:pointer;font-family:var(--font-data);line-height:1.7;
margin:1px 6px 1px 0}
/* A figure summed over twelve filing sections cites twelve. They wrap inside
their own cell rather than widening the table, because the alternative is
one link standing in for the set — which is the aggregate-wearing-a-citation
problem the tail row already refuses.
58ch, not the 30ch this started at, because 30 wrapped an exposure row's
twelve month-chips onto three lines: 75px per row over 115 rows, a citation
column three times the height of the figures it vouches for. The cap stops
binding past ~58ch — measured — since the table is already at its container
width, so nothing here widens the table; it only stops the cell from being
narrower than the space it already has. */
td.refs{max-width:58ch;line-height:1.9}
/* R3.11 — promotes the rule and the ink, takes no hue. */
button.tagf:hover{border-color:var(--ink-faint);color:var(--ink)}
.back{background:none;border:1px solid var(--line);color:var(--ink-body);
font-size:var(--t-label);padding:2px var(--sp-2);margin-bottom:10px;
border-radius:var(--r-ctl)}
/* ---------------------------------------------------------------- drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);
background:var(--surface);border-left:1px solid var(--line-strong);
overflow:auto;box-shadow:var(--shadow-panel);z-index:20}
.drawer h3{margin:0;padding:9px var(--sp-3);font-size:var(--t-label);
letter-spacing:var(--label-tracking);text-transform:uppercase;
color:var(--ink-body);font-weight:600;border-bottom:1px solid var(--line);
background:var(--surface-2);position:sticky;top:0;display:flex;
align-items:center}
.drawer h3 .x{margin-left:auto;background:none;border:0;color:var(--ink-body);
font-size:var(--t-title);line-height:1;padding:0 2px}
.drawer .in{padding:10px var(--sp-3)}
.src{border:1px solid var(--line);margin-bottom:10px;
border-radius:var(--r-ctl)}
.src h6{margin:0;padding:5px 9px;font-size:var(--t-label);
background:var(--surface-2);color:var(--ink);font-weight:600;
border-bottom:1px solid var(--line);display:flex;
justify-content:space-between;gap:var(--sp-2)}
.src .kv{display:flex;gap:10px;padding:2.5px 9px;font-size:var(--t-data);
border-bottom:1px solid var(--line)}
.src .kv:last-child{border-bottom:0}
.src .kv span:first-child{color:var(--ink-faint);flex:0 0 158px}
.src .kv span:last-child{color:var(--ink);min-width:0;word-break:break-word}
.note{color:var(--ink-body);font-size:var(--t-label);line-height:1.6;
margin:0 0 10px}
.warn{border-left:2px solid var(--warn);padding:6px 0 6px 9px;
color:var(--ink-body);font-size:var(--t-label);line-height:1.6;
margin-bottom:10px}
.warn b{color:var(--warn)}
/* ---------------------------------------------------------------- foot */
.foot{border-top:1px solid var(--line);padding:var(--sp-3) var(--sp-4);
color:var(--ink-body);font-size:var(--t-label);line-height:1.6;
columns:3 320px;column-gap:32px;column-rule:1px solid var(--line);
background:var(--surface-2)}
.foot p{margin:0 0 var(--sp-3);break-inside:avoid}
.foot b{color:var(--ink)}
.foot code{color:var(--ink);font-size:var(--t-label)}