proctolog 0.1.0

data/public/decisions.css

@@ -0,0 +1,949 @@
+:root {
+	--ok: #2e6b44;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--ok: #8fc99f;
+	}
+}
+
+button {
+	font: inherit;
+}
+
+.reading {
+	margin: 0.5rem 0 0;
+	color: var(--quiet);
+	font-size: 0.87rem;
+}
+
+.decisions [hidden],
+.draft-tools [hidden],
+[data-queue-empty][hidden] {
+	display: none;
+}
+
+.draft-tools {
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	padding: 0.7rem 0;
+	border-block: 1px solid var(--rule);
+	background: var(--paper);
+}
+
+.draft-tools p {
+	margin: 0.2rem 0;
+	max-width: 75ch;
+}
+
+/* One line: how far the choices are on the left, what to do on the right */
+
+.draft-tools .bar {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.4rem 1.5rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.draft-tools .bar .actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.4rem 1.2rem;
+	align-items: center;
+}
+
+.progress-line {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.3rem 0.9rem;
+	align-items: center;
+	color: var(--quiet);
+}
+
+.progress-line strong {
+	color: var(--ink);
+	font-weight: 600;
+}
+
+.progress-line meter {
+	width: 7rem;
+	height: 0.4rem;
+}
+
+.progress-line .left {
+	color: var(--ink);
+}
+
+.progress-line .again {
+	color: var(--pin);
+}
+
+.draft-tools .where {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0 1.5rem;
+	align-items: center;
+}
+
+.round-line {
+	color: var(--chalk);
+	font-size: 0.87rem;
+}
+
+/* Backup, imports and the counts in full: a panel that drops from the bar. */
+
+.draft-tools .data {
+	inset: 4rem 1.5rem auto auto;
+	width: min(44rem, 92vw);
+	margin: 0;
+	padding: 0.9rem 1.1rem 1rem;
+	border: 1px solid var(--rule);
+	border-radius: 8px;
+	background: var(--paper);
+	color: var(--ink);
+	font-size: 0.87rem;
+	box-shadow: 0 0.6rem 1.6rem rgb(0 0 0 / 0.25);
+}
+
+.draft-tools .data h2 {
+	margin: 0 0 0.4rem;
+	font: 500 1.1rem / 1.3 var(--serif);
+}
+
+.filters .by-state > summary {
+	width: fit-content;
+	cursor: pointer;
+}
+
+.draft-tools .data .explain {
+	margin-top: 0.5rem;
+	font-size: 0.8rem;
+}
+
+/* On a pull request's page the bar stays in view, so what the keys scroll to
+   comes to rest under it and above the bar at the foot. */
+
+body:has(.draft-tools.compact) [data-reading],
+body:has(.draft-tools.compact) .description [data-decision] {
+	scroll-margin-block: 5rem 3.5rem;
+}
+
+/* The choices under a decision, on one line; plain only on the one at hand. */
+
+.task-list-item > .beneath > .actions,
+.box .beneath > .actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.15rem 1rem;
+	width: max-content;
+	max-width: min(46rem, 88vw);
+	font-size: 0.84rem;
+}
+
+.draft-tools .data .actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.4rem 1.2rem;
+	align-items: baseline;
+	margin-top: 0.5rem;
+}
+
+main.description [data-decision][hidden],
+[data-round-results][hidden],
+[data-round-line][hidden],
+[data-finish][hidden],
+[data-enter-responses][hidden] {
+	display: none;
+}
+
+/* Where a pull request's decisions end */
+
+.finish {
+	margin: 1rem 0 1.2rem;
+	padding: 0.8rem 1rem;
+	border-left: 3px solid var(--ok);
+	background: var(--rest);
+}
+
+.finish:focus-visible {
+	outline: 2px solid var(--chalk);
+	outline-offset: 2px;
+}
+
+.finish p {
+	margin: 0;
+}
+
+.finish .actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.4rem 1.4rem;
+	margin-top: 0.5rem;
+}
+
+.views {
+	display: flex;
+	gap: 1.2rem;
+}
+
+.views .count,
+.filters button .count {
+	color: var(--quiet);
+	text-decoration: none;
+}
+
+button[aria-pressed="true"] {
+	color: var(--ink);
+	font-weight: 600;
+	text-decoration: none;
+}
+
+[data-draft-message]:empty {
+	display: none;
+}
+
+.import-choices {
+	display: inline-flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: 0.4rem;
+}
+
+.import-choices input {
+	max-width: 14rem;
+	font: inherit;
+	color: var(--ink);
+}
+
+.draft-status {
+	margin: 0.5rem 0;
+	color: var(--chalk);
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+.draft-status:empty {
+	display: none;
+}
+
+.decision-screenshots {
+	margin-block: 0.7rem;
+}
+
+.decision-screenshots summary {
+	color: var(--chalk);
+	cursor: pointer;
+}
+
+.decision-screenshots :focus-visible {
+	outline: 2px solid var(--chalk);
+	outline-offset: 3px;
+}
+
+.decision-pictures {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+	gap: 1rem;
+	margin-top: 0.7rem;
+}
+
+.decision-pictures figure {
+	min-width: 0;
+	margin: 0;
+}
+
+/* A decision's pictures as they were when it was chosen on, beside as they
+   are now, one row a picture. */
+.pictures-since figure {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 0 0.5rem;
+	margin: 0.5rem 0;
+}
+
+.pictures-since img {
+	display: block;
+	max-width: 100%;
+	max-height: 30vh;
+	border: 1px solid var(--rule);
+}
+
+.pictures-since span {
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.pictures-since figcaption {
+	grid-column: 1 / -1;
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+/* A pair is previewed whole, its halves side by side over one caption. */
+.decision-pictures figure.pair {
+	display: grid;
+	grid-column: 1 / -1;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 0 0.5rem;
+}
+
+.decision-pictures figure.pair figcaption {
+	grid-column: 1 / -1;
+}
+
+.decision-pictures img {
+	display: block;
+	max-width: 100%;
+	max-height: 40vh;
+	object-fit: contain;
+}
+
+.decision-pictures figcaption {
+	margin-top: 0.4rem;
+	font:
+		0.875rem / 1.4 ui-sans-serif,
+		system-ui,
+		sans-serif;
+	white-space: pre-line;
+	overflow-wrap: anywhere;
+}
+
+.screenshot-warning {
+	color: var(--pin);
+}
+
+.box[data-choice="leave"] .draft-status {
+	color: var(--ok);
+}
+
+.box[data-choice="stale"] .draft-status {
+	color: var(--pin);
+}
+
+.box:focus-visible,
+.draft-tools :focus-visible,
+.actions :focus-visible,
+.choice-editor :focus-visible {
+	outline: 2px solid var(--chalk);
+	outline-offset: 3px;
+}
+
+.choice-editor {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.7rem 1rem;
+	max-width: 68ch;
+	margin-top: 0.75rem;
+}
+
+.choice-editor label,
+.choice-editor textarea,
+.choice-editor .reading {
+	flex-basis: 100%;
+}
+
+.choice-editor textarea {
+	box-sizing: border-box;
+	width: 100%;
+	min-height: 6rem;
+	padding: 0.65rem;
+	border: 1px solid var(--rule);
+	background: var(--paper);
+	color: var(--ink);
+	font: inherit;
+	resize: vertical;
+	caret-color: var(--chalk);
+}
+
+.round-results {
+	margin: 2rem 0;
+	scroll-margin-top: 14rem;
+}
+
+.round-result {
+	margin: 1.4rem 0;
+	padding-block: 1rem;
+	border-top: 1px solid var(--rule);
+	scroll-margin-top: 14rem;
+}
+
+.round-result h3,
+.round-result h4 {
+	margin: 0.3rem 0;
+}
+
+.round-result[aria-current] {
+	background: var(--rest);
+	outline: 2px solid var(--chalk);
+	outline-offset: 0.5rem;
+}
+
+.request-text,
+.response-prose,
+.owner-question,
+.response-warning {
+	max-width: 72ch;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+/* Words an agent wrote, as written until GitHub's drawing of them comes. */
+pre.as-written {
+	margin: 0;
+	font: inherit;
+	white-space: pre-wrap;
+}
+
+.response-summary {
+	font-weight: 700;
+}
+
+.round-result > .response-prose,
+.round-result > .response-summary {
+	margin-block: 0.8rem;
+}
+
+.response-prose > .piece,
+.response-summary > .piece,
+.owner-question > .piece {
+	margin-block: 0;
+}
+
+/* What an answer rests on: its pictures shown, a before beside its after,
+   each looked at closely as the description's are. */
+figure.evidence {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, max-content));
+	gap: 0.3rem 12px;
+	width: fit-content;
+	max-width: 100%;
+	margin: 0.8rem 0;
+}
+
+figure.evidence:not(:has(.shot + .shot)) {
+	grid-template-columns: minmax(0, max-content);
+}
+
+figure.evidence .shot {
+	position: relative;
+	display: block;
+}
+
+figure.evidence img {
+	display: block;
+	max-width: 100%;
+	max-height: 60vh;
+	border: 1px solid var(--rule);
+	cursor: zoom-in;
+	user-select: none;
+}
+
+figure.evidence .half-said {
+	position: absolute;
+	top: 4px;
+	left: 4px;
+	padding: 0 4px;
+	background: var(--paper);
+	color: var(--quiet);
+	font: 0.72rem / 1.3 var(--mono);
+	pointer-events: none;
+}
+
+figure.evidence .missing {
+	color: var(--quiet);
+	font-size: 0.867rem;
+	overflow-wrap: anywhere;
+}
+
+figure.evidence figcaption {
+	grid-column: 1 / -1;
+	color: var(--quiet);
+	font-size: 0.867rem;
+}
+
+.evidence-named,
+.checks {
+	max-width: 72ch;
+	margin: 0.6rem 0;
+	padding: 0;
+	list-style: none;
+}
+
+.evidence-named li,
+.checks li {
+	margin: 0.3rem 0;
+	overflow-wrap: anywhere;
+}
+
+.evidence-named code {
+	display: block;
+	color: var(--quiet);
+	font-size: 0.8rem;
+}
+
+.checks .check {
+	display: inline-block;
+	min-width: 8ch;
+	margin-right: 1ch;
+	font-weight: 700;
+}
+
+/* A check that failed is the one to see first: it stands reversed. */
+.checks [data-result="failed"] .check {
+	padding: 0 0.5ch;
+	background: var(--ink);
+	color: var(--paper);
+}
+
+.response-state {
+	color: var(--chalk);
+	font-weight: 600;
+}
+
+[data-review-state="closed"] .response-state {
+	color: var(--ok);
+}
+
+.response-warning {
+	color: var(--pin);
+}
+
+.quoted-code {
+	max-width: 72ch;
+	overflow-x: auto;
+	padding: 0.75rem;
+	background: var(--rest);
+}
+
+.actions button[aria-pressed="true"] {
+	color: var(--ink);
+	font-weight: 600;
+}
+
+@media (max-width: 40rem) {
+	.draft-tools {
+		position: static;
+	}
+}
+
+button.quiet {
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--chalk);
+	cursor: pointer;
+	text-decoration: underline;
+	text-underline-offset: 0.18em;
+}
+
+button.quiet:hover {
+	color: var(--ink);
+}
+
+button.primary {
+	padding: 0.45rem 1.1rem;
+	border: 0;
+	border-radius: 4px;
+	background: var(--chalk);
+	color: var(--paper);
+	cursor: pointer;
+}
+
+/* The head: what the page is, and the ways to look at it */
+
+.tally {
+	margin: 0;
+	max-width: 62ch;
+}
+
+.tally.title {
+	margin-bottom: 0.6rem;
+	color: var(--quiet);
+	font: italic 1.05rem / 1.3 var(--serif);
+}
+
+.draft-tools .reading {
+	font-size: 0.8rem;
+}
+
+.filters {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.4rem 0.5rem;
+	margin-top: 1.1rem;
+}
+
+.filters a {
+	padding: 0.3rem 0.75rem;
+	border: 1px solid var(--rule);
+	border-radius: 999px;
+	color: var(--ink);
+	text-decoration: none;
+	white-space: nowrap;
+}
+
+.filters a:hover {
+	border-color: var(--chalk);
+}
+
+.filters a[aria-current] {
+	border-color: var(--ink);
+	background: var(--ink);
+	color: var(--paper);
+}
+
+.filters [data-filter="open"],
+.filters [data-filter="all"] {
+	margin-left: 0.9rem;
+}
+
+.filters .count {
+	margin-left: 0.2rem;
+	opacity: 0.65;
+}
+
+.unmatched {
+	margin-top: 1.4rem;
+	padding: 0.7rem 0.9rem;
+	border-left: 3px solid var(--pin);
+	background: var(--rest);
+}
+
+.unmatched h2 {
+	margin: 0 0 0.3rem;
+	font: italic 1.05rem / 1.3 var(--serif);
+}
+
+.unmatched ul {
+	margin: 0;
+	padding-left: 1.1rem;
+}
+
+.empty {
+	margin-top: 2rem;
+	color: var(--quiet);
+}
+
+/* A pull request's boxes */
+
+.part {
+	margin-top: 2.6rem;
+	scroll-margin-top: 1rem;
+}
+
+.part header {
+	padding-bottom: 0.5rem;
+	border-bottom: 2px solid var(--rule);
+}
+
+.part h2 {
+	margin: 0;
+	font: 500 1.3rem / 1.3 var(--serif);
+}
+
+.part .facts,
+.part .refused,
+.part .routine {
+	margin: 0.2rem 0 0;
+	color: var(--quiet);
+	font-size: 0.87rem;
+}
+
+.part .routine {
+	margin-top: 0.6rem;
+	font-size: 0.95rem;
+}
+
+.part .routine a {
+	display: inline-block;
+	padding: 0.3rem 0.8rem;
+	border: 1px solid var(--rule);
+	border-radius: 4px;
+	text-decoration: none;
+}
+
+.part .routine a:hover {
+	border-color: var(--chalk);
+	background: var(--rest);
+}
+
+.lead-in {
+	margin: 1.6rem 0 0.2rem;
+	color: var(--quiet);
+	font: italic 1rem / 1.35 var(--serif);
+}
+
+.boxes {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.box {
+	position: relative;
+	padding: 0.85rem 0.5rem 0.85rem 2rem;
+	border-top: 1px solid var(--rule);
+	scroll-margin-block: 12rem 3rem;
+}
+
+.box::before {
+	position: absolute;
+	top: 0.85rem;
+	left: 0.5rem;
+	color: var(--quiet);
+	content: "○";
+}
+
+.box[data-state="answered"]::before {
+	color: var(--chalk);
+	content: "◐";
+}
+
+.box[data-state="accepted"]::before {
+	color: var(--ok);
+	content: "●";
+}
+
+.box[data-state="elsewhere"]::before {
+	color: var(--ok);
+	content: "✓";
+}
+
+.box[data-state="rewritten"]::before {
+	color: var(--pin);
+	content: "↺";
+}
+
+.box[data-waiting="true"] {
+	box-shadow: inset 3px 0 var(--pin);
+}
+
+.box[data-waiting="true"]::before {
+	left: 0.8rem;
+	color: var(--pin);
+}
+
+.box[aria-current] {
+	background: var(--rest);
+}
+
+/* GitHub's rendering of the box, set quietly */
+
+.body {
+	max-width: 68ch;
+	overflow-wrap: anywhere;
+}
+
+.body > :first-child {
+	margin-top: 0;
+}
+
+.body > :last-child {
+	margin-bottom: 0;
+}
+
+.body p {
+	margin: 0.4rem 0;
+}
+
+.body code {
+	padding: 0.05em 0.3em;
+	border-radius: 3px;
+	background: var(--rest);
+	font:
+		0.86em ui-monospace,
+		Menlo,
+		monospace;
+}
+
+.body pre {
+	overflow-x: auto;
+	padding: 0.6rem 0.8rem;
+	background: var(--rest);
+}
+
+.body pre code {
+	padding: 0;
+}
+
+.body img {
+	max-width: 100%;
+	height: auto;
+}
+
+.status {
+	margin: 0.35rem 0 0;
+	color: var(--quiet);
+	font-size: 0.82rem;
+}
+
+.state {
+	color: var(--ink);
+	font-weight: 500;
+}
+
+/* Four buttons under each of hundreds of boxes: only the box at hand shows them plainly */
+
+.box:not([aria-current], :hover, :focus-within) .actions {
+	opacity: 0.6;
+}
+
+/* Recorded elsewhere */
+
+.recorded {
+	margin-top: 3rem;
+	padding-top: 0.8rem;
+	border-top: 2px solid var(--rule);
+}
+
+.recorded summary {
+	cursor: pointer;
+	font: italic 1.05rem / 1.3 var(--serif);
+}
+
+.recorded .count {
+	color: var(--quiet);
+	font:
+		0.87rem ui-sans-serif,
+		system-ui,
+		sans-serif;
+}
+
+.recorded ul {
+	margin: 0.6rem 0 0;
+	padding-left: 1.1rem;
+}
+
+/* A ticked box takes one line until it is opened */
+
+.box details summary {
+	display: flex;
+	gap: 0.8rem;
+	overflow: hidden;
+	color: var(--quiet);
+	cursor: pointer;
+	white-space: nowrap;
+}
+
+.box details summary .state {
+	flex: none;
+	color: var(--ok);
+}
+
+.box details[open] summary {
+	display: block;
+	margin-bottom: 0.3rem;
+	white-space: normal;
+}
+
+.box details:not([open]) summary {
+	text-overflow: ellipsis;
+}
+
+@media (max-width: 40rem) {
+	.box {
+		padding-right: 0;
+		scroll-margin-block: 1rem;
+	}
+
+	.round-results,
+	.round-result {
+		scroll-margin-top: 1rem;
+	}
+
+	.filters [data-filter="open"],
+	.filters [data-filter="all"] {
+		margin-left: 0;
+	}
+
+	.keys {
+		display: none;
+	}
+}
+/* Accepting */
+
+.acceptance {
+	max-width: 56rem;
+}
+
+.acceptance h2 {
+	margin: 1.8rem 0 0.4rem;
+	font: italic 1.05rem / 1.3 var(--serif);
+}
+
+.chosen {
+	margin: 1.2rem 0 0;
+	padding-left: 1.4rem;
+}
+
+.chosen li {
+	padding: 0.15rem 0;
+}
+
+.acceptance pre {
+	margin: 0;
+	padding: 0.7rem 0.9rem;
+	overflow-x: auto;
+	border: 1px solid var(--rule);
+	background: var(--rest);
+	font:
+		0.82rem ui-monospace,
+		Menlo,
+		monospace;
+}
+
+.acceptance .how {
+	max-width: 62ch;
+	color: var(--quiet);
+}
+
+.acceptance .buttons {
+	display: flex;
+	align-items: baseline;
+	gap: 1.4rem;
+	margin-top: 1.4rem;
+}
+
+.acceptance .buttons form {
+	margin: 0;
+}
+
+/* A piece of a description as GitHub draws it, in the desk's own type. */
+.piece {
+	max-width: 72ch;
+	margin-block: 1em;
+	overflow-wrap: anywhere;
+	/* Drawn HTML, where what lies between the tags is no line of its own. */
+	white-space: normal;
+}
+
+.piece img {
+	max-width: 100%;
+	height: auto;
+}
+
+.piece table {
+	border-collapse: collapse;
+}
+
+.piece th,
+.piece td {
+	border: 1px dotted currentColor;
+	padding: 0.25em 0.5em;
+	vertical-align: top;
+}
+
+.piece pre {
+	white-space: pre-wrap;
+}
+
+.round-status {
+	font-weight: bold;
+}
+
+.round-background > summary {
+	cursor: pointer;
+}