@issuegraph/editor 0.10.0 → 0.23.0

package/dist/workspace/styles.js

@@ -58,13 +58,39 @@ 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
     calc(var(--ig-char-width) * 40);
   grid-template-rows: auto 1fr;
-  gap: var(--ig-space);
+  /* NO GAP, BECAUSE THE SEAMS ARE DRAWN RULES AND A RULE HAS TO REACH ITS
+     CORNER. The tracks used to be separated by --ig-space, and every rule on
+     this surface stopped short of the one it should have met: the header's
+     border-bottom ran the full width, then a 12px band of ground, and only
+     then did the rail's border-right and the inspector's border-left begin —
+     three lines that never touched. The canvas toolbar's border-bottom had the
+     same defect on the other axis, ending 12px shy of the rail rule at one end
+     and the inspector rule at the other, so the zone it captions read as a
+     floating band rather than as the top row of a column.
+
+     THE BREATHING ROOM DID NOT GO ANYWHERE; IT MOVED INSIDE. A gap puts the
+     space OUTSIDE the zone, where it separates the rule from its corner. Each
+     zone's own content already carries its inset — the rail's rows and footer
+     take --ig-space-wide, the canvas toolbar and the inspector take
+     --ig-space — so the measured gutter between a rule and the nearest text is
+     unchanged in kind, and what is gone is only the dead band the rules were
+     stopping at. */
   background: var(--ig-bg);
   color: var(--ig-text-body);
   font-family: var(--ig-font-ui);
@@ -72,6 +98,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
@@ -106,6 +179,46 @@ export const workspaceStylesheet = `
   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 {
@@ -125,19 +238,331 @@ export const workspaceStylesheet = `
   /* The rail scrolls; the window slides underneath. */
   overflow-y: auto;
   border-right: var(--ig-stroke) solid var(--ig-line);
+  /* A COLUMN, SO THE FOOTER CAN TAKE THE SPACE A SHORT ORDER LEAVES. See
+     .ig-rail-footer for why sticky alone never did. */
+  display: flex;
+  flex-direction: column;
+}
+
+/* NOTHING IN THE RAIL SHRINKS. A scrolling flex column will squeeze its
+   children to fit before it scrolls them, and the rail's virtualization reads
+   row positions off a fixed pitch — a squeezed viewer would put every offset on
+   the wrong row. Every child keeps its natural height and the zone scrolls. */
+.ig-zone[data-zone='rail'] > * {
+  flex: none;
+}
+
+/* §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.
+
+   ON A SHORT RAIL IT IS PUSHED DOWN, NOT STUCK DOWN. margin-top: auto in the
+   zone's column takes whatever height the order leaves, so the footer sits on
+   the bottom edge whether the rail scrolls or not. An earlier note here said
+   sticky alone anchored a short rail and that a column wrapper "changed
+   nothing" — that was measured with the rows at 416px in a 445px track, where
+   the gap left was about one footer high and flush and not-flush look alike.
+   Sticky only moves a box that would otherwise leave the scrollport, so on a
+   short rail it never moved at all: the footer sat directly under the last
+   row with the rest of the zone empty beneath it. Sticky still does the work
+   once the rail overflows; the margin does it before.
+
+   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 {
+  margin-top: auto;
+  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.
@@ -162,8 +587,12 @@ export const workspaceStylesheet = `
 
    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 is
-   host-side. The misleading variant this replaces gave the LEAST urgent
+   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] {
@@ -293,6 +722,16 @@ export const workspaceStylesheet = `
   gap: var(--ig-space-tight);
 }
 
+/* §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
@@ -329,10 +768,17 @@ export const workspaceStylesheet = `
 }
 
 
-/* THE PANEL'S THREE QUIET BUTTONS SHARE ONE TREATMENT — clear, '+ add' and
-   cancel. They are the same affordance at three moments (leave this selection,
-   begin a relationship, abandon the draft) and drawing them three ways would
-   invent a hierarchy the design does not state. The destructive controls are
+/* 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.
 
@@ -344,7 +790,6 @@ export const workspaceStylesheet = `
    baseline that rule's own comment says it is there to get. Declared where each
    is true instead. */
 .ig-inspector-clear,
-.ig-inspector-addbutton,
 .ig-inspector-cancel {
   background: var(--ig-surface-2);
   color: var(--ig-text-body);
@@ -359,10 +804,42 @@ export const workspaceStylesheet = `
 .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;
@@ -605,18 +1082,30 @@ export const workspaceStylesheet = `
   border-style: dotted;
 }
 
-/* THE CREATE STEP, WHICHEVER STEP IT IS. One box holds '+ add' on its own and
-   the numbered list with its cancel, because they are one place in the panel
-   the reader returns to rather than two that happen to alternate. */
+/* 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 their own words rather than stretched across the column — see the
-   quiet-button rule above, which deliberately does not carry this. */
-.ig-inspector-addbutton,
+/* 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;
 }
@@ -641,14 +1130,25 @@ export const workspaceStylesheet = `
   gap: var(--ig-space-micro);
 }
 
-/* Full width, so the whole entry is the hit target and the digits form a
-   readable column down the left — which is what makes the list legible as a
-   set of KEYS rather than as five buttons that happen to start with a number. */
+/* 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: baseline;
+  align-items: center;
   background: var(--ig-surface);
   color: var(--ig-text-body);
   border: var(--ig-stroke) solid var(--ig-line);
@@ -665,7 +1165,18 @@ export const workspaceStylesheet = `
   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);
 }
@@ -842,5 +1353,406 @@ export const workspaceStylesheet = `
   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);
+}
+
+/* ONE KEY PER SURFACE, AND THE CANVAS KEEPS IT.
+
+   Both zones hold a viewer, so both draw the grammar legend, and this surface
+   showed the same five line styles twice side by side at the same moment. It is
+   the defect chrome: false already answers one line higher — §16's panel has
+   ONE header — and render.ts records the reasoning for which zone yields:
+   four of the five entries are LINE styles and the rail draws no lines, only
+   badges, so the key belongs beside the strokes it is about. It is the cheaper
+   zone to spend it in, too: one or two wrapped rows of a wide column against
+   four rows of a 390 rail the order needs.
+
+   REACHING A VIEWER CLASS, FROM INSIDE THIS SURFACE'S OWN ROOT, FOR A STATE
+   THAT PACKAGE DOES NOT MODEL — which is the exemption reevaluate/styles.ts
+   already states and uses for the greyed rail. The viewer cannot answer this:
+   each instance is correct on its own and the duplication only exists in the
+   composition, which is this package's. Nothing here changes how a legend looks
+   anywhere else, and the markup is untouched — the rail still RENDERS its key,
+   so the two rules below can hand it back without re-rendering anything. */
+.ig-workspace[data-canvas-legend='drawn'] .ig-zone[data-zone='rail'] .ig-legend {
+  display: none;
+}
+
+/* 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) {
+  /* THE RAIL TAKES THE KEY BACK, BECAUSE THERE IS NO CANVAS TO CARRY IT. Below
+     this width §17k collapses the canvas to a four-character strip, so the zone
+     the rule above defers to is not on screen — and the station fills the rail
+     draws itself would have no key at all. display: flex rather than revert
+     because that is what .ig-legend is; the value has to be restated, which is
+     the price of a single-sided condition and is paid here in one place. */
+  .ig-workspace[data-canvas-legend='drawn'] .ig-zone[data-zone='rail'] .ig-legend {
+    display: flex;
+  }
+
+  .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