@issuegraph/viewer 0.5.0 → 0.10.0

package/dist/styles.js

@@ -22,6 +22,245 @@
  * hairlines — and a host that wants the panel suppressed overrides the four
  * properties on `.ig-viewer`.
  */
+/**
+ * §17j's rail density, written once and emitted under two keys.
+ *
+ * ## Why this is a function and not a block
+ *
+ * The density has to be reachable two ways — by the container's width, which is
+ * §17j's own rule, and by a consumer who disagrees with the crossover this
+ * package picked. CSS cannot express "this condition OR that selector" across
+ * an `@container` boundary: a rule inside the query cannot also be a rule
+ * outside it, so the declarations would have to be written twice. The
+ * stylesheet is already a template literal, so they are written once here and
+ * interpolated twice instead.
+ *
+ * `scope` is a selector the whole block hangs off, and every rule below is
+ * RELATIVE to it. The original block carried its own `.ig-viewer` prefixes on
+ * about half its rules; those are gone, because the scope supplies one and two
+ * would never match.
+ *
+ * ## What it does to specificity, which is a gain rather than a risk
+ *
+ * Every selector here gains the scope's two compound units, so each dense rule
+ * beats the base rule it overrides by SPECIFICITY rather than by source order.
+ * One of these already had to be hand-scoped for exactly that reason — the
+ * together-unit row, where a container query adds no specificity and the base
+ * rule further down the file won, leaving the unit row drawn with nothing in
+ * it. That hazard is now closed for the whole block rather than at one site.
+ */
+function railDensity(scope) {
+    return `
+${scope} .ig-slot {
+  align-items: center;
+  grid-template-columns: var(--ig-rank-column-dense) 1fr auto;
+  min-height: var(--ig-row-height-dense);
+  padding-block: var(--ig-row-padding-block-dense);
+}
+
+/* TWO LINES, AND NEITHER WRAPS. A wrapping title is what turns a 53px row
+   into a 106px one, so the truncation is not cosmetic — it is what makes the
+   height a property of the row rather than of its longest title. */
+${scope} .ig-slot .ig-row-head {
+  gap: 0;
+}
+
+${scope} .ig-slot .ig-title {
+  line-height: var(--ig-row-title-line);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* STEP 5 OF THE DROP ORDER, AND IT IS LAST FOR A REASON '17j' STATES:
+   *"A row without a title is not a row."* Everything above leaves first. */
+${scope} .ig-slot .ig-row-body {
+  gap: var(--ig-row-line-gap);
+  min-width: 0;
+}
+
+/* LINE 2, AND IT DOES NOT WRAP. '17j' draws it as one mono run —
+   '#512 . P0 . blocked-by #488' — so the chips sit ON the identity's line
+   rather than under it. 'nowrap' is what makes the 53px a property of the
+   ROW: one long title or one extra badge would otherwise buy a second line
+   and double the height, which is exactly how this rail reached 408px. */
+${scope} .ig-slot .ig-row-meta {
+  align-items: center;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--ig-space-tight);
+  line-height: var(--ig-row-meta-line);
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* The chips keep their own row semantics and stop wrapping, so what does not
+   fit is clipped rather than stacked. The drop order above decides WHICH
+   chips are there to clip; this only decides they stay on the line. */
+${scope} .ig-slot .ig-row-meta .ig-badges {
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+
+/* The issue number never shrinks away — '17j' lists it among the five things
+   never dropped at any width. The title truncates first and the chips clip;
+   the number holds its ground. */
+${scope} .ig-slot .ig-row-meta .ig-id {
+  flex: none;
+}
+
+/* AT RAIL DENSITY LINE 2 IS TEXT, NOT PILLS — and this is read off the frame
+   rather than inferred from the height. '17j' draws the meta line as a single
+   mono run, '#512 . P0 . blocked-by #488': no outlines, no fills, just the
+   glyph and the words. §16a's wider panel is where they are chips.
+
+   IT IS ALSO WHAT MAKES 53px REACHABLE. A bordered chip is its padding plus
+   its stroke plus its line box, so a line of them cannot be 15px however the
+   line-height is set — the flex row grows to its tallest item and the row
+   followed it to 74px. Removing the chrome removes the reason.
+
+   THE FOUR REDUNDANT CHANNELS SURVIVE THIS, which is the thing worth
+   checking before doing it: dash, terminal and glyph are untouched, and hue
+   moves from the border to the text it was outlining. '17j' names the hold
+   GLYPH among the five things never dropped, and it is still drawn. */
+${scope} .ig-slot .ig-row-meta .ig-badge {
+  background: none;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  /* AND THE TEXT INSIDE A CHIP DOES NOT WRAP EITHER. Stopping the ROW from
+     wrapping is not enough: a chip squeezed by its neighbours wraps its own
+     label instead, and 'signals disagree' at 84px became two 15px lines and
+     took the row to 67px while every sibling sat at 53. One row in seven,
+     which is exactly the kind of thing that survives a review and does not
+     survive a measurement. What does not fit is clipped, per the drop
+     order. */
+  white-space: nowrap;
+}
+
+/* AND THE SWAP, AT RAIL DENSITY. '17j' draws a together unit here as a
+   marker inline with an ordinary title at the ordinary 53px, so the head
+   comes back and the enclosure stands down. One row, one rank, in both
+   densities - RULINGS.md section 1 - drawn the way each width can afford. */
+/* SCOPED WITH '.ig-viewer' SO ORDER CANNOT DECIDE THIS. A container query
+   adds no specificity, so this rule and the wide-density one it overrides
+   were an even 0,3,0 and the LATER of the two won — which put the base rule,
+   written further down the file, in charge of both densities and left the
+   unit row showing nothing but its em dash. Measured, not spotted: every row
+   was 53px and one of them was empty. The extra class makes the override win
+   on specificity, where it does not depend on where anyone adds a rule
+   later. */
+${scope} .ig-slot[data-unit='true'] > .ig-row-body > .ig-row-head {
+  display: flex;
+}
+
+${scope} .ig-slot[data-unit='true'] .ig-unit-mark,
+${scope} .ig-slot[data-unit='true'] .ig-unit {
+  display: none;
+}
+
+/* The marker itself: the glyph and the count, on the title's line. It is a
+   COUNT and not a pill here because 53px has no room for one, and because
+   the pill's words are already the accessible name's. */
+${scope} .ig-unit-count {
+  color: var(--ig-edge-together-with);
+  display: inline;
+  font-family: var(--ig-font-mono);
+  margin-right: var(--ig-space-tight);
+}
+
+/* THE FOOTER ROW'S TITLE STAYS ON ONE LINE, as a ranked row's does. The row
+   is taller than a ranked row now by design — its status and its reason are
+   what it exists to show — but a title that wraps still takes the row with it,
+   so the name ellipsizes and the reason below it carries the length. */
+${scope} .ig-footer-row .ig-title {
+  line-height: var(--ig-row-title-line);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The identity never wraps mid-reference. */
+${scope} .ig-footer-row .ig-id {
+  white-space: nowrap;
+}
+
+/* THE NOW STRIP AT RAIL DENSITY. '17j' draws it as the first row of the rail
+   at all three backlog sizes, in the same rhythm as the rows beneath it -
+   RULINGS.md section 4: "a single now strip as the first row of the rail,
+   above rank 1, on a raised surface, carrying no rank number".
+
+   THE RANK SLOT IS ALREADY RIGHT AND IS NOT TOUCHED HERE: the strip carries a
+   'now' mark where a rank would be, never a number, which is the half of
+   section 4 the build already had. What was wrong was only its height. */
+${scope} .ig-now-row {
+  min-height: var(--ig-row-height-dense);
+  padding-block: var(--ig-row-padding-block-dense);
+}
+
+${scope} .ig-now-row .ig-row-head {
+  gap: 0;
+  min-width: 0;
+}
+
+${scope} .ig-now-row .ig-title {
+  line-height: var(--ig-row-title-line);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+${scope} .ig-now-row .ig-id {
+  line-height: var(--ig-row-meta-line);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* HIDDEN HERE, AND NOT YET EXPANDABLE — WHICH IS HALF OF WHAT 17j ASKS FOR.
+   The tile says: "The provenance line never renders inline here. In the rail
+   it is expand-on-demand; in 16a's wider panel it is inline. Same row, two
+   densities."
+
+   THE INLINE HALF IS DONE AND THE ON-DEMAND HALF IS NOT. There is no
+   row-level expand affordance at this density — 16f's right-arrow "expand
+   provenance" does not exist — so a rail reader reaches the explanation
+   through the inspector's WHY RANK block rather than through the row. The
+   information is one selection away, not lost, but this comment previously
+   claimed "expand-on-demand" and that was an overclaim about a control
+   nothing draws.
+
+   The markup stays whole so the wider container still renders it inline and
+   so the accessible name is unchanged; what the rail declines is spending
+   53px of every row on it. The missing affordance is filed, not forgotten. */
+${scope} .ig-slot .ig-provenance,
+${scope} .ig-slot .ig-hold,
+${scope} .ig-slot .ig-caveat {
+  display: none;
+}
+
+/* AND THE ON-DEMAND HALF, WHICH IS WHAT 17j ACTUALLY ASKED FOR. A row the
+   reader opened with 16f's right-arrow draws its provenance again.
+
+   THE 53px IS NOT BROKEN BY THIS, it is spent deliberately: an open row is
+   taller because the reader asked it to be, and closing it returns the row to
+   the rhythm. That is the difference between a row that grows because nothing
+   governs it - the defect this sweep removed - and one that grows because
+   somebody pressed a key.
+
+   ONLY THE PROVENANCE COMES BACK. Holds and caveats stay down: 17j names the
+   provenance line and nothing else, and the holds are already in the
+   inspector's WHY RANK block as controls rather than prose. */
+${scope} .ig-slot[aria-expanded='true'] {
+  min-height: var(--ig-row-height-dense);
+}
+
+${scope} .ig-slot[aria-expanded='true'] .ig-provenance {
+  display: block;
+}
+`;
+}
 export const viewerStylesheet = `
 .ig-viewer {
   background: var(--ig-bg);
@@ -35,6 +274,51 @@ export const viewerStylesheet = `
   position: relative;
 }
 
