proctolog 0.1.0 → 0.2.0

data/public/terminal.css

@@ -41,9 +41,12 @@
 	--change: var(--ink);
 	--question: var(--ink);
 	--side: 320px;
+	--section-gap: 16px;
 	--group-gap: 24px;
 	--row-pad: 4px;
 	--control-gap: 8px;
+	--lane-gap: 20px;
+	--key-space: 12rem;
 
 	/* One bead, 2.3px across, every 6px: the line round the plaque's figure,
 	   and the only line the desk draws that is not a hairline. It frames the
@@ -128,6 +131,13 @@ h1 {
 	font-size: 0.933rem;
 }
 
+.burst .lede,
+.burst .tally,
+.films-head .tally {
+	box-sizing: border-box;
+	padding-inline: 16px;
+}
+
 /* The title plate has a cut corner and a stippled lower edge. Its full width
    belongs to the title, with no ornament that could be mistaken for a control. */
 .burst h1,
@@ -454,7 +464,7 @@ body.shell::before {
 
 .side h2 {
 	margin-top: var(--group-gap);
-	padding: 6px 12px;
+	padding: 6px 16px;
 	border-block: 1px solid var(--rule-soft);
 	background: var(--surface-head);
 	color: var(--quiet);
@@ -491,7 +501,10 @@ body.shell::before {
 	white-space: nowrap;
 }
 
+/* The ↩ of a pull request the agent's answers came back on asks for the owner. */
 .side .stops .mark {
+	color: var(--ink);
+	font-weight: 700;
 	white-space: pre;
 }
 
@@ -518,8 +531,7 @@ body.shell::before {
 	background: var(--rest);
 }
 
-.side .stops [aria-current] .number,
-.side .stops [aria-current] .mark {
+.side .stops [aria-current] .number {
 	color: var(--ink);
 }
 
@@ -529,11 +541,6 @@ body.shell::before {
 	white-space: normal;
 }
 
-.side .stops [aria-current] .fraction {
-	border-color: var(--rule-strong);
-	color: var(--ink);
-}
-
 /* The bars: how far, drawn square */
 
 meter,
@@ -768,6 +775,10 @@ body.shell .foot {
 	align-items: center;
 }
 
+.modebar .mode > span {
+	white-space: nowrap;
+}
+
 .modebar .mode strong {
 	padding: 0 1ch;
 	background: var(--ink);
@@ -946,18 +957,33 @@ body.shell .foot {
 	color: var(--ink);
 }
 
+/* The stage, and beside it, for a pair, the panel of its views and regions;
+   under them the divider's slider, the caption and the keys, the width of
+   the window. */
 .viewer[open] {
 	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
 	grid-template-rows: minmax(0, 1fr) auto auto auto;
 }
 
 .viewer .stage {
 	position: relative;
+	grid-column: 1;
+	grid-row: 1;
 	overflow: hidden;
 	cursor: crosshair;
 	touch-action: none;
 }
 
+.viewer .swipe {
+	grid-column: 1;
+}
+
+.viewer .caption,
+.viewer .keys {
+	grid-column: 1 / -1;
+}
+
 .viewer .stage[data-zoomed="true"] {
 	cursor: grab;
 }
@@ -997,7 +1023,9 @@ body.shell .foot {
 }
 
 /* The swipe's divider and the changed regions: as thin on the screen at any
-   zoom, white inside black, so that they show on a light picture and a dark. */
+   zoom, white with black, so that they show on a light picture and a dark.
+   A changed region is a black line dashed white, lighter than a note's solid
+   frame, so the two are told apart at a glance. */
 .viewer .divider,
 .viewer .change {
 	position: absolute;
@@ -1024,24 +1052,211 @@ body.shell .foot {
 }
 
 .viewer .change {
-	margin: calc(var(--line) * -2);
-	border: calc(var(--line) * 2) solid #fff;
-	outline: var(--line) solid #000;
+	--dash: calc(var(--line) * 2);
+	margin: calc(var(--dash) * -1);
+	border: var(--dash) solid #000;
+	outline: var(--dash) dashed #fff;
+	outline-offset: calc(var(--dash) * -1);
 }
 
 .viewer .change[data-current] {
-	outline-width: calc(var(--line) * 3);
+	--dash: calc(var(--line) * 3);
+}
+
+/* The region focused on says its number and its half, above it, as large on
+   the screen at any zoom. */
+.viewer .change .tag {
+	position: absolute;
+	bottom: 100%;
+	left: calc(var(--line) * -3);
+	margin-bottom: calc(var(--line) * 3);
+	padding: 0 calc(var(--line) * 5);
+	background: #fff;
+	color: #000;
+	font-size: calc(var(--line) * 12);
+	font-weight: 700;
+	line-height: 1.5;
+	white-space: nowrap;
 }
 
 .viewer .swipe {
 	margin: 0.3rem 1.1rem;
 }
 
-.viewer .keys .current {
+/* The map in the stage's corner, once the stage shows only part of the
+   picture: the whole, small, its regions, and the part shown, framed. */
+.viewer .minimap {
+	position: absolute;
+	right: 12px;
+	bottom: 12px;
+	z-index: 1;
+	padding: 4px;
+	border: 1px solid var(--rule-strong);
+	background: var(--paper);
+	cursor: pointer;
+	--line: 1px;
+}
+
+.viewer .minimap[hidden] {
+	display: none;
+}
+
+.viewer .map-canvas {
+	position: relative;
+	overflow: hidden;
+}
+
+.viewer .map-regions,
+.viewer .map-shown {
+	pointer-events: none;
+}
+
+.viewer .map-region {
+	position: absolute;
+	outline: 1px solid #000;
+}
+
+.viewer .map-region[data-current] {
+	outline: 2px solid #fff;
+}
+
+.viewer .map-shown {
+	position: absolute;
+	border: 1px solid #fff;
+	outline: 1px solid #000;
+	box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.45);
+}
+
+/* The panel beside a pair, quiet: rows without boxes, the view looked at in
+   reverse with a line on what it shows, the regions by number, and the one
+   focused on as each half has it. It scrolls under the ✕'s corner. */
+.viewer .compare {
+	grid-column: 2;
+	grid-row: 1;
+	box-sizing: border-box;
+	width: 16rem;
+	min-height: 0;
+	margin-top: 3rem;
+	padding: 0.6rem 0.8rem 1rem;
+	overflow-y: auto;
+	border-left: 1px solid var(--rule);
+	background: var(--panel);
+	font-size: 0.86rem;
+	--line: 1px;
+}
+
+.viewer .compare[hidden] {
+	display: none;
+}
+
+.viewer .compare h2 {
+	margin: 0 0 0.4rem;
+	color: var(--quiet);
+	font-size: 0.8rem;
+	font-weight: 600;
+	letter-spacing: 0.025em;
+	text-transform: uppercase;
+}
+
+.viewer .compare h2 .count {
 	color: var(--ink);
+}
+
+.viewer .compare section + section {
+	margin-top: 1.4rem;
+}
+
+.viewer .compare p {
+	margin: 0.4rem 0;
+	color: var(--quiet);
+}
+
+.viewer .compare button {
+	border-color: transparent;
+	cursor: pointer;
+}
+
+.viewer .compare .way {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: 0 1ch;
+	width: 100%;
+	padding: 0.15rem 0.4rem;
+	text-align: left;
+}
+
+.viewer .compare .way .shows {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0 1.2ch;
+	width: 100%;
+	padding-left: calc(1.7em + 1ch);
+	font-size: 0.8rem;
+}
+
+.viewer .compare [aria-pressed="true"] kbd {
+	border-color: currentcolor;
+	color: inherit;
+}
+
+.viewer .compare .places {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.15rem;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.viewer .compare .place {
+	min-width: 2em;
+	padding: 0 0.3rem;
+	color: var(--quiet);
+	font-size: 0.8rem;
+}
+
+.viewer .compare .place[aria-current] {
+	background: var(--ink);
+	color: var(--paper);
 	font-weight: 700;
 }
 
+.viewer .compare .going {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0 1.2ch;
+	font-size: 0.8rem;
+}
+
+/* The region focused on, as the before has it and as the after does; a
+   press on either writes a note on it there. */
+.viewer .compare .crop {
+	display: block;
+	width: 100%;
+	margin-top: 0.4rem;
+	padding: 0.3rem;
+	text-align: left;
+}
+
+.viewer .compare .crop .frame {
+	position: relative;
+	display: block;
+	overflow: hidden;
+	background: #000;
+}
+
+.viewer .compare .crop .label {
+	display: block;
+	margin-top: 0.15rem;
+	color: var(--quiet);
+	font-size: 0.8rem;
+}
+
+.viewer .compare .crop:hover:not(:disabled) .label {
+	color: var(--ink);
+}
+
 /* A region being drawn, and the place a note is being written on: white
    inside black, so that it shows on a light picture and a dark, with all
    outside it dimmed. */
@@ -1057,8 +1272,10 @@ body.shell .foot {
 	display: none;
 }
 
-/* The notes on a picture, as thin on the screen at any zoom as the changed
-   regions; a pin is a ring. */
+/* The notes on a picture: a solid frame, black outside and white inside, so
+   that one band shows on a light picture and the other on a dark; heavier
+   than a changed region's dashes, and as heavy on the screen at any zoom. A
+   pin is a small square of the same frame. */
 .viewer .notes {
 	position: absolute;
 	inset: 0;
@@ -1066,17 +1283,18 @@ body.shell .foot {
 }
 
 .viewer .note {
+	--frame: calc(var(--line) * 2);
 	position: absolute;
-	margin: calc(var(--line) * -2);
-	border: calc(var(--line) * 2) solid #fff;
-	outline: var(--line) solid #000;
+	margin: calc(var(--frame) * -2);
+	padding: var(--frame);
+	border: var(--frame) solid #000;
+	box-shadow: inset 0 0 0 var(--frame) #fff;
 }
 
 .viewer .note.pin {
-	width: calc(var(--line) * 14);
-	height: calc(var(--line) * 14);
-	margin: calc(var(--line) * -7);
-	border-radius: 50%;
+	width: calc(var(--line) * 12);
+	height: calc(var(--line) * 12);
+	margin: calc(var(--line) * -6 - var(--frame) * 2);
 }
 
 /* A note saved opens at a click, and says so under the pointer. */
@@ -1085,19 +1303,21 @@ body.shell .foot {
 	cursor: pointer;
 }
 
-.viewer[data-takes-notes] .note[data-note]:hover {
-	border-width: calc(var(--line) * 3);
+.viewer[data-takes-notes] .note[data-note]:hover,
+.viewer .note.drafted {
+	--frame: calc(var(--line) * 3);
 }
 
 .viewer .note.drafted {
-	border-width: calc(var(--line) * 3);
-	box-shadow: 0 0 0 calc(var(--line) * 100000) rgb(0 0 0 / 0.5);
+	box-shadow:
+		inset 0 0 0 var(--frame) #fff,
+		0 0 0 calc(var(--line) * 100000) rgb(0 0 0 / 0.5);
 }
 
-/* The note's form, beside the place it is about. */
+/* The note's form, beside the place it is about, over the map. */
 .viewer .beside-note {
 	position: absolute;
-	z-index: 1;
+	z-index: 2;
 	width: min(24rem, calc(100% - 24px));
 	cursor: auto;
 }
@@ -1136,7 +1356,7 @@ body.shell .foot {
 	position: absolute;
 	top: 0.6rem;
 	right: 0.8rem;
-	z-index: 2;
+	z-index: 3;
 	min-width: 2.2rem;
 	padding: 0.1rem 0.6ch;
 	border: 1px solid var(--rule-strong);
@@ -1180,10 +1400,10 @@ body.shell .foot {
    beside it, set smaller, measures the same; it gives way before the keys
    beside it and the outline do. */
 body[data-page="pull_requests"] > .main {
-	--rail: 15rem;
+	--rail: 16rem;
 	--measure: min(
 		41rem,
-		calc(100vw - var(--side) - var(--gutter) - var(--rail) - 18px - 14rem - 28px)
+		calc(100vw - var(--side) - var(--gutter) - var(--rail) - 24px - var(--key-space) - var(--lane-gap) - var(--lane-gap))
 	);
 }
 
@@ -1286,15 +1506,60 @@ body[data-page="pull_requests"] .flash {
 	font-weight: 400;
 }
 
-.side .stops .fraction {
-	min-width: 4ch;
+.side .stops .decisions {
 	padding-left: 0.6ch;
-	border-left: 1px solid var(--rule-soft);
 	color: var(--quiet);
 	font-size: 0.8rem;
 	text-align: right;
 }
 
+/* Decisions counted as beads, the stepper's own (below): a bead to each
+   blocking decision, a smaller one to each non-blocking, hollow while it
+   waits for the owner and solid once reviewed. In the pane they are smaller
+   again. */
+
+.beads {
+	display: inline-flex;
+	gap: 1ch;
+	align-items: center;
+	vertical-align: middle;
+}
+
+.beads > span {
+	display: inline-flex;
+	gap: 3px;
+	align-items: center;
+}
+
+.beads .non-blocking .bead {
+	width: 6px;
+	height: 6px;
+	border-color: var(--quiet);
+}
+
+.side .beads {
+	gap: 0.8ch;
+}
+
+.side .beads > span {
+	gap: 2px;
+}
+
+.side .beads .bead {
+	width: 7px;
+	height: 7px;
+}
+
+.side .beads .non-blocking .bead {
+	width: 5px;
+	height: 5px;
+}
+
+/* A burst's count: a hollow bead of the grade, then how many of it wait. */
+.side .beads .count {
+	gap: 0.4ch;
+}
+
 .pull-request .status {
 	display: block;
 	margin: 8px 0 var(--group-gap);
@@ -1321,7 +1586,7 @@ body[data-page="pull_requests"] .flash {
 .pull-request .whole {
 	position: absolute;
 	top: 5px;
-	left: calc(100% + 28px);
+	left: calc(100% + var(--lane-gap));
 	display: none;
 }
 
@@ -1333,7 +1598,7 @@ body[data-page="pull_requests"] .flash {
 .cursor .beside {
 	gap: var(--control-gap);
 	justify-items: start;
-	width: 13.5rem;
+	width: var(--key-space);
 	overflow: hidden;
 	color: var(--quiet);
 	font-size: 0.867rem;
@@ -1408,7 +1673,7 @@ body[data-page="pull_requests"] .flash {
 .cursor .beside {
 	position: absolute;
 	top: 2px;
-	left: calc(var(--gutter) + var(--measure) + 28px);
+	left: calc(var(--gutter) + var(--measure) + var(--lane-gap));
 	display: grid;
 	pointer-events: auto;
 }
@@ -1430,13 +1695,13 @@ li[data-decision]:focus-visible,
 
 .rail {
 	position: fixed;
-	top: 36px;
-	right: 18px;
-	bottom: 56px;
+	top: 32px;
+	left: calc(var(--side) + var(--gutter) + var(--measure) + var(--key-space) + var(--lane-gap) + var(--lane-gap));
+	bottom: calc(var(--foot-height, 44px) + 12px);
 	z-index: 2;
 	display: flex;
 	flex-direction: column;
-	gap: var(--group-gap);
+	gap: var(--section-gap);
 	width: var(--rail);
 }
 
@@ -1446,17 +1711,20 @@ li[data-decision]:focus-visible,
 .outline {
 	display: grid;
 	flex: none;
+	max-height: 48%;
 	padding: 8px;
+	overflow-y: auto;
 	border: 1px solid var(--rule);
 	background: var(--panel);
 	font-size: 0.867rem;
+	scrollbar-width: thin;
 }
 
 .outline :is(button, a) {
 	display: flex;
 	gap: 1ch;
 	justify-content: space-between;
-	padding: 4px 6px 4px 0;
+	padding: 3px 6px 3px 0;
 	border: 0;
 	background: none;
 	color: var(--quiet);
@@ -1502,8 +1770,8 @@ li[data-decision]:focus-visible,
 }
 
 .outline .apart {
-	margin-top: 12px;
-	padding-top: 12px;
+	margin-top: 8px;
+	padding-top: 8px;
 	border-top: 1px solid var(--rule);
 }
 
@@ -1524,6 +1792,7 @@ details.section > summary .count[data-waits="true"] {
    same beads as Standing distinguish what is ready from what still waits. */
 
 .try {
+	flex: 1;
 	min-height: 0;
 	padding: 0;
 	overflow-y: auto;
@@ -1531,10 +1800,16 @@ details.section > summary .count[data-waits="true"] {
 	background: var(--surface);
 	font-size: 0.867rem;
 	line-height: 1.5;
+	overscroll-behavior-y: contain;
+	scroll-padding-block: 12px;
+	scrollbar-gutter: stable;
 	scrollbar-width: thin;
 }
 
 .try h2 {
+	position: sticky;
+	top: 0;
+	z-index: 1;
 	margin: 0;
 	padding: 8px 12px;
 	border-bottom: 1px solid var(--rule);
@@ -1622,7 +1897,7 @@ details.section > summary .count[data-waits="true"] {
 .try-pop {
 	position: fixed;
 	inset: 42px auto auto;
-	right: calc(18px + var(--rail) + 14px);
+	right: max(16px, calc(100vw - var(--side) - var(--gutter) - var(--measure) - var(--key-space) - var(--lane-gap) - var(--lane-gap) + 14px));
 	width: min(72ch, 56vw);
 	max-height: calc(100vh - 110px);
 	margin: 0;
@@ -1723,7 +1998,7 @@ details.section > summary .count[data-waits="true"] {
 .try .tail {
 	position: fixed;
 	top: 42px;
-	right: calc(18px + var(--rail) + 14px);
+	right: max(16px, calc(100vw - var(--side) - var(--gutter) - var(--measure) - var(--key-space) - var(--lane-gap) - var(--lane-gap) + 14px));
 	z-index: 9;
 	display: none;
 	width: min(84ch, 52vw);
@@ -1850,7 +2125,7 @@ main.description + details.section {
 
 details.section > summary {
 	position: relative;
-	gap: 1.4ch;
+	gap: 1ch;
 	align-items: baseline;
 	margin-inline: -16px;
 	padding: 9px 16px;
@@ -1917,6 +2192,7 @@ details.section > summary .count {
 	margin-left: 0;
 	color: var(--quiet);
 	font-size: 0.867rem;
+	white-space: nowrap;
 }
 
 [data-quotable] {
@@ -2471,17 +2747,23 @@ button.choice[hidden] {
 }
 
 .stepper .cell,
-.finish .bead {
+.finish .bead,
+.beads .bead {
 	box-sizing: border-box;
 	width: 9px;
 	height: 9px;
 	border: 1px solid var(--ink);
 	border-radius: 50% !important;
+}
+
+.stepper .cell,
+.finish .bead {
 	cursor: pointer;
 }
 
 .stepper .cell:not([data-state=""]),
-.finish [data-line-of]:not([data-state=""]) .bead {
+.finish [data-line-of]:not([data-state=""]) .bead,
+.beads .bead.reviewed {
 	border-color: var(--quiet);
 	background: var(--quiet);
 }
@@ -2865,14 +3147,14 @@ body[data-page="decisions"] .empty {
 }
 
 .part {
-	margin-top: var(--group-gap);
+	margin-top: var(--section-gap);
 	border: 1px solid var(--rule);
 	background: var(--surface);
 }
 
 .part header {
 	position: relative;
-	padding: 10px 16px;
+	padding: 8px 16px;
 	border-top: 0;
 	border-bottom: 0;
 	background: var(--surface-head);
@@ -3003,14 +3285,14 @@ details.more-pictures > summary {
    cursor rests on, each decision with its pull request above it. */
 
 .theme-group {
-	margin-top: var(--group-gap);
+	margin-top: var(--section-gap);
 	border: 1px solid var(--rule);
 	background: var(--surface);
 }
 
 .theme-group header {
 	position: relative;
-	padding: 10px 16px;
+	padding: 8px 16px;
 	border-top: 0;
 	background: var(--surface-head);
 }
@@ -3103,14 +3385,14 @@ details.more-pictures > summary {
 
 .box[aria-current] {
 	margin: 0;
-	padding: 16px 16px 12px 2.6rem;
+	padding: 12px 16px 12px 2.6rem;
 	border-top: 1px solid var(--rule);
 	background: var(--rest);
 	outline: 0;
 }
 
 .box[aria-current]::before {
-	top: 1.45rem;
+	top: 1.2rem;
 }
 
 .box[aria-current] .body {
@@ -3123,12 +3405,12 @@ details.more-pictures > summary {
 .box[aria-current] .body > strong:first-of-type,
 .box[aria-current] .body > p:first-child > strong:first-child {
 	display: block;
-	margin-bottom: 8px;
+	margin-bottom: 4px;
 }
 
 .box[aria-current] .beneath {
 	max-width: none;
-	margin-top: 14px;
+	margin-top: 12px;
 	font: inherit;
 	font-size: 1rem;
 }
@@ -3142,11 +3424,16 @@ details.more-pictures > summary {
 	margin-top: 0;
 }
 
+.box button.choice,
+.box .beneath > .actions > a {
+	padding-block: 6px;
+}
+
 /* The cursor at the decision at hand, in the gutter, as on a pull request's page. */
 .decisions .box[aria-current] .body::before {
 	content: ">";
 	position: absolute;
-	top: 14px;
+	top: 10px;
 	left: -2.4ch;
 	color: var(--ink);
 	font-size: 1rem;
@@ -3294,13 +3581,20 @@ details.more-pictures > summary {
 }
 
 .filters {
-	gap: var(--control-gap) 2.4ch;
+	gap: 4px 12px;
 	align-items: baseline;
 	margin-top: 12px;
 	padding-top: 10px;
 	border-top: 1px solid var(--rule);
 }
 
+.filters button.quiet,
+.filters a {
+	min-height: 24px;
+	padding: 2px 6px;
+	white-space: nowrap;
+}
+
 .filters [data-filter="open"],
 .filters [data-filter="all"] {
 	margin-left: 0;
@@ -3309,8 +3603,7 @@ details.more-pictures > summary {
 .filters button.quiet[aria-pressed="true"],
 .filters a[aria-current] {
 	border: 0;
-	text-decoration: underline;
-	text-underline-offset: 0.4em;
+	text-decoration: none;
 	background: var(--plate);
 	color: var(--panel);
 	font-weight: 700;
@@ -3333,6 +3626,7 @@ details.more-pictures > summary {
 }
 
 .filters .by-state > summary {
+	padding-block: 2px;
 	color: var(--quiet);
 }
 
@@ -3367,6 +3661,8 @@ body[data-page="scenarios"] main.scenarios {
 }
 
 .server {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) max-content;
 	gap: 4px 2.4ch;
 	margin: 16px 0 0;
 	padding: 12px 16px;
@@ -3376,6 +3672,9 @@ body[data-page="scenarios"] main.scenarios {
 }
 
 .server .status {
+	grid-column: 1;
+	grid-row: 1;
+	justify-content: flex-start;
 	gap: 1.2ch;
 	padding: 0;
 	border: 0;
@@ -3403,14 +3702,22 @@ body[data-page="scenarios"] main.scenarios {
 }
 
 .server .where {
-	flex-basis: 100%;
+	grid-column: 1 / -1;
 	min-width: 0;
 	margin-left: calc(9px + 1.2ch);
 	overflow-wrap: anywhere;
 }
 
-.server .action {
-	margin: 0 0 0 calc(9px + 1.2ch);
+.server > form {
+	grid-column: 2;
+	grid-row: 1;
+	margin: 0;
+}
+
+.server > details {
+	grid-column: 1 / -1;
+	min-width: 0;
+	margin-left: calc(9px + 1.2ch);
 }
 
 .scenarios h2 {
@@ -3444,8 +3751,8 @@ body[data-page="scenarios"] main.scenarios {
 
 .scenario {
 	grid-template-columns: minmax(0, 1fr) minmax(8rem, 11rem) minmax(10rem, 15rem);
-	gap: 12px 2.4ch;
-	padding: 16px 0;
+	gap: 0;
+	padding: 0;
 	border-top: 1px solid var(--rule);
 	background: var(--surface);
 }
@@ -3455,12 +3762,12 @@ body[data-page="scenarios"] main.scenarios {
 }
 
 .scenario > .text {
-	padding-left: 12px;
+	padding: 12px;
 }
 
 .scenario > .act,
 .scenario > .seen {
-	padding: 8px 12px;
+	padding: 12px;
 	border-left: 1px solid var(--rule);
 	background: var(--surface-head);
 }
@@ -3501,6 +3808,7 @@ body[data-page="scenarios"] main.scenarios {
 	font-weight: 700;
 	text-decoration: underline;
 	text-underline-offset: 0.22em;
+	text-align: left;
 }
 
 .open:disabled {
@@ -3511,7 +3819,14 @@ body[data-page="scenarios"] main.scenarios {
 }
 
 .results {
-	gap: var(--control-gap) 1.6ch;
+	display: grid;
+	grid-template-columns: repeat(2, max-content);
+	gap: var(--control-gap) 12px;
+}
+
+.results .result {
+	min-height: 24px;
+	text-align: left;
 }
 
 .result,
@@ -3777,7 +4092,7 @@ body[data-page="prompts"] .main > details {
 
 .round-results h2 {
 	margin: 0 0 6px;
-	padding: 8px 80px 8px 12px;
+	padding: 8px 80px 8px 16px;
 	border: 1px solid var(--rule);
 	background: var(--surface-head);
 	font-size: 1rem;
@@ -3785,6 +4100,8 @@ body[data-page="prompts"] .main > details {
 }
 
 .round-results > p {
+	box-sizing: border-box;
+	padding-inline: 16px;
 	color: var(--quiet);
 	font-size: 0.867rem;
 }
@@ -3801,6 +4118,10 @@ body[data-page="prompts"] .main > details {
 	cursor: pointer;
 }
 
+.round-results > button {
+	margin-inline-start: 16px;
+}
+
 .round-result {
 	position: relative;
 	border-top: 1px solid var(--rule);
@@ -3938,6 +4259,10 @@ body[data-page="bursts"] > .main {
 	text-align: right;
 }
 
+.lines .stands strong {
+	color: var(--ink);
+}
+
 .lines .number {
 	margin: 0;
 	color: var(--quiet);
@@ -4181,15 +4506,21 @@ details.section[open] > summary {
 	background-image: var(--grain-dots);
 }
 
+/* Spare width belongs to setup details, not to longer lines of prose. */
+@media (min-width: 110rem) {
+	body[data-page="pull_requests"] > .main {
+		--rail: 20rem;
+	}
+}
+
 /* A window too narrow for the column, its keys and the outline at once gives
    up the outline first: the reading keeps its width, and [ and ] still go
    from section to section. */
-
 @media (max-width: 88rem) {
 	body[data-page="pull_requests"] > .main {
 		--measure: min(
 			41rem,
-			calc(100vw - var(--side) - var(--gutter) - 14rem - 28px)
+			calc(100vw - var(--side) - var(--gutter) - var(--key-space) - var(--lane-gap) - 24px)
 		);
 	}
 
@@ -4206,8 +4537,24 @@ details.section[open] > summary {
 	}
 
 	.try {
+		flex: none;
 		overflow: visible;
 	}
+
+	.try h2 {
+		position: static;
+	}
+
+	.try-pop {
+		inset: 24px 16px auto;
+		width: auto;
+		max-width: 72ch;
+		margin-inline: auto;
+	}
+
+	.try .tail {
+		right: 16px;
+	}
 }
 
 /* Narrower still, the route folds over the page, and a block's keys are named
@@ -4320,14 +4667,41 @@ details.section[open] > summary {
 	}
 
 	.modebar {
+		display: flex;
 		flex-wrap: wrap;
-		gap: 8px;
-		padding-block: 8px;
+		gap: 4px 8px;
+		padding-block: 4px;
 	}
 
 	.modebar .mode {
-		flex-basis: 100%;
-		gap: 4px 12px;
+		display: contents;
+		font-size: 0.8rem;
+	}
+
+	.modebar .all-keys {
+		padding-block: 1px;
+	}
+
+	.draft-tools {
+		padding-block: 8px;
+	}
+
+	.draft-tools .bar {
+		gap: 8px;
+	}
+
+	.progress-line {
+		gap: 4px 8px;
+	}
+
+	.progress-line meter,
+	.progress-line meter::-webkit-meter-bar {
+		width: 4rem;
+	}
+
+	.filters {
+		margin-top: 8px;
+		padding-top: 8px;
 	}
 
 	.keys-help {