@issuegraph/editor 0.4.0 → 0.22.1

package/dist/workspace/styles.js

@@ -58,7 +58,17 @@ export const workspaceStylesheet = `
      squeeze the canvas, which is the one thing fixed positions exist to stop.
      Nothing failed loudly, because an invalid declaration is simply absent.
 
-     40 is a reading measure for a title plus its id, in characters. */
+     40 is a reading measure for a title plus its id, in characters.
+
+     THIS IS THE PRE-17k FALLBACK, and it is deliberately the OLD equal measure. 17k
+     gives 390 / 1fr / 330 for widths at or above 1360 and something else
+     entirely below it: the inspector lifts to an overlay from 1120, and under
+     that the canvas collapses to a strip. Neither of those exists yet, so
+     applying the wide proportions at every width squeezes the canvas instead
+     of collapsing it — measured at 990px, where the canvas fell to 248px. That
+     is the one rule 17k states outright inverted: "the rail never yields, the
+     canvas yields first." Below the breakpoint the old equal tracks are the
+     honest placeholder. */
   grid-template-columns:
     calc(var(--ig-char-width) * 40)
     1fr
@@ -72,6 +82,53 @@ export const workspaceStylesheet = `
   line-height: var(--ig-line-height);
 }
 
+/* THE CONTAINER IS THE MOUNT, NOT THE WORKSPACE, AND THAT IS NOT A DETAIL.
+   A container query CANNOT style the element that establishes the container:
+   put container-type on .ig-workspace and a rule inside @container matching
+   .ig-workspace never fires. It looked right, built clean, and did nothing —
+   measured at 1500px, where the rail and inspector sat at 312/312 while only
+   the canvas 1fr grew. A rule that can never fire is the same class as a guard
+   that can never fail, and the only reason this was caught is that the check
+   compared the TRACKS either side of the breakpoint rather than asking whether
+   the layout "changed".
+
+   .ig-mount is this package's own wrapper around the workspace, so the query
+   has a box to measure that is not the box it restyles. */
+.ig-mount {
+  container-name: ig-workspace;
+  container-type: inline-size;
+}
+
+/* 17k's WIDE LAYOUT, AT THE WIDTH 17k GIVES IT FOR. A container query, not a
+   viewport one, for the reason layer 1's row already answers to: the workspace
+   is a box a host places, and a package that reads the window cannot be
+   dropped into someone else's page.
+
+   1360 IS 17k's OWN NUMBER, not a chosen one — the table's first row reads
+   "at or above 1360: 390 / 1fr / 330, three zones, as 17a".
+
+   THE TWO ZONES ARE NOT THE SAME WIDTH, AND THAT IS THE POINT OF THIS RULE.
+   Both tracks were 40 characters, which is one reading measure applied twice;
+   17a draws 1292 = 390 + 572 + 330, a rail WIDER than the inspector. The rail
+   carries a rank, a title, a meta line and a delta chip on one row while the
+   inspector carries a column of stacked blocks — not the same problem, and
+   sizing them alike shortchanged the surface 17k says must never yield.
+
+   50 AND 42 CHARACTERS, NOT 390px AND 330px, because this file sizes zones in
+   TYPE on purpose: a host that scales its type scales the zones with it, and a
+   fixed track would not. At the shipped --ig-char-width of 7.8 that is 390 and
+   327.6 — the rail exact, the inspector 2.4px under 17k's figure. Stated
+   rather than rounded away; the type-relative property is worth more than the
+   2.4px, and it is the same BYO argument layer 1's row query rests on. */
+@container ig-workspace (width >= 1360px) {
+  .ig-workspace {
+    grid-template-columns:
+      calc(var(--ig-char-width) * 50)
+      1fr
+      calc(var(--ig-char-width) * 42);
+  }
+}
+
 .ig-zone {
   min-width: 0;
   /* Without this a long title in any zone sets that track's minimum width and
@@ -83,6 +140,83 @@ export const workspaceStylesheet = `
   grid-area: header;
 }
 
+/* SECTION 17a's HEADER: what backlog this is, how much of it is encoded, what
+   is wrong with it, how fresh the read is, and the way into a first pass. One
+   row, baseline-aligned, with the first-pass entry pushed to the far end --
+   the frame's only primary action on this surface.
+
+   NOTHING HERE MOVES, for the reason the whole sheet holds: the audit count
+   lives in this row, and section 17d asks for a count that never does. The
+   guard on that is a literal scan over these bytes, comments included, so the
+   words it looks for must not appear even in prose explaining their absence. */
+.ig-workspace-header {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: var(--ig-space);
+  padding: var(--ig-space-tight) var(--ig-space);
+  border-bottom: var(--ig-stroke) solid var(--ig-line);
+}
+
+.ig-workspace-identity {
+  color: var(--ig-text);
+  font-family: var(--ig-font-mono);
+}
+
+/* The adoption pair and the freshness stamp, hoisted out of layer 1's panel
+   header by #135. Quiet, because the row's only loud element is the entry at
+   its far end -- these are orientation, read once and then ignored. */
+.ig-workspace-counts,
+.ig-workspace-freshness {
+  color: var(--ig-text-muted);
+  font-family: var(--ig-font-ui);
+  font-size: var(--ig-font-size-small);
+}
+
+/* THE ONLY TREATMENT STALENESS GETS, and it is why the stamp carries no word
+   for it: the state is on the element, so the sheet says what a stale read
+   looks like and no host has to translate an adjective. */
+.ig-workspace-freshness[data-stale='true'] {
+  color: var(--ig-state-invalid);
+}
+
+/* A CONTROL, NOT A CHIP. It sits inside the stamp because that is what it
+   refreshes, and it takes the button reset the sheet gives every other quiet
+   control on this surface rather than the accent the first-pass entry spends. */
+.ig-workspace-refresh {
+  margin-left: var(--ig-space-tight);
+  font: inherit;
+  color: var(--ig-text);
+  background: var(--ig-surface-2);
+  border: var(--ig-stroke) solid var(--ig-line);
+  border-radius: var(--ig-radius);
+  padding: 0 var(--ig-space-tight);
+  cursor: pointer;
+}
+
+.ig-workspace-refresh:hover {
+  border-color: var(--ig-accent);
+}
+
+.ig-workspace-refresh:focus-visible {
+  outline: var(--ig-focus-ring) solid var(--ig-focus);
+  outline-offset: var(--ig-space-tight);
+}
+
+/* The one place the accent is spent on this surface, on the only action that
+   starts something. The frame draws it as the header's primary control. */
+.ig-workspace-firstpass {
+  margin-left: auto;
+  background: var(--ig-accent);
+  color: var(--ig-bg);
+  border: none;
+  border-radius: var(--ig-radius);
+  padding: var(--ig-space-tight) var(--ig-space);
+  font-family: var(--ig-font-ui);
+  font-size: var(--ig-font-size-small);
+  cursor: pointer;
+}
+
 .ig-zone[data-zone='rail'] {
   grid-area: rail;
   /* The rail scrolls; the window slides underneath. */
@@ -90,31 +224,349 @@ export const workspaceStylesheet = `
   border-right: var(--ig-stroke) solid var(--ig-line);
 }
 
+/* §17a'S RAIL FOOTER, AND IT IS THE ZONE'S LAST ROW. The frame ends the rail
+   with it; that it is PINNED is this sheet's decision, on the reasoning §17c
+   already settled one zone over — the rail is the scroller, mount.ts restores
+   its scrollTop on every redraw, and a fact placed in the scrolled content is a
+   fact you have to go back for. .ig-canvas-toolbar below pins itself against
+   the other edge for exactly this reason and is the shape copied here.
+
+   IT ANCHORS ON A SHORT RAIL TOO, WITH NO FLEX LAYOUT, and this is recorded
+   because it looks as though it should not. A sticky box is offset within its
+   CONTAINING BLOCK to stay in the scrollport, and this zone's containing block
+   is the grid area — the full track height — not the height of the rows inside
+   it. So content shorter than the track still leaves the footer against the
+   bottom edge. Measured: rows 416px in a 445px track, footer flush, no flex
+   rule present. A review round proposed a column wrapper with an expanding row
+   to "push the footer down"; it was built, measured against this, changed
+   nothing, and was removed.
+
+   OPAQUE, BECAUSE IT OCCLUDES. Rows slide under it, so a transparent ground
+   would show the order through the count. That is also why the OPEN LIST IS NOT
+   IN HERE: an element taller than its scrollport cannot stick — the browser
+   clamps it and it scrolls like any other block — so a footer holding 248
+   entries loses the pin exactly when it grows, and covers the whole rail on the
+   way. The deeper reason is the rail's VIRTUALIZATION: railRowAt maps a scroll
+   offset to a row by floor((scrollTop - chrome) / pitch), so content of
+   arbitrary height anywhere in this track makes every offset below it name the
+   wrong row. The list is drawn in the canvas zone, which has no such
+   arithmetic. */
+.ig-rail-footer {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ig-space-tight);
+  padding: var(--ig-space-tight) var(--ig-space);
+  border-top: var(--ig-stroke) solid var(--ig-line);
+  background: var(--ig-bg);
+  font-family: var(--ig-font-mono);
+  font-size: var(--ig-font-size-small);
+  line-height: var(--ig-line-height);
+  color: var(--ig-text-body);
+}
+
+.ig-rail-count {
+  color: var(--ig-text);
+}
+
+.ig-rail-isolated-toggle {
+  font: inherit;
+  color: var(--ig-accent);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.ig-rail-isolated-toggle:focus-visible {
+  outline: var(--ig-focus-ring) solid var(--ig-focus);
+  outline-offset: var(--ig-space-tight);
+}
+
 .ig-zone[data-zone='canvas'] {
   grid-area: canvas;
   overflow: auto;
+  /* THE OVERLAY'S CONTAINING BLOCK. §17d's panel is positioned against THIS
+     zone rather than the workspace, and that is what keeps it off the rail
+     without a magic offset: the rail is a different grid area, so an absolutely
+     positioned child of the canvas cannot reach it however wide it gets.
+     RULINGS.md §3 states the constraint and gives the reason — "judging a
+     finding is largely a question of what it would do to the order, so the
+     order has to stay readable while you judge." */
+  position: relative;
+}
+
+/* §17f'S CAPTION, AND IT IS THE ZONE'S FIRST ROW. Frame 17a puts it above the
+   graph with a rule under it, which is the same shape the header row beside it
+   already has — so it takes that row's padding tokens rather than a bespoke
+   pair, and the two read as one band across the surface.
+
+   THE GROUND, NOT THE CARD COLOUR. --ig-surface is what a RAISED element takes
+   here: a bordered card, a button. This row is a full-bleed structural band, and
+   painting it the panel colour made it read as a card floating on the canvas —
+   which is also what the frame does not draw, and what the comment above it
+   claimed it was not. --ig-bg is the ground .ig-workspace itself paints and the
+   header row inherits, so the two really do match. It has to be OPAQUE either
+   way: the row is sticky over a scrolling graph and must occlude it.
+
+   IT DOES NOT SCROLL WITH THE CANVAS, deliberately. The zone scrolls (above),
+   and a caption saying "6 of 312 shown" that scrolls away is a caption you have
+   to go back for. A sticky position keeps it against the zone's top edge
+   without taking the graph out of the zone's own scroll. */
+.ig-canvas-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--ig-space-tight);
+  padding: var(--ig-space-tight) var(--ig-space);
+  border-bottom: var(--ig-stroke) solid var(--ig-line);
+  position: sticky;
+  top: 0;
+  background: var(--ig-bg);
+  z-index: 1;
+}
+
+/* MONO AND MUTED, because it is a read-out rather than a heading: the frame
+   sets it in the same mono face at the same muted hue as the rail's own footer
+   count, and the two are the same kind of fact. */
+.ig-canvas-caption {
+  margin: 0;
+  font-family: var(--ig-font-mono);
+  font-size: var(--ig-font-size-micro);
+  color: var(--ig-text-muted);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ITS OWN CLASS, NOT LAYER 1'S .ig-count. They look like the same thing and are
+   not: layer 1's is the isolated-issue tally that "sits directly on the panel,
+   outside the padded groups, so it carries the panel's own inset" — 12px 20px of
+   it. Borrowing the name put that inset around two numbers in the middle of a
+   sentence, which is what the frame comparison caught. */
+.ig-canvas-count {
+  color: var(--ig-text-body);
+  font-variant-numeric: tabular-nums;
+}
+
+/* THE CLAUSES DO NOT BREAK INTERNALLY. The caption is one line that ellipsizes
+   as a whole; what must not happen is a label parting from the key it names, or
+   a count parting from the word that says what it counts. */
+.ig-canvas-focus,
+.ig-canvas-shown {
+  white-space: nowrap;
 }
 
+/* PUSHED RIGHT BY ITS OWN MARGIN, NOT BY THE ROW'S JUSTIFICATION. The row's
+   arity changes: off the direct tier the caption is gone and the pill is the
+   only child, and justify-content: space-between puts a lone item at main
+   START — so the pill jumped to the left edge on exactly the tiers a large
+   backlog is always in, which is the state this surface exists to handle well.
+   margin-left: auto is one declaration that is correct at either arity, and it
+   is also what leaves #181's projection toggle a real slot: a control added
+   ahead of the caption lands in the left group without touching this rule.
+
+   THE TINT PAIR, NOT A BARE OUTLINE. The tint fill and tint border tokens
+   exist for exactly this — "a fill of its own hue inside a heavier border of
+   the same hue" — and the frame draws the pill that way. Reaching for the
+   accent directly would give a solid chip that reads as loud as the selection.
+
+   IT NEVER SHRINKS. The caption beside it is the part that may ellipsize; the
+   pill is three or four characters and losing them would leave a coloured stub
+   saying nothing. */
+.ig-edit-mode {
+  flex: 0 0 auto;
+  margin-left: auto;
+  font-family: var(--ig-font-mono);
+  font-size: var(--ig-font-size-pill);
+  letter-spacing: var(--ig-tracking-pill);
+  color: var(--ig-accent);
+  /* THE TINT TOKENS ARE PERCENTAGES, NOT COLOURS — 8% and 30% — so they are only
+     meaningful inside color-mix, which is how every other tinted badge in the
+     package consumes them. Handed straight to background and border-color they
+     are invalid, and an invalid declaration is DROPPED SILENTLY: the pill
+     rendered as bare cyan text with no fill and no border, and no test noticed
+     because nothing here was a hex literal. */
+  background: color-mix(in srgb, var(--ig-accent) var(--ig-tint-fill), transparent);
+  border: var(--ig-stroke) solid
+    color-mix(in srgb, var(--ig-accent) var(--ig-tint-border), transparent);
+  border-radius: var(--ig-radius-small);
+  padding: var(--ig-space-micro) var(--ig-space-snug);
+}
+
+/* ONE SCROLL TRACK, AND EXACTLY ONE SIBLING IS BOUNDED INSIDE IT. This zone
+   holds three: §17d's AUDIT REGION, this column's selection detail, and the
+   .ig-chrome the mount appends. #177 settled how they share it, and the whole
+   of the answer is that the zone stays ONE track while the region alone takes a
+   declared share of it (max-height: 50%, scrolling itself past that).
+   .ig-inspector and .ig-chrome keep this track's own scrolling and declare no
+   share, so neither can be clipped by any height.
+
+   THE BOUNDED SIBLING IS A REGION NOW, AND THAT IS #177'S RULE KEPT RATHER THAN
+   RESTATED. §17d has two surfaces — the findings panel and, since the fourth
+   class moved out of it, the refused block (audit/refused.ts) — and bounding
+   each at half the column lets the two of them take ALL of it, which is worse
+   than the state #177 fixed rather than a smaller version of it. So
+   workspace/render.ts wraps both in .ig-audit-overlay and the share is declared
+   once, here, on the thing the zone actually holds. Neither leaf declares a
+   size of its own; audit/styles.ts says so at both.
+
+   AN EARLIER REVISION OF THIS COMMENT CREDITED audit/styles.ts WITH THE SHARE.
+   It never carried it — that file states in as many words that the panel
+   "DECLARES NO SIZE OF ITS OWN" — and the misattribution is why the fourth
+   sibling nearly arrived unbounded.
+
+   THAT IS A PROPERTY NOW, NOT A LUCKY DEFAULT, and it is what makes the chrome
+   safe. A TWO-PANE VERSION WAS TRIED AND REVERTED: making the zone a flex
+   column with overflow: hidden did give the audit and the selection independent
+   scroll — and it CLIPPED the mount's chrome, a third sibling holding the
+   target search's lower matches, the cancel button and the key legend, all of
+   which lost the scrolling the zone used to give them. The lesson was read as
+   "treat the chrome as a third pane"; it is better read as "do not make the
+   zone a multi-pane layout at all". Bounding one sibling needs no panes.
+
+   WHY THE PANEL IS THE ONE THAT IS BOUNDED. It is the only GLOBAL member of a
+   selection-scoped zone, and renderWorkspace draws it FIRST — so unbounded, it
+   is the one sibling whose length pushes a detail the reader just asked for
+   below the fold. The selection detail and the chrome are both about what the
+   reader is doing; the audit is about the document. §17a fixes the workspace at
+   three zones plus a header, so there is nowhere else ambient for it to be, and
+   a share is what makes it affordable where it has to live. */
 .ig-zone[data-zone='inspector'] {
   grid-area: inspector;
   overflow-y: auto;
   border-left: var(--ig-stroke) solid var(--ig-line);
 }
 
+
+
+/* THE REGION SCROLLS; ITS MEMBERS DO NOT SHRINK. Both leaves declare
+   min-height: 0 — correct for each of them, because each was once the scroll
+   container itself — and in a bounded flex column that is exactly the licence
+   to squeeze them below their content. Measured in a browser rather than
+   reasoned about: with a refusal and five findings the block was laid out 54px
+   tall around 131px of content, and since a leaf's own overflow is visible it
+   PAINTED OVER the panel underneath it. Nothing threw, no test failed, and the
+   markup was correct — the two surfaces were simply drawn on top of each other.
+
+   flex-shrink RATHER THAN A HEIGHT ON EITHER LEAF, which is the same layering
+   the share above follows: how the region's members divide it is a fact about
+   the region, and a leaf that sized itself here would be wrong in every other
+   composition. The region's own max-height is what bounds the pair; this is
+   what makes the overflow it declares actually reachable. */
+.ig-zone[data-zone='canvas'] .ig-audit-overlay > * {
+  flex-shrink: 0;
+}
+
+
+/* §17d'S PANEL, AS AN OVERLAY OVER THE CANVAS.
+
+   RULINGS.md §3: "a transient overlay anchored to the header count, floating
+   over the canvas, 520px wide, dismissed on Escape." It was a child of the
+   INSPECTOR zone until now, sharing that column's height with the selection —
+   §17a fixes three zones and none of them is the audit's, so it had nowhere to
+   go and took a share of the one next to it. At six findings the inspector was
+   pushed below the fold.
+
+   520px IS DESIGN'S NUMBER, not this package's, which is why it is written as
+   one rather than derived from a token. It is expressed in ch units against the
+   type scale so it survives a theme that changes the font size, and clamped to
+   the zone so a narrow canvas cannot push it over the rail — the constraint §3
+   states outright.
+
+   ANCHORED TOP-RIGHT, under the header count it belongs to. The count sits at
+   the right end of the header band, so the panel hangs from that corner and the
+   eye travels the shortest distance from the control to what it opened.
+
+   IT PAINTS OVER THE GRAPH, which is what an overlay is: z-index above the
+   canvas content, and its own raised surface and shadow so the graph beneath
+   reads as behind rather than as a background it is part of.
+
+   --ig-elevation-overlay IS THE TOKEN FOR EXACTLY THIS, and the first draft
+   wrote a literal rgb() instead. The package's own guard caught it, correctly:
+   the theme's two shadows are deliberately the only values carrying a colour,
+   so a host retheming owns them and a literal here would be invisible to that.
+
+   SCOPED TO THE ZONE, and every declaration is in this one rule. Two reasons,
+   and the second is the sheet's own standing rule: an absolutely positioned
+   .ig-audit-overlay outside this zone has no containing block to hang from and
+   would anchor to the page, and the panel is a public export a consumer can
+   render standalone. The same argument the inspector's old share rule made. */
+/* BORDER-BOX, AND IT IS LOAD-BEARING. There IS a universal reset in this
+   codebase and it does not reach here: viewer/src/styles.ts scopes it to
+   .ig-viewer descendants, and this panel is a sibling of the rail's viewer
+   rather than inside it. Without it the cap is measured on the CONTENT box and
+   the panel's own padding and border push the drawn box past it. Nothing looks
+   broken.
+
+   THE PANEL SCROLLS, NOT THE LIST INSIDE IT. Scrolling the list would pin the
+   panel's head, which is the wrong trade twice over. The ambient count 17d
+   fixes is the WORKSPACE HEADER's, drawn in the header grid area and outside
+   this zone entirely - it already never moves, so a second pinned count buys
+   nothing. And the list has zero horizontal padding, so making it the scroll
+   container computes its overflow-x to auto and CLIPS the focus ring on every
+   card's control: an outline is ink overflow, so it is cut rather than
+   scrolled to. Each leaf's own padding gives those rings room. */
+.ig-zone[data-zone='canvas'] .ig-audit-overlay {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+  position: absolute;
+  z-index: 3;
+  top: var(--ig-space-tight);
+  right: var(--ig-space-tight);
+  width: min(calc(var(--ig-char-width) * 66.67), calc(100% - var(--ig-space-tight) * 2));
+  max-height: calc(100% - var(--ig-space-tight) * 2);
+  /* --ig-surface IS THE RAISED ONE. The first draft wrote --ig-raised, which
+     does not exist; the sheet's own guard listed it as a property nothing
+     resolves, and an unresolved custom property is not an error in CSS — it
+     computes to nothing and the panel would have been transparent over the
+     graph. */
+  background: var(--ig-surface);
+  border: var(--ig-stroke) solid var(--ig-line);
+  border-radius: var(--ig-radius);
+  box-shadow: var(--ig-elevation-overlay);
+}
+
 /* THE AMBIENT LEFT-BAR. A 2px gold rule on the affected row and nothing else —
    no fill, no icon, no badge. §17a's whole ask is that encoding errors stay
    visible while you work rather than pulling you out of it.
 
    An inset box-shadow rather than a border: a border changes the row's box and
    would shift every marked row against its neighbours, which is a layout jump
-   the eye reads as movement. The width is the theme's spine, so the bar scales
-   with the rest of the rail. */
-.ig-zone[data-zone='rail'] [data-ig-audit] {
-  box-shadow: inset var(--ig-spine-width) 0 0 0 var(--ig-accent);
-}
+   the eye reads as movement.
+
+   IT DREW A 330px CYAN BLOCK UNTIL #122, and the comment above it — unchanged
+   here because it was right — is how the defect survived. --ig-spine-width is
+   §16b's SPINE CARD WIDTH (330), not a stroke; the sentence "the width is the
+   theme's spine, so the bar scales with the rest of the rail" reads as a
+   scaling argument and is a token mix-up. --ig-accent is the cyan the panel
+   spends once on the number an operator acts on, and it is not the attention
+   colour. This rule is more specific than audit/styles.ts's correct one, so
+   it silently won.
 
-.ig-zone[data-zone='rail'] [data-ig-audit='misleading'] {
-  box-shadow: inset var(--ig-spine-width) 0 0 0 var(--ig-state-invalid);
+   AND ITS TEST PASSED THROUGHOUT. styles.test.ts matched the rule and
+   asserted it EXISTED; it never asserted what the declaration resolves to, so
+   it was green about a string rather than about a property. The test below it
+   now reads the values.
+
+   ONE TREATMENT FOR ALL FOUR SEVERITIES, which is also a correction. §17d
+   names exactly one ambient mark — "a 2px gold left-bar on the affected rail
+   row" — and puts the severity distinction in the findings list, which
+   audit/panel.ts now draws. (It read "which is host-side" until that panel
+   existed; the reasoning is unaffected — the distinction still belongs to the
+   list rather than to this bar — but the list is the package's now.)
+
+   The misleading variant this replaces gave the LEAST urgent
+   severity ("clearing is bookkeeping, not urgency") the alarm colour while
+   every other finding got cyan, inverting the design it came from. */
+.ig-zone[data-zone='rail'] [data-ig-audit] {
+  box-shadow: inset var(--ig-stroke-audit) 0 0 0 var(--ig-edge-serialize-with);
 }
 
 /* THE ROWS OUTSIDE THE WINDOW, AS HEIGHT. The rail scrolls, so without a spacer
@@ -142,9 +594,16 @@ export const workspaceStylesheet = `
    --ig-rail-rows is the count, set inline by the renderer. What remains
    approximate is only VARIABLE row height — a row carrying holds is taller than
    a bare one — so the scrollbar stays proportional rather than exact. Measuring
-   that needs a mount, which this package does not have. */
+   that needs a mount, which this package does not have.
+
+   THE PITCH IS THE FLOOR ALONE NOW. Layer 1's section 16 pass separates its rows
+   with the panel's own hairlines instead of a margin — a row is
+   --ig-row-min-height of content and a hairline, with no gap to add — so the sum
+   this used to take double-counted a gap that is no longer there. The row is
+   content-sized above that floor, which is the same approximation the note above
+   already describes, at a slightly larger typical size. */
 .ig-rail-spacer {
-  height: calc((var(--ig-row-height) + var(--ig-space-tight)) * var(--ig-rail-rows, 0));
+  height: calc(var(--ig-row-min-height) * var(--ig-rail-rows, 0));
 }
 
 .ig-inspector {
@@ -154,12 +613,28 @@ export const workspaceStylesheet = `
   padding: var(--ig-space);
 }
 
-.ig-inspector-empty {
+/* TWO EMPTIES, ONE TREATMENT. "Nothing is selected" and "this issue is related
+   to nothing" are different facts and the panel states each in its own place —
+   but they are the same KIND of statement, a quiet line where content would be,
+   and giving them separate looks would suggest a distinction that is not
+   there. */
+.ig-inspector-empty,
+.ig-inspector-none {
   margin: 0;
   color: var(--ig-text-muted);
   font-size: var(--ig-font-size-small);
 }
 
+/* The panel's heading row: the name at one end, the way out at the other.
+   Baseline-aligned rather than centred, so a heading in caps and a button in
+   sentence case sit on one line rather than on two optical ones. */
+.ig-inspector-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--ig-space-tight);
+}
+
 .ig-inspector-issue {
   display: flex;
   flex-direction: column;
@@ -172,21 +647,6 @@ export const workspaceStylesheet = `
   color: var(--ig-text);
 }
 
-.ig-inspector-key {
-  font-family: var(--ig-font-mono);
-  color: var(--ig-text-muted);
-}
-
-.ig-inspector-position {
-  margin: 0;
-  font-family: var(--ig-font-mono);
-  color: var(--ig-text-muted);
-}
-
-.ig-inspector-position[data-ready='true'] {
-  color: var(--ig-station-ready);
-}
-
 .ig-inspector-holds {
   list-style: none;
   margin: 0;
@@ -232,14 +692,75 @@ export const workspaceStylesheet = `
   gap: var(--ig-space-tight);
 }
 
-.ig-inspector-heading {
+/* §17a PUTS '+ add' ON THE HEADING'S ROW, opposite the heading. The list
+   between them is unbounded, so a control after it drifts down the panel as a
+   subject gains relationships; here its position does not depend on content. */
+.ig-inspector-relationships-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--ig-space-tight);
+}
+
+/* SECTION 17a DRAWS EVERY INSPECTOR HEADING IN CAPS -- WHY RANK 2,
+   RELATIONSHIPS, ADD RELATIONSHIP -- so the treatment is shared rather than
+   spelled per heading. Tracking widens with the caps because letterforms at a
+   small size need it; that is what --ig-tracking-label is for. */
+.ig-inspector-heading,
+.ig-inspector-name,
+.ig-why-rank-heading {
   margin: 0;
   font-size: var(--ig-font-size-small);
   color: var(--ig-text-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--ig-tracking-label);
 }
 
-.ig-inspector-clear {
-  align-self: flex-start;
+/* THE EXPLANATION, SECTION 17a's WHOLE POINT FOR THIS ZONE. The clauses are
+   inline spans so the block reads as one sentence rather than a list of
+   findings: the reader asked one question. */
+.ig-why-rank {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+}
+
+.ig-why-rank-sentence {
+  margin: 0;
+  color: var(--ig-text-body);
+}
+
+/* Each clause keeps a space after it so the sentence does not run together.
+   A margin rather than a literal space in the markup: the text is host-authored
+   and the package does not add characters to it. */
+.ig-why-rank-sentence > * + * {
+  margin-left: var(--ig-space-micro);
+}
+
+
+/* THE PANEL'S TWO QUIET BUTTONS SHARE ONE TREATMENT — clear and cancel. They
+   are the same affordance at two moments (leave this selection, abandon the
+   draft) and drawing them two ways would invent a hierarchy the design does
+   not state.
+
+   '+ add' WAS THE THIRD AND HAS LEFT THE SET, because frame 17a moved it and
+   redrew it: on the relationships header row it is unbordered accent text with
+   the key beside it, not a filled box. That is a hierarchy the design DOES
+   state — a header affordance reads differently from a control in the panel
+   body — so matching it here is following the frame rather than inventing a
+   difference. Its focus ring is still shared, below. The destructive controls are
+   deliberately NOT in this set: a row's '✕' is a glyph in the row's own slot,
+   and the mount's delete button carries its own danger treatment.
+
+   ALIGNMENT IS NOT PART OF THE TREATMENT, and putting it here was a silent
+   contradiction. 'align-self: flex-start' belongs to the two buttons in
+   '.ig-inspector-add', a COLUMN, where without it they stretch to the panel's
+   full width. The clear button sits in '.ig-inspector-head', a baseline row —
+   and 'align-self' beats the container's 'align-items', so it overrode the
+   baseline that rule's own comment says it is there to get. Declared where each
+   is true instead. */
+.ig-inspector-clear,
+.ig-inspector-cancel {
   background: var(--ig-surface-2);
   color: var(--ig-text-body);
   border: var(--ig-stroke) solid var(--ig-line);
@@ -250,11 +771,45 @@ export const workspaceStylesheet = `
   cursor: pointer;
 }
 
-.ig-inspector-clear:focus-visible {
+.ig-inspector-clear:focus-visible,
+.ig-inspector-addbutton:focus-visible,
+.ig-inspector-cancel:focus-visible {
+  /* '+ add' keeps the shared focus ring though it left the shared fill: a
+     focus indicator is an accessibility guarantee, not a visual register. */
   outline: var(--ig-focus-ring) solid var(--ig-focus);
   outline-offset: var(--ig-space-tight);
 }
 
+/* §17a's '+ add', AS THE FRAME DRAWS IT: accent text on the header row, no box.
+   It is a header affordance rather than a control in the panel body, and the
+   frame states that difference by removing the border and the fill rather than
+   by moving it alone. */
+.ig-inspector-addbutton {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--ig-space-micro);
+  background: none;
+  border: none;
+  border-radius: var(--ig-radius);
+  padding: 0;
+  color: var(--ig-accent);
+  font-family: var(--ig-font-ui);
+  font-size: var(--ig-font-size-small);
+  cursor: pointer;
+}
+
+/* THE KEY, QUIETER THAN THE ACT IT NAMES. It is a hint about how to reach the
+   control, not part of the control's label, so it takes the muted tone the
+   panel gives every line that states a fact rather than offering an act.
+   UPPERCASED HERE, NEVER IN THE MARKUP: the binding table stores the lowercase
+   key a press normalizes to, and drawing 'R' is presentation. A second,
+   uppercase copy in the package would be the drift RELATE_KEY exists to end. */
+.ig-inspector-addkey {
+  color: var(--ig-text-muted);
+  font-family: var(--ig-font-mono);
+  text-transform: uppercase;
+}
+
 .ig-relationship-list {
   list-style: none;
   margin: 0;
@@ -264,8 +819,21 @@ export const workspaceStylesheet = `
   gap: var(--ig-space-tight);
 }
 
+/* IT WRAPS RATHER THAN TRUNCATES, which is '.ig-picker-direction''s rule
+   inherited along with §17b's statement. A qualified reference is long —
+   'owner/repo#602' — the inspector is a fixed 40-character track with no
+   horizontal scroll, and a row that cannot wrap pushes its trailing controls
+   out of the zone entirely. A statement whose object is cut off says something
+   other than what the format holds, and a flip a reader cannot reach is the
+   affordance this row exists to offer.
+
+   ON THE ROW AND ON THE STATEMENT BOTH. The row wraps so the slot and the flip
+   drop to a second line rather than overflow; '.ig-relationship-select' below
+   wraps so the reference pair does the same inside it. Wrapping one without the
+   other leaves the other overflowing. */
 .ig-relationship {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--ig-space-tight);
   align-items: baseline;
   padding: var(--ig-space-tight);
@@ -274,37 +842,70 @@ export const workspaceStylesheet = `
   background: var(--ig-surface);
 }
 
-/* Hue by field, from the theme's own edge tokens — the same channel layer 1
-   uses, so a relationship reads the same colour in the list as on the canvas. */
-.ig-relationship[data-edge='blocked-by'] {
+/* HUE BY FIELD, ONCE, FOR EVERY ELEMENT THAT CARRIES 'data-edge'. From the
+   theme's own edge tokens — the same channel layer 1 uses — so a relationship
+   reads the same colour in the row and in the kind-list entry it was chosen
+   from as it does on the canvas. The refusal capsule is deliberately NOT in
+   this set: its whole border is the invalid state's dotted stroke, and a hue on
+   its left edge would overwrite the half of that a reader looks for first.
+
+   WRITTEN PER FIELD RATHER THAN FROM A 'data-edge'-KEYED TOKEN, because CSS has
+   no way to build 'var(--ig-edge-' + attr() + ')': 'attr()' is usable in
+   'content' and nowhere a custom property name is read. Five rules is the cost
+   of that, and the alternative the package rejected is a token per hue set
+   inline by the renderer, which moves a theme value into markup.
+
+   ONE SELECTOR LIST PER FIELD, AND THAT IS THE POINT OF THIS BLOCK. The kind
+   list arrived with a verbatim second copy of these five rules under
+   '.ig-kind-option' — same five fields, same five tokens — under a comment
+   claiming the file should not hold two ways of reading the theme while it
+   held the same way twice. A sixth field is now one line here, not two. */
+.ig-relationship[data-edge='blocked-by'],
+.ig-kind-option[data-edge='blocked-by'] {
   border-left-color: var(--ig-edge-blocked-by);
 }
 
-.ig-relationship[data-edge='duplicate-of'] {
+.ig-relationship[data-edge='duplicate-of'],
+.ig-kind-option[data-edge='duplicate-of'] {
   border-left-color: var(--ig-edge-duplicate-of);
 }
 
-.ig-relationship[data-edge='serialize-with'] {
+.ig-relationship[data-edge='serialize-with'],
+.ig-kind-option[data-edge='serialize-with'] {
   border-left-color: var(--ig-edge-serialize-with);
 }
 
-.ig-relationship[data-edge='together-with'] {
+.ig-relationship[data-edge='together-with'],
+.ig-kind-option[data-edge='together-with'] {
   border-left-color: var(--ig-edge-together-with);
 }
 
-.ig-relationship[data-edge='decomposed-from'] {
+.ig-relationship[data-edge='decomposed-from'],
+.ig-kind-option[data-edge='decomposed-from'] {
   border-left-color: var(--ig-edge-decomposed-from);
 }
 
+/* THE DESCRIPTION'S BOX, WHETHER OR NOT A CONTROL IS WRAPPING IT. A row's head
+   is a button and a phantom capsule's is a plain span -- 'render.ts' withholds
+   the selector for an edge the landed document does not carry -- and the two
+   occupy the row identically: they fill it, so the reason wraps under them
+   rather than squeezing the reference out, and their parts sit on one baseline.
+   Declared once, so the capsule cannot come to sit differently from the row it
+   stands in for. */
+.ig-relationship-select,
+.ig-relationship-name {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ig-space-tight);
+  align-items: baseline;
+}
+
 /* The button fills its row, so the whole relationship is the hit target rather
    than the words inside it. Transparent and borderless: the li already carries
    the border and the hue, and a second box around it would read as two
    controls. */
 .ig-relationship-select {
-  flex: 1;
-  display: flex;
-  gap: var(--ig-space-tight);
-  align-items: baseline;
   background: none;
   border: none;
   padding: 0;
@@ -320,8 +921,15 @@ export const workspaceStylesheet = `
   outline-offset: var(--ig-space-tight);
 }
 
+/* The glyph and its word are one phrase, so they get their own gap rather than
+   inheriting the row's — which spaces the phrase from the reference beside it,
+   a wider relationship. NOT a literal space character in the markup: the word
+   is the vocabulary's and this package does not add characters to it, which is
+   the same rule the why-rank sentence's clauses are spaced by. */
 .ig-relationship-kind {
-  font-family: var(--ig-font-mono);
+  display: inline-flex;
+  gap: var(--ig-space-micro);
+  align-items: baseline;
   color: var(--ig-text-body);
 }
 
@@ -329,5 +937,760 @@ export const workspaceStylesheet = `
   font-family: var(--ig-font-mono);
   color: var(--ig-text-muted);
 }
+
+/* THE RIGHT-HAND SLOT, WHOSE THREE OCCUPANTS ARE EXCLUSIVE. Two of them are
+   statements and one is a control, and they are drawn as such: the state and
+   the inbound marker are quiet label text, the remove is a button.
+   '.ig-relationship-flip' below is NOT one of the three: it sits beside the
+   slot on the selected row, because it is neither a statement about the row nor
+   a destructive act on it. */
+.ig-relationship-state,
+.ig-relationship-inbound {
+  align-self: center;
+  color: var(--ig-text-muted);
+  font-size: var(--ig-font-size-small);
+  text-transform: uppercase;
+  letter-spacing: var(--ig-tracking-label);
+}
+
+/* The selected row names the state the canvas is drawing a halo for, so it
+   takes the focus hue rather than the muted one — one selection, one colour,
+   across the zones. */
+.ig-relationship-state[data-ig-state='selected'] {
+  color: var(--ig-focus);
+}
+
+/* A GLYPH BUTTON, SIZED BY ITS GLYPH. No border and no fill: the row already
+   carries a border, and a second box inside it would read as two controls —
+   the same reasoning '.ig-relationship-select' records. */
+.ig-relationship-remove {
+  align-self: center;
+  background: none;
+  border: none;
+  padding: 0 var(--ig-space-tight);
+  color: var(--ig-text-muted);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.ig-relationship-remove:focus-visible {
+  outline: var(--ig-focus-ring) solid var(--ig-focus);
+  outline-offset: var(--ig-space-tight);
+}
+
+/* §17b's FLIP, AT THE ROW'S END. It is drawn last and needs no margin of its
+   own to get there: '.ig-relationship-select' above carries 'flex: 1', so the
+   statement takes the free space and everything after it is already pushed to
+   the end — which is where frame 17b draws this control. A 'margin-left: auto'
+   here would be inert, and a comment crediting it would be an explanation that
+   outlived the thing it explained.
+
+   A BORDERED CONTROL RATHER THAN THE REMOVE'S BARE GLYPH, which is the frame's
+   own distinction and not decoration: '✕' is a mark a reader recognises without
+   a box, and 'flip' is a word that would otherwise read as part of the sentence
+   it sits beside. The border is what says it is pressable.
+
+   ITS FOCUS RING IS NOT OPTIONAL, and it takes the offset the row's OTHER two
+   controls already use rather than the one it was born with. This rule came
+   from the picker's sheet, where the ring sat a hairline out;
+   '.ig-relationship-select' and '.ig-relationship-remove' share this row and
+   both ring at '--ig-space-tight', and one control ringing tighter than its
+   neighbours reads as a rendering fault rather than as a distinction. This is
+   the control §17b calls the guard against the most common encoding mistake; a
+   keyboard reader who cannot see where they are has it and not its affordance. */
+.ig-relationship-flip {
+  align-self: center;
+  background: var(--ig-surface);
+  color: var(--ig-text-body);
+  border: var(--ig-stroke) solid var(--ig-line);
+  border-radius: var(--ig-radius);
+  padding: 0 var(--ig-space-tight);
+  font-family: inherit;
+  font-size: var(--ig-font-size-small);
+  line-height: inherit;
+  cursor: pointer;
+}
+
+.ig-relationship-flip:focus-visible {
+  outline: var(--ig-focus-ring) solid var(--ig-focus);
+  outline-offset: var(--ig-space-tight);
+}
+
+/* A REFUSED EDIT, IN THE ROW IT WOULD HAVE BEEN. It borrows the ghost the
+   canvas draws for the same state — a dotted edge in the invalid hue — so the
+   line and the row a reader looks between are recognisably one fact.
+   NO OPACITY HERE. 'overlay/grammar.ts' holds the opacity every write state is
+   drawn at, on the record that a second copy would drift; what this sheet
+   contributes is the structure. */
+.ig-relationship-refused {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ig-space-tight);
+  align-items: baseline;
+  padding: var(--ig-space-tight);
+  border: var(--ig-stroke) dotted var(--ig-state-invalid);
+  border-radius: var(--ig-radius);
+  background: var(--ig-surface);
+}
+
+.ig-relationship-reason {
+  color: var(--ig-state-invalid);
+  font-size: var(--ig-font-size-small);
+}
+
+/* A REFUSAL ON A RELATIONSHIP THAT IS STILL THERE. The row stays — it names a
+   real edge and its remove control still works — so this marks it rather than
+   replacing it: the capsule's dotted stroke, and room for the reason to wrap
+   under the row rather than squeezing the reference out of it.
+   BORDER-STYLE ONLY, NOT BORDER-COLOR: the field's hue is on the left edge from
+   the block above, and a shorthand here would overwrite it and take the row's
+   one colour channel away on exactly the rows carrying the most information. */
+.ig-relationship[data-ig-code] {
+  flex-wrap: wrap;
+  border-style: dotted;
+}
+
+/* THE KIND STEP'S OWN BOX — the heading, the numbered list and the cancel that
+   withdraws from it.
+
+   IT NO LONGER HOLDS '+ add'. This box was once "one place the reader returns
+   to", holding whichever of the two create steps was live; frame 17a splits
+   them by zone, putting '+ add' on the relationships header row and leaving the
+   kinds here under a heading of their own. The two steps are still exclusive —
+   'createStep' answers one of them — but they are no longer drawn in one
+   place, so this rule is about the kind step alone. */
+.ig-inspector-add {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+}
+
+/* Sized by its own word rather than stretched across the column — see the
+   quiet-button rule above, which deliberately does not carry this.
+
+   '+ add' IS NO LONGER LISTED HERE, and dropping it was required rather than
+   tidy. This declaration is scoped to '.ig-inspector-add', a COLUMN; '+ add'
+   now sits in the relationships header, a ROW, where 'align-self' beats the
+   container's 'align-items' and would top-align the control against the
+   heading — the exact bug the '.ig-inspector-clear' comment above records
+   having already been fixed once. */
+.ig-inspector-cancel {
+  align-self: flex-start;
+}
+
+/* WHOSE DRAFT THIS IS, drawn only when it is not the panel's subject. Quiet and
+   small, like every other line that states a fact rather than offering an act:
+   it is a caption on the step below it, not a heading over it. The reference
+   inside keeps layer 1's '.ig-id' treatment, so the issue reads the same here
+   as it does in the why-rank sentence. */
+.ig-inspector-source {
+  margin: 0;
+  color: var(--ig-text-muted);
+  font-size: var(--ig-font-size-small);
+}
+
+.ig-kind-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-micro);
+}
+
+/* Full width, so the whole entry is the hit target.
+
+   THE DIGIT IS A CHIP AT THE ROW'S END, which is frame 17a's device and
+   REVERSES the placement #144 shipped. That decision was made in the same §17a
+   pass and with this frame available, so it is overturned on the merits rather
+   than as an oversight: what made the old left-hand column read as a set of
+   KEYS was vertical alignment, which a label long enough to wrap breaks, while
+   a bordered chip carries the key-cap signal on each row by itself and cannot
+   come apart. Reversing a same-campaign decision is called out on the pull
+   request so autnmy/issuegraph#147 rules rather than the implementer.
+
+   CENTRED, NOT BASELINE-ALIGNED. A chip has its own border and padding, so on a
+   baseline it sits low against the glyph and the label; the frame's row centres
+   all three. */
+.ig-kind-option {
+  width: 100%;
+  display: flex;
+  gap: var(--ig-space-tight);
+  align-items: center;
+  background: var(--ig-surface);
+  color: var(--ig-text-body);
+  border: var(--ig-stroke) solid var(--ig-line);
+  border-radius: var(--ig-radius);
+  padding: var(--ig-space-tight);
+  font-family: inherit;
+  font-size: var(--ig-font-size-small);
+  text-align: left;
+  cursor: pointer;
+}
+
+.ig-kind-option:focus-visible {
+  outline: var(--ig-focus-ring) solid var(--ig-focus);
+  outline-offset: var(--ig-space-tight);
+}
+
+/* THE CHIP TAKES THE SLACK BEFORE IT, rather than the label being told to grow.
+   The label is drawn by layer 1's shared 'glyphAndLabel' and carries no class of
+   its own, so selecting it from here means selecting by exclusion — a rule that
+   silently stops matching the day that helper adds an element. An auto margin
+   is stated on the element this rule already owns, needs nothing of the label,
+   and puts the chip at the row's end whatever precedes it. */
+.ig-kind-digit {
+  flex: 0 0 auto;
+  margin-left: auto;
+  border: var(--ig-stroke) solid var(--ig-line);
+  border-radius: var(--ig-radius);
+  padding: 0 var(--ig-space-micro);
+  font-family: var(--ig-font-mono);
+  color: var(--ig-text-muted);
+}
+
+/* §17b's RECOVERY CARDS. An unsettled write the reader can still act on, drawn
+   where they made it.
+   THE HUE COMES FROM THE STATE, through the same custom properties the canvas
+   draws the line with — so a card and the edge it is about are recognisably one
+   fact, and a host retheming the palette moves both at once. The tokens are
+   named per state below rather than set once, because '--ig-state-failed' and
+   '--ig-state-conflict' are different channels and a shared variable here would
+   be a third place the pairing could drift.
+   NO OPACITY, for the reason the refusal capsule states: 'overlay/grammar.ts'
+   holds what each write state is drawn at, and this sheet contributes structure. */
+.ig-recovery-region {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+  margin-top: var(--ig-space);
+}
+
+.ig-recovery-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+}
+
+.ig-recovery {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+  padding: var(--ig-space-tight);
+  border-radius: var(--ig-radius);
+  background: var(--ig-surface);
+  border: var(--ig-stroke) solid var(--ig-line);
+}
+
+/* GHOST + THE ✕ THE CANVAS DRAWS. §17b gives a failed write a ghosted line with
+   a cross terminal; the card carries the same hue so the two read together. */
+.ig-recovery[data-ig-state='failed'] {
+  border-color: var(--ig-state-failed);
+  border-style: dashed;
+}
+
+/* THE GOLD DOUBLE RULE. §17b draws a conflict as a doubled line holding two
+   versions. 'border-style: double' is the card's half of that grammar — the
+   LINE's half is the 'second-version' mark, which needs a position this layer
+   does not have and is issue #102's. */
+.ig-recovery[data-ig-state='conflict'] {
+  border-color: var(--ig-state-conflict);
+  border-style: double;
+  border-width: calc(var(--ig-stroke) * 3);
+}
+
+.ig-recovery-name {
+  margin: 0;
+  font-size: var(--ig-font-size-small);
+  font-weight: 600;
+}
+
+.ig-recovery[data-ig-state='failed'] .ig-recovery-name {
+  color: var(--ig-state-failed);
+}
+
+.ig-recovery[data-ig-state='conflict'] .ig-recovery-name {
+  color: var(--ig-state-conflict);
+}
+
+.ig-recovery-reason,
+.ig-recovery-refresh-error {
+  margin: 0;
+  font-size: var(--ig-font-size-small);
+  color: var(--ig-text-muted);
+}
+
+.ig-recovery-refresh-detail {
+  font-family: var(--ig-font-mono);
+}
+
+/* THE THREE RESOLUTIONS, IN A ROW AND NEVER IN A MENU. §17b lists them as
+   peers; nesting one behind a disclosure would rank them, and the one that
+   would end up hidden is 'view diff' — the one that lets a reader decide
+   between the other two. */
+.ig-recovery-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ig-space-tight);
+}
+
+.ig-recovery-action {
+  background: var(--ig-surface);
+  color: var(--ig-text-body);
+  border: var(--ig-stroke) solid var(--ig-line);
+  border-radius: var(--ig-radius);
+  padding: var(--ig-space-tight);
+  font-family: inherit;
+  font-size: var(--ig-font-size-small);
+  cursor: pointer;
+}
+
+.ig-recovery-action:focus-visible {
+  outline: var(--ig-focus-ring) solid var(--ig-focus);
+  outline-offset: var(--ig-space-tight);
+}
+
+.ig-recovery-action[aria-pressed='true'] {
+  border-color: var(--ig-focus);
+}
+
+/* TWO SIDES, SIDE BY SIDE, AND NOTHING BETWEEN THEM THAT COMBINES THEM. The
+   layout is the design constraint: there is no column for a merged result,
+   because there is no merged result to put in one. */
+.ig-recovery-diff {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+  padding-top: var(--ig-space-tight);
+  border-top: var(--ig-stroke) solid var(--ig-line);
+}
+
+/* ONE SIDE OF THE DIFFERENCE. Stacked rather than columned: at a panel's width
+   two columns give each side about half of an already narrow zone, and a
+   relationship row is a sentence rather than a cell. */
+.ig-recovery-side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+}
+
+.ig-recovery-side-name {
+  margin: 0;
+  font-size: var(--ig-font-size-small);
+  color: var(--ig-text-muted);
+  font-weight: 400;
+}
+
+.ig-recovery-edges,
+.ig-recovery-issues {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+}
+
+.ig-recovery-edge,
+.ig-recovery-issue {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ig-space-tight);
+  align-items: baseline;
+  font-size: var(--ig-font-size-small);
+}
+
+/* BOTH TITLES, NEITHER STRUCK THROUGH. A strike-out would say the old one is
+   gone, which is exactly the judgement this card must not make for the reader. */
+.ig-recovery-was,
+.ig-recovery-now {
+  color: var(--ig-text-muted);
+}
+
+.ig-recovery-now {
+  color: var(--ig-state-conflict);
+}
+
+.ig-recovery-diff-empty {
+  margin: 0;
+  padding-top: var(--ig-space-tight);
+  border-top: var(--ig-stroke) solid var(--ig-line);
+  font-size: var(--ig-font-size-small);
+  color: var(--ig-text-muted);
+}
+
+/* §17c ON THE ROW: the tint, the third column, and the chip in place.
+
+   THE TINT IS DRAWN FROM AN ATTRIBUTE rather than from a class the row is
+   given, which is audit/surface.ts's precedent and its reason: layer 1 owns
+   the row's markup, so layer 2 says WHICH KIND and the stylesheet says what
+   that kind looks like. A row the edit did not touch carries no attribute at
+   all, so none of these rules can reach it, and "unaffected rows are left
+   completely alone" is structural rather than asserted.
+
+   THESE REACH LAYER 1'S OWN CLASSES, and that is a deliberate exception of
+   exactly the shape reevaluate/styles.ts already declares for the greyed rail:
+   only from INSIDE this surface's own root, and only for a state layer 1 does
+   not model. The viewer draws a row; whether the last edit moved that row is a
+   fact only the store knows, so the mark belongs to whoever knows it.
+
+   BOTH ROW SHAPES, because a delta can land on either. A ranked row is an
+   .ig-slot; an excluded one — the shape an issue takes when an edit turns it
+   into a duplicate — is an .ig-footer-row, and it is still navigable, so
+   reevaluateView still places its chip. An earlier revision listed .ig-slot
+   only, so a left row got its chip and its extended name and no ground.
+
+   EVERY VALUE deltaKind CAN EMIT, and that list is readiness, then a
+   movement's direction, then a presence: promoted, newly-held, up, down,
+   entered, left. An earlier revision keyed a rule on 'absent', which is not a
+   value this code has ever produced — presence is 'entered' | 'left' — so that
+   rule matched nothing while looking like the neutral case, and a left row
+   took the READY tint from the bare fallback below. Named exhaustively now
+   rather than defaulted, so a seventh value renders untinted rather than
+   wrong.
+
+   BACKGROUND-COLOR, NEVER THE SHORTHAND. the background shorthand resets background-image
+   to none, and layer 1 draws the HELD row's hatch as a repeating-linear-
+   gradient on exactly that property. These rules are more specific and load
+   after it, so the shorthand silently took the hatch off any row that was both
+   held and changed — which is not a corner: newly-held is the delta that
+   co-occurs with data-held='true' by definition, so the most common overlap
+   lost the held channel entirely. The longhand leaves the gradient alone.
+
+   COLOUR-MIX ON THE TOKEN THE KIND ALREADY NAMES, at the strength layer 1
+   tints its own rows with. Inventing --ig-row-promoted would put a hue in this
+   package that a host retheming the station colours could not move in step,
+   and inventing a percentage would make this tint drift from the unit tint
+   layer 1 draws with --ig-tint-unit. */
+.ig-workspace .ig-slot[data-ig-delta='promoted'],
+.ig-workspace .ig-slot[data-ig-delta='up'],
+.ig-workspace .ig-slot[data-ig-delta='entered'],
+.ig-workspace .ig-footer-row[data-ig-delta='promoted'],
+.ig-workspace .ig-footer-row[data-ig-delta='up'],
+.ig-workspace .ig-footer-row[data-ig-delta='entered'] {
+  background-color: color-mix(in srgb, var(--ig-station-ready) var(--ig-tint-unit), transparent);
+}
+
+.ig-workspace .ig-slot[data-ig-delta='newly-held'],
+.ig-workspace .ig-slot[data-ig-delta='down'],
+.ig-workspace .ig-footer-row[data-ig-delta='newly-held'],
+.ig-workspace .ig-footer-row[data-ig-delta='down'] {
+  background-color: color-mix(in srgb, var(--ig-station-held) var(--ig-tint-unit), transparent);
+}
+
+/* A row the edit took OUT of the order. Neutral rather than held: it is not
+   waiting on anything, it is simply no longer ranked. */
+.ig-workspace .ig-slot[data-ig-delta='left'],
+.ig-workspace .ig-footer-row[data-ig-delta='left'] {
+  background-color: color-mix(in srgb, var(--ig-text-muted) var(--ig-tint-unit), transparent);
+}
+
+/* THE THIRD COLUMN IS WHAT PUTS THE CHIP AT THE ROW'S TRAILING EDGE.
+
+   The frame draws the row as rank, body, chip — three columns, the last
+   sized to its content. Layer 1's own rule is a TWO-column grid, so a chip
+   appended as a third child wrapped onto an implicit second row and sat under
+   the rank. That was visible in the first capture of this pair, and it is why
+   this rule is a column template rather than a margin: in a grid, an auto
+   inline margin cannot move an item that is in the wrong row to begin with.
+
+   ONLY ON A ROW THAT HAS A CHIP, so a row with no delta keeps layer 1's own
+   template untouched. AND ONLY ON .ig-slot: a footer row is not that grid, so
+   naming it here would set a column template on a box that has none. */
+.ig-workspace .ig-slot[data-ig-delta] {
+  grid-template-columns: var(--ig-rank-column) 1fr auto;
+}
+
+/* A FOOTER ROW IS A FLEX BOX, NOT THE THREE-COLUMN GRID.
+
+   A ranked row reaches the trailing edge by the column template above. An
+   excluded or tracker-held row is layer 1's .ig-footer-row — display:flex —
+   so a chip appended to it simply follows the content it was appended after,
+   and the frame puts it at the row's end. An auto inline margin is the flex
+   idiom for that, and it is the right tool HERE for the same reason it was the
+   wrong one on the grid: it moves an item within its line, and on the grid the
+   item was in the wrong line to begin with. */
+.ig-workspace .ig-footer-row > .ig-delta-chip[data-placed] {
+  margin-inline-start: auto;
+}
+
+/* §17c's "write landed · order computing": the PREVIOUS order, held still and
+   greyed one step, with the label saying why.
+
+   THE SAME FILTER, for the reason reevaluate/styles.ts gives where it greys
+   .ig-reevaluate[data-order='held'] .ig-viewer: layer 1 sets color directly on
+   its own descendants, so an inherited colour greys almost nothing, and a list
+   of descendants to override goes stale the first time layer 1 colours
+   something new.
+
+   SCOPED TO THE RAIL ZONE, WHICH THE STANDALONE SURFACE DID NOT HAVE TO BE.
+   There, .ig-viewer is the rail and nothing else. The workspace draws a SECOND
+   viewer in the canvas zone, and greying that one is not a smaller version of
+   the same idea — it is the opposite of what the held state means. What is
+   stale is the ORDER; the canvas is drawing the write states #164 put there,
+   and pending, failed and conflict are told partly in hue. So an in-flight edit
+   would have stripped the colour channel off the very marks that say an edit is
+   in flight. The rail is the only surface whose ranks the store cannot vouch
+   for, so it is the only one greyed. */
+.ig-workspace[data-order='held'] .ig-zone[data-zone='rail'] .ig-viewer {
+  filter: grayscale(1);
+}
+
+/* ── 17k's OTHER TWO LAYOUTS ───────────────────────────────────────────────
+
+   ONE RULE GENERATES ALL THREE, and it is the sentence 17k states outright:
+   THE RAIL NEVER YIELDS. THE CANVAS YIELDS FIRST. THE INSPECTOR YIELDS IN
+   BETWEEN. Because the canvas is already the zone designed to refuse (17f) and
+   the inspector is the edit path that survives without it (17b).
+
+       at or above 1360   390 / 1fr / 330, three zones, as 17a
+       1120 - 1359        rail unchanged; the inspector lifts to a 330 overlay
+                          over the canvas, opened by selection, Escape to dismiss
+       below 1120         rail unchanged; the canvas collapses to a strip that
+                          opens full-width on demand; the inspector returns inline
+
+   Below roughly 860 is section 9 territory and out of scope for the package.
+
+   THE RAIL IS THE SAME 50 CHARACTERS IN ALL THREE. That is the whole rule, and
+   it is the one thing to check when touching this block: measured on the demo
+   at 1440, 1280 and 1000 the rail track reads 390 at every one of them. The
+   layout before this shipped read 390 / 698 / 328 at 1440 and 312 / 632 / 312
+   at 1280 — the rail giving up 78 of its 390 to keep a three-column template
+   alive, which is the rule upside down.
+
+   WHY THESE ARE RANGE CONDITIONS AND NOT max-width/min-width PAIRS. A
+   container's inline size is NOT AN INTEGER. Written as (min-width: 1360px)
+   and (max-width: 1359px), a box measured at 1359.5 satisfies NEITHER — so the
+   base fallback comes back, the rail drops to its 40-character measure, and
+   the one rule 17k states outright is broken at exactly the widths a resize
+   drags through. The same hole sits at 1119.5. 'width < 1360' and
+   'width >= 1360' are complements with nothing between them, which is the
+   property the layouts need and the only reason the syntax changed.
+
+   THE BASE STAYS THE THREE-ZONE TEMPLATE, because a surface rendered WITHOUT a
+   mount has no container at all and no query fires: base-is-narrow would hand
+   a static page a collapsed canvas with a control nothing is listening to. So
+   the wide layout is the floor and the narrow ones are carved off it, widest
+   first.
+
+   THESE SIT AT THE FOOT OF THE SHEET, WHICH IS LOAD-BEARING TWICE. The narrow
+   block must come after the middle one to win where both match; and the zones'
+   own rules have to come first, or a regex looking for the rule that defines
+   .ig-zone[data-zone='inspector'] finds an override instead. That hazard is
+   recorded further up this sheet and has already bitten once in layer 1.
+
+   NEITHER LAYOUT IS THE STYLESHEET'S ALONE. The lifted inspector opens on
+   selection and dismisses on Escape, and the strip opens on a press — so
+   host.ts holds two fields and render.ts publishes them on the surface
+   root as data-canvas and data-inspector. What is NOT in the host is the
+   width: nothing in the package asks how wide it is, per 17k's own note that
+   a package which reads the window cannot be dropped into someone else's
+   settings page. Each attribute is read only by the block that has a use for
+   it, and means nothing at the other widths. */
+
+/* 17k's STRIP CONTROL, RENDERED ALWAYS AND DRAWN ONLY WHEN NARROW.
+   render.ts cannot know its own width, so the button is always in the
+   markup and this is what keeps it off the other two layouts — display:none
+   rather than visibility, so it is not a tab stop where it has nothing to do.
+   The two narrow states size it themselves, below. */
+.ig-workspace .ig-canvas-strip {
+  display: none;
+  box-sizing: border-box;
+  border: var(--ig-stroke) solid var(--ig-line);
+  background: var(--ig-surface);
+  color: var(--ig-text-body);
+  font-family: var(--ig-font-ui);
+  font-size: var(--ig-font-size-small);
+  padding: var(--ig-space-tight);
+  cursor: pointer;
+}
+
+.ig-workspace .ig-canvas-strip:focus-visible {
+  outline: var(--ig-focus-ring) solid var(--ig-focus);
+  outline-offset: var(--ig-space-tight);
+}
+
+/* THE MIDDLE LAYOUT: the inspector lifts, and the rail does not move.
+
+   IT IS PLACED IN THE CANVAS'S GRID AREA, NOT POSITIONED OVER IT. An absolute
+   overlay would need an offset chosen so it clears the rail, and an offset is
+   a number that is right until someone changes a track. A grid area is not:
+   the rail is a DIFFERENT area, so an item placed in the canvas's cannot reach
+   it however wide it gets. Section 17d's audit overlay is positioned on the
+   same argument one surface over, and this is that argument without the
+   position.
+
+   42 CHARACTERS, THE SAME MEASURE THE WIDE LAYOUT GIVES THE INSPECTOR — 17k
+   lifts the panel, it does not resize it. At the shipped --ig-char-width that
+   is 327.6 against 17k's 330, the 2.4 the wide block already accounts for.
+
+   OPAQUE AND RAISED, because it now has the canvas underneath it rather than a
+   border between them. --ig-elevation-overlay is the token for exactly this
+   and --ig-surface is the raised ground; the zone keeps its own border-left
+   from the base rule, which reads as the panel's leading edge. */
+@container ig-workspace (width < 1360px) {
+  .ig-workspace {
+    grid-template-areas:
+      'header header'
+      'rail canvas';
+    grid-template-columns:
+      calc(var(--ig-char-width) * 50)
+      1fr;
+  }
+
+  .ig-workspace .ig-zone[data-zone='inspector'] {
+    grid-area: canvas;
+    justify-self: end;
+    inline-size: calc(var(--ig-char-width) * 42);
+    z-index: 1;
+    background: var(--ig-surface);
+    box-shadow: var(--ig-elevation-overlay);
+  }
+
+  /* OPENED BY SELECTION, DISMISSED ON ESCAPE — 17k's own words, and both
+     halves arrive as this one attribute. render.ts writes 'lifted' only when
+     something is SELECTED and the reader has not dismissed it since, so an
+     empty "nothing selected" card never floats over the canvas. */
+  .ig-workspace[data-inspector='dismissed'] .ig-zone[data-zone='inspector'] {
+    display: none;
+  }
+}
+
+/* THE NARROW LAYOUT: the canvas collapses, the inspector comes back inline,
+   and the rail still does not move.
+
+   THE INSPECTOR IS RESTORED DECLARATION BY DECLARATION rather than by scoping
+   the block above to a band, because the sheet's guard has no band to scope to.
+   Each line here answers one line there, on the same selector so source order
+   settles it — that is the price of single-sided conditions, paid in full and
+   in one place.
+
+   THE STRIP IS 4 CHARACTERS. The canvas is the zone designed to refuse (17f),
+   so what it yields is everything except the handle that brings it back; the
+   inspector takes 1fr, which at 1000 is 550 and at 860 is 418 — both above the
+   330 the wide layout gives it, so the zone that yields in between is not
+   yielding here at all. That is the order the rule names. */
+@container ig-workspace (width < 1120px) {
+  .ig-workspace {
+    grid-template-areas:
+      'header header header'
+      'rail canvas inspector';
+    grid-template-columns:
+      calc(var(--ig-char-width) * 50)
+      calc(var(--ig-char-width) * 4)
+      1fr;
+  }
+
+  .ig-workspace .ig-zone[data-zone='inspector'] {
+    grid-area: inspector;
+    justify-self: stretch;
+    inline-size: auto;
+    z-index: auto;
+    background: none;
+    box-shadow: none;
+  }
+
+  /* THE DISMISSAL MEANS NOTHING HERE, and saying so is the undo of the middle
+     block's only conditional rule. The inspector is a zone again, so there is
+     no overlay to have dismissed. */
+  .ig-workspace[data-inspector='dismissed'] .ig-zone[data-zone='inspector'] {
+    display: block;
+  }
+
+  .ig-workspace[data-canvas='strip'] .ig-canvas-strip {
+    display: block;
+    writing-mode: vertical-rl;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  /* COLLAPSED MEANS GONE, NOT CLIPPED. The zone is overflow:auto, so leaving
+     the graph in a 31-wide track would keep every node in the tab order behind
+     a scrollbar the reader cannot use — and a keyboard reader would walk a
+     canvas nobody can see. display:none is what takes them out of the tree,
+     and it is reversible in one attribute.
+
+     TWO EXCEPTIONS, AND NEITHER IS THE CANVAS. The strip is the handle that
+     brings the zone back. 17d's audit overlay is a sibling of the graph rather
+     than part of it — it is anchored to the HEADER COUNT, which is drawn at
+     every width, so a collapsed canvas taking it down would remove a surface
+     the reader opened from a control that is still there. */
+  .ig-workspace[data-canvas='strip']
+    .ig-zone[data-zone='canvas']
+    > :not(.ig-canvas-strip):not(.ig-audit-overlay) {
+    display: none;
+  }
+
+  /* AND THE OVERLAY HAS TO ESCAPE THE STRIP IT HANGS OFF.
+
+     17d positions it against the canvas ZONE, which is what keeps it off the
+     rail without a magic offset. That argument still holds here and the
+     ARITHMETIC does not: the zone is four characters wide, so the panel's own
+     'width: min(66.67ch, 100% - gap)' resolves to the strip, and 'right' would
+     anchor a wider one leftwards — across the rail, which is the one thing 17k
+     says an overlay must never do.
+
+     SO THE ANCHOR FLIPS AND THE CLAMP GOES. Anchored at the zone's leading
+     edge it opens away from the rail, into the room the inspector is using —
+     over it, which is what an overlay is for. The zone stops clipping while it
+     is a strip, which costs nothing: every other child is display:none above,
+     so there is nothing else left to spill.
+
+     MEASURED at a 1000 mount: the zone's leading edge is 419, the rail ends at
+     407, and 520 of panel fits in the 598 that remains. Below about 900 it
+     runs past the trailing edge, which is the band 17k already hands to
+     section 9. */
+  .ig-workspace[data-canvas='strip'] .ig-zone[data-zone='canvas'] {
+    overflow: visible;
+  }
+
+  .ig-workspace[data-canvas='strip'] .ig-zone[data-zone='canvas'] .ig-audit-overlay {
+    left: 0;
+    right: auto;
+    width: calc(var(--ig-char-width) * 66.67);
+    max-height: 100%;
+    /* THE SHADOW GOES WITH THE CLIPPING, and that pairing is the whole point.
+       Section 3 forbids this panel reaching the rail ABSOLUTELY, and it is a
+       rule about what a reader SEES — a soft edge falling across the order
+       breaks it exactly as a border would. Everywhere else the zone's own
+       overflow is what guarantees that; here the zone is deliberately not
+       clipping, so the one thing that could paint outside the border box is
+       removed instead. The panel still reads as raised: it keeps its ground
+       and its border, over a canvas that is four characters wide and drawing
+       nothing. */
+    box-shadow: none;
+  }
+
+  /* OPENED FULL-WIDTH ON DEMAND — 17k's words — and full-width is measured
+     from the rail, which still does not yield. The inspector stands down while
+     it is open, which is the one place this layout borrows from the middle
+     one: the canvas is transient here in the way the panel is there. */
+  .ig-workspace[data-canvas='open'] {
+    grid-template-areas:
+      'header header'
+      'rail canvas';
+    grid-template-columns:
+      calc(var(--ig-char-width) * 50)
+      1fr;
+  }
+
+  .ig-workspace[data-canvas='open'] .ig-zone[data-zone='inspector'] {
+    display: none;
+  }
+
+  /* The same control closes it, so it stops being a strip and reads as a
+     button above the canvas it opened. */
+  .ig-workspace[data-canvas='open'] .ig-canvas-strip {
+    display: block;
+    justify-self: start;
+  }
+}
 `;
 //# sourceMappingURL=styles.js.map