+/* THE FRAME IS THE STANDALONE CASE'S, AND A CONTAINER CAN DECLINE IT.
+   Alone in a host's page the viewer is a card and draws its own edge. Composed
+   into a surface that already rules its own zones off, that edge lands beside
+   the container's and the seam reads as a doubled hairline — so the container
+   passes frame: false and takes responsibility for every line on the
+   surface. See SceneOptions.frame for why this is an option rather than a
+   host stylesheet unsetting the properties above. */
+.ig-viewer[data-frame='none'] {
+  border: 0;
+  border-radius: 0;
+}
+
+/* THE LEGEND DOCKS AGAINST THE CONTAINER'S SCROLLPORT, NOT THIS ROOT'S.
+   See SceneOptions.dockLegend for why only a container can ask for this.
+
+   THE overflow LINE IS THE WHOLE MECHANISM AND LOOKS LIKE A TIDY-UP. A sticky
+   element positions against its nearest SCROLLPORT, and an ancestor with
+   overflow: hidden is one — so with the root left as it is above, the legend
+   sticks to a box that never scrolls, which is the box it already sat at the
+   bottom of. Nothing moves, nothing errors, and the declaration below reads as
+   though it works. Lifting the clip hands the legend the container's scroller
+   instead, which is the only one that scrolls.
+
+   WHICH IS ALSO WHY THIS IS SAFE ONLY WITH THE FRAME DECLINED. The clip exists
+   so a drawn radius cuts its own corners; a root that has stopped clipping must
+   not be drawing one. The rule above and this one are written to be passed
+   together, and the workspace passes both.
+
+   NO z-index, DELIBERATELY. The legend is the root's last child, so it already
+   paints over the order it overlaps; a layer number here would be a claim about
+   a stacking order this package does not own. */
+.ig-viewer[data-legend='docked'] {
+  overflow: visible;
+}
+
+/* bottom: 0 IS A DEFAULT THE CONTAINER OVERRIDES, not a fixed position. A
+   container with something of its own already pinned to that edge — the
+   grooming workspace's rail footer — sets this element's bottom to clear it,
+   from a height it measures rather than from a number either package wrote
+   down and both would have to keep true. */
+.ig-viewer[data-legend='docked'] > .ig-legend {
+  position: sticky;
+  bottom: 0;
+}
+
 .ig-viewer *,
 .ig-viewer *::before,
 .ig-viewer *::after {
@@ -46,7 +330,33 @@ export const viewerStylesheet = `
   outline-offset: calc(var(--ig-focus-ring) * -1);
 }
 
+/* THE ROW'S DENSITY IS READ FROM THIS BOX, AND THAT IS §17j's CLOSING RULE
+   RATHER THAN A PREFERENCE. The same row renders at 390px in the workspace
+   rail and at 330px in §18's settings rail, so it *"must take its width from
+   its container and pick its drop step from that — not from a viewport media
+   query, and not from a prop the host sets. A package that reads the window
+   cannot be dropped into someone else's settings page, which is the whole BYO
+   premise."*
+
+   A viewport query would have been the obvious reach and it is precisely
+   wrong: it answers a question about the WINDOW when the row's question is
+   about the COLUMN it was given. Two rails of different widths on one screen
+   is not an edge case here — §17a's rail and §18's settings rail are that
+   screen.
+
+   "NOT FROM A PROP THE HOST SETS" IS ABOUT THE DEFAULT, AND data-density DOES
+   NOT BREAK IT. What §17j refuses is a package that CANNOT work out its own
+   density — one that draws a wrong row until a host wires something up, which
+   is how a drop-in stops being a drop-in. This box still answers that question
+   on its own and nothing has to be passed for it to be right. What the
+   attribute adds is the ability to DISAGREE, which is a different thing: the
+   crossover this package picked is a default, the host is the only party that
+   knows about print, a user preference or its own breakpoints, and an override
+   nobody uses costs the drop-in case nothing. See the crossover comment below
+   for why the number needs no ruling once it is a default. */
 .ig-list {
+  container-name: ig-rail;
+  container-type: inline-size;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -323,6 +633,13 @@ export const viewerStylesheet = `
 /* ── working now ───────────────────────────────────────────────────────── */
 
 .ig-now {
+  /* THE NOW STRIP IS PART OF THE RAIL'S RHYTHM, so it reads the same container
+     the rows do. It is its own list element, so without this the density rules
+     scoped to 'ig-rail' simply did not reach it and the strip stood 83px tall
+     beside 53px rows - 57% taller than everything under it, in the one slot
+     17j gives the top of the rail. */
+  container-name: ig-rail;
+  container-type: inline-size;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -391,6 +708,113 @@ export const viewerStylesheet = `
   padding: var(--ig-row-padding-block) var(--ig-space-wide);
 }
 
+/* ── §17j's RAIL DENSITY ───────────────────────────────────────────────────
+
+   THE 53px ROW, AND THE ORDER THINGS LEAVE IT. '17j' fixes both, and the
+   reason it fixes the second is that the build *"showed everything because
+   nothing told it what to give up"*. This is that instruction.
+
+       9 pad + 17 title + 3 gap + 15 meta + 9 pad = 53px, divider inclusive
+       tracks: 30px rank · 1fr issue · auto delta
+
+   THE FINDING THIS ENCODES, which is the one to keep: at 6, 60 and 312 issues
+   the rail is IDENTICAL. What changes is around it — virtualisation appears,
+   the runner-hold footer grows, filter chips stop being optional, the canvas
+   starts refusing. *"If you are making the rail denser as the backlog grows,
+   you are compressing the surface that was never the problem."* So nothing
+   here keys off the backlog size, and nothing ever should.
+
+   430 IS THIS PACKAGE'S DEFAULT, NOT A CLAIM ABOUT THE DESIGN, AND A CONSUMER
+   CAN TAKE IT OVER. That is the whole posture of this package — sensible
+   defaults, everything overridable — and it is why this number needed no
+   ruling in the end. '17j' gives two anchors and no crossover: the workspace
+   rail is 390, §18's settings rail is 330 where steps 1-3 apply "by default",
+   and §16a's panel, which keeps provenance inline, is wider than either and
+   carries no published figure anywhere. 430 sits above the rail and below that
+   panel. A host that does nothing gets it and gets correct behaviour; a host
+   that disagrees sets data-density on the viewer root and this condition stops
+   deciding for them.
+
+   SO THE OPEN QUESTION IS CLOSED RATHER THAN WAITING. An earlier revision of
+   this comment filed the distance between 390 and 430 as needing a width for
+   §16a's panel. It does not: a DEFAULT only has to be reasonable, and the
+   figure would only have mattered if this were the single crossover every
+   consumer had to live with. It is not, so it is not blocking.
+
+   IT CANNOT BE A TOKEN, AND THE NEXT PERSON WILL TRY. Making the threshold a
+   theme property is the obvious reach, and it does not work: a container
+   condition takes a length and only a length. Measured in a browser — a
+   max-width condition written as a literal applies, and the same condition
+   naming a custom property PARSES INTO A RULE THAT MATCHES AT NO WIDTH AT ALL,
+   while CSS.supports() reports that same condition as supported. It fails
+   silently in both directions: the rule is not dropped, it is simply never
+   satisfied, and the one API that could have warned agrees it is fine. That is
+   a CSS limitation rather than a decision, and it is why the escape hatch below
+   is a selector rather than a property.
+
+   '17k' MAKES THE LOWER ANCHOR EXACT, which is worth keeping. It fixes the
+   three workspace layouts under one rule — "the rail never yields" — so the
+   workspace draws its rail at 390 at every width it supports and no amount of
+   resizing moves it across this threshold. Before that it fell to 312 below
+   1360, so 430 had to clear two numbers and only one was '17j's. The editor's
+   sheet pins that relationship rather than restating it: see its test "keeps
+   the workspace rail on the dense side of layer 1's crossover". */
+@container ig-rail (max-width: 430px) {
+${railDensity('.ig-viewer:not([data-density])')}
+}
+
+/* THE ESCAPE HATCH ITSELF, AND IT IS THE SAME BLOCK WITH A DIFFERENT KEY.
+   Emitted a second time under an attribute that carries no width at all, so
+   a consumer who sets it gets the dense row wherever they want it. The
+   scopes above and below are mutually exclusive by construction — one is
+   :not([data-density]) and the other names a value — so nothing here
+   depends on which of them a browser reads first.
+
+   THE OTHER DIRECTION NEEDS NO RULES. data-density='wide' matches neither
+   scope, so the row falls back to the base density this sheet declares
+   above, at any container width. */
+${railDensity(".ig-viewer[data-density='dense']")}
+
+/* STEPS 1-3 OF THE DROP ORDER, AT §18's 330px SETTINGS RAIL, which '17j'
+   names as the width where they apply by default.
+
+   THE SELECTORS ARE THE MARKUP'S OWN ATTRIBUTES, not class guesses: evidence
+   is 'data-evidence', a relationship is 'data-edge', a priority is
+   'data-priority' with 'query' / 'tier' / 'promoted'. Three of these were
+   written from memory first and two were wrong — the parts publish
+   'data-evidence="verified"', never a 'data-ig-badge'. */
+
+/* STEP 1 — evidence and verification chips. '17j': *"Reassurance, not an
+   answer to any question the rail is asked."* */
+@container ig-rail (max-width: 360px) {
+  .ig-slot .ig-badge[data-evidence] {
+    display: none;
+  }
+}
+
+/* STEP 2 — relationship badges past the FIRST, which is kept because it is
+   the one causing the hold. Scoped to 'data-edge' so it counts relationships
+   and not the priority, evidence and readiness chips that share '.ig-badge';
+   a positional 'nth-of-type' would have hidden whichever chip happened to sit
+   second, which is not what the rule says at all. The '+n more' chip carries
+   what left, and it already exists — 'data-omitted'. */
+@container ig-rail (max-width: 345px) {
+  .ig-slot .ig-badge[data-edge] ~ .ig-badge[data-edge] {
+    display: none;
+  }
+}
+
+/* STEP 3 — the priority token. A DECLARED TIER goes, because '17j' says it is
+   *"recoverable from the rank itself"*. A PROMOTION stays: 'P3 → 0' is the
+   one form the rank cannot give back, and it is rank provenance rather than a
+   restatement. A matched query stays for the same reason — it names WHICH
+   query, which no rank encodes. */
+@container ig-rail (max-width: 335px) {
+  .ig-slot .ig-badge[data-priority='tier'] {
+    display: none;
+  }
+}
+
 /* THE ONE ROW GROUND THE FRAME DRAWS, and it is not a stripe. A together unit
    is the compound station, and the tint says so; the other ranked rows carry
    no background at all. */
@@ -464,6 +888,30 @@ export const viewerStylesheet = `
   min-width: 0;
 }
 
+/* A UNIT AT THE WIDE DENSITY IS ITS ENCLOSURE, which is what §16a draws: the
+   pill, the note, and a member list. The ordinary head the row also carries is
+   the RAIL's way of drawing the same unit, so it stands down here rather than
+   printing the lead's title above a box that already opens with it. */
+.ig-slot[data-unit='true'] > .ig-row-body > .ig-row-head {
+  display: none;
+}
+
+.ig-unit-count {
+  display: none;
+}
+
+/* LINE 2 AT THE WIDE DENSITY. §16a's panel draws the same sequence — identity
+   then chips — and simply has room, so here it WRAPS rather than clipping and
+   the provenance turnstile stays inline beneath it. Same markup, two
+   densities; the rail's rules are in the container query above. */
+.ig-row-meta {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ig-space-tight);
+  min-width: 0;
+}
+
 /* ── readiness stations ────────────────────────────────────────────────── */
 
 .ig-station {
@@ -745,57 +1193,83 @@ export const viewerStylesheet = `
 
 /* ── the footer group: holds that earn no rank slot ────────────────────── */
 
-.ig-footer {
-  background: var(--ig-surface-2);
-  padding: var(--ig-space) var(--ig-space-wide);
+/* NO RULE OF ITS OWN ON TOP. The last ranked row above already draws its
+   bottom rule, and a second one here stacked on it as a doubled line. */
+/* THE PANEL HEADER'S LAYOUT, ONE LEVEL DOWN: a kicker and a count chip on one
+   line, a sentence under them. The kicker and the chip are the header's own
+   classes (see footerHead), so this rule only places them. */
+.ig-footer-head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+  padding: var(--ig-row-padding-block-dense) var(--ig-space-wide);
 }
 
-.ig-footer-head {
+.ig-footer-title-row {
   align-items: center;
   display: flex;
   gap: var(--ig-space);
-  justify-content: space-between;
 }
 
 .ig-footer-title {
-  color: var(--ig-text-body);
-  font-size: var(--ig-font-size-compact);
   margin: 0;
 }
 
-.ig-footer-labels {
+.ig-footer-note {
   color: var(--ig-text-muted);
-  font-family: var(--ig-font-mono);
-  font-size: var(--ig-font-size-meta);
+  font-size: var(--ig-font-size-compact);
+  line-height: var(--ig-row-meta-line);
+  margin: 0;
 }
 
-/* ONE LINE EACH, and the frame is explicit about why: these are not facts
-   about the work, so they earn no rank slot and no explanation block. A full
-   row here — station, badges, provenance — was claiming the opposite. */
 .ig-footer .ig-list {
   display: flex;
   flex-direction: column;
-  gap: var(--ig-space-snug);
-  margin-top: var(--ig-space);
 }
 
+/* A RANKED ROW'S GRID, PADDING AND RULE, so the group is the rest of the same
+   list rather than a panel of its own: the rank track holds the held station,
+   and it lines up under the stations above because it is the same track.
+
+   ON THE PANEL'S OWN GROUND, NOT A SECOND SURFACE, and at full strength. The
+   group used to sit on --ig-surface-2 with every row at 0.72 opacity, which
+   read as disabled — on the rows whose whole purpose is "open me to see why". */
 .ig-footer-row {
-  align-items: center;
-  display: flex;
-  gap: var(--ig-space-snug);
-  opacity: 0.72;
+  border-top: var(--ig-stroke) solid var(--ig-line);
+  column-gap: var(--ig-space);
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: var(--ig-rank-column) 1fr;
+  /* THE DENSE RANKED ROW'S PADDING, at every width: these rows carry three
+     lines where a ranked row carries two, and the wider padding on top of that
+     made each one twice the height of its neighbours above. */
+  padding: var(--ig-row-padding-block-dense) var(--ig-space-wide);
+}
+
+.ig-footer-row:hover {
+  background: color-mix(in srgb, var(--ig-text) var(--ig-tint-unit), transparent);
+}
+
+/* THE RANKED ROW'S SELECTED BAND, and its fill: one selection, one look,
+   whichever part of the list it was made in. */
+.ig-footer-row[aria-current='true'] {
+  background: color-mix(in srgb, var(--ig-accent) var(--ig-tint-fill), transparent);
+  box-shadow: inset var(--ig-band-rail) 0 0 var(--ig-accent);
 }
 
 .ig-footer-row .ig-title {
-  font-size: var(--ig-font-size-compact);
+  color: var(--ig-text-body);
 }
 
-.ig-footer-row .ig-id {
-  font-size: var(--ig-font-size-meta);
+.ig-footer-row[aria-current='true'] .ig-title {
+  color: var(--ig-text);
 }
 
-.ig-footer-row[aria-current='true'] {
-  opacity: 1;
+.ig-footer-why {
+  color: var(--ig-text-muted);
+  font-size: var(--ig-font-size-compact);
+  line-height: var(--ig-row-meta-line);
+  margin: 0;
 }
 
 /* ── the graph canvas ──────────────────────────────────────────────────── */
@@ -1033,6 +1507,35 @@ export const viewerStylesheet = `
   stroke-width: var(--ig-stroke);
 }
 
+/* A MARK IS HIT-TESTABLE, AND THAT IS THE OPPOSITE OF WHAT IT FIRST SAID.
+
+   It carried a pointer-events none rule, reasoning from the halo: a decoration
+   over a line must not swallow the click aimed at the line. That reasoning does
+   not transfer, because a halo IS the line again and a mark is NOT — every one
+   of these is deliberately offset AWAY from the path, so a click on it does not
+   fall through onto the edge. It falls through onto the canvas, and the viewer's
+   walk climbs to the canvas group and reports a click on nothing, clearing the
+   very selection the reader was making. A conflict's companion is the clearest
+   case: a visibly separate line that could not be pointed at.
+
+   That is a defect this package has already paid for once. The overlay module
+   keeps its pointer identity on the dash clone for exactly this reason, and says
+   so: dropping the identity makes a clone a dead zone over its own edge. Every
+   mark here publishes the same identity, so making it unhittable spent the
+   identity it had just been given.
+
+   Colour is set per element, from the token name the caller supplied, for the
+   reason the edge hues are set per element: one source for a channel. Nothing
+   here paints a state, because nothing here knows what a state is. */
+.ig-edge-mark {
+  font-family: var(--ig-font-ui);
+  font-size: var(--ig-font-size-small);
+}
+
+.ig-edge-companion {
+  stroke-width: var(--ig-stroke);
+}
+
 .ig-terminal[data-edge='blocked-by'] { color: var(--ig-edge-blocked-by); }
 .ig-terminal[data-edge='serialize-with'] { color: var(--ig-edge-serialize-with); }
 .ig-terminal[data-edge='together-with'] { color: var(--ig-edge-together-with); }
@@ -1101,6 +1604,94 @@ export const viewerStylesheet = `
   padding: var(--ig-space-tight) 0;
 }
 
+/* ── loading placeholder ───────────────────────────────────────────────── */
+
+/* THE HOST'S HOOK, AND THE ONLY ONE. Every placeholder shape is one of these,
+   filled with the second surface and holding still: this package ships no
+   motion, and the fill already follows the host's theme. A host that wants a
+   pulse animates this class under its own reduced-motion rule. */
+.ig-skeleton-block {
+  background: var(--ig-surface-2);
+  border-radius: var(--ig-radius);
+  display: block;
+}
+
+/* ON THE HEADER'S OWN GROUND the second surface is the ground, so the shapes
+   there take the hairline colour instead, or they vanish into it. */
+.ig-header .ig-skeleton-block {
+  background: var(--ig-line);
+}
+
+.ig-skeleton-block[data-shape='label'] {
+  block-size: var(--ig-space);
+  inline-size: calc(var(--ig-char-width) * 14);
+}
+
+.ig-skeleton-chips {
+  display: flex;
+  gap: var(--ig-space-snug);
+}
+
+.ig-skeleton-block[data-shape='chip'] {
+  block-size: calc(var(--ig-space) * 2);
+  border-radius: var(--ig-radius);
+  inline-size: calc(var(--ig-char-width) * 9);
+}
+
+.ig-skeleton-block[data-shape='station'] {
+  block-size: var(--ig-space);
+  border-radius: 50%;
+  inline-size: var(--ig-space);
+}
+
+/* THE ROW'S OWN LINE HEIGHTS, so a placeholder row and a real row are the same
+   height at every density the container picks. */
+.ig-skeleton-block[data-shape='title'] {
+  block-size: var(--ig-row-title-line);
+  inline-size: 68%;
+}
+
+.ig-skeleton-block[data-shape='title'][data-width='1'] {
+  inline-size: 54%;
+}
+
+.ig-skeleton-block[data-shape='title'][data-width='2'] {
+  inline-size: 82%;
+}
+
+.ig-skeleton-block[data-shape='meta'] {
+  block-size: var(--ig-row-meta-line);
+  inline-size: 36%;
+}
+
+/* THE TWO LINES OF A ROW, stacked with no gap of their own: each block is its
+   line's full height, which already carries the leading a real line has. */
+.ig-skeleton-lines {
+  display: flex;
+  flex-direction: column;
+}
+
+/* A placeholder row points at nothing, so it takes no pointer and no hover. */
+.ig-skeleton-row {
+  pointer-events: none;
+}
+
+.ig-skeleton-stage {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-wide);
+  padding: var(--ig-space-wide);
+}
+
+/* THE SPINE CARD'S OWN WIDTH, so the graph's placeholder sits where its cards
+   will, as one solid block with the large radius the panel's cards use. */
+.ig-skeleton-block[data-shape='card'] {
+  block-size: calc(var(--ig-station-box) * 4);
+  border-radius: var(--ig-radius-large);
+  inline-size: min(100%, var(--ig-spine-width));
+}
+
 /* ── legend ────────────────────────────────────────────────────────────── */
 
 /* A FOOTER BAR, WHERE §16b PUTS IT, and worded rather than glyph-only. It sits
@@ -1119,8 +1710,29 @@ export const viewerStylesheet = `
   padding: var(--ig-space) var(--ig-space-wide);
 }
 
+/* FLOATED SO THE BROWSER STOPS TREATING IT AS A RENDERED LEGEND, which is the
+   only reason this declaration exists. HTML gives the first in-flow legend of a
+   fieldset a layout nothing else in CSS has: it is lifted OUT of the fieldset's
+   content box, painted across the top border with a notch cut through the rule
+   either side of it, and the content box then starts below it. On this bar that
+   drew the caption sitting on the rule, a gap of bare ground under the caption
+   where the fieldset's own surface should have been, and a top rule broken in
+   the middle — all three of which looked like a styling bug and none of which
+   any rule here asked for.
+
+   The spec's own escape hatch is the float: a legend whose computed float is
+   not none is not the rendered legend, and becomes an ordinary child. This bar
+   is a flex container, where float does not apply to an item at all, so the
+   caption simply lays out as the first item on the row — which is what the
+   flex rule above, its muted uppercase micro type and its centred alignment
+   were always written for.
+
+   IT IS LOAD-BEARING AND LOOKS DECORATIVE, which is why it is recorded here at
+   this length: delete it and the notch, the gap and the broken rule all come
+   back, with nothing else in this file changed. */
 .ig-legend-caption {
   color: var(--ig-text-muted);
+  float: left;
   font-family: var(--ig-font-mono);
   font-size: var(--ig-font-size-pill);
   letter-spacing: var(--ig-tracking-group);