vantage-md 0.7.0 → 0.8.0

package/dist/directives.css

@@ -0,0 +1,671 @@
+/* vantage-md/styles/directives.css
+ *
+ * Theme layer for the `data-vantage-*` directive attributes emitted by
+ * rehypeVantageDirectives, and for the file-scope chrome the `vantage:`
+ * frontmatter key asks for (`.vantage-chip`, `.vantage-chrome`) — one file
+ * because the badge and the status chip are the same visual object and share
+ * the same rule. Plain CSS on attribute selectors and hand-written classes only:
+ * no Tailwind utilities, no class names computed in JS, no color a document
+ * can name.
+ *
+ * This file must stay UNLAYERED. Every `@tailwindcss/typography` variant
+ * utility flattens to exactly one class of specificity — `:where()` and
+ * `:not(:where(…))` both contribute zero — and all of them sit inside
+ * `@layer utilities`. Unlayered normal declarations outrank every layer
+ * regardless of specificity, which is the only reason these plain attribute
+ * selectors win at all. Wrapping this file in `@layer components` "to be tidy"
+ * makes it lose to every prose utility instead; a test guards that.
+ */
+
+/* ── Tone palette (light) ───────────────────────────────────────────────── */
+:root {
+  --vantage-tone-note-accent: #2563eb;
+  --vantage-tone-note-wash: rgb(37 99 235 / 0.1);
+  --vantage-tone-note-chip: rgb(37 99 235 / 0.12);
+  --vantage-tone-note-ink: #1d4ed8;
+
+  --vantage-tone-tip-accent: #15803d;
+  --vantage-tone-tip-wash: rgb(22 163 74 / 0.1);
+  --vantage-tone-tip-chip: rgb(22 163 74 / 0.12);
+  /* A shade past green-700, the other tones' step: green is so luminous
+     that green-700 over its own chip fill reads 4.39:1, under the 4.5:1 WCAG
+     AA asks of a chip's small text. This reads 5.0:1. */
+  --vantage-tone-tip-ink: #137638;
+
+  --vantage-tone-important-accent: #7c3aed;
+  --vantage-tone-important-wash: rgb(124 58 237 / 0.1);
+  --vantage-tone-important-chip: rgb(124 58 237 / 0.12);
+  --vantage-tone-important-ink: #6d28d9;
+
+  --vantage-tone-warning-accent: #b45309;
+  --vantage-tone-warning-wash: rgb(245 158 11 / 0.13);
+  --vantage-tone-warning-chip: rgb(245 158 11 / 0.14);
+  --vantage-tone-warning-ink: #b45309;
+
+  --vantage-tone-caution-accent: #dc2626;
+  --vantage-tone-caution-wash: rgb(220 38 38 / 0.1);
+  --vantage-tone-caution-chip: rgb(220 38 38 / 0.12);
+  --vantage-tone-caution-ink: #b91c1c;
+
+  --vantage-tone-muted-accent: #64748b;
+  --vantage-tone-muted-wash: rgb(100 116 139 / 0.1);
+  --vantage-tone-muted-chip: rgb(100 116 139 / 0.12);
+  --vantage-tone-muted-ink: #475569;
+
+  /* 5px, not 3px. At 3px the rule was legible when you looked at it and
+     invisible when you scrolled past it — and, worse, three of the six tones
+     were indistinguishable from each other at that width, so the treatment
+     said "marked" without saying *how*. Hue needs area to read as hue. */
+  --vantage-tone-rule-width: 5px;
+  --vantage-tone-rule-offset: 0.75rem;
+  --vantage-tone-run-bleed: 2.5rem;
+  /* An alert draws a real left border rather than a positioned slice, so it
+     gets its own width: it is a single box and has no run to line up with. */
+  --vantage-alert-rule-width: 4px;
+}
+
+/* ── Tone palette (dark) ────────────────────────────────────────────────── */
+/* `.dark` is the app's dark selector (`@custom-variant dark` in the host
+   stylesheet), so a package consumer gets dark tones by toggling that class —
+   the same switch the rest of the app already uses. */
+.dark {
+  --vantage-tone-note-accent: #60a5fa;
+  --vantage-tone-note-wash: rgb(96 165 250 / 0.16);
+  --vantage-tone-note-chip: rgb(59 130 246 / 0.22);
+  --vantage-tone-note-ink: #93c5fd;
+
+  --vantage-tone-tip-accent: #4ade80;
+  --vantage-tone-tip-wash: rgb(74 222 128 / 0.16);
+  --vantage-tone-tip-chip: rgb(34 197 94 / 0.22);
+  --vantage-tone-tip-ink: #86efac;
+
+  --vantage-tone-important-accent: #a78bfa;
+  --vantage-tone-important-wash: rgb(167 139 250 / 0.16);
+  --vantage-tone-important-chip: rgb(139 92 246 / 0.22);
+  --vantage-tone-important-ink: #c4b5fd;
+
+  --vantage-tone-warning-accent: #fbbf24;
+  --vantage-tone-warning-wash: rgb(245 158 11 / 0.16);
+  --vantage-tone-warning-chip: rgb(245 158 11 / 0.18);
+  --vantage-tone-warning-ink: #fcd34d;
+
+  --vantage-tone-caution-accent: #f87171;
+  --vantage-tone-caution-wash: rgb(248 113 113 / 0.16);
+  --vantage-tone-caution-chip: rgb(239 68 68 / 0.2);
+  --vantage-tone-caution-ink: #fca5a5;
+
+  --vantage-tone-muted-accent: #94a3b8;
+  --vantage-tone-muted-wash: rgb(148 163 184 / 0.14);
+  --vantage-tone-muted-chip: rgb(148 163 184 / 0.22);
+  --vantage-tone-muted-ink: #cbd5e1;
+}
+
+/* ── Token → property resolution ────────────────────────────────────────── */
+/* Six rules so every rule below is tone-agnostic. An unrecognized token sets
+   nothing, which is what makes the treatment inert rather than gray (D2). */
+[data-vantage-tone="note"] {
+  --vantage-tone-accent: var(--vantage-tone-note-accent);
+  --vantage-tone-wash: var(--vantage-tone-note-wash);
+  --vantage-tone-chip: var(--vantage-tone-note-chip);
+  --vantage-tone-ink: var(--vantage-tone-note-ink);
+}
+[data-vantage-tone="tip"] {
+  --vantage-tone-accent: var(--vantage-tone-tip-accent);
+  --vantage-tone-wash: var(--vantage-tone-tip-wash);
+  --vantage-tone-chip: var(--vantage-tone-tip-chip);
+  --vantage-tone-ink: var(--vantage-tone-tip-ink);
+}
+[data-vantage-tone="important"] {
+  --vantage-tone-accent: var(--vantage-tone-important-accent);
+  --vantage-tone-wash: var(--vantage-tone-important-wash);
+  --vantage-tone-chip: var(--vantage-tone-important-chip);
+  --vantage-tone-ink: var(--vantage-tone-important-ink);
+}
+[data-vantage-tone="warning"] {
+  --vantage-tone-accent: var(--vantage-tone-warning-accent);
+  --vantage-tone-wash: var(--vantage-tone-warning-wash);
+  --vantage-tone-chip: var(--vantage-tone-warning-chip);
+  --vantage-tone-ink: var(--vantage-tone-warning-ink);
+}
+[data-vantage-tone="caution"] {
+  --vantage-tone-accent: var(--vantage-tone-caution-accent);
+  --vantage-tone-wash: var(--vantage-tone-caution-wash);
+  --vantage-tone-chip: var(--vantage-tone-caution-chip);
+  --vantage-tone-ink: var(--vantage-tone-caution-ink);
+}
+[data-vantage-tone="muted"] {
+  --vantage-tone-accent: var(--vantage-tone-muted-accent);
+  --vantage-tone-wash: var(--vantage-tone-muted-wash);
+  --vantage-tone-chip: var(--vantage-tone-muted-chip);
+  --vantage-tone-ink: var(--vantage-tone-muted-ink);
+}
+
+/* ── Alert → property resolution ────────────────────────────────────────── */
+/* Separate names from `--vantage-tone-*`, and the separation is a bug fix, not
+   tidiness. Custom properties INHERIT. A `> [!CAUTION]` inside
+   `<!-- vantage: section tone=important -->` is both an alert and a stamped run
+   member, so resolving both onto `--vantage-tone-accent` made the alert's kind
+   win on that element — and the section's own vertical rule turned red for the
+   height of the alert, and red again for the 2.5rem it bleeds upward. The
+   section read as three colors and looked broken. Distinct names let one
+   element carry both facts without either overwriting the other.
+
+   The VALUES are still the tone palette's, which is the whole point: an alert
+   and the tone of the same name resolve to the same four properties, so they
+   cannot drift and a new theme is still one custom-property block. */
+[data-vantage-alert="note"] {
+  --vantage-alert-accent: var(--vantage-tone-note-accent);
+  --vantage-alert-wash: var(--vantage-tone-note-wash);
+  --vantage-alert-chip: var(--vantage-tone-note-chip);
+  --vantage-alert-ink: var(--vantage-tone-note-ink);
+}
+[data-vantage-alert="tip"] {
+  --vantage-alert-accent: var(--vantage-tone-tip-accent);
+  --vantage-alert-wash: var(--vantage-tone-tip-wash);
+  --vantage-alert-chip: var(--vantage-tone-tip-chip);
+  --vantage-alert-ink: var(--vantage-tone-tip-ink);
+}
+[data-vantage-alert="important"] {
+  --vantage-alert-accent: var(--vantage-tone-important-accent);
+  --vantage-alert-wash: var(--vantage-tone-important-wash);
+  --vantage-alert-chip: var(--vantage-tone-important-chip);
+  --vantage-alert-ink: var(--vantage-tone-important-ink);
+}
+[data-vantage-alert="warning"] {
+  --vantage-alert-accent: var(--vantage-tone-warning-accent);
+  --vantage-alert-wash: var(--vantage-tone-warning-wash);
+  --vantage-alert-chip: var(--vantage-tone-warning-chip);
+  --vantage-alert-ink: var(--vantage-tone-warning-ink);
+}
+[data-vantage-alert="caution"] {
+  --vantage-alert-accent: var(--vantage-tone-caution-accent);
+  --vantage-alert-wash: var(--vantage-tone-caution-wash);
+  --vantage-alert-chip: var(--vantage-tone-caution-chip);
+  --vantage-alert-ink: var(--vantage-tone-caution-ink);
+}
+
+/* ── The section rule ───────────────────────────────────────────────────── */
+/* Every block in a section is stamped, so a per-element border+background
+   renders one section as N stacked boxes. Instead each member draws a slice of
+   one continuous vertical rule, positioned OUT of its own box (the left gutter
+   is already spoken for by line anchors, review highlights and blockquotes) and bled UPWARD to meet its predecessor. Bleeding only upward is
+   what makes the run terminate exactly at its first and last member without a
+   :last-of-run selector — which is unexpressible here, since members are
+   siblings and review mode inserts comment <div>s between them.
+   `--vantage-tone-heading-gutter` is set by the host app on toned headings
+   only; 1.5em resolves per heading level, which is the only way h2, h3 and p
+   share one x. Measured: the pseudo's computed `left` puts all eight block
+   types on the same pixel — which is a statement about where the slice would
+   go, NOT about whether it paints. Two of the eight clip it away entirely; the
+   escape below is what makes them paint, and a pixel scan is the only thing
+   that can tell the two apart.
+   `background-color` is the longhand, and the accent `var()` has no fallback,
+   on purpose: an unrecognized tone leaves the variable unset, the value is
+   invalid at computed-value time, and the rule computes to `transparent` — D2
+   inertness enforced by the cascade rather than by enumerating six tokens in
+   every selector. A "safety" fallback would paint every typo gray instead. */
+/* `left` on an absolutely-positioned pseudo resolves from the PADDING edge of
+   its containing block, which is the member itself. So a member with a left
+   border of its own has its padding edge pushed inward by that border, and its
+   slice lands that far right of everyone else's — measured at 312 against 308
+   for the rest of a run, which on a 5px slice reads as a break in the rule
+   rather than as a bend. There is no CSS way to read an element's own border
+   width, so each bordered case declares the compensation, and it is declared
+   WHERE THE BORDER IS: this file for the alert's, the host stylesheet for the
+   ones Tailwind gives `blockquote` and `pre`. Same arrangement as
+   `--vantage-tone-heading-gutter`, and a test pins each pair equal.
+
+   The member is the slice's containing block only while it has a box. A
+   member written with `display: contents` has none, and its slice was placed
+   against an ancestor outside the scroll container: measured at the content
+   pane's full height, not scrolling with the document, and on a heading moved
+   across the pane by the heading's font size. The sanitizer refuses that
+   value (`DISPLAY_VALUES` in `sanitize.ts`), and
+   `frontend/e2e/boxless.spec.ts` measures that the slice stays in. */
+[data-vantage-tone] {
+  position: relative;
+}
+[data-vantage-tone]::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(
+    var(--vantage-tone-heading-gutter, 0em) - var(--vantage-tone-rule-offset) -
+      var(--vantage-tone-border-compensation, 0px)
+  );
+  width: var(--vantage-tone-rule-width);
+  border-radius: var(--vantage-tone-rule-width);
+  background-color: var(--vantage-tone-accent);
+  pointer-events: none;
+}
+/* Positive, not `:not([data-vantage-run="start"])`: with the attribute missing
+   entirely (older plugin, newer CSS) this bleeds nothing and the run reads as
+   separate marks — degraded, never a rule hanging above the heading (D3). */
+[data-vantage-tone]:is(
+    [data-vantage-run="middle"],
+    [data-vantage-run="end"]
+  )::before {
+  top: calc(-1 * var(--vantage-tone-run-bleed));
+}
+/* Six of the eight stampable tags compute `overflow: visible`. `pre` and `hr`
+   do not, and both clip the rule to NOTHING: `@tailwindcss/typography` gives
+   `pre` `overflow-x: auto` so wide code scrolls, the UA sheet gives `hr`
+   `overflow: hidden`, and CSS forces a computed `overflow` of `visible` to
+   `auto` on the other axis when its partner is not `visible`. So each of those
+   two is simultaneously the containing block for its own `::before` (the
+   `position: relative` above) and a clip box that discards it at the padding
+   edge on BOTH axes — the member paints neither its own slice nor its own
+   upward bleed. Measured in Chrome over the real Tailwind build of a nine-block
+   run: a three-line fence left one contiguous 100px void where the rule should
+   be, scaling linearly with the fence (168px for a 133px fence), which the
+   fixed 40px bleed can never repair because the void is fence height + 40px.
+   That is exactly the "gap taller than the bleed" `data-vantage-run` exists to
+   prevent, and the section reads as two sections.
+
+   So un-clip the box and re-home the scroller on the `code` child. Wide code
+   still scrolls horizontally — measured in a 600px viewport,
+   `pre.scrollWidth == pre.clientWidth == 518` while `code.scrollWidth` 752 >
+   `code.clientWidth` 486 and `code.scrollLeft` reaches 266 — the scrollbar sits
+   inside the fence's padding instead of on its border edge. The app already
+   sets `display: block` on `.prose pre code`; it is repeated here so the
+   package's own stylesheet and an external consumer get a scrollable box too.
+   Do NOT "tidy this away" as dead CSS: `left` computes identically with and
+   without it, so nothing but a pixel read can see the difference. */
+[data-vantage-tone]:is(pre, hr) {
+  overflow: visible;
+}
+pre[data-vantage-tone] > code {
+  display: block;
+  overflow-x: auto;
+}
+/* An `hr` is 1-2px of box between two 3em margins — 48px, more than the 40px a
+   neighbor can bleed across — so a thematic break inside a section is the one
+   member whose rule also bleeds DOWNWARD, and by its own margin rather than by
+   the shared bleed. 3.5em, not 3em: every other member's 40px bleed overlaps its
+   predecessor's border edge by at least 8px, and an exact fit leaves a 1px
+   hairline to subpixel rounding — measured, before this was 3.5em.
+   Both selectors stay positive for the same D3 reason as the rule above: with
+   `data-vantage-run` absent nothing bleeds, and the `start` member never bleeds
+   up nor the `end` member down, so the run still terminates exactly at its
+   first and last member. */
+hr[data-vantage-tone]:is(
+    [data-vantage-run="middle"],
+    [data-vantage-run="end"]
+  )::before {
+  top: -3.5em;
+}
+hr[data-vantage-tone]:is(
+    [data-vantage-run="start"],
+    [data-vantage-run="middle"]
+  )::before {
+  bottom: -3.5em;
+}
+/* An image or a drawing written as an HTML block of its own is a member like
+   any other — `styleRange` stamps every element in the span — but `img` and
+   `svg` are replaced elements, and a replaced element generates no `::before`
+   at all. So the rule simply stopped beside one. Measured in Chrome over the
+   real build: an 84px hole beside a 92px `<img>`, and 96px beside an 80px bare
+   `<svg>` and the row of images under it, against the 40px a neighbor bleeds.
+   The same drawing inside a `<div>` never had the problem, because there the
+   `<div>` is the member.
+
+   So these two draw their slice as a border image: one flat color, sliced so
+   that only the left edge region has any width, and pushed out of the box by
+   `border-image-outset`, which moves ink without moving layout. Both offsets
+   are the shared ones. They are measured from the border box, which for a
+   member with no border of its own is the padding box every `::before` is
+   measured from, so the slice lands on the same x as the rest of the run and
+   bleeds upward by the same amount. Not a `box-shadow` clipped to a strip: the
+   app rounds every image (`prose-img:rounded-lg`), and a shadow also fills the
+   corners outside the radius, which a clip that keeps the image cannot remove.
+
+   Drawn from the member's own box, the slice is on the rule only if that box
+   starts at the column's edge, and CSS cannot see where a line starts. So it is
+   withheld wherever the box may not. That is an image floated by `align` or
+   `float`, or offset by a `margin` or by `hspace`. `hspace` offsets an image
+   only where no stylesheet resets its margin: in the package's own viewer
+   `hspace="30"` moves it 30px in, but in the app Tailwind's preflight gives
+   every element `margin: 0`, which outranks the attribute, so there the image
+   stays at the edge and loses its slice all the same. A selector cannot see
+   which of the two it is in. It is also an image that comes after inline
+   content, which shares that content's line: in a row of images written on
+   consecutive lines that is every image but the first, whose slice already
+   covers the line. A gap is what these had before; a slice standing in the
+   middle of the column would be a new failure. The elements listed are the
+   inline ones the sanitizer admits, less `br`, which ends the line, and less
+   `svg`, `picture` and `span.katex-display`, which Tailwind's preflight,
+   typography and KaTeX each make a block in the app. And the slice is withheld
+   where the document drew a border, because a border image replaces the border
+   styles on all four sides: it would erase that border, not join it.
+   `frontend/e2e/directive_tone_rule.spec.ts` scans the images, the drawings
+   and the row in pixels. */
+[data-vantage-tone]:is(img, svg) {
+  border-image-source: linear-gradient(
+    var(--vantage-tone-accent),
+    var(--vantage-tone-accent)
+  );
+  border-image-slice: 1;
+  border-image-width: 0 0 0 var(--vantage-tone-rule-width);
+  border-image-outset: 0 0 0 var(--vantage-tone-rule-offset);
+}
+[data-vantage-tone]:is(img, svg):is(
+    [data-vantage-run="middle"],
+    [data-vantage-run="end"]
+  ) {
+  border-image-outset: var(--vantage-tone-run-bleed) 0 0
+    var(--vantage-tone-rule-offset);
+}
+[data-vantage-tone]:is(img, svg):is(
+    [align="left" i],
+    [align="right" i],
+    [hspace],
+    [style*="float" i],
+    [style*="margin" i],
+    [style*="border" i],
+    [border]:not([border="0"])
+  ),
+:is(
+    a,
+    b,
+    code,
+    del,
+    em,
+    i,
+    img,
+    input,
+    ins,
+    kbd,
+    math,
+    q,
+    ruby,
+    s,
+    samp,
+    span:not(.katex-display),
+    strike,
+    strong,
+    sub,
+    sup,
+    tt,
+    var
+  )
+  + img[data-vantage-tone] {
+  border-image-source: none;
+}
+/* A lone block has no run to stripe, so it gets the wash — this is the
+   `<!-- vantage: block tone=important -->` callout. `:where()` holds the
+   selector at one-class specificity on purpose: the review and line-anchor
+   backgrounds are also one class and are declared later in the host
+   stylesheet, so a transient state wins the tie. Writing this as
+   [data-vantage-tone][data-vantage-run="only"] silently eats them. */
+[data-vantage-tone]:where([data-vantage-run="only"]) {
+  background-color: var(--vantage-tone-wash);
+  border-radius: 4px;
+}
+
+/* ── GFM alerts ─────────────────────────────────────────────────────────── */
+/* `> [!WARNING]`, compiled to `data-vantage-alert` by `rehypeVantageAlerts`.
+   Reads the same four per-tone properties the `tone` vocabulary resolves, so an
+   alert and `<!-- vantage: block tone=warning -->` cannot drift apart and a new
+   theme is still one custom-property block.
+
+   Three overrides of `@tailwindcss/typography` are load-bearing, and all three
+   are why an unrendered alert looked as bad as it did rather than merely plain:
+   typography italicizes `blockquote`, grays its text, and draws `open-quote` /
+   `close-quote` around the first paragraph — so a callout rendered as an italic
+   *quotation* whose opening words were the literal `[!WARNING]`. This file is
+   unlayered, which is the only reason these plain attribute selectors beat the
+   `prose-blockquote:*` utilities; see the header. */
+[data-vantage-alert] {
+  /* This file declares the alert's left border, so it owns the compensation
+     that keeps a toned alert's section slice on the run's x. */
+  --vantage-tone-border-compensation: var(--vantage-alert-rule-width);
+  margin: 1.25em 0;
+  padding: 0.75em 1em;
+  border-radius: 6px;
+  border: 1px solid var(--vantage-alert-chip);
+  border-left: var(--vantage-alert-rule-width) solid var(--vantage-alert-accent);
+  background-color: var(--vantage-alert-wash);
+  font-style: normal;
+  /* Typography gives `blockquote` BOTH `font-style: italic` and
+     `font-weight: 500`. Resetting only the italic left every alert's body a
+     half-step bolder than the prose around it — subtle enough to read as "this
+     callout is shouting" without anyone being able to say why, and measured at
+     500 against 400 for an ordinary paragraph. */
+  font-weight: 400;
+  color: inherit;
+  /* Typography sets this on blockquotes to hang the quote mark; an alert has no
+     quote mark and the indent leaves its first line looking broken. */
+  quotes: none;
+}
+[data-vantage-alert] > :first-child {
+  margin-top: 0;
+}
+[data-vantage-alert] > :last-child {
+  margin-bottom: 0;
+}
+/* The generated quotation marks. `content: none` rather than `""` so the
+   pseudo-element is not generated at all — typography also gives it a
+   `margin-right`, which an empty string would keep. */
+[data-vantage-alert] p:first-of-type::before,
+[data-vantage-alert] p:last-of-type::after {
+  content: none;
+}
+/* The title is a real element, not CSS `content`: this plugin runs in the shared
+   pipeline, so every renderer emits it — unlike the collapse caret, which app
+   JS injects and therefore had to stay out of the document's text. A `div`
+   rather than a `p` so it carries no `data-source-line` and cannot become the
+   block a review comment anchors to. */
+.vantage-alert-title {
+  margin: 0 0 0.25em;
+  color: var(--vantage-alert-ink);
+  font-weight: 600;
+  font-style: normal;
+  line-height: 1.5;
+}
+
+/* ── Emphasis ───────────────────────────────────────────────────────────── */
+/* `normal` is the absence of a rule — no declaration needed, and none written.
+   Emphasis modulates the tone rule rather than drawing one of its own, so
+   "what it is" and "how loud" stay separable and the geometry stays in one
+   place. Headings, pre and table are excluded from the weight bump because
+   this stylesheet is unlayered and would otherwise beat
+   `prose-headings:font-semibold` and de-bold a toned heading to 500. */
+[data-vantage-emphasis="strong"] {
+  --vantage-tone-rule-width: 6px;
+}
+[data-vantage-emphasis="strong"]:not(:is(h1, h2, h3, h4, h5, h6, pre, table)) {
+  font-weight: 500;
+}
+/* `quiet` is quiet, not invisible. It used to fade the whole block to 0.72,
+   which on muted gray text put the result close to the page and made a
+   de-emphasized paragraph genuinely hard to read — a legibility loss, which is
+   nearer content loss than decoration, and the same reason print restores it.
+   The volume now lives mostly in the rule width, where it costs no contrast:
+   4px against `normal`'s 5px and `strong`'s 6px. The remaining fade is slight
+   and deliberate. */
+[data-vantage-emphasis="quiet"] {
+  --vantage-tone-rule-width: 4px;
+  opacity: 0.88;
+}
+
+/* ── The chip ───────────────────────────────────────────────────────────── */
+/* One rule, two subjects: the `badge=` chip can only be a pseudo-element
+   (stamp, don't wrap), and the frontmatter status chip is a real element. A
+   pseudo cannot take a class, so the geometry is shared by selector list.
+   Numbers lifted from the app's `.review-status-badge` so the two chips in the
+   product are the same object. */
+.vantage-chip,
+[data-vantage-badge]::after {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: var(--vantage-chip-size, 11px);
+  font-weight: 600;
+  line-height: 1.6;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  vertical-align: 0.12em;
+  color: var(--vantage-chip-ink, var(--vantage-tone-muted-ink));
+  background-color: var(--vantage-chip-wash, var(--vantage-tone-muted-chip));
+}
+/* The badge scales with its heading; the standalone chip stays 11px. */
+[data-vantage-badge]::after {
+  content: attr(data-vantage-badge);
+  margin-left: 0.5em;
+  font-weight: 600;
+  --vantage-chip-size: clamp(10px, 0.5em, 12px);
+}
+[data-vantage-badge="wip"]::after,
+.vantage-chip--note {
+  --vantage-chip-ink: var(--vantage-tone-note-ink);
+  --vantage-chip-wash: var(--vantage-tone-note-chip);
+}
+[data-vantage-badge="done"]::after,
+.vantage-chip--tip {
+  --vantage-chip-ink: var(--vantage-tone-tip-ink);
+  --vantage-chip-wash: var(--vantage-tone-tip-chip);
+}
+[data-vantage-badge="stale"]::after,
+.vantage-chip--warning {
+  --vantage-chip-ink: var(--vantage-tone-warning-ink);
+  --vantage-chip-wash: var(--vantage-tone-warning-chip);
+}
+[data-vantage-badge="blocked"]::after,
+.vantage-chip--caution {
+  --vantage-chip-ink: var(--vantage-tone-caution-ink);
+  --vantage-chip-wash: var(--vantage-tone-caution-chip);
+}
+[data-vantage-badge="draft"]::after,
+.vantage-chip--muted {
+  --vantage-chip-ink: var(--vantage-tone-muted-ink);
+  --vantage-chip-wash: var(--vantage-tone-muted-chip);
+}
+/* No badge word maps onto `important` — the badge vocabulary is five words and
+   the tone vocabulary is six — but a chip consumer names a tone, not a badge,
+   so the modifier exists for all six. One per tone, guarded by a test. */
+.vantage-chip--important {
+  --vantage-chip-ink: var(--vantage-tone-important-ink);
+  --vantage-chip-wash: var(--vantage-tone-important-chip);
+}
+
+/* ── File-scope chrome ──────────────────────────────────────────────────── */
+/* The strip the document status chip sits in — the first element of the content
+   column, above the metadata card (`vantage:` frontmatter, §4.5). A row rather
+   than a bare chip because this is where any later file-scoped chrome joins it,
+   and because the flow needs the gap to the card whether or not a card follows.
+   `text-transform` on `.vantage-chip` above is what makes the chip read as a
+   label while the element's text content stays the lowercase token every other
+   renderer would see (D5). */
+.vantage-chrome {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+/* ── Collapse ───────────────────────────────────────────────────────────── */
+/* The hiding rule is TRIPLE-GATED, and all three gates are load-bearing.
+
+   `[data-vantage-collapse-ready]` is set on the prose container by the toggle
+   JS, *after* it has attached its handlers. A renderer without that JS — the CLI
+   checker's `renderMarkdown` HTML, an external consumer of this stylesheet —
+   never sets it, so nothing is hidden and the whole document reads. Hidden
+   content with no way to reveal it is content loss, not a style (P1/D8).
+
+   `[data-vantage-collapse-armed]` is the same invariant one block at a time, and
+   the container marker is not a substitute for it: "a control exists somewhere in
+   this document" is not "this block can be reopened". The toggle JS arms only the
+   blocks of a group it actually gave a caret, so a group whose toggle is missing
+   or unusable — and a bare `data-vantage-collapsed="true"` written in raw HTML
+   with no group at all, which the sanitizer allows by name and value — stays on
+   the page instead of becoming text nothing can reveal. It is deliberately an
+   attribute no document can write.
+
+   `@media not print` is the third gate, and it is not the same thing as a
+   `display: revert` counter-rule: `not print` means this declaration does not
+   exist in the print stylesheet, so no third rule can defeat it. A collapsed
+   section that printed closed would be content loss on paper (D7).
+
+   Residual, recorded honestly: `none` is one of the sanitizer's
+   `DISPLAY_VALUES`, so a document can still hide its own block with
+   `style="display: none"`. That allowance, not this rule, is the boundary — what
+   these gates guarantee is that nothing *this pipeline* stamps is hidden without
+   a control that opens it. */
+@media not print {
+  [data-vantage-collapse-ready]
+    [data-vantage-collapsed="true"][data-vantage-collapse-armed] {
+    display: none;
+  }
+}
+/* The caret is a REAL element the toggle JS injects, not a third pseudo:
+   `::before` is already the tone rule and `::after` the badge, and one heading
+   can carry all three. It is a `<button>` so that it is keyboard-operable, so
+   that `aria-expanded` sits on an element allowed to carry it, and — measured —
+   because the app's review-mode click handler bails on `button`, which is what
+   keeps a toggle click from also opening the comment popover.
+
+   The glyph is drawn here rather than written into the element's text: the
+   document's text content then stays byte-identical to what every other renderer
+   produces, so no block hash, no clipboard payload and no anchor shifts because
+   the JS ran (D5). Note the heading itself deliberately gets no `cursor:
+   pointer` — it is not the control, and in review mode a click on it belongs to
+   the comment popover. */
+.vantage-collapse-caret {
+  display: inline-block;
+  width: 1em;
+  margin: 0 0.15em 0 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--vantage-tone-muted-accent);
+  font-size: 0.7em;
+  line-height: 1;
+  vertical-align: 0.15em;
+  cursor: pointer;
+  transition: transform 0.15s;
+}
+.vantage-collapse-caret::before {
+  content: "\25be";
+}
+[data-vantage-collapse-toggle] .vantage-collapse-caret[aria-expanded="false"] {
+  transform: rotate(-90deg);
+}
+
+/* ── Print (D7) ─────────────────────────────────────────────────────────── */
+/* Decoration goes to ink-cheap monochrome; nothing informational is dropped.
+   `quiet` is restored to full opacity — a faded print is a legibility loss,
+   which is nearer content loss than decoration. #57606a is the gray the host
+   app's own print block already uses. Tone never sets `color`: the host's
+   print block forces `.prose, .prose *` to #1a1a1a with `!important`, so a
+   tone color would vanish in one of the three renderings D5 covers. */
+@media print {
+  [data-vantage-tone]::before {
+    background-color: #57606a;
+  }
+  /* The same gray for the slice an image or a drawing draws itself. Less
+     specific than the rule that withholds the slice, which still wins here. */
+  [data-vantage-tone]:is(img, svg) {
+    border-image-source: linear-gradient(#57606a, #57606a);
+  }
+  [data-vantage-tone]:where([data-vantage-run="only"]) {
+    background-color: transparent;
+  }
+  [data-vantage-emphasis="quiet"] {
+    opacity: 1;
+  }
+  .vantage-chip,
+  [data-vantage-badge]::after {
+    padding: 0 6px;
+    border: 1px solid #57606a;
+    background-color: transparent;
+    color: #1a1a1a;
+  }
+  /* Every collapsed block prints (the rule above simply does not exist here), so
+     the caret would print as a control that cannot be operated on paper. */
+  .vantage-collapse-caret {
+    display: none;
+  }
+}