/* vaults.css: HARVEST. The screener-side sheet for the one section that is not * a measurement. * =========================================================================== * THIS SHEET IMPORTS NOTHING AND CONTAINS NO SECOND DESIGN SYSTEM, which is * the whole reason it needs no firewall. Everything below is built out of the * app's OWN tokens (--ink/--ink2/--ink3, --line, --line2, --panel, --accent, * --bg, --mono, --t-xs/--t-lg, --tr-label), so there is nothing here to * contain and nothing that can leak. No @keyframes are declared either: * keyframe names are document-global and a class prefix cannot scope them. * * THERE IS IMPORTED MARKUP AGAIN AND THIS SHEET STILL DOES NOT TOUCH IT. The * 1,700-line .rg-rescoped port died on 2026-09-04; the section then spent six * days rendering its own reading of the contract; on 2026-09-10 the owner * reversed that and the vault app came back as a capture. The difference from * the port is the whole design: the app's markup and the app's stylesheet now * live inside a SHADOW ROOT, where this sheet cannot reach them and they * cannot reach this page. So there is still nothing here to contain and * nothing here that can leak, and it is the boundary doing that work rather * than a naming convention. tools/capture-exhibit.js owns what goes inside. * * ── WHAT !important IS AND IS NOT FOR ───────────────────────────────────── * instrument.css:343 pins font-size, font-family, font-weight, letter-spacing, * border-radius and box-shadow on `body *:not(svg):not(svg *)` with * !important, and an important declaration beats a normal one at ANY * specificity, so scoping a design system under a class does not contain it. * It does NOT pin colour, border, padding, margin, display, grid or * white-space, which is nearly everything in this file. The rules that do * carry it are claiming a type ROLE and nothing else. * * instrument.css:1883 is the second trap: another blanket sets font-family to * var(--sans) on the same selector, so the default face on the live page is * NOT the mono stack. The one figure in this section wants tabular digits, so * it says `font-family: var(--mono) !important` for itself. * * THREE CONSEQUENCES OF THAT NORMALISER ARE LOAD BEARING HERE: * box-shadow is pinned `none !important`, so nothing in this section can be * lifted with a shadow. Where an edge is needed it is a border or an * outline, which the normaliser does not touch. * border-radius is pinned to 0 on elements, so every edge here is square by * the platform's choice rather than by this sheet's, and this sheet does not * fight it. * --t-lg is declared TWICE, 26px at instrument.css:171 and 30px at :3094. * The live cascade resolves it to 30px, which payoff.css:1227 also records * from a live read. The figure below uses the token; the two intermediate * sizes cannot, and say why at the line. * * FOUR TOKENS THAT LOOK USABLE AND ARE NOT, all four re-confirmed against the * live page rather than taken from payoff.css's word for it: --accent-ink * resolves to the same value as --accent, so anything sitting on an accent * fill takes --bg; --fill-1 and --fill-2 are both transparent, so a ground * painted with either does not exist, and --hover-wash is the one that works. * * ── WHY IT LOADS BEFORE gap.css ─────────────────────────────────────────── * The absence vocabulary is gap.css's and this file must not win over it. The * section draws exactly one absence and it uses gap.css's own .mn-gap-ours * unmodified; the only rule this sheet writes near it is the paragraph box it * sits in. * ─────────────────────────────────────────────────────────────────────────── */ /* ══ 1. THE CONFLICT OF INTEREST ═══════════════════════════════════════════ * The lede is not a standfirst and it is not a description of the product. It * is the disclosure, and it is the first prose on the section because a reader * who reads nothing else has to have read it. --ink2 rather than --ink: it is * a caveat, and every caveat on this site is one ink step under the thing it * qualifies. * ─────────────────────────────────────────────────────────────────────────── */ html body .vl-lede { margin: 14px 0 0; color: var(--ink2); max-width: 84ch; line-height: 1.55; } /* The venue's own name in full ink inside a muted line: the name is the fact, the sentence around it is the caveat. */ html body .vl-lede b { color: var(--ink); font-weight: 600 !important; } /* THE MARK SITS ON THE TEXT BASELINE, AND display:inline-block IS WHAT MAKES IT. style.css:739 sets `.mk { display: block }` for the flex contexts every other surface puts a mark in, so inside a text line the glyph takes a LINE OF ITS OWN and pushes the sentence apart. payoff.css:1250 measured exactly this on .pf-ans-a (the mark rendered above "HYPE" instead of beside it and grew the line from 31.5px to 39.5px) and learn.css:1034 hit it on the tape's asset cell. A DOM check cannot see it. Verified on the PNG here, not inherited on trust. The ink is set HERE rather than inherited: marks.js draws in currentColor, and a mark is not a figure. It must never be able to pick up an ink that means something. */ html body .vl-lede .mk { display: inline-block; color: var(--ink2); vertical-align: -3px; margin-right: 6px; } /* ══ 2. THE DETAIL ROWS ════════════════════════════════════════════════════ * The Trades tape's own machinery, borrowed: .tw-head / .tw-row / .tw-c / * .stk and nothing else. That is the reuse learn.css:902 documents for the * settled tape, and reusing it rather than writing a second row style is the * point: a reader who has learned to read a fill on this site can read a vault * write without learning anything new. * * THE CONTAINER IS .vl-tape AND THE TRACKS ARE ON .vl-tw, one element down, * because an element cannot be queried against itself: a container query * resolves against the nearest ANCESTOR container. Same two-element shape the * live tape uses (.tw wraps .tw-grid) and for the same reason. * * NEITHER .tw-grid NOR .tw IS WORN, and both omissions are load bearing: * .tw-grid controls.css:536, :541 and :547 pin --tape-cols on it with * !important at three container widths, for a seven-to-ten column * table. This one has five columns at its widest. Reading five * tracks out of a ten-track variable is how the band ladder once * collapsed into a single unreadable column that passed an * overflow assertion. * .tw tools.css:1665 hangs height:100% there and it is display:flex, * and a sticky header inside a flex container is trapped in its own * flex line (tools.css:1640 measures -142px of drift). .vl-tape is * a plain block, so .tw-head is in normal flow. * ─────────────────────────────────────────────────────────────────────────── */ html body .vl-tape { container-type: inline-size; display: block; min-width: 0; margin: 26px 0 0; } html body .vl-tw { display: block; min-width: 0; } /* THE COLUMN COUNT CHANGES WITH THE WIDTH AND THE TRACK WIDTHS CARRY NO PIXEL FLOORS. Both halves are the live tape's own rule and both are recorded failures in learn.css: floors chosen so a label could never clip summed to 678px inside a 570px container and pushed the last column off a surface that does not scroll sideways. minmax(0, Nfr) lets a track shrink below its content. EVERY TRACK LIST BELOW MUST MATCH THE HIDE-SET DIRECTLY UNDER IT. Grid places every visible child in order, so a column that is display:none while its track is still in the list shifts every column after it by one. The two are one decision written twice, and they are adjacent so they cannot be edited apart. ASSERT THE TRACK COUNT when testing this, never just "nothing overflowed": a one-track grid never overflows either. FIVE COLUMNS, the owner's set in his order, with the live tape's own proportions for the four it shares (tools.css:1235: age 1, asset 1.9, act 3, venue 1.5) so the two panes line up when a reader flips between them: DOM order age asset what happened expiry venue tier 0 2 0 1 2 base age, what happened 2 tracks 560 + expiry 3 820 + asset, venue 5 THE STEP WHERE A COLUMN APPEARS IS THE STEP WHERE IT HAS TO FIT. There is no 1100 rung here because there is no ninth column to earn one, and a threshold above the width the panel actually renders at is unreachable: the settled tape carried a 1180 step for one commit that no window size could ever reach, because the panel caps the table at 1138px in a 1900px viewport. */ html body .vl-tw { --tape-cols: minmax(0, 1.2fr) minmax(0, 3fr); } html body .vl-tape .vl-c-ast, html body .vl-tape .vl-c-exp, html body .vl-tape .vl-c-ven { display: none; } @container (min-width: 560px) { html body .vl-tw { --tape-cols: minmax(0, 1.1fr) minmax(0, 3fr) minmax(0, 1.9fr); } /* `flex`, NOT `block`. Re-showing a .tw-c as block strips the column flexbox the stacked cells are built on and collapses both lines into inline text, which is the second half of the bug tools.css:1215 records. */ html body .vl-tape .vl-c-exp { display: flex; } } @container (min-width: 820px) { html body .vl-tw { --tape-cols: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 3fr) minmax(0, 1.9fr) minmax(0, 1.5fr); } html body .vl-tape .vl-c-ast, html body .vl-tape .vl-c-ven { display: flex; } } /* ══ 3. THE ABSENCE ════════════════════════════════════════════════════════ * The vault holds nothing, so it has no open written call and the table has no * rows. The header still renders, because a header is a promise about a SHAPE * and not a claim about data: five labelled columns say "when we have written * calls, this is the shape you will read them in", and that is true today. * * THE WORD IS gap.css's AND SO IS THE DRAWING. .mn-gap-ours is the DASHED * variant, which is the one that means "we have not read it" as against * .mn-gap's solid "we looked and it is not published". This gap is OURS: every * write this vault makes settles on a public chain and is readable from its * logs, and drawing it as the venue's would be a false claim about a third * party's transparency. gap.css:82 records that as the worst bug this product * can ship, because it is the product's own thesis run backwards. * * NOT A .tw-row. A one-cell row inside .vl-tw's grid would be placed into the * first track and be a fifth of the width, and a row that spanned every track * would read as a row of DATA, which it is not. It is a paragraph under the * table, which is where the settled tape puts the same kind of sentence. * * THE NEGATIVE MARGIN COMES OFF. gap.css hangs the rule into a card's own * padding with margin-left:-9px so the words stay flush in a column; there is * no column here and no padding to hang into, so the rule would pull the word * out past the table's left edge. Same correction gap.css:138 makes for a * table cell, for the same reason. * ─────────────────────────────────────────────────────────────────────────── */ html body .vl-empty { margin: 10px 0 0; /* 14px, WHICH IS THE TAPE'S OWN INSET AND NOT A ROUND NUMBER: 2px for the transparent left border every .tw-head and .tw-row carries as the slot for the freshness marker, plus the 12px cell inset controls.css:998 pins with !important. Measured on the render, where the sentence started 14px LEFT of the word AGE above it and the tape read as a header strip with an unrelated paragraph under it rather than as one object with an empty body. If the tape ever grows rows, this is the line that has to keep matching them; it is not decoration and it is not a text indent. */ padding: 0 0 0 14px; color: var(--ink2); line-height: 1.55; max-width: 78ch; } /* KEPT THOUGH NOTHING USES IT TODAY, and deliberately. If the write history is ever partial rather than complete, this line goes back to being a stated gap and gap.css's dashed variant is what draws it. The negative margin has to come off here the same way gap.css:138 takes it off inside a table cell: this paragraph has no padding to hang a rule into, so the rule would pull the word out past the table's left edge. */ html body .vl-empty .mn-gap-ours { margin-left: 0; } /* ══ 4. THE DEPOSITOR BLOCK ════════════════════════════════════════════════ * ⚠ THERE IS NO FIGURE AT DISPLAY SIZE ANYWHERE IN THIS SECTION, AND THAT IS A * DECISION. An earlier pass put the vault's balance at 30px mono, which was * right when the section WAS that reading. It is not the section any more: the * payload is the exhibit, a 950px object, and everything under it is the * caveat apparatus. A 30px figure below a 950px object would out-type the * thing it qualifies, which is the inversion payoff.css:1075 sets its own * ceiling to prevent. * * The two candidates were both refused for the same reason. "2,000 WHYPE" at * display size reads as a BALANCE at a glance, and it is a cap; "0" at display * size is the zero congratulating itself, which SPEC section 4.2 names and * cuts. The words carry both, and both stay at body size. * research/v-depositors/SPEC.md section 4.2. Four lines and no object: a * claim, its evidence, the capacity, and the pin the whole section is read at. * * ⚠ THE 130-LINE ROLES LADDER THAT USED TO SIT HERE IS GONE. Four native *
, their bounds paragraph and their source note were built for the * pass where this section RE-STATED the vault instead of showing it. The * exhibit's own roles block does that job now, in the app's own words, and the * two corrections it cannot make about itself are two bullets in .vl-notes. * A ladder of four openable rows under a picture of the same four rows would * be the section disagreeing with itself in public. * * DRAWN AS FOUR RUNGS OF ONE INK LADDER, WHICH IS THE SAME SIGNAL THE * MECHANISM USED AND THE ONLY ONE LEFT AFTER THE OBJECTS WENT. The claim takes * full --ink, the evidence steps to --ink2, the capacity comes back to --ink * because it is the one figure that reads FORWARD, and the pin sits at --ink3 * and --t-xs because it qualifies all three rather than adding a fourth. * * NO HUE, NO FIGURE AT DISPLAY SIZE, NO PROGRESS BAR. A bar under "Room for * 2,000 WHYPE" would draw a zero-width fill, and a zero-width fill is an * absence drawn as a measurement, which is house rule 2 run backwards. The * words carry it. * ─────────────────────────────────────────────────────────────────────────── */ html body .vl-dep { margin: 0; color: var(--ink); line-height: 1.55; max-width: 78ch; } /* THE TITLE IS ON THE WORD THAT IS THE COUNT, and it is a REDUNDANCY rather than a disclosure. gap.css:160's audit stands: nothing trust-bearing may live behind a hover. The population it carries is the same population the sentence under it states in full on screen, so a reader who never hovers loses nothing. The dotted underline is what marks it as hoverable at all; .tw-none uses the same idiom in the tape. */ html body .vl-dep span[title] { border-bottom: 1px dotted var(--line2); cursor: help; } html body .vl-dep-e { margin: 6px 0 0; color: var(--ink2); line-height: 1.55; max-width: 78ch; } /* ── THE PIN ──────────────────────────────────────────────────────────────── The quietest thing in the block on purpose. It qualifies every figure above it rather than adding one of its own, so it takes the smallest type and the dimmest ink in the section, and it carries NO left rule: a rule is how this site marks a caveat, and this is a provenance stamp. */ html body .vl-src { margin: 10px 0 0; color: var(--ink3); font-size: var(--t-xs) !important; line-height: 1.5; max-width: 78ch; } /* ══ 5. THE CAPACITY LINE ══════════════════════════════════════════════════ * The slot's content: what the vault can take, and how much of that is taken. * It is a MEASUREMENT and it is drawn as one, in full ink, not as an absence * and not as a caveat. maxTotalAssets() read on chain at block 45,500,000. * No dollar conversion: this site publishes no price, and separately the mark * oracle returns ok=false, so there is no verified mark to convert with. * ─────────────────────────────────────────────────────────────────────────── */ html body .vl-cap { /* 14px, not the 6px that separates the claim from its evidence. Those two are one statement in two sentences; this is a different question, and the step in spacing is what says so before a word of it is read. */ margin: 14px 0 0; color: var(--ink); line-height: 1.55; max-width: 78ch; } /* ══ 6. THE SLOT ═══════════════════════════════════════════════════════════ * #vl-proof-slot. It held nothing for six days and now holds section 4, and * the ONLY thing this rule decides is where it sits in the section's vertical * rhythm. It draws no border, no min-height and no ground, and it must not * grow any: the block inside it is four sentences, and a box around four * sentences would make an empty vault look like a dashboard of one. * * :empty IS KEPT THOUGH NOTHING TRIPS IT TODAY. The day the depositor block is * pulled, for a rewrite or because consent was withdrawn, the section closes * up rather than leaving 26px of unexplained air. That is one rule against a * whole class of "why is there a gap here" bug. * ─────────────────────────────────────────────────────────────────────────── */ .vl-slot { margin: 26px 0 0; } .vl-slot:empty { margin: 0; } /* ══ 7. THE EXHIBIT AND THE SECTION'S OWN TEXT ═════════════════════════════ * The exhibit is a Shadow DOM host, so nothing in here can style what is * inside it and nothing inside it can reach out. These rules govern the box * and the section's own text around it, which is the only text on this * section we are responsible for. * * ⚠ ONE THING THAT LOOKS LIKE IT BELONGS HERE AND DOES NOT: the exhibit's own * base type and colour. The app declares those on `body`, a shadow root has no * body, and the fix is a rewrite onto a wrapper INSIDE the boundary, done by * tools/capture-exhibit.js. It cannot be done from this sheet at all: a rule * written here would have to reach through the boundary, and the one place it * CAN reach, the host element, is a `body *` that instrument.css:343 already * pins with !important. Do not try to fix a colour inside the exhibit from * this file. There is no selector that works. * ─────────────────────────────────────────────────────────────────────────── */ /* ── THE FRAME ────────────────────────────────────────────────────────────── The live app, same origin, in its embed mode. The height holds the one- vault layout without an inner scrollbar; if the app grows past it the frame scrolls rather than clips, which is visible and therefore fixable. The ground matches the app's own near-black so nothing flashes while it loads. */ .vl-app { display: block; width: 100%; height: 1520px; margin: 18px 0 0; border: 0; border-radius: 0 !important; background: #0c0a08; } /* THE CORRECTIONS THE EXHIBIT CANNOT MAKE ABOUT ITSELF. A list, because they are separate claims and running them into a paragraph invites reading them as one hedge. Marker suppressed: the section has no other bulleted list and a disc here would be the only one in the app. */ .vl-notes { margin: 16px 0 0; padding: 0; list-style: none; } .vl-notes li { position: relative; padding: 0 0 0 16px; margin: 0 0 7px; font-size: 13px !important; line-height: 1.55; color: var(--ink2); max-width: 66ch; } .vl-notes li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: var(--ink3); } /* One surface: the frame carries no border, radius or ground of its own beyond the app's near-black, so the app reads as the section, not as a widget boxed inside it. The seam was the border, not a scrollbar. */ /* ── THE HEADING ROW ───────────────────────────────────────────────────────── * The section heading names the product family; the venue sits beside it as a * chip rather than under it as a sentence. Owner's instruction 2026-09-10: the * old standfirst put a disclosure where a reader expects a subtitle. * ─────────────────────────────────────────────────────────────────────────── */ .vl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; } .vl-head .tl-sec-h { margin: 0; } /* Radius, size, weight and tracking all carry !important because instrument.css:343 pins them on `body *:not(svg)` and that file is not ours to edit. box-shadow is pinned to none there too, so depth is an outline. */ .vl-chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 5px 11px; border: 1px solid var(--line2); border-radius: 999px !important; white-space: nowrap; } .vl-chip i { font-style: normal; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .1em !important; text-transform: uppercase; color: var(--ink3); } .vl-chip b { font-size: 13px !important; font-weight: 600 !important; color: var(--ink2); } @media (max-width: 560px) { /* Wraps under the heading rather than shrinking it. A chip that squeezes the title is worse than a chip on its own line. */ .vl-head { align-items: flex-start; } .vl-chip { padding: 4px 9px; } } /* ── THE NEW BADGE ─────────────────────────────────────────────────────────── * Orange, beside the section name. Two things about the colour are not taste: * --accent-ink resolves to the SAME value as --accent in this app, so text * laid on an accent fill must take --bg or it is orange on orange. Every * other accent-filled control here does the same. * box-shadow is pinned to none by instrument.css:343, so there is no lift to * give this; the fill is the whole emphasis and it does not need one. * Size, weight, tracking and radius all carry !important for the same reason * everything else in this file does: that blanket pins them on * `body *:not(svg)` and instrument.css is not ours to edit. * ─────────────────────────────────────────────────────────────────────────── */ .vl-new { display: inline-block; margin-left: 9px; padding: 2px 6px 3px; border-radius: 4px !important; background: var(--accent); color: var(--bg); font-size: 10px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase; /* The heading sits on a small-caps mono baseline; middle alignment keeps the badge centred on the x-height instead of hanging below it. */ vertical-align: middle; position: relative; top: -1px; }