vole

Clone

Read only, no credentials:

https://rodent.software/vole.git

Write over SSH with a registered key:

git clone ssh://git@rodent.software:2222/vole.git

A free and open-source forge that lives in your Git repo.

Blame · server/web/static/vole.css

Line attribution on main · 2413 line(s) · showing the first 1 MiB

View file History

796ac8c0 Keenan Nemetz 11d ago	1	/* Vole's web surface. Token-driven: a light theme is another block of variables,
	2	and a real identity is a change to the top block only. Everforest is the
	3	permanent theme in static/everforest.css; this sheet supplies the layout and
	4	the fallback tokens the theme sheet overrides.
c717d4eb Keenan Nemetz 13d ago	5
	6	Sections, in file order. Rules cascade in this order too, so a later section
	7	can override an earlier one and a section cannot be moved without checking
	8	what it was quietly overriding:
	9
	10	tokens custom properties, dark and light (:root)
6c03e6d3 Keenan Nemetz 9d ago	11	chrome document shell, global bar, account menu,
6c03e6d3 Keenan Nemetz 9d ago	12	command palette
c717d4eb Keenan Nemetz 13d ago	13	repository header name, visibility, tab row
	14	panels and tables the bordered surfaces lists and pages sit on
	15	controls buttons, inputs, selects, form layout
	16	labels, flashes, empty pages
	17	auth sign-in, registration, invite, account
	18	repository home clone button, readme, the home row layout
	19	diffs and markdown code/diff tables, hunks, comment cells, .md
	20	shared responsive rules the few rules that apply to every surface
	21	repository overview summary page: main column and sidebar
	22	code tab bar and crumbs the bar above the open file
	23	code browser and file tree the persistent tree beside the pane
306f36fc Keenan Nemetz 12d ago	24	syntax highlighting prism token classes
c717d4eb Keenan Nemetz 13d ago	25	repository overview sidebar compact commit and run rows
c765ae2e Keenan Nemetz 13d ago	26	run detail summary cards, step timing and lazy logs
c717d4eb Keenan Nemetz 13d ago	27	issues and changes list pages, thread, forms, metadata sidebar
	28	icons inline SVG sizing
	29	activity feed event rows for one repository and the instance
	30	accessibility skip link, focus rings, reduced motion
	31	light theme the second token block
	32	pager previous/next between list pages
	33	code search per-file result blocks
	34	blame per-line commit column
6ce635a8 Keenan Nemetz 1d ago	35	landing page introduction card, repository grid, feed rail
c717d4eb Keenan Nemetz 13d ago	36	status page instance storage, runners, configuration
	37	language colours file-icon and language-dot palette
	38
	39	Note the two pairs that are easy to confuse: "repository home" is the clone
ed03b3d1 Keenan Nemetz 6h ago	40	button and readme on /<name>, while "landing page" is the instance home at
c717d4eb Keenan Nemetz 13d ago	41	/; "repository overview" is the summary page, while "repository overview
c717d4eb Keenan Nemetz 13d ago	42	sidebar" is the small commit and run rows it uses. */
f09ef39e Keenan Nemetz 15d ago	43
	44	:root {
	45	color-scheme: dark;
	46
	47	/* surfaces */
	48	--bg: #0e0f11;
	49	--bg-panel: #141517;
	50	--bg-raised: #191a1e;
	51	--bg-hover: #1f2024;
	52	--bg-active: #24262b;
	53	--border: #26282d;
	54	--border-strong: #35383f;
	55
	56	/* text */
	57	--fg: #e7e8ea;
	58	--fg-muted: #8b909a;
	59	--fg-faint: #696e78;
	60
	61	/* accent and status */
	62	--accent: #7c86ff;
	63	--accent-fg: #ffffff;
	64	--accent-soft: rgba(124, 134, 255, 0.14);
3516aef3 Keenan Nemetz 10d ago	65	/* A run that is still going gets its own token rather than --accent: a theme
	66	whose accent is green (Everforest) would otherwise paint "running" and
	67	"success" the same colour, and the two must not be confused at a glance. */
	68	--running: var(--accent);
f09ef39e Keenan Nemetz 15d ago	69	--good: #4cb782;
	70	--good-soft: rgba(76, 183, 130, 0.12);
	71	--bad: #eb5757;
	72	--bad-soft: rgba(235, 87, 87, 0.12);
	73	--warn: #f2c94c;
f6f4b1db Keenan Nemetz 15d ago	74	--warn-soft: rgba(242, 201, 76, 0.14);
d69be4df Keenan Nemetz 11d ago	75	/* Status buttons are filled, so their label uses the page ground colour. It is
	76	dark in the dark themes and light in the light ones, which keeps it legible
	77	against every theme's good/bad/warn hue. */
	78	--status-fg: var(--bg);
0e35a6a0 Keenan Nemetz 11d ago	79	/* A merged request has landed, which is neither open nor merely closed. It
	80	gets its own hue so a merged row cannot be read as still being reviewed. */
	81	--merged: #b083f0;
	82	--merged-soft: rgba(176, 131, 240, 0.14);
f09ef39e Keenan Nemetz 15d ago	83
	84	/* shape and type */
	85	--radius: 6px;
	86	--radius-lg: 8px;
55615c7a Keenan Nemetz 11d ago	87	/* One width for every search input: the global bar and a page's filter row
	88	should not resize the field when the reader moves between them. */
	89	--search-w: 18rem;
6c03e6d3 Keenan Nemetz 9d ago	90	/* One measure for the page column and the global bar. The bar pads itself out
	91	to the page's content edges, so the brand and the account menu sit on the
	92	same vertical line as the content below them. */
	93	--page-max: 1440px;
	94	--page-gutter: 24px;
796ac8c0 Keenan Nemetz 11d ago	95	--font: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", Arial, sans-serif;
	96	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	97	--fs: 15.4px;
	98	--lh: 1.55;
	99	/* Every explicit size is calc(<px> * var(--font-scale)) so the Account page's
	100	Text size preset reaches labels and code, not just body copy. */
	101	--font-scale: 1;
	102	}
	103
	104	/* Text-size presets. The account page stores the choice in this browser and
	105	static/theme.js applies the attribute before the first paint. */
	106	:root[data-font-scale="small"] { --font-scale: 0.9; }
	107	:root[data-font-scale="medium"] { --font-scale: 1; }
	108	:root[data-font-scale="large"] { --font-scale: 1.1; }
	109
	110	/* Self-hosted, OFL fonts. The Latin/Latin-ext subsets keep the binary small;
	111	anything outside them falls through to the system stack in --font/--mono. */
	112	@font-face {
	113	font-family: "Lexend";
	114	font-style: normal;
	115	font-weight: 100 900;
	116	font-display: swap;
ed03b3d1 Keenan Nemetz 6h ago	117	src: url("/-/static/fonts/lexend-latin-ext.woff2") format("woff2");
796ac8c0 Keenan Nemetz 11d ago	118	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
	119	}
	120	@font-face {
	121	font-family: "Lexend";
	122	font-style: normal;
	123	font-weight: 100 900;
	124	font-display: swap;
ed03b3d1 Keenan Nemetz 6h ago	125	src: url("/-/static/fonts/lexend-latin.woff2") format("woff2");
796ac8c0 Keenan Nemetz 11d ago	126	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	127	}
	128	@font-face {
	129	font-family: "JetBrains Mono";
	130	font-style: normal;
	131	font-weight: 100 800;
	132	font-display: swap;
ed03b3d1 Keenan Nemetz 6h ago	133	src: url("/-/static/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
796ac8c0 Keenan Nemetz 11d ago	134	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
	135	}
	136	@font-face {
	137	font-family: "JetBrains Mono";
	138	font-style: normal;
	139	font-weight: 100 800;
	140	font-display: swap;
ed03b3d1 Keenan Nemetz 6h ago	141	src: url("/-/static/fonts/jetbrains-mono-latin.woff2") format("woff2");
796ac8c0 Keenan Nemetz 11d ago	142	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	143	}
	144	@font-face {
	145	font-family: "JetBrains Mono";
	146	font-style: italic;
	147	font-weight: 100 800;
	148	font-display: swap;
ed03b3d1 Keenan Nemetz 6h ago	149	src: url("/-/static/fonts/jetbrains-mono-italic-latin-ext.woff2") format("woff2");
796ac8c0 Keenan Nemetz 11d ago	150	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
	151	}
	152	@font-face {
	153	font-family: "JetBrains Mono";
	154	font-style: italic;
	155	font-weight: 100 800;
	156	font-display: swap;
ed03b3d1 Keenan Nemetz 6h ago	157	src: url("/-/static/fonts/jetbrains-mono-italic-latin.woff2") format("woff2");
796ac8c0 Keenan Nemetz 11d ago	158	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
f09ef39e Keenan Nemetz 15d ago	159	}
	160
	161	* { box-sizing: border-box; }
	162	* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
	163	::-webkit-scrollbar { width: 10px; height: 10px; }
	164	::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
	165	::-webkit-scrollbar-track { background: transparent; }
	166
	167	html, body { height: 100%; }
	168
	169	body {
	170	margin: 0;
	171	background: var(--bg);
	172	color: var(--fg);
796ac8c0 Keenan Nemetz 11d ago	173	font-family: var(--font);
	174	font-size: calc(var(--fs) * var(--font-scale));
	175	line-height: var(--lh);
	176	-webkit-font-smoothing: auto;
	177	font-kerning: normal;
f09ef39e Keenan Nemetz 15d ago	178	}
	179
	180	a { color: var(--accent); text-decoration: none; }
	181	a:hover { text-decoration: underline; }
	182
	183	h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.005em; }
796ac8c0 Keenan Nemetz 11d ago	184	h1 { font-size: calc(19.8px * var(--font-scale)); line-height: 1.35; margin: 2px 0 12px; }
	185	h2 { font-size: calc(14.3px * var(--font-scale)); color: var(--fg-muted); margin: 24px 0 8px; }
	186	h3 { font-size: calc(14.3px * var(--font-scale)); }
f09ef39e Keenan Nemetz 15d ago	187	p { margin: 0 0 10px; }
	188	ul, ol { margin: 0 0 10px; padding-left: 20px; }
	189	hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
	190	img { max-width: 100%; }
	191
	192	.muted { color: var(--fg-muted); }
796ac8c0 Keenan Nemetz 11d ago	193	.sha { font-family: var(--mono); font-size: calc(13.2px * var(--font-scale)); color: var(--fg-muted); }
f09ef39e Keenan Nemetz 15d ago	194	.nowrap { white-space: nowrap; }
	195	.adds { color: var(--good); }
	196	.dels { color: var(--bad); }
	197	.conflict, .error { color: var(--bad); }
	198	.bad { color: var(--bad); }
	199
	200	/* ---------- chrome ---------- */
	201
	202	.topbar {
	203	display: flex;
	204	align-items: center;
	205	gap: 20px;
	206	height: 46px;
6c03e6d3 Keenan Nemetz 9d ago	207	/* The bar spans the window; its items stay inside the page column. */
	208	padding-block: 0;
	209	padding-inline: max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter)));
f09ef39e Keenan Nemetz 15d ago	210	background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
f09ef39e Keenan Nemetz 15d ago	211	border-bottom: 1px solid var(--border);
796ac8c0 Keenan Nemetz 11d ago	212	position: relative;
f09ef39e Keenan Nemetz 15d ago	213	z-index: 20;
	214	backdrop-filter: blur(8px);
	215	}
	216
b0fd812c Keenan Nemetz 13d ago	217	/* The brand is the emblem alone. The link keeps an accessible name, so a mark with
b0fd812c Keenan Nemetz 13d ago	218	no text beside it is still "Vole home" to a screen reader. */
f09ef39e Keenan Nemetz 15d ago	219	.brand {
	220	display: inline-flex;
	221	align-items: center;
	222	color: var(--fg);
	223	}
	224	.brand:hover { text-decoration: none; }
8911ab5f Keenan Nemetz 1d ago	225
e3b9c83c Keenan Nemetz 1d ago	226	/* The mark is a mask in the theme's ink. A light theme draws it in the page
	227	colour with a dark outline instead, because the same muted ink on a pale bar
	228	reads as a smudge. A custom light theme can opt in by setting these tokens. */
8911ab5f Keenan Nemetz 1d ago	229	:root {
e3b9c83c Keenan Nemetz 1d ago	230	--mark-fill: currentColor;
e3b9c83c Keenan Nemetz 1d ago	231	--mark-outline: transparent;
8911ab5f Keenan Nemetz 1d ago	232	}
	233	:root[data-theme^="everforest-light"],
	234	:root[data-theme="catppuccin-latte"],
	235	:root[data-theme="solarized-light"],
	236	:root[data-theme="rose-pine-dawn"],
	237	:root[data-theme="ayu-light"] {
e3b9c83c Keenan Nemetz 1d ago	238	--mark-fill: var(--bg);
e3b9c83c Keenan Nemetz 1d ago	239	--mark-outline: var(--fg);
8911ab5f Keenan Nemetz 1d ago	240	}
f09ef39e Keenan Nemetz 15d ago	241	.brand .mark {
6416cab1 Keenan Nemetz 13d ago	242	display: block;
8911ab5f Keenan Nemetz 1d ago	243	position: relative;
6416cab1 Keenan Nemetz 13d ago	244	flex: none;
8911ab5f Keenan Nemetz 1d ago	245	width: 30px;
	246	height: 30px;
	247	}
ed667a0e Keenan Nemetz 1d ago	248	.brand .mark::before,
ed667a0e Keenan Nemetz 1d ago	249	.brand .mark::after {
8911ab5f Keenan Nemetz 1d ago	250	content: "";
8911ab5f Keenan Nemetz 1d ago	251	position: absolute;
e3b9c83c Keenan Nemetz 1d ago	252	inset: 0;
ed667a0e Keenan Nemetz 1d ago	253	-webkit-mask-position: center;
	254	-webkit-mask-size: contain;
	255	-webkit-mask-repeat: no-repeat;
	256	mask-position: center;
	257	mask-size: contain;
	258	mask-repeat: no-repeat;
	259	}
8f0f3e8d Keenan Nemetz 1d ago	260	/* The outline layer is a slightly expanded solid silhouette behind the light
	261	head. It draws the outside edge and shows through the eye, mouth, and
	262	inner-ear holes; the whisker gaps still show the bar. */
ed667a0e Keenan Nemetz 1d ago	263	.brand .mark::before {
ed667a0e Keenan Nemetz 1d ago	264	background-color: var(--mark-outline);
ed03b3d1 Keenan Nemetz 6h ago	265	-webkit-mask-image: url("/-/static/vole-head-solid.png");
ed03b3d1 Keenan Nemetz 6h ago	266	mask-image: url("/-/static/vole-head-solid.png");
ed667a0e Keenan Nemetz 1d ago	267	}
ed667a0e Keenan Nemetz 1d ago	268	.brand .mark::after {
e3b9c83c Keenan Nemetz 1d ago	269	background-color: var(--mark-fill);
ed03b3d1 Keenan Nemetz 6h ago	270	-webkit-mask-image: url("/-/static/vole-head.png");
ed03b3d1 Keenan Nemetz 6h ago	271	mask-image: url("/-/static/vole-head.png");
f09ef39e Keenan Nemetz 15d ago	272	}
f09ef39e Keenan Nemetz 15d ago	273
796ac8c0 Keenan Nemetz 11d ago	274	.topnav { display: flex; gap: 6px; }
074ae160 Keenan Nemetz 14d ago	275	.topnav a {
	276	display: inline-flex;
	277	align-items: center;
796ac8c0 Keenan Nemetz 11d ago	278	gap: 6px;
	279	padding: 5px 11px;
	280	border: 1px solid transparent;
074ae160 Keenan Nemetz 14d ago	281	border-radius: var(--radius);
796ac8c0 Keenan Nemetz 11d ago	282	color: var(--fg);
	283	font-size: calc(13.75px * var(--font-scale));
	284	font-weight: 500;
	285	white-space: nowrap;
	286	}
	287	.topnav a:hover {
	288	background: var(--bg-hover);
	289	border-color: var(--border);
	290	color: var(--fg);
	291	text-decoration: none;
	292	}
	293	.topnav a.active {
	294	background: var(--accent-soft);
	295	border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
	296	color: var(--accent);
074ae160 Keenan Nemetz 14d ago	297	}
074ae160 Keenan Nemetz 14d ago	298
6c03e6d3 Keenan Nemetz 9d ago	299	.topsearch {
	300	flex: 1 1 auto;
	301	min-width: 8rem;
	302	max-width: var(--search-w);
	303	margin-left: auto;
	304	}
	305	/* The reader is opening the palette, not editing a field, so this is a button
	306	shaped like the search input it replaces. The label stands in for the
	307	placeholder, and the last item names the shortcut the browser will hear. */
	308	.topsearch-box {
	309	display: flex;
	310	align-items: center;
	311	gap: 8px;
	312	width: 100%;
	313	min-width: 0;
	314	min-height: 30px;
	315	padding: 5px 8px;
	316	border: 1px solid var(--border-strong);
	317	border-radius: var(--radius);
	318	background: var(--bg);
	319	color: var(--fg-muted);
	320	font: inherit;
	321	font-size: calc(13.75px * var(--font-scale));
	322	text-align: left;
	323	cursor: pointer;
	324	}
	325	.topsearch-box:hover {
	326	border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
	327	color: var(--fg);
	328	}
	329	.topsearch-box .icon { width: 13px; height: 13px; color: var(--fg-faint); }
	330	.topsearch-label {
	331	flex: 1 1 auto;
	332	min-width: 0;
	333	overflow: hidden;
	334	text-overflow: ellipsis;
	335	white-space: nowrap;
	336	}
	337	.topsearch-key {
	338	flex: 0 0 auto;
	339	padding: 0 4px;
	340	border: 1px solid var(--border);
	341	border-radius: 4px;
	342	background: var(--bg-panel);
	343	color: var(--fg-faint);
	344	font-size: calc(11.55px * var(--font-scale));
	345	}
f09ef39e Keenan Nemetz 15d ago	346
	347	.topright {
	348	display: flex;
	349	align-items: center;
	350	gap: 12px;
796ac8c0 Keenan Nemetz 11d ago	351	font-size: calc(13.75px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	352	color: var(--fg-muted);
f09ef39e Keenan Nemetz 15d ago	353	}
074ae160 Keenan Nemetz 14d ago	354	.topright > a { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-muted); }
	355	.topright > a:hover { color: var(--fg); text-decoration: none; }
	356
	357	.account-menu { position: relative; }
	358	.account-menu > summary {
	359	display: flex;
	360	align-items: center;
	361	gap: 6px;
	362	padding: 4px 8px;
	363	border-radius: var(--radius);
	364	color: var(--fg-muted);
	365	white-space: nowrap;
	366	list-style: none;
	367	cursor: pointer;
	368	}
	369	.account-menu > summary::-webkit-details-marker { display: none; }
	370	.account-menu > summary:hover { background: var(--bg-hover); color: var(--fg); }
	371	.account-menu[open] > summary { background: var(--bg-raised); color: var(--fg); }
	372	.account-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
	373	.account-caret { display: inline-flex; color: var(--fg-faint); }
	374	.account-caret .icon { width: 12px; height: 12px; transform: rotate(90deg); transition: transform 0.12s ease; }
	375	.account-menu[open] .account-caret .icon { transform: rotate(-90deg); }
	376	.account-pop {
	377	position: absolute;
	378	top: calc(100% + 6px);
	379	right: 0;
	380	z-index: 30;
	381	width: 13rem;
	382	padding: 4px;
	383	background: var(--bg-raised);
	384	border: 1px solid var(--border-strong);
	385	border-radius: var(--radius-lg);
	386	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	387	}
	388	.account-pop a,
	389	.account-pop button {
	390	display: flex;
	391	align-items: center;
	392	justify-content: flex-start;
	393	gap: 8px;
	394	width: 100%;
	395	padding: 6px 8px;
	396	border: 0;
	397	border-radius: var(--radius);
	398	background: none;
	399	color: var(--fg);
	400	font: inherit;
796ac8c0 Keenan Nemetz 11d ago	401	font-size: calc(13.75px * var(--font-scale));
074ae160 Keenan Nemetz 14d ago	402	text-align: left;
	403	cursor: pointer;
	404	}
	405	.account-pop a:hover,
	406	.account-pop button:hover { background: var(--bg-hover); color: var(--accent); text-decoration: none; }
	407	.account-pop form { margin: 0; }
	408	.account-sep { border-top: 1px solid var(--border); margin: 4px 0; }
f09ef39e Keenan Nemetz 15d ago	409
6c03e6d3 Keenan Nemetz 9d ago	410	/* ---------- command palette ---------- */
	411
	412	/* The global bar's search opens this: one field over every issue, change and
	413	comment the reader can see. A row is a link, so Enter and a click take the
	414	same route; the stylesheet only has to make the selected row visible. */
	415	.palette {
	416	width: min(40rem, calc(100vw - 2 * var(--page-gutter)));
	417	max-height: min(80vh, 44rem);
	418	margin: 10vh auto auto;
	419	padding: 0;
	420	border: 1px solid var(--border-strong);
	421	border-radius: var(--radius-lg);
	422	background: var(--bg-raised);
	423	color: var(--fg);
	424	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
	425	overflow: hidden;
	426	}
	427	.palette::backdrop { background: rgba(0, 0, 0, 0.5); }
	428	.palette-search {
	429	display: flex;
	430	align-items: center;
	431	gap: 10px;
	432	padding: 10px 12px;
	433	border-bottom: 1px solid var(--border);
	434	}
	435	.palette-search .icon { width: 16px; height: 16px; color: var(--fg-muted); }
	436	.palette-search input[type="search"] {
	437	flex: 1 1 auto;
	438	width: auto;
	439	max-width: none;
	440	min-height: 0;
	441	padding: 2px 0;
	442	border: 0;
	443	background: transparent;
	444	font-size: calc(15.4px * var(--font-scale));
	445	}
	446	/* The field is the dialog's heading, not a control with a box of its own. */
	447	.palette-search input[type="search"]:focus-visible { outline: 0; }
	448	.palette-close {
	449	display: inline-flex;
	450	align-items: center;
	451	justify-content: center;
	452	padding: 4px;
	453	border: 0;
	454	border-radius: var(--radius);
	455	background: none;
	456	color: var(--fg-faint);
	457	cursor: pointer;
	458	}
	459	.palette-close:hover { background: var(--bg-hover); color: var(--fg); }
	460	.palette-results { max-height: min(60vh, 30rem); overflow-y: auto; padding: 6px; }
	461	.palette-row {
	462	display: block;
	463	padding: 7px 9px;
	464	border-radius: var(--radius);
	465	color: var(--fg);
	466	}
	467	.palette-row:hover { background: var(--bg-hover); text-decoration: none; }
	468	.palette-row.is-selected { background: var(--accent-soft); }
	469	.palette-row-title {
	470	display: block;
	471	font-weight: 500;
	472	overflow: hidden;
	473	text-overflow: ellipsis;
474	white-space: nowrap;
475	}
476	.palette-row-where {
477	display: block;
478	color: var(--fg-faint);
479	font-size: calc(12.65px * var(--font-scale));
480	}
481	/* A palette row is one line high per part; the editable page can afford the
482	wrapped excerpt, the dialog cannot. */
483	.palette-row .search-snippet {
484	margin: 0;
485	overflow: hidden;
486	text-overflow: ellipsis;
487	white-space: nowrap;
488	}
489	.palette-empty {
490	margin: 0;
491	padding: 16px 12px;
492	color: var(--fg-muted);
493	font-size: calc(13.75px * var(--font-scale));
494	}
495	.palette-foot {
496	display: flex;
497	gap: 14px;
498	padding: 7px 12px;
499	border-top: 1px solid var(--border);
500	color: var(--fg-faint);
501	font-size: calc(12.65px * var(--font-scale));
502	}
503	.palette-foot kbd {
504	padding: 0 4px;
505	border: 1px solid var(--border);
506	border-radius: 4px;
507	background: var(--bg-panel);
508	color: var(--fg-muted);
509	font-size: calc(11.55px * var(--font-scale));
510	}
511
f09ef39e Keenan Nemetz 15d ago	512	.page {
6c03e6d3 Keenan Nemetz 9d ago	513	width: min(100%, var(--page-max));
f09ef39e Keenan Nemetz 15d ago	514	margin: 0 auto;
6c03e6d3 Keenan Nemetz 9d ago	515	padding: 20px var(--page-gutter) 72px;
f09ef39e Keenan Nemetz 15d ago	516	}
	517
	518	@media (max-width: 720px) {
	519	.tabs { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
6c03e6d3 Keenan Nemetz 9d ago	520	:root { --page-gutter: 12px; }
074ae160 Keenan Nemetz 14d ago	521	.topbar {
	522	height: auto;
	523	flex-wrap: wrap;
6c03e6d3 Keenan Nemetz 9d ago	524	padding-block: 8px;
074ae160 Keenan Nemetz 14d ago	525	gap: 8px 12px;
074ae160 Keenan Nemetz 14d ago	526	}
6c03e6d3 Keenan Nemetz 9d ago	527	.topsearch { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }
	528	.topsearch-box { width: 100%; }
	529	/* A keyboard shortcut is not part of a phone's vocabulary. */
	530	.topsearch-key { display: none; }
074ae160 Keenan Nemetz 14d ago	531	.topright { margin-left: auto; }
796ac8c0 Keenan Nemetz 11d ago	532	.topnav { gap: 4px; }
796ac8c0 Keenan Nemetz 11d ago	533	.topnav a { padding: 4px 8px; }
074ae160 Keenan Nemetz 14d ago	534	/* The icon is enough on a phone; the menu keeps the full name. */
074ae160 Keenan Nemetz 14d ago	535	.account-name { display: none; }
6c03e6d3 Keenan Nemetz 9d ago	536	.page { padding: 16px var(--page-gutter) 56px; }
6c03e6d3 Keenan Nemetz 9d ago	537	.palette { margin-top: 6vh; }
f09ef39e Keenan Nemetz 15d ago	538	}
	539
	540	/* ---------- repository header ---------- */
	541
	542	.repohead {
	543	margin-bottom: 16px;
	544	border-bottom: 1px solid var(--border);
	545	}
074ae160 Keenan Nemetz 14d ago	546	.repo-title { padding: 26px 0 12px; }
816cc543 Keenan Nemetz 11d ago	547	/* The repository actions sit on the title line, at the far right of the header. */
	548	.repo-title-row {
	549	display: flex;
	550	align-items: center;
	551	gap: 16px;
	552	}
	553	.repo-title-row .repo-name { flex: 1 1 auto; min-width: 0; }
	554	.repo-title-actions {
	555	display: flex;
	556	align-items: center;
	557	gap: 8px;
	558	flex: 0 0 auto;
	559	}
	560	.repo-title-row .clone-pop { left: auto; right: 0; }
074ae160 Keenan Nemetz 14d ago	561	.repo-name {
	562	display: flex;
	563	align-items: center;
	564	gap: 8px;
	565	min-width: 0;
	566	color: var(--fg);
796ac8c0 Keenan Nemetz 11d ago	567	font-size: calc(28.6px * var(--font-scale));
074ae160 Keenan Nemetz 14d ago	568	line-height: 1.2;
	569	font-weight: 600;
	570	letter-spacing: -0.025em;
	571	}
	572	.repo-name .repo-vis .icon { width: 16px; height: 16px; }
	573	.repo-desc {
	574	margin: 6px 0 0;
	575	color: var(--fg-muted);
796ac8c0 Keenan Nemetz 11d ago	576	font-size: calc(14.3px * var(--font-scale));
074ae160 Keenan Nemetz 14d ago	577	overflow: hidden;
	578	text-overflow: ellipsis;
	579	white-space: nowrap;
	580	}
	581
	582	/* The tab pages are a level below the repository identity: their own headers
ab326d3a Keenan Nemetz 14d ago	583	stay small. Top-level pages (Runners, Activity, Accounts, Account, Status) keep
9579c1f9 Keenan Nemetz 14d ago	584	the home-page header scale. */
9579c1f9 Keenan Nemetz 14d ago	585	.repohead + .page-head {
074ae160 Keenan Nemetz 14d ago	586	align-items: flex-start;
	587	gap: 16px;
	588	padding: 0;
	589	margin-bottom: 12px;
	590	border-bottom: 0;
	591	}
9579c1f9 Keenan Nemetz 14d ago	592	.repohead + .page-head h1 {
796ac8c0 Keenan Nemetz 11d ago	593	font-size: calc(19.8px * var(--font-scale));
074ae160 Keenan Nemetz 14d ago	594	line-height: 1.35;
	595	letter-spacing: -0.005em;
	596	margin: 0 0 3px;
	597	}
2e024cc9 Keenan Nemetz 14d ago	598	.repohead + .page-head h1:last-child { margin-bottom: 0; }
796ac8c0 Keenan Nemetz 11d ago	599	.repohead + .page-head .page-sub { font-size: calc(13.75px * var(--font-scale)); }
074ae160 Keenan Nemetz 14d ago	600
	601	@media (max-width: 720px) {
	602	.repo-title { padding: 18px 0 10px; }
796ac8c0 Keenan Nemetz 11d ago	603	.repo-name { font-size: calc(24.2px * var(--font-scale)); }
074ae160 Keenan Nemetz 14d ago	604	.repo-name .repo-vis .icon { width: 14px; height: 14px; }
074ae160 Keenan Nemetz 14d ago	605	}
f09ef39e Keenan Nemetz 15d ago	606
	607	.tabs {
	608	display: flex;
	609	gap: 2px;
	610	overflow-x: auto;
	611	scrollbar-width: none;
074ae160 Keenan Nemetz 14d ago	612	margin-left: -10px;
f09ef39e Keenan Nemetz 15d ago	613	}
	614	.tabs::-webkit-scrollbar { display: none; }
	615	.tabs a {
	616	color: var(--fg-muted);
	617	padding: 8px 10px 9px;
	618	border-bottom: 2px solid transparent;
	619	white-space: nowrap;
796ac8c0 Keenan Nemetz 11d ago	620	font-size: calc(13.75px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	621	}
	622	.tabs a:hover { color: var(--fg); text-decoration: none; }
	623	.tabs a.active { color: var(--fg); border-bottom-color: var(--accent); }
a196e404 Keenan Nemetz 11d ago	624	.tabs .chip-count { margin-left: 0; }
a196e404 Keenan Nemetz 11d ago	625	.tabs a.active .chip-count { color: var(--fg-muted); }
f09ef39e Keenan Nemetz 15d ago	626
973fb809 Keenan Nemetz 1d ago	627	/* The rule under a tab row belongs to a wrapper, not to the strip that carries
	628	the labels: `.tabs` pulls itself 10px left so the first label's text sits on
	629	the content edge, and a border on that element would hang 10px past it. The
	630	repository header keeps its rule on `.repohead`; a page's tabs and a change's
	631	sections wrap the same strip in this class, so every row starts and ends on
	632	the content edges together. */
	633	.tabrow { margin-bottom: 14px; border-bottom: 1px solid var(--border); }
e189a23e Keenan Nemetz 1d ago	634
a2ec9561 Keenan Nemetz 9d ago	635	/* A count that moved while the reader was looking elsewhere keeps one short
	636	ring, so the change is noticed; the number itself is the answer. app.js adds
	637	the class when a poll changes a badge and drops it when the animation ends. */
	638	.tabs .chip-count.count-changed {
	639	border-radius: 999px;
	640	animation: count-changed 1.8s ease-out;
	641	}
	642	@keyframes count-changed {
	643	from { color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
	644	to { box-shadow: 0 0 0 3px transparent; }
	645	}
	646
f09ef39e Keenan Nemetz 15d ago	647	/* ---------- panels and tables ---------- */
	648
	649	.panel {
	650	border: 1px solid var(--border);
	651	border-radius: var(--radius-lg);
	652	overflow: hidden;
	653	margin: 12px 0;
	654	background: var(--bg-panel);
	655	}
	656
	657	.card {
	658	background: var(--bg-panel);
	659	border: 1px solid var(--border);
	660	border-radius: var(--radius-lg);
	661	padding: 14px;
	662	margin: 12px 0;
	663	}
	664
	665	table {
	666	width: 100%;
	667	border-collapse: collapse;
796ac8c0 Keenan Nemetz 11d ago	668	font-size: calc(13.75px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	669	}
	670	.panel > table { margin: 0; }
	671	th, td {
	672	text-align: left;
	673	padding: 8px 12px;
	674	border-bottom: 1px solid var(--border);
	675	vertical-align: top;
	676	}
	677	tr:last-child > td { border-bottom: 0; }
	678	th {
	679	color: var(--fg-faint);
	680	font-weight: 500;
796ac8c0 Keenan Nemetz 11d ago	681	font-size: calc(12.1px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	682	text-transform: uppercase;
	683	letter-spacing: 0.04em;
	684	background: var(--bg-raised);
	685	padding-top: 7px;
	686	padding-bottom: 7px;
	687	}
	688	tbody tr:hover { background: var(--bg-hover); }
	689
	690	table.commits td { padding-top: 7px; padding-bottom: 7px; }
	691	table.commits td:first-child { width: 9ch; }
	692
	693	/* ---------- controls ---------- */
	694
	695	button, .button {
	696	display: inline-flex;
	697	align-items: center;
	698	justify-content: center;
	699	gap: 6px;
	700	background: var(--accent);
	701	color: var(--accent-fg);
	702	border: 1px solid transparent;
	703	border-radius: var(--radius);
	704	padding: 5px 11px;
796ac8c0 Keenan Nemetz 11d ago	705	font-family: var(--font);
	706	font-size: calc(13.75px * var(--font-scale));
	707	font-weight: 500;
	708	line-height: 1.4;
f09ef39e Keenan Nemetz 15d ago	709	cursor: pointer;
	710	white-space: nowrap;
	711	}
	712	button:hover, .button:hover { filter: brightness(1.08); text-decoration: none; }
	713	button:disabled { opacity: 0.5; cursor: default; }
3a068983 Keenan Nemetz 11d ago	714
	715	/* A POST form that is still in flight keeps its button in place: it is disabled
	716	and, after a short delay added by app.js, its icon becomes a spinner. */
	717	button[data-loading] { cursor: progress; }
	718	button.spinning > .icon { display: none; }
	719	.spinner {
	720	width: 14px;
	721	height: 14px;
	722	flex: 0 0 auto;
	723	border: 2px solid currentColor;
	724	border-right-color: transparent;
	725	border-radius: 50%;
	726	animation: spin 0.7s linear infinite;
	727	}
	728	@keyframes spin { to { transform: rotate(1turn); } }
	729
f09ef39e Keenan Nemetz 15d ago	730	.button.secondary, button.secondary {
	731	background: var(--bg-raised);
	732	color: var(--fg);
	733	border-color: var(--border-strong);
	734	}
	735	.button.secondary:hover { background: var(--bg-hover); }
	736
d69be4df Keenan Nemetz 11d ago	737	/* Action colours use the same filled shape as the primary control: the
	738	background carries the meaning, and hover brightens it like every other
	739	button. */
f6f4b1db Keenan Nemetz 15d ago	740	.button.success, button.success {
d69be4df Keenan Nemetz 11d ago	741	background: var(--good);
	742	color: var(--status-fg);
	743	border-color: transparent;
f6f4b1db Keenan Nemetz 15d ago	744	}
f6f4b1db Keenan Nemetz 15d ago	745	.button.warn, button.warn {
d69be4df Keenan Nemetz 11d ago	746	background: var(--warn);
	747	color: var(--status-fg);
	748	border-color: transparent;
f6f4b1db Keenan Nemetz 15d ago	749	}
f6f4b1db Keenan Nemetz 15d ago	750	.button.danger, button.danger {
d69be4df Keenan Nemetz 11d ago	751	background: var(--bad);
	752	color: var(--status-fg);
	753	border-color: transparent;
f6f4b1db Keenan Nemetz 15d ago	754	}
f6f4b1db Keenan Nemetz 15d ago	755
f09ef39e Keenan Nemetz 15d ago	756	button.link, .link {
	757	background: none;
	758	border: 0;
	759	color: var(--accent);
	760	padding: 0;
	761	font: inherit;
	762	font-weight: 400;
	763	}
	764	button.link:hover, .link:hover { text-decoration: underline; }
	765	form.inline { display: inline; }
	766
	767	select, input[type="text"], input[type="password"], input[type="search"], textarea {
	768	background: var(--bg);
	769	color: var(--fg);
	770	border: 1px solid var(--border-strong);
	771	border-radius: var(--radius);
	772	padding: 5px 8px;
	773	font: inherit;
796ac8c0 Keenan Nemetz 11d ago	774	font-size: calc(13.75px * var(--font-scale));
2e024cc9 Keenan Nemetz 14d ago	775	min-height: 30px;
f09ef39e Keenan Nemetz 15d ago	776	}
	777	select:focus, input:focus, textarea:focus {
	778	outline: 2px solid var(--accent-soft);
	779	outline-offset: 1px;
	780	border-color: var(--accent);
	781	}
	782	input[type="text"], input[type="password"], input[type="search"], textarea {
	783	width: 100%;
	784	max-width: 34rem;
	785	}
	786	textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
796ac8c0 Keenan Nemetz 11d ago	787	label { display: block; margin: 10px 0; color: var(--fg-muted); font-size: calc(13.75px * var(--font-scale)); }
f09ef39e Keenan Nemetz 15d ago	788	/* The label text sits above the control. Without this, a max-width input shares
	789	the line with its label and the form reads as a row of pairs. */
	790	label > input, label > textarea, label > select {
	791	display: block;
	792	margin-top: 4px;
	793	color: var(--fg);
	794	}
	795	label > select { width: 100%; max-width: 34rem; }
6ce635a8 Keenan Nemetz 1d ago	796	label > .field-hint {
	797	display: block;
	798	margin-top: 4px;
	799	color: var(--fg-faint);
	800	font-size: calc(12.1px * var(--font-scale));
	801	}
f09ef39e Keenan Nemetz 15d ago	802
55615c7a Keenan Nemetz 11d ago	803	/* Every filter/search row is one component: controls in a wrapping row, a
	804	visible label on every select, selects that apply on change, and a Search
	805	button for the text field. Search inputs share --search-w on every surface. */
f09ef39e Keenan Nemetz 15d ago	806	.filters {
	807	display: flex;
	808	flex-wrap: wrap;
	809	align-items: center;
	810	gap: 8px;
2e024cc9 Keenan Nemetz 14d ago	811	margin: 10px 0 12px;
f09ef39e Keenan Nemetz 15d ago	812	}
55615c7a Keenan Nemetz 11d ago	813	/* The code page needs a form per ref picker (two refs in one form would submit
	814	twice), so the row can contain forms as well as be one. */
	815	.filters form {
	816	display: inline-flex;
	817	flex-wrap: wrap;
	818	align-items: center;
	819	gap: 8px;
	820	}
6c98a271 Keenan Nemetz 9d ago	821	/* Every row reads left to right: filters, then search. The search group takes
	822	the leftover space, so it sits against the right edge whether the row is one
	823	page's chips and two selects or another page's ref pickers. A row with no
	824	search puts its clear action in the same slot. */
	825	.filters-search {
	826	display: flex;
	827	align-items: center;
	828	gap: 8px;
	829	margin-left: auto;
	830	}
	831	/* Inside the row the chips are one group, not a row with its own margins. */
	832	.filters .chips { margin: 0; }
2e024cc9 Keenan Nemetz 14d ago	833	.filters input[type="text"],
55615c7a Keenan Nemetz 11d ago	834	.filters input[type="search"] { width: var(--search-w); max-width: 100%; }
2e024cc9 Keenan Nemetz 14d ago	835	/* A label and its control stay on one line when the filter row wraps. */
	836	.filter-field {
	837	display: inline-flex;
	838	align-items: center;
	839	gap: 6px;
	840	margin: 0;
	841	}
	842	.filter-field > input,
	843	.filter-field > select {
	844	width: auto;
	845	max-width: none;
	846	margin-top: 0;
	847	}
	848	.chips + .filters { margin-top: 0; }
55615c7a Keenan Nemetz 11d ago	849	.page-head + .filters { margin-top: 0; }
	850
	851	@media (max-width: 720px) {
	852	.filters { flex-direction: column; align-items: stretch; }
	853	.filters form { flex-direction: column; align-items: stretch; }
	854	.filters input[type="text"],
	855	.filters input[type="search"] { width: 100%; }
6c98a271 Keenan Nemetz 9d ago	856	.filters-search { margin-left: 0; width: 100%; }
	857	/* The search stays one line on a phone: a full-width field and its button,
	858	not the stacked label/control shape the ref pickers need. */
	859	.filters-search form { flex-direction: row; align-items: center; }
	860	.filters-search input[type="text"],
	861	.filters-search input[type="search"] { flex: 1 1 auto; width: auto; }
55615c7a Keenan Nemetz 11d ago	862	/* A phone stacks the label above its control: a label and an 18rem select
	863	cannot share a 20rem-wide row without the control overflowing it. */
	864	.filter-field { flex-direction: column; align-items: stretch; gap: 4px; }
	865	.filters .filter-field > select { width: 100%; }
	866	}
f09ef39e Keenan Nemetz 15d ago	867
	868	/* ---------- labels, flashes, empty pages ---------- */
	869
	870	.label {
	871	display: inline-block;
	872	margin-left: 6px;
	873	padding: 1px 6px;
	874	border: 1px solid var(--border-strong);
	875	border-radius: 10px;
796ac8c0 Keenan Nemetz 11d ago	876	font-size: calc(12.1px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	877	line-height: 1.5;
	878	color: var(--fg-muted);
	879	vertical-align: 1px;
	880	}
	881	a.label:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
	882
	883	.flash {
	884	border: 1px solid var(--border-strong);
	885	background: var(--bg-panel);
	886	border-radius: var(--radius);
	887	padding: 8px 12px;
	888	margin-bottom: 14px;
796ac8c0 Keenan Nemetz 11d ago	889	font-size: calc(13.75px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	890	}
f09ef39e Keenan Nemetz 15d ago	891	.flash.bad { border-color: color-mix(in srgb, var(--bad) 50%, var(--border)); background: var(--bad-soft); }
1948358f Keenan Nemetz 15d ago	892	.flash.good { border-color: color-mix(in srgb, var(--good) 50%, var(--border)); background: var(--good-soft); }
4506a4d3 Keenan Nemetz 14d ago	893	.flash.warn { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); background: var(--warn-soft); }
f09ef39e Keenan Nemetz 15d ago	894
	895	.empty-page {
	896	max-width: 34rem;
	897	margin: 12vh auto 0;
	898	text-align: center;
	899	}
	900	.empty-page .eyebrow {
	901	color: var(--fg-faint);
796ac8c0 Keenan Nemetz 11d ago	902	font-family: var(--mono);
	903	font-size: calc(12.1px * var(--font-scale));
	904	font-weight: 600;
	905	line-height: 1;
f09ef39e Keenan Nemetz 15d ago	906	letter-spacing: 0.1em;
	907	text-transform: uppercase;
	908	margin-bottom: 10px;
	909	}
796ac8c0 Keenan Nemetz 11d ago	910	.empty-page h1 { font-size: calc(26.4px * var(--font-scale)); margin-bottom: 8px; }
f09ef39e Keenan Nemetz 15d ago	911	.empty-page p { margin-bottom: 18px; }
	912
	913	/* ---------- auth ---------- */
	914
	915	.auth { max-width: 34rem; margin-top: 8vh; }
	916	.auth h1 { margin-bottom: 6px; }
	917
c717d4eb Keenan Nemetz 13d ago	918	/* ---------- repository home ---------- */
f09ef39e Keenan Nemetz 15d ago	919
	920	details.clone { position: relative; }
	921	details.clone > summary {
	922	list-style: none;
	923	cursor: pointer;
	924	display: inline-flex;
	925	align-items: center;
	926	gap: 6px;
	927	background: var(--bg-raised);
	928	color: var(--fg);
	929	border: 1px solid var(--border-strong);
	930	border-radius: var(--radius);
	931	padding: 5px 11px;
796ac8c0 Keenan Nemetz 11d ago	932	font-size: calc(13.75px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	933	}
	934	details.clone > summary::-webkit-details-marker { display: none; }
	935	details.clone > summary:hover { background: var(--bg-hover); }
	936	details.clone[open] > summary { border-color: var(--accent); }
	937	.clone-pop {
	938	position: absolute;
	939	z-index: 10;
	940	top: calc(100% + 6px);
	941	left: 0;
	942	width: min(32rem, 80vw);
	943	background: var(--bg-raised);
	944	border: 1px solid var(--border-strong);
	945	border-radius: var(--radius-lg);
	946	padding: 12px;
	947	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	948	}
	949	.clone-pop p { margin: 8px 0 2px; }
	950	.clone-pop code { display: block; }
816cc543 Keenan Nemetz 11d ago	951	/* Each advertised transport is one row: the command takes the width, the copy
	952	button stays put at its end. */
	953	.clone-field {
	954	display: flex;
	955	align-items: center;
	956	gap: 6px;
	957	}
	958	.clone-field code {
	959	flex: 1 1 auto;
	960	min-width: 0;
	961	overflow-x: auto;
	962	white-space: nowrap;
	963	}
	964	.clone-field button { flex: 0 0 auto; padding: 5px 8px; }
f09ef39e Keenan Nemetz 15d ago	965
	966	.row { display: flex; gap: 16px; flex-wrap: wrap; }
	967	.row > div { flex: 1 1 18rem; min-width: 0; }
	968
	969	.readme { margin: 16px 0; }
	970
c717d4eb Keenan Nemetz 13d ago	971	/* ---------- diffs and markdown ---------- */
f09ef39e Keenan Nemetz 15d ago	972
	973	code, pre, kbd {
	974	font-family: var(--mono);
	975	}
	976	code {
	977	background: var(--bg-raised);
	978	border: 1px solid var(--border);
	979	border-radius: 4px;
	980	padding: 1px 5px;
796ac8c0 Keenan Nemetz 11d ago	981	font-size: calc(12.65px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	982	}
	983	pre {
	984	background: var(--bg-panel);
	985	border: 1px solid var(--border);
	986	border-radius: var(--radius);
	987	padding: 12px 14px;
	988	overflow: auto;
796ac8c0 Keenan Nemetz 11d ago	989	font-size: calc(13.2px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	990	line-height: 1.55;
	991	margin: 10px 0;
	992	}
	993	pre code { background: none; border: 0; padding: 0; font-size: inherit; }
	994
796ac8c0 Keenan Nemetz 11d ago	995	.crumbs { color: var(--fg-muted); font-size: calc(13.75px * var(--font-scale)); margin: -4px 0 12px; }
f09ef39e Keenan Nemetz 15d ago	996	.crumbs a { color: var(--fg-muted); }
	997	.crumbs a:hover { color: var(--accent); }
	998	.dir { color: var(--accent); }
	999
	1000	.md { line-height: 1.65; max-width: 90ch; }
	1001	.md > :first-child { margin-top: 0; }
	1002	.md > :last-child { margin-bottom: 0; }
	1003	.md h1, .md h2, .md h3, .md h4 {
	1004	color: var(--fg);
	1005	margin: 20px 0 8px;
	1006	letter-spacing: -0.01em;
	1007	text-transform: none;
	1008	}
796ac8c0 Keenan Nemetz 11d ago	1009	.md h1 { font-size: calc(22px * var(--font-scale)); }
	1010	.md h2 { font-size: calc(17.6px * var(--font-scale)); }
	1011	.md h3 { font-size: calc(15.4px * var(--font-scale)); }
	1012	.md h4 { font-size: calc(14.3px * var(--font-scale)); }
f09ef39e Keenan Nemetz 15d ago	1013	.md p { margin: 9px 0; }
	1014	.md ul, .md ol { padding-left: 22px; margin: 9px 0; }
	1015	.md blockquote {
	1016	margin: 10px 0;
	1017	padding: 2px 0 2px 12px;
	1018	border-left: 3px solid var(--border-strong);
	1019	color: var(--fg-muted);
	1020	}
	1021	.md pre { background: var(--bg-panel); }
	1022	.md table { width: auto; }
	1023	.md img { border-radius: var(--radius); }
	1024
796ac8c0 Keenan Nemetz 11d ago	1025	.diffsum { font-size: calc(13.2px * var(--font-scale)); margin: 10px 0; }
f09ef39e Keenan Nemetz 15d ago	1026
30de4a44 Keenan Nemetz 8d ago	1027	/* A diff is read with the browser's find bar as much as with the eyes, so the
	1028	card is not a scrolling box: it grows to the full height of the patch and the
	1029	page scrolls instead. `clip` rounds the corners like `hidden` did, without
	1030	making the element a scroll container that find has to scroll separately. */
f09ef39e Keenan Nemetz 15d ago	1031	.diff {
	1032	border: 1px solid var(--border);
	1033	border-radius: var(--radius-lg);
	1034	margin: 12px 0;
30de4a44 Keenan Nemetz 8d ago	1035	overflow: clip;
f09ef39e Keenan Nemetz 15d ago	1036	background: var(--bg-panel);
	1037	}
	1038	.diff h3 {
628d4523 Keenan Nemetz 11d ago	1039	display: flex;
	1040	align-items: center;
	1041	gap: 8px;
f09ef39e Keenan Nemetz 15d ago	1042	margin: 0;
	1043	padding: 8px 12px;
	1044	background: var(--bg-raised);
	1045	border-bottom: 1px solid var(--border);
796ac8c0 Keenan Nemetz 11d ago	1046	font-size: calc(13.2px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	1047	font-weight: 550;
f09ef39e Keenan Nemetz 15d ago	1048	}
628d4523 Keenan Nemetz 11d ago	1049	/* The name gives way before the counts do: the path can be long enough to cut,
	1050	and two short numbers at the end of the row are the reason the row exists. */
	1051	.diff h3 .path {
	1052	flex: 1 1 auto;
	1053	min-width: 0;
	1054	overflow: hidden;
	1055	text-overflow: ellipsis;
	1056	white-space: nowrap;
	1057	font-family: var(--mono);
	1058	}
	1059	/* One file's counts, in the same row as its name and at the other end of it. */
	1060	.diffstat {
	1061	display: inline-flex;
	1062	align-items: center;
	1063	gap: 8px;
	1064	flex: 0 0 auto;
	1065	font-family: var(--mono);
	1066	font-size: calc(12.1px * var(--font-scale));
	1067	font-weight: 400;
	1068	}
	1069	/* The row's own gap spaces the badges; the label's standalone margin was for
	1070	prose, where nothing else spaced it. */
	1071	.diff h3 .label { margin-left: 0; }
f09ef39e Keenan Nemetz 15d ago	1072	.diff table {
f09ef39e Keenan Nemetz 15d ago	1073	font-family: var(--mono);
796ac8c0 Keenan Nemetz 11d ago	1074	font-size: calc(12.65px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	1075	border-collapse: collapse;
f6f4b1db Keenan Nemetz 15d ago	1076	table-layout: fixed;
f09ef39e Keenan Nemetz 15d ago	1077	}
f6f4b1db Keenan Nemetz 15d ago	1078	.diff col.comment-col { width: 2.25rem; }
f6f4b1db Keenan Nemetz 15d ago	1079	.diff col.ln-col { width: 3.5rem; }
f09ef39e Keenan Nemetz 15d ago	1080	.diff td {
	1081	border: 0;
	1082	padding: 1px 10px;
	1083	vertical-align: top;
	1084	line-height: 19px;
	1085	}
	1086	.diff tbody tr:hover { background: none; }
	1087	.diff td.ln {
	1088	text-align: right;
	1089	color: var(--fg-faint);
	1090	user-select: none;
	1091	border-right: 1px solid var(--border);
	1092	padding: 1px 8px;
564acd4b Keenan Nemetz 15d ago	1093	white-space: nowrap;
f09ef39e Keenan Nemetz 15d ago	1094	}
564acd4b Keenan Nemetz 15d ago	1095	/* Only the code column keeps spaces and wraps. The gutter cells hold the
	1096	template's own newlines and indentation; with pre-wrap those became blank
	1097	line boxes and every diff row looked padded. */
	1098	.diff td.code { padding-left: 12px; white-space: pre-wrap; word-break: break-word; }
f09ef39e Keenan Nemetz 15d ago	1099	.diff tr.add { background: var(--good-soft); }
	1100	.diff tr.add td.ln { color: var(--good); }
	1101	.diff tr.del { background: var(--bad-soft); }
	1102	.diff tr.del td.ln { color: var(--bad); }
	1103	.diff tr.hunk td {
	1104	color: var(--fg-muted);
	1105	background: var(--bg-raised);
	1106	padding: 5px 12px;
796ac8c0 Keenan Nemetz 11d ago	1107	font-size: calc(12.1px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	1108	border-top: 1px solid var(--border);
	1109	border-bottom: 1px solid var(--border);
	1110	}
	1111	.diff tr.note td {
f6f4b1db Keenan Nemetz 15d ago	1112	background: var(--bg-panel);
f6f4b1db Keenan Nemetz 15d ago	1113	padding: 8px 12px;
796ac8c0 Keenan Nemetz 11d ago	1114	font-size: calc(13.2px * var(--font-scale));
f6f4b1db Keenan Nemetz 15d ago	1115	}
	1116	.inline-note {
	1117	padding: 8px 10px;
	1118	border: 1px solid var(--border);
	1119	border-radius: var(--radius);
	1120	background: var(--bg-raised);
796ac8c0 Keenan Nemetz 11d ago	1121	scroll-margin-top: 16px;
f6f4b1db Keenan Nemetz 15d ago	1122	}
	1123	.inline-note + .inline-note { margin-top: 8px; }
	1124	.inline-note:target { border-color: var(--accent); }
	1125	.inline-note:target .inline-note-head .comment-author { color: var(--accent); }
	1126	.inline-note-head {
	1127	display: flex;
	1128	align-items: center;
	1129	gap: 6px;
	1130	margin-bottom: 5px;
	1131	color: var(--fg-muted);
796ac8c0 Keenan Nemetz 11d ago	1132	font-size: calc(12.65px * var(--font-scale));
f6f4b1db Keenan Nemetz 15d ago	1133	}
796ac8c0 Keenan Nemetz 11d ago	1134	.inline-note-head .comment-author { color: var(--fg); font-size: calc(13.2px * var(--font-scale)); }
f6f4b1db Keenan Nemetz 15d ago	1135	.inline-note .comment-body {
	1136	padding: 0;
	1137	max-width: none;
796ac8c0 Keenan Nemetz 11d ago	1138	font-size: calc(13.75px * var(--font-scale));
f6f4b1db Keenan Nemetz 15d ago	1139	line-height: 1.55;
	1140	}
	1141	.inline-note .comment-body p { margin: 4px 0; }
	1142	.diff tr.inline-comment td {
	1143	background: var(--bg-panel);
	1144	padding: 8px 12px;
	1145	border-top: 1px solid var(--border);
	1146	}
	1147	.inline-comment-form {
	1148	display: flex;
	1149	flex-direction: column;
	1150	gap: 8px;
	1151	max-width: 52rem;
	1152	}
	1153	.inline-comment-card {
	1154	display: flex;
	1155	flex-direction: column;
	1156	gap: 8px;
	1157	padding: 8px 10px;
	1158	border: 1px solid var(--border);
	1159	border-radius: var(--radius);
	1160	background: var(--bg-raised);
	1161	}
	1162	.inline-comment-head {
	1163	display: flex;
	1164	align-items: center;
	1165	justify-content: space-between;
	1166	gap: 12px;
	1167	color: var(--fg-muted);
796ac8c0 Keenan Nemetz 11d ago	1168	font-size: calc(13.2px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	1169	}
f6f4b1db Keenan Nemetz 15d ago	1170	.inline-comment-head code { color: var(--fg); }
	1171	.inline-comment-form textarea { min-height: 5.5rem; max-width: none; }
	1172	.inline-comment-form .form-actions { margin-top: 0; }
796ac8c0 Keenan Nemetz 11d ago	1173	.diff .binary { padding: 10px 12px; color: var(--fg-muted); font-size: calc(13.2px * var(--font-scale)); margin: 0; }
f09ef39e Keenan Nemetz 15d ago	1174
c717d4eb Keenan Nemetz 13d ago	1175	/* ---------- shared responsive rules ---------- */
f09ef39e Keenan Nemetz 15d ago	1176
f09ef39e Keenan Nemetz 15d ago	1177	@media (max-width: 720px) {
796ac8c0 Keenan Nemetz 11d ago	1178	h1 { font-size: calc(17.6px * var(--font-scale)); }
f09ef39e Keenan Nemetz 15d ago	1179	.repohead { gap: 0 10px; }
	1180	th, td { padding: 7px 9px; }
	1181	.nowrap { white-space: normal; }
	1182	}
	1183
c717d4eb Keenan Nemetz 13d ago	1184	/* ---------- repository overview ---------- */
f09ef39e Keenan Nemetz 15d ago	1185
	1186	.overview {
	1187	display: grid;
	1188	grid-template-columns: minmax(0, 1fr) 340px;
	1189	gap: 28px;
	1190	align-items: start;
	1191	}
	1192	.overview-main { min-width: 0; }
	1193	.overview-side section { padding: 12px 0 14px; border-bottom: 1px solid var(--border); }
	1194	.overview-side section:first-child { padding-top: 0; }
	1195	.overview-side section:last-child { border-bottom: 0; }
	1196	.overview-side h2 { margin: 0 0 8px; }
	1197
	1198	.with-more { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
796ac8c0 Keenan Nemetz 11d ago	1199	.with-more .more { font-size: calc(13.2px * var(--font-scale)); font-weight: 400; color: var(--fg-muted); }
f09ef39e Keenan Nemetz 15d ago	1200	.with-more .more:hover { color: var(--accent); }
	1201
	1202	.side-list { display: flex; flex-direction: column; gap: 6px; }
796ac8c0 Keenan Nemetz 11d ago	1203	.side-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: calc(13.75px * var(--font-scale)); }
796ac8c0 Keenan Nemetz 11d ago	1204	.side-row .muted { font-size: calc(12.65px * var(--font-scale)); white-space: nowrap; }
f09ef39e Keenan Nemetz 15d ago	1205
f09ef39e Keenan Nemetz 15d ago	1206	.contributors { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
a32a859a Keenan Nemetz 5d ago	1207	.contributors li { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
796ac8c0 Keenan Nemetz 11d ago	1208	.contributors .cname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(13.75px * var(--font-scale)); }
796ac8c0 Keenan Nemetz 11d ago	1209	.contributors .muted { font-size: calc(12.65px * var(--font-scale)); }
a32a859a Keenan Nemetz 5d ago	1210	.contributors .contributor-stats { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-muted); font-size: calc(12.65px * var(--font-scale)); }
	1211	.contributors .contrib-stat { position: relative; display: inline-flex; align-items: center; gap: 3px; cursor: help; }
	1212	.contributors .contrib-stat .icon { width: 13px; height: 13px; color: var(--fg-faint); }
	1213	.contributors .contrib-stat:hover,
	1214	.contributors .contrib-stat:focus-visible { color: var(--fg); outline: none; }
	1215	.contributors .contrib-stat:hover .icon,
	1216	.contributors .contrib-stat:focus-visible .icon { color: var(--accent); }
f09ef39e Keenan Nemetz 15d ago	1217
796ac8c0 Keenan Nemetz 11d ago	1218	.lang { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin-bottom: 8px; font-size: calc(13.2px * var(--font-scale)); }
796ac8c0 Keenan Nemetz 11d ago	1219	.lang .muted { font-size: calc(12.65px * var(--font-scale)); }
f09ef39e Keenan Nemetz 15d ago	1220	.bar {
	1221	grid-column: 1 / -1;
	1222	appearance: none;
	1223	width: 100%;
	1224	height: 5px;
	1225	border: 0;
	1226	border-radius: 3px;
	1227	background: var(--bg-active);
	1228	overflow: hidden;
	1229	}
	1230	.bar::-webkit-progress-bar { background: var(--bg-active); border-radius: 3px; }
	1231	.bar::-webkit-progress-value { background: var(--accent); border-radius: 3px; }
	1232	.bar::-moz-progress-bar { background: var(--accent); border-radius: 3px; }
	1233
	1234	.filehead {
	1235	display: flex;
	1236	align-items: center;
	1237	justify-content: space-between;
	1238	gap: 12px;
	1239	padding: 7px 12px;
	1240	background: var(--bg-raised);
	1241	border: 1px solid var(--border);
	1242	border-bottom: 0;
	1243	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	1244	font-family: var(--mono);
796ac8c0 Keenan Nemetz 11d ago	1245	font-size: calc(13.2px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	1246	}
a464f892 Keenan Nemetz 15d ago	1247	.filehead .icon { width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px; }
796ac8c0 Keenan Nemetz 11d ago	1248	.filehead a { font-family: var(--font); font-size: calc(12.65px * var(--font-scale)); color: var(--fg-muted); }
f09ef39e Keenan Nemetz 15d ago	1249	.filehead a:hover { color: var(--accent); }
	1250	.readme {
	1251	background: var(--bg-panel);
	1252	border: 1px solid var(--border);
	1253	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	1254	padding: 18px 20px;
	1255	margin: 0 0 20px;
	1256	max-width: none;
	1257	}
	1258	.readme > :first-child { margin-top: 0; }
	1259
	1260	.latest {
	1261	display: flex;
	1262	flex-wrap: wrap;
	1263	align-items: baseline;
	1264	gap: 4px 10px;
	1265	padding: 7px 12px;
	1266	margin: 0 0 16px;
	1267	background: var(--bg-panel);
	1268	border: 1px solid var(--border);
	1269	border-radius: var(--radius);
796ac8c0 Keenan Nemetz 11d ago	1270	font-size: calc(13.75px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	1271	}
796ac8c0 Keenan Nemetz 11d ago	1272	.latest .muted { font-size: calc(12.65px * var(--font-scale)); }
f09ef39e Keenan Nemetz 15d ago	1273	.latest a.sha { margin-left: auto; }
	1274
	1275	.status {
	1276	display: inline-flex;
	1277	align-items: center;
	1278	gap: 5px;
796ac8c0 Keenan Nemetz 11d ago	1279	font-size: calc(12.1px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	1280	font-weight: 500;
	1281	line-height: 1.4;
	1282	text-transform: uppercase;
	1283	letter-spacing: 0.04em;
	1284	white-space: nowrap;
	1285	color: var(--fg-muted);
	1286	}
	1287	.status::before {
	1288	content: "";
	1289	width: 6px;
	1290	height: 6px;
	1291	border-radius: 50%;
	1292	background: currentColor;
	1293	}
	1294	.status.success { color: var(--good); }
	1295	.status.failed { color: var(--bad); }
3516aef3 Keenan Nemetz 10d ago	1296	.status.running { color: var(--running); }
f09ef39e Keenan Nemetz 15d ago	1297	.status.queued { color: var(--warn); }
70c9ad4e Keenan Nemetz 4h ago	1298	.status.error { color: var(--warn); }
f09ef39e Keenan Nemetz 15d ago	1299	.status.canceled { color: var(--fg-faint); }
	1300
	1301	.chip {
	1302	display: inline-flex;
	1303	align-items: center;
074ae160 Keenan Nemetz 14d ago	1304	gap: 5px;
f09ef39e Keenan Nemetz 15d ago	1305	padding: 3px 9px;
	1306	border: 1px solid var(--border-strong);
	1307	border-radius: 12px;
796ac8c0 Keenan Nemetz 11d ago	1308	font-size: calc(12.65px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	1309	color: var(--fg-muted);
	1310	background: var(--bg-panel);
	1311	}
074ae160 Keenan Nemetz 14d ago	1312	.chip .icon { width: 12px; height: 12px; }
f09ef39e Keenan Nemetz 15d ago	1313	.chip:hover { color: var(--fg); border-color: var(--fg-faint); text-decoration: none; }
	1314	.chip.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
	1315
	1316	td.fit { width: 1%; white-space: nowrap; }
	1317
	1318	@media (max-width: 1040px) {
	1319	.overview { grid-template-columns: 1fr; }
	1320	.overview-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 24px; }
	1321	.overview-side section:first-child { padding-top: 12px; }
	1322	}
	1323
c717d4eb Keenan Nemetz 13d ago	1324	/* ---------- code tab bar and crumbs ---------- */
f09ef39e Keenan Nemetz 15d ago	1325
a464f892 Keenan Nemetz 15d ago	1326	/* The tab bar and the tree header share a height so their content starts on the
	1327	same line. The bar is the file's identity, not a separate title block. */
	1328	.code-tabbar {
	1329	display: flex;
	1330	align-items: center;
	1331	gap: 8px;
	1332	height: 36px;
	1333	min-width: 0;
	1334	padding: 0 10px;
	1335	background: var(--bg-raised);
	1336	border: 1px solid var(--border);
	1337	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	1338	color: var(--fg-muted);
f09ef39e Keenan Nemetz 15d ago	1339	font-family: var(--mono);
796ac8c0 Keenan Nemetz 11d ago	1340	font-size: calc(12.65px * var(--font-scale));
a464f892 Keenan Nemetz 15d ago	1341	}
	1342	.code-tab-icon { display: inline-flex; flex: 0 0 auto; color: var(--fg-faint); }
	1343	.code-tab-icon .icon { width: 13px; height: 13px; }
	1344	.code-crumbs {
	1345	display: flex;
	1346	align-items: center;
	1347	gap: 6px;
	1348	min-width: 0;
	1349	overflow: hidden;
	1350	white-space: nowrap;
	1351	}
	1352	.code-crumbs a { color: var(--fg-muted); }
	1353	.code-crumbs a:hover { color: var(--accent); }
	1354	.code-crumbs .sep { color: var(--fg-faint); }
	1355	.code-crumbs .current { color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
	1356	.code-tab-actions {
	1357	display: flex;
	1358	flex: 0 0 auto;
	1359	align-items: center;
	1360	gap: 10px;
	1361	margin-left: auto;
	1362	font-family: var(--font);
796ac8c0 Keenan Nemetz 11d ago	1363	font-size: calc(12.65px * var(--font-scale));
a464f892 Keenan Nemetz 15d ago	1364	}
	1365	.code-tab-actions a { color: var(--fg-muted); }
	1366	.code-tab-actions a:hover,
	1367	.code-tab-actions a.active { color: var(--accent); }
796ac8c0 Keenan Nemetz 11d ago	1368	.code-tab-actions .muted { font-size: calc(12.65px * var(--font-scale)); }
a464f892 Keenan Nemetz 15d ago	1369	.code-tabbar + .panel,
	1370	.code-tabbar + .filebody,
	1371	.code-tabbar + .card,
	1372	.code-tabbar + .readme {
	1373	margin-top: 0;
	1374	border-top: 0;
	1375	border-top-left-radius: 0;
	1376	border-top-right-radius: 0;
	1377	}
	1378
c717d4eb Keenan Nemetz 13d ago	1379	/* ---------- code browser and file tree ---------- */
a464f892 Keenan Nemetz 15d ago	1380
	1381	.code-browser {
	1382	display: grid;
	1383	grid-template-columns: 260px minmax(0, 1fr);
	1384	gap: 18px;
	1385	align-items: start;
	1386	}
796ac8c0 Keenan Nemetz 11d ago	1387	.code-main { min-width: 0; scroll-margin-top: 16px; }
a464f892 Keenan Nemetz 15d ago	1388
	1389	.file-tree {
	1390	display: flex;
	1391	flex-direction: column;
	1392	position: sticky;
796ac8c0 Keenan Nemetz 11d ago	1393	top: 16px;
796ac8c0 Keenan Nemetz 11d ago	1394	max-height: calc(100vh - 32px);
a464f892 Keenan Nemetz 15d ago	1395	overflow: hidden;
	1396	background: var(--bg-panel);
	1397	border: 1px solid var(--border);
	1398	border-radius: var(--radius-lg);
	1399	}
	1400	.tree-head {
	1401	display: flex;
	1402	align-items: center;
	1403	justify-content: space-between;
	1404	gap: 8px;
	1405	height: 36px;
	1406	padding: 0 10px;
	1407	background: var(--bg-raised);
	1408	border-bottom: 1px solid var(--border);
	1409	color: var(--fg-muted);
796ac8c0 Keenan Nemetz 11d ago	1410	font-size: calc(12.1px * var(--font-scale));
a464f892 Keenan Nemetz 15d ago	1411	letter-spacing: 0.05em;
	1412	text-transform: uppercase;
	1413	}
	1414	.tree-head .icon { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }
796ac8c0 Keenan Nemetz 11d ago	1415	.tree-head .muted { font-size: calc(11.55px * var(--font-scale)); letter-spacing: 0; text-transform: none; }
a464f892 Keenan Nemetz 15d ago	1416	.tree-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 4px 8px; }
	1417
	1418	.tree-list { list-style: none; margin: 0; padding: 0; }
	1419	.tree-children { margin-left: 9px; padding-left: 5px; border-left: 1px solid var(--border); }
	1420	.tree-row {
	1421	display: flex;
	1422	align-items: center;
	1423	gap: 6px;
	1424	min-height: 24px;
	1425	padding: 2px 7px;
	1426	border-radius: 4px;
	1427	color: var(--fg-muted);
796ac8c0 Keenan Nemetz 11d ago	1428	font-size: calc(13.2px * var(--font-scale));
a464f892 Keenan Nemetz 15d ago	1429	line-height: 1.45;
	1430	}
	1431	summary.tree-row { list-style: none; cursor: pointer; }
	1432	summary.tree-row::-webkit-details-marker { display: none; }
	1433	.tree-row:hover { background: var(--bg-hover); color: var(--fg); text-decoration: none; }
	1434	.tree-row.active,
	1435	.tree-dir.active > summary.tree-row { background: var(--accent-soft); color: var(--accent); }
	1436	.tree-icon { display: inline-flex; flex: 0 0 auto; color: var(--fg-faint); }
	1437	.tree-row.active .tree-icon { color: var(--accent); }
	1438	.tree-icon .icon { width: 13px; height: 13px; }
	1439	.tree-chevron { display: inline-flex; flex: 0 0 auto; color: var(--fg-faint); transition: transform 0.12s ease; }
	1440	.tree-chevron .icon { width: 12px; height: 12px; }
	1441	details[open] > summary .tree-chevron { transform: rotate(90deg); }
	1442	.tree-file { padding-left: 25px; }
	1443	.tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
796ac8c0 Keenan Nemetz 11d ago	1444	.tree-note, .tree-empty { margin: 0; padding: 8px 10px; font-size: calc(12.1px * var(--font-scale)); }
a464f892 Keenan Nemetz 15d ago	1445	.tree-note { border-top: 1px solid var(--border); }
a464f892 Keenan Nemetz 15d ago	1446
f6f4b1db Keenan Nemetz 15d ago	1447	/* Review files: the changed-file tree reuses the code browser's shape, with a
	1448	status mark in place of the file icon. */
	1449	.review-tree .tree-file { padding-left: 7px; gap: 7px; }
	1450	.review-mark {
	1451	display: inline-grid;
	1452	place-items: center;
	1453	flex: 0 0 auto;
	1454	width: 16px;
	1455	height: 16px;
	1456	border-radius: 3px;
	1457	background: var(--bg-active);
	1458	color: var(--fg-muted);
796ac8c0 Keenan Nemetz 11d ago	1459	font-family: var(--mono);
	1460	font-size: calc(9.9px * var(--font-scale));
	1461	font-weight: 600;
	1462	line-height: 1;
f6f4b1db Keenan Nemetz 15d ago	1463	}
	1464	.review-mark[data-status="A"] { color: var(--good); background: var(--good-soft); }
	1465	.review-mark[data-status="D"] { color: var(--bad); background: var(--bad-soft); }
	1466	.review-mark[data-status="R"] { color: var(--accent); background: var(--accent-soft); }
	1467	.review-mark[data-status="M"] { color: var(--warn); background: var(--warn-soft); }
796ac8c0 Keenan Nemetz 11d ago	1468	.review-main { min-width: 0; scroll-margin-top: 16px; }
628d4523 Keenan Nemetz 11d ago	1469	/* A single file is the whole pane, so its header is the pane's top bar: the file
	1470	at one end and its counts at the other, as tall as the tree header so both
	1471	columns start on the same line. The extra pixel is the section's own top
	1472	border, which the height must not add to. */
	1473	.review-main .diff { margin-top: 0; }
	1474	.review-main .diff h3 { height: 35px; padding: 0 10px; }
f6f4b1db Keenan Nemetz 15d ago	1475
a464f892 Keenan Nemetz 15d ago	1476	.code-main .filebody { max-width: none; }
	1477	.code-main .readme > *,
	1478	.code-main .filebody > * { max-width: none; }
	1479	.empty-code { margin-top: 0; }
	1480
	1481	.dirlist td { padding: 2px 10px; }
	1482	.dirlist a { display: inline-flex; align-items: center; gap: 7px; }
	1483	.dirlist .icon { width: 13px; height: 13px; color: var(--fg-faint); }
	1484	.dirlist a.dir .icon { color: var(--accent); }
	1485	.dirlist a.parent { color: var(--fg-muted); }
	1486
	1487	@media (max-width: 980px) {
	1488	.code-browser { grid-template-columns: 220px minmax(0, 1fr); }
	1489	}
	1490	@media (max-width: 760px) {
	1491	.code-browser { grid-template-columns: 1fr; }
	1492	.file-tree { position: static; max-height: 260px; }
f09ef39e Keenan Nemetz 15d ago	1493	}
	1494
	1495	.readme > *,
	1496	.filebody > * { max-width: 84ch; }
	1497	.readme > pre,
	1498	.readme > table,
	1499	.filebody > pre,
	1500	.filebody > table { max-width: 100%; }
	1501
	1502	.filebody {
	1503	background: var(--bg-panel);
	1504	border: 1px solid var(--border);
	1505	border-radius: var(--radius-lg);
	1506	padding: 18px 20px;
	1507	margin: 12px 0 20px;
	1508	}
	1509	.filebody > :first-child { margin-top: 0; }
	1510
30de4a44 Keenan Nemetz 8d ago	1511	/* The source card grows to the file's full height for the same reason: find has
30de4a44 Keenan Nemetz 8d ago	1512	one scroll area, the page. Only a line too wide for the pane scrolls here. */
f09ef39e Keenan Nemetz 15d ago	1513	.blob {
30de4a44 Keenan Nemetz 8d ago	1514	overflow-x: auto;
f09ef39e Keenan Nemetz 15d ago	1515	}
	1516	.blob table.code {
	1517	font-family: var(--mono);
796ac8c0 Keenan Nemetz 11d ago	1518	font-size: calc(12.65px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	1519	border-collapse: collapse;
	1520	}
	1521	.blob td {
	1522	border: 0;
	1523	padding: 0 12px;
	1524	line-height: 19px;
	1525	white-space: pre;
	1526	vertical-align: top;
	1527	}
	1528	.blob td.ln {
	1529	width: 3.5rem;
	1530	text-align: right;
	1531	color: var(--fg-faint);
	1532	user-select: none;
	1533	border-right: 1px solid var(--border);
	1534	padding: 0 8px;
	1535	}
	1536	.blob td.code { padding-left: 12px; }
	1537	.blob tr:hover { background: none; }
	1538
	1539	/* ---------- syntax highlighting ---------- */
	1540
e7982ac5 Keenan Nemetz 12d ago	1541	/* static/prism-worker.js writes Prism token classes into blob and diff cells
	1542	after the page paints. The palette is the same one the rest of the surface
	1543	uses, so a token is a colour, never a font switch except for comments and
	1544	italics. */
	1545
	1546	:is(.blob, .diff) .token.comment,
	1547	:is(.blob, .diff) .token.prolog,
	1548	:is(.blob, .diff) .token.doctype,
	1549	:is(.blob, .diff) .token.cdata { color: #6f7682; font-style: italic; }
	1550	:is(.blob, .diff) .token.punctuation { color: #a6accd; }
	1551	:is(.blob, .diff) .token.namespace { color: #a6accd; }
	1552	:is(.blob, .diff) .token.operator,
	1553	:is(.blob, .diff) .token.entity,
	1554	:is(.blob, .diff) .token.url { color: #7fd3e8; }
	1555	:is(.blob, .diff) .token.boolean,
	1556	:is(.blob, .diff) .token.number,
	1557	:is(.blob, .diff) .token.constant,
	1558	:is(.blob, .diff) .token.symbol { color: #f2a06b; }
	1559	:is(.blob, .diff) .token.string,
	1560	:is(.blob, .diff) .token.char,
	1561	:is(.blob, .diff) .token.attr-value,
	1562	:is(.blob, .diff) .token.regex { color: #a8d98a; }
	1563	:is(.blob, .diff) .token.atrule,
	1564	:is(.blob, .diff) .token.keyword,
	1565	:is(.blob, .diff) .token.tag,
	1566	:is(.blob, .diff) .token.selector { color: #c792ea; }
	1567	:is(.blob, .diff) .token.function,
	1568	:is(.blob, .diff) .token.function-name,
	1569	:is(.blob, .diff) .token.method { color: #83aaff; }
	1570	:is(.blob, .diff) .token.class-name,
	1571	:is(.blob, .diff) .token.builtin,
	1572	:is(.blob, .diff) .token.attr-name,
	1573	:is(.blob, .diff) .token.property,
	1574	:is(.blob, .diff) .token.title { color: #f0c674; }
	1575	:is(.blob, .diff) .token.variable { color: #e7e8ea; }
	1576	:is(.blob, .diff) .token.deleted { color: var(--bad); }
	1577	:is(.blob, .diff) .token.inserted { color: var(--good); }
	1578	:is(.blob, .diff) .token.important,
	1579	:is(.blob, .diff) .token.bold { font-weight: 600; }
	1580	:is(.blob, .diff) .token.italic { font-style: italic; }
f09ef39e Keenan Nemetz 15d ago	1581
c717d4eb Keenan Nemetz 13d ago	1582	/* ---------- repository overview sidebar ---------- */
	1583
	1584	/* Compact commit and run rows beside the overview. */
f09ef39e Keenan Nemetz 15d ago	1585
f09ef39e Keenan Nemetz 15d ago	1586	.side-commit,
a196e404 Keenan Nemetz 11d ago	1587	.side-run,
	1588	.side-issue,
	1589	.side-change {
f09ef39e Keenan Nemetz 15d ago	1590	display: flex;
	1591	flex-direction: column;
	1592	gap: 1px;
	1593	padding: 4px 0;
	1594	color: var(--fg);
	1595	min-width: 0;
	1596	}
	1597	.side-commit:hover,
a196e404 Keenan Nemetz 11d ago	1598	.side-run:hover,
	1599	.side-issue:hover,
	1600	.side-change:hover { color: var(--accent); text-decoration: none; }
f09ef39e Keenan Nemetz 15d ago	1601	.side-subject {
796ac8c0 Keenan Nemetz 11d ago	1602	font-size: calc(13.75px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	1603	overflow: hidden;
	1604	text-overflow: ellipsis;
	1605	white-space: nowrap;
	1606	}
a196e404 Keenan Nemetz 11d ago	1607	.side-num { color: var(--fg-faint); font-variant-numeric: tabular-nums; margin-right: 4px; }
f09ef39e Keenan Nemetz 15d ago	1608	.side-meta {
	1609	display: flex;
	1610	gap: 8px;
796ac8c0 Keenan Nemetz 11d ago	1611	font-size: calc(12.1px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	1612	color: var(--fg-faint);
	1613	white-space: nowrap;
	1614	}
	1615	.side-run-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
	1616	.side-run-top .status { flex: 0 0 auto; }
	1617
267feec2 Keenan Nemetz 10d ago	1618	/* The Issues section of a change lists its linked issues in the overview's compact
cad93cfe Keenan Nemetz 10d ago	1619	shape, with the remove control beside the row and the add field beneath. */
	1620	.request-issue { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
	1621	.request-issue .side-issue { flex: 1; min-width: 0; }
86ddbd14 Keenan Nemetz 10d ago	1622	.thread-side .request-issue form { flex: 0 0 auto; margin: 0; }
267feec2 Keenan Nemetz 10d ago	1623	.request-issue form button { color: var(--fg-faint); }
cad93cfe Keenan Nemetz 10d ago	1624	.request-issue form button:hover { color: var(--bad); }
267feec2 Keenan Nemetz 10d ago	1625	.request-unlink { display: inline-grid; place-items: center; width: 22px; min-height: 22px; border-radius: var(--radius); }
267feec2 Keenan Nemetz 10d ago	1626	.request-unlink:hover { background: var(--bg-hover); text-decoration: none; }
707dfd10 Keenan Nemetz 10d ago	1627	#request-combined[hidden], #request-merge-note[hidden] { display: none; }
bb541fde Keenan Nemetz 10d ago	1628	.request-issue-picker { position: relative; margin-top: 8px; }
bb541fde Keenan Nemetz 10d ago	1629	.thread-side .request-issue-picker form { margin: 0; }
838f282e Keenan Nemetz 10d ago	1630	.request-issue-search input { width: 100%; font-size: calc(12.65px * var(--font-scale)); }
bb541fde Keenan Nemetz 10d ago	1631	.request-issue-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; }
	1632	.request-issue-popover {
	1633	max-height: 18rem;
	1634	overflow-y: auto;
	1635	padding: 4px;
	1636	border: 1px solid var(--border-strong);
	1637	border-radius: var(--radius-lg);
	1638	background: var(--bg-raised);
	1639	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	1640	}
	1641	.request-issue-popover p { margin: 0; padding: 5px 6px; font-size: calc(12.65px * var(--font-scale)); }
451332d1 Keenan Nemetz 10d ago	1642	.request-issue-matches { display: flex; flex-direction: column; gap: 2px; }
838f282e Keenan Nemetz 10d ago	1643	.thread-side .request-issue-match { margin: 0; }
	1644	.request-issue-match button {
	1645	display: flex;
	1646	flex-direction: column;
451332d1 Keenan Nemetz 10d ago	1647	align-items: stretch;
451332d1 Keenan Nemetz 10d ago	1648	justify-content: flex-start;
838f282e Keenan Nemetz 10d ago	1649	gap: 1px;
	1650	width: 100%;
	1651	min-height: 0;
	1652	padding: 4px 6px;
	1653	border: 0;
	1654	border-radius: var(--radius);
	1655	background: none;
	1656	color: var(--fg);
451332d1 Keenan Nemetz 10d ago	1657	font-weight: 400;
838f282e Keenan Nemetz 10d ago	1658	text-align: left;
451332d1 Keenan Nemetz 10d ago	1659	white-space: normal;
838f282e Keenan Nemetz 10d ago	1660	}
838f282e Keenan Nemetz 10d ago	1661	.request-issue-match button:hover { background: var(--bg-hover); color: var(--accent); }
cad93cfe Keenan Nemetz 10d ago	1662
c765ae2e Keenan Nemetz 13d ago	1663	/* ---------- run detail ---------- */
c765ae2e Keenan Nemetz 13d ago	1664
57dc79af Keenan Nemetz 6d ago	1665	/* A run's summary is a row of facts, not a paragraph: how long it took, how
	1666	long it waited, what it ran on, which commit it tested, and the workflow
	1667	definition it ran. */
c765ae2e Keenan Nemetz 13d ago	1668	.run-summary {
	1669	display: grid;
	1670	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	1671	gap: 10px;
	1672	margin: 16px 0;
	1673	}
	1674	.run-summary .card {
	1675	margin: 0;
	1676	display: flex;
	1677	flex-direction: column;
	1678	gap: 3px;
	1679	min-width: 0;
	1680	}
	1681	.run-summary-label {
	1682	display: flex;
	1683	align-items: center;
	1684	gap: 5px;
	1685	color: var(--fg-faint);
796ac8c0 Keenan Nemetz 11d ago	1686	font-size: calc(11.55px * var(--font-scale));
c765ae2e Keenan Nemetz 13d ago	1687	font-weight: 500;
	1688	letter-spacing: 0.04em;
	1689	text-transform: uppercase;
	1690	}
	1691	.run-summary-label .icon { width: 12px; height: 12px; }
	1692	.run-summary strong {
796ac8c0 Keenan Nemetz 11d ago	1693	font-size: calc(17.6px * var(--font-scale));
c765ae2e Keenan Nemetz 13d ago	1694	font-weight: 600;
	1695	font-variant-numeric: tabular-nums;
	1696	overflow-wrap: anywhere;
	1697	}
	1698	.run-summary .status-note { margin: 0; }
796ac8c0 Keenan Nemetz 11d ago	1699	.run-summary code { font-size: calc(11.55px * var(--font-scale)); overflow-wrap: anywhere; }
c765ae2e Keenan Nemetz 13d ago	1700
	1701	/* Step logs are loaded on demand. The details element is the trigger; the pre is
	1702	the target, and htmx uses textContent so a log can never become markup. */
	1703	.run-log {
	1704	margin: 4px 0;
	1705	background: var(--bg-panel);
	1706	border: 1px solid var(--border);
	1707	border-radius: var(--radius);
	1708	overflow: hidden;
	1709	}
	1710	.run-log > summary {
	1711	display: flex;
	1712	align-items: center;
	1713	gap: 6px;
	1714	padding: 6px 10px;
	1715	color: var(--fg-muted);
796ac8c0 Keenan Nemetz 11d ago	1716	font-size: calc(13.2px * var(--font-scale));
c765ae2e Keenan Nemetz 13d ago	1717	cursor: pointer;
	1718	list-style: none;
	1719	}
	1720	.run-log > summary::-webkit-details-marker { display: none; }
	1721	.run-log > summary:hover { color: var(--fg); background: var(--bg-hover); }
	1722	.run-log > summary .icon { width: 12px; height: 12px; color: var(--fg-faint); }
	1723	.run-log[open] > summary {
	1724	color: var(--fg);
	1725	border-bottom: 1px solid var(--border);
	1726	}
34d6fd7a Keenan Nemetz 10d ago	1727	.run-log-card {
	1728	padding: 0;
	1729	overflow: hidden;
	1730	}
	1731	.run-log-card > .run-log {
	1732	margin: 0;
	1733	border: 0;
	1734	border-bottom: 1px solid var(--border);
	1735	border-radius: 0;
	1736	}
	1737	.run-log-card > .run-log:last-child { border-bottom: 0; }
	1738	.run-log-title { flex: 1; color: var(--fg); font-weight: 500; }
	1739	.run-log-meta {
	1740	margin-left: auto;
	1741	color: var(--fg-faint);
	1742	font-size: calc(12.1px * var(--font-scale));
	1743	font-variant-numeric: tabular-nums;
	1744	}
	1745	.run-step-num {
	1746	color: var(--fg-faint);
	1747	font-variant-numeric: tabular-nums;
	1748	min-width: 2.5ch;
	1749	}
	1750	.run-step-name {
	1751	flex: 1;
	1752	color: var(--fg);
	1753	overflow-wrap: anywhere;
	1754	}
	1755	.run-step-meta {
	1756	margin-left: 8px;
	1757	color: var(--fg-faint);
	1758	font-size: calc(12.1px * var(--font-scale));
	1759	font-variant-numeric: tabular-nums;
	1760	white-space: nowrap;
	1761	}
	1762	.run-log-empty {
	1763	margin: 0;
	1764	padding: 10px 12px;
	1765	color: var(--fg-muted);
	1766	font-size: calc(13.2px * var(--font-scale));
	1767	}
c765ae2e Keenan Nemetz 13d ago	1768	.run-log-text {
	1769	margin: 0;
	1770	padding: 10px 12px;
	1771	border: 0;
	1772	border-radius: 0;
	1773	background: var(--bg);
	1774	color: var(--fg);
796ac8c0 Keenan Nemetz 11d ago	1775	font-size: calc(13.2px * var(--font-scale));
c765ae2e Keenan Nemetz 13d ago	1776	line-height: 1.5;
	1777	max-height: 34rem;
	1778	min-height: 2.5rem;
	1779	overflow: auto;
	1780	white-space: pre;
	1781	}
	1782	.run-logbar {
	1783	display: flex;
	1784	flex-wrap: wrap;
	1785	align-items: center;
	1786	gap: 10px;
	1787	margin: 8px 0;
796ac8c0 Keenan Nemetz 11d ago	1788	font-size: calc(13.2px * var(--font-scale));
c765ae2e Keenan Nemetz 13d ago	1789	}
c765ae2e Keenan Nemetz 13d ago	1790
f09ef39e Keenan Nemetz 15d ago	1791	/* ---------- issues and changes ---------- */
	1792
	1793	.page-head {
	1794	display: flex;
074ae160 Keenan Nemetz 14d ago	1795	align-items: flex-end;
f09ef39e Keenan Nemetz 15d ago	1796	justify-content: space-between;
074ae160 Keenan Nemetz 14d ago	1797	gap: 24px;
	1798	padding: 26px 0 20px;
	1799	margin-bottom: 20px;
	1800	border-bottom: 1px solid var(--border);
	1801	}
	1802	.page-head h1 {
796ac8c0 Keenan Nemetz 11d ago	1803	font-size: calc(28.6px * var(--font-scale));
074ae160 Keenan Nemetz 14d ago	1804	line-height: 1.2;
	1805	letter-spacing: -0.025em;
	1806	margin: 0 0 4px;
f09ef39e Keenan Nemetz 15d ago	1807	}
a464f892 Keenan Nemetz 15d ago	1808	.page-head-main { min-width: 0; }
de84c32b Keenan Nemetz 6d ago	1809	/* The `#42` alias leads a page heading, the way it leads a row in a list: the
	1810	number is what a reader quotes, and the title is what they are looking for. */
	1811	.page-num {
	1812	color: var(--fg-faint);
	1813	font-variant-numeric: tabular-nums;
	1814	margin-right: 7px;
	1815	}
a464f892 Keenan Nemetz 15d ago	1816	.page-head-actions {
	1817	display: flex;
	1818	flex-wrap: wrap;
	1819	flex: 0 0 auto;
	1820	align-items: center;
	1821	justify-content: flex-end;
	1822	gap: 8px;
	1823	margin-left: auto;
	1824	}
2e024cc9 Keenan Nemetz 14d ago	1825	/* Search and branch pickers are filters, not inline prose: a row layout keeps the
	1826	input, its icon button, and the select on the same baseline. */
	1827	.page-head-actions form.inline {
	1828	display: inline-flex;
	1829	align-items: center;
	1830	gap: 6px;
	1831	}
796ac8c0 Keenan Nemetz 11d ago	1832	.page-sub { color: var(--fg-muted); font-size: calc(14.3px * var(--font-scale)); margin: 0; max-width: 80ch; }
074ae160 Keenan Nemetz 14d ago	1833
	1834	@media (max-width: 720px) {
	1835	.page-head { padding: 18px 0 16px; }
796ac8c0 Keenan Nemetz 11d ago	1836	.page-head h1 { font-size: calc(24.2px * var(--font-scale)); }
074ae160 Keenan Nemetz 14d ago	1837	}
f09ef39e Keenan Nemetz 15d ago	1838
973fb809 Keenan Nemetz 1d ago	1839	/* Secondary navigation inside a change: conversation and the review files. It is
	1840	the same `.tabrow` and `.tabs` as every other row, pulled up against the
	1841	request header. */
	1842	.subtabs { margin-top: -2px; }
f6f4b1db Keenan Nemetz 15d ago	1843
f09ef39e Keenan Nemetz 15d ago	1844	.state {
	1845	display: inline-flex;
	1846	align-items: center;
	1847	gap: 5px;
	1848	padding: 1px 7px;
	1849	border: 1px solid var(--border-strong);
	1850	border-radius: 10px;
796ac8c0 Keenan Nemetz 11d ago	1851	font-size: calc(11.55px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	1852	line-height: 1.6;
	1853	font-weight: 500;
	1854	text-transform: uppercase;
	1855	letter-spacing: 0.04em;
	1856	color: var(--fg-muted);
	1857	white-space: nowrap;
	1858	}
	1859	.state::before {
	1860	content: "";
	1861	width: 6px;
	1862	height: 6px;
	1863	border-radius: 50%;
	1864	background: currentColor;
	1865	}
	1866	.state.open {
	1867	color: var(--good);
	1868	border-color: color-mix(in srgb, var(--good) 45%, var(--border));
	1869	background: var(--good-soft);
	1870	}
	1871	.state.closed { color: var(--fg-faint); }
	1872	.state.merged {
0e35a6a0 Keenan Nemetz 11d ago	1873	color: var(--merged);
	1874	border-color: color-mix(in srgb, var(--merged) 45%, var(--border));
	1875	background: var(--merged-soft);
f09ef39e Keenan Nemetz 15d ago	1876	}
	1877
	1878	.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
	1879	.chip-count { margin-left: 5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
	1880	.chip.active .chip-count { color: var(--accent); }
	1881	.filter-label {
	1882	color: var(--fg-faint);
796ac8c0 Keenan Nemetz 11d ago	1883	font-size: calc(12.1px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	1884	text-transform: uppercase;
	1885	letter-spacing: 0.04em;
	1886	}
	1887
	1888	.row-title { font-weight: 550; color: var(--fg); }
	1889	.row-title:hover { color: var(--accent); text-decoration: none; }
	1890	.row-meta {
	1891	display: flex;
	1892	flex-wrap: wrap;
	1893	align-items: center;
	1894	gap: 4px 8px;
	1895	margin-top: 2px;
796ac8c0 Keenan Nemetz 11d ago	1896	font-size: calc(12.65px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	1897	color: var(--fg-faint);
	1898	}
	1899
6813339b Keenan Nemetz 4d ago	1900	/* The one word a list says about where a row is: a change's waiting state, or an
	1901	issue's open/closed. The icon carries the colour, the label the meaning, and,
	1902	where there is one, the title attribute the reason. */
	1903	.row-status {
7cc36ba0 Keenan Nemetz 5d ago	1904	display: inline-flex;
	1905	align-items: center;
	1906	gap: 5px;
	1907	font-size: calc(12.65px * var(--font-scale));
	1908	color: var(--fg-muted);
	1909	white-space: nowrap;
	1910	}
6813339b Keenan Nemetz 4d ago	1911	.row-status .icon { width: 13px; height: 13px; flex: 0 0 auto; }
	1912	.row-status.open,
	1913	.row-status.ready { color: var(--good); }
	1914	.row-status.merged { color: var(--merged); }
	1915	.row-status.failed,
	1916	.row-status.conflict { color: var(--bad); }
	1917	.row-status.waiting,
	1918	.row-status.review { color: var(--warn); }
	1919	.row-status.closed { color: var(--fg-faint); }
7cc36ba0 Keenan Nemetz 5d ago	1920
72f22292 Keenan Nemetz 10d ago	1921	/* A search snippet is the sentence the query matched, with the matched words
	1922	marked. It sits under the row title, quieter than the title and smaller than
	1923	the body it came from. */
	1924	.search-snippet {
	1925	margin: 3px 0 0;
	1926	font-size: calc(12.65px * var(--font-scale));
	1927	color: var(--fg-faint);
	1928	}
	1929	.search-snippet mark {
	1930	background: var(--accent-soft);
	1931	color: var(--fg);
	1932	border-radius: 2px;
	1933	padding: 0 1px;
	1934	}
	1935
c7b9094f Keenan Nemetz 1d ago	1936	/* An empty state stands in for a list or a pane of content that has nothing to
	1937	show. Use it for a whole region, not for one quiet line inside a card, a
	1938	sidebar, a tree, or a table cell: those stay .muted so a page does not fill
	1939	with dashed boxes. */
f09ef39e Keenan Nemetz 15d ago	1940	.empty-state {
	1941	border: 1px dashed var(--border-strong);
	1942	border-radius: var(--radius-lg);
	1943	padding: 20px;
	1944	margin: 14px 0;
	1945	color: var(--fg-muted);
	1946	}
	1947	.empty-state p { margin: 0 0 8px; }
	1948	.empty-state p:last-child { margin-bottom: 0; }
	1949	.empty-state pre { margin: 8px 0; }
	1950
	1951	/* Thread layout: conversation in the main column, action and metadata beside it. */
	1952	.thread {
	1953	display: grid;
	1954	grid-template-columns: minmax(0, 1fr) 280px;
	1955	gap: 24px;
	1956	align-items: start;
	1957	}
	1958	.thread-main { min-width: 0; }
	1959	.thread-side section { padding: 12px 0 14px; border-bottom: 1px solid var(--border); }
707dfd10 Keenan Nemetz 10d ago	1960	.thread-side #request-sidebar > #request-review { padding-top: 0; }
f6f4b1db Keenan Nemetz 15d ago	1961	.thread-side > section:last-child,
f6f4b1db Keenan Nemetz 15d ago	1962	.thread-side #request-sidebar > section:last-child { border-bottom: 0; }
f09ef39e Keenan Nemetz 15d ago	1963	.thread-side h2 { margin: 0 0 8px; }
	1964	.thread-side form { margin: 8px 0 0; }
	1965	.thread-side .meta-list { margin-bottom: 0; }
	1966
d3dcf54d Keenan Nemetz 11d ago	1967	/* The run rows beside a change use the same compact shape as the recent runs
	1968	on the overview: status and job, then the context under them. */
	1969	.thread-side .side-meta { flex-wrap: wrap; white-space: normal; }
	1970	.thread-side .side-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
	1971
	1972	/* A `?` next to a section heading: the explanation is a tooltip rather than a
	1973	paragraph, so the panel keeps only the state it is about. The tooltip opens
	1974	to the left because the sidebar sits at the right edge of the page. */
	1975	.help {
	1976	position: relative;
	1977	display: inline-grid;
	1978	place-items: center;
	1979	width: 15px;
	1980	height: 15px;
	1981	margin-left: 6px;
	1982	border: 1px solid var(--border-strong);
	1983	border-radius: 50%;
	1984	color: var(--fg-faint);
	1985	font-family: var(--font);
	1986	font-size: calc(10px * var(--font-scale));
	1987	font-weight: 600;
	1988	line-height: 1;
	1989	vertical-align: 1px;
	1990	cursor: help;
	1991	user-select: none;
	1992	}
	1993	.help:hover,
	1994	.help:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
a32a859a Keenan Nemetz 5d ago	1995	.help::after,
a32a859a Keenan Nemetz 5d ago	1996	.contributors .contrib-stat::after {
d3dcf54d Keenan Nemetz 11d ago	1997	content: attr(data-tip);
	1998	position: absolute;
	1999	top: 50%;
	2000	right: calc(100% + 8px);
	2001	z-index: 20;
	2002	width: max-content;
	2003	max-width: 210px;
	2004	padding: 7px 9px;
	2005	border: 1px solid var(--border-strong);
	2006	border-radius: var(--radius);
	2007	background: var(--bg-raised);
	2008	color: var(--fg);
	2009	font-size: calc(12.1px * var(--font-scale));
	2010	font-weight: 400;
	2011	line-height: 1.45;
	2012	letter-spacing: normal;
	2013	text-align: left;
	2014	white-space: normal;
	2015	transform: translateY(-50%);
	2016	opacity: 0;
	2017	visibility: hidden;
	2018	pointer-events: none;
	2019	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	2020	}
	2021	.help:hover::after,
	2022	.help:focus::after,
a32a859a Keenan Nemetz 5d ago	2023	.help:focus-visible::after,
	2024	.contributors .contrib-stat:hover::after,
	2025	.contributors .contrib-stat:focus::after,
	2026	.contributors .contrib-stat:focus-visible::after { opacity: 1; visibility: visible; }
d3dcf54d Keenan Nemetz 11d ago	2027	@media (prefers-reduced-motion: no-preference) {
	2028	.help::after { transition: opacity 120ms ease; }
	2029	}
	2030
cfd43dcd Keenan Nemetz 12d ago	2031	/* Scope the card to the article that renders it. Prism calls a syntax token
	2032	"comment" too, and an unscoped .comment rule put a rounded panel behind every
	2033	comment-coloured line in a blob or diff. */
	2034	article.comment {
f09ef39e Keenan Nemetz 15d ago	2035	background: var(--bg-panel);
	2036	border: 1px solid var(--border);
	2037	border-radius: var(--radius-lg);
	2038	margin: 10px 0;
f6f4b1db Keenan Nemetz 15d ago	2039	overflow: visible;
796ac8c0 Keenan Nemetz 11d ago	2040	scroll-margin-top: 16px;
f6f4b1db Keenan Nemetz 15d ago	2041	}
cfd43dcd Keenan Nemetz 12d ago	2042	article.comment:target {
f6f4b1db Keenan Nemetz 15d ago	2043	border-color: var(--accent);
f6f4b1db Keenan Nemetz 15d ago	2044	box-shadow: 0 0 0 2px var(--accent-soft);
f09ef39e Keenan Nemetz 15d ago	2045	}
cfd43dcd Keenan Nemetz 12d ago	2046	article.comment:target .comment-head { background: var(--accent-soft); }
f09ef39e Keenan Nemetz 15d ago	2047	.comment-head {
	2048	display: flex;
	2049	flex-wrap: wrap;
	2050	align-items: center;
	2051	gap: 6px 8px;
	2052	padding: 7px 12px;
	2053	background: var(--bg-raised);
	2054	border-bottom: 1px solid var(--border);
f6f4b1db Keenan Nemetz 15d ago	2055	border-top-left-radius: calc(var(--radius-lg) - 1px);
f6f4b1db Keenan Nemetz 15d ago	2056	border-top-right-radius: calc(var(--radius-lg) - 1px);
796ac8c0 Keenan Nemetz 11d ago	2057	font-size: calc(13.2px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	2058	}
f09ef39e Keenan Nemetz 15d ago	2059	.comment-author { font-weight: 550; }
796ac8c0 Keenan Nemetz 11d ago	2060	.comment-head .muted { font-size: calc(12.65px * var(--font-scale)); }
796ac8c0 Keenan Nemetz 11d ago	2061	.reply-context { color: var(--fg-muted); font-size: calc(12.65px * var(--font-scale)); }
f6f4b1db Keenan Nemetz 15d ago	2062	.reply-context a { color: var(--fg-muted); }
f6f4b1db Keenan Nemetz 15d ago	2063	.reply-context a:hover { color: var(--accent); }
f09ef39e Keenan Nemetz 15d ago	2064	.comment-body { padding: 12px 14px; }
	2065	.comment-body > :first-child { margin-top: 0; }
	2066	.comment-body > :last-child { margin-bottom: 0; }
	2067
cfd43dcd Keenan Nemetz 12d ago	2068	article.comment.deleted {
f6f4b1db Keenan Nemetz 15d ago	2069	border-style: dashed;
	2070	background: transparent;
	2071	}
	2072	.comment-deleted {
	2073	display: flex;
	2074	align-items: center;
	2075	gap: 6px;
	2076	padding: 10px 14px;
	2077	color: var(--fg-faint);
796ac8c0 Keenan Nemetz 11d ago	2078	font-size: calc(13.2px * var(--font-scale));
f6f4b1db Keenan Nemetz 15d ago	2079	font-style: italic;
	2080	}
	2081	.comment-deleted .icon { width: 13px; height: 13px; }
	2082
	2083	/* Replies are displayed one level deep: a root comment leads, all its
	2084	descendants sit in an indented rail, and the reply composer joins the thread. */
	2085	.comment-replies {
	2086	display: flex;
	2087	flex-direction: column;
	2088	gap: 8px;
	2089	margin: 0 0 12px 26px;
	2090	padding-left: 12px;
	2091	border-left: 2px solid var(--border);
	2092	}
cfd43dcd Keenan Nemetz 12d ago	2093	.comment-replies article.comment {
f6f4b1db Keenan Nemetz 15d ago	2094	margin: 0;
	2095	background: var(--bg-raised);
	2096	}
	2097	.comment-menu { position: relative; margin-left: auto; }
	2098	.comment-menu-toggle {
	2099	display: inline-flex;
	2100	align-items: center;
	2101	justify-content: center;
	2102	width: 22px;
	2103	min-height: 0;
	2104	padding: 0;
	2105	border: 0;
	2106	border-radius: 4px;
	2107	background: none;
	2108	color: var(--fg-muted);
796ac8c0 Keenan Nemetz 11d ago	2109	font-family: var(--font);
	2110	font-size: calc(17.6px * var(--font-scale));
	2111	font-weight: 600;
	2112	line-height: 1;
f6f4b1db Keenan Nemetz 15d ago	2113	cursor: pointer;
	2114	}
	2115	.comment-menu-toggle:hover { background: var(--bg-hover); color: var(--fg); }
	2116	.comment-menu-list {
	2117	position: absolute;
	2118	z-index: 60;
	2119	top: calc(100% + 4px);
	2120	right: 0;
	2121	min-width: 10rem;
	2122	padding: 4px;
	2123	border: 1px solid var(--border-strong);
	2124	border-radius: var(--radius);
	2125	background: var(--bg-raised);
	2126	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	2127	}
	2128	.comment-menu-list[hidden] { display: none; }
	2129	.comment-menu-list button {
	2130	display: block;
	2131	width: 100%;
	2132	min-height: 0;
	2133	padding: 6px 9px;
	2134	border: 0;
	2135	border-radius: 4px;
	2136	background: none;
	2137	color: var(--fg);
	2138	text-align: left;
796ac8c0 Keenan Nemetz 11d ago	2139	font-family: var(--font);
	2140	font-size: calc(13.2px * var(--font-scale));
	2141	font-weight: 400;
	2142	line-height: 1.4;
f6f4b1db Keenan Nemetz 15d ago	2143	cursor: pointer;
	2144	}
	2145	.comment-menu-list button:hover { background: var(--bg-hover); }
	2146	.comment-menu-list form { margin: 0; }
	2147	.comment-menu-list .menu-danger { color: var(--bad); }
	2148	.comment-menu-list .menu-danger:hover { background: var(--bad-soft); }
802e0e52 Keenan Nemetz 5d ago	2149	.comment-edit-form, .details-edit-form { padding: 10px 14px 12px; }
	2150	.comment-edit-form[hidden], .details-edit-form[hidden] { display: none; }
	2151	.comment-edit-form textarea, .details-edit-form textarea { min-height: 7rem; max-width: none; }
	2152	.comment-edit-form .form-actions, .details-edit-form .form-actions { margin-top: 8px; }
cfd43dcd Keenan Nemetz 12d ago	2153	article.comment.editing > .comment-body,
cfd43dcd Keenan Nemetz 12d ago	2154	article.comment.editing > .comment-snippet { display: none; }
f6f4b1db Keenan Nemetz 15d ago	2155
802e0e52 Keenan Nemetz 5d ago	2156	/* The heading is one row: the number stays put, the title sits beside it, and
	2157	the pencil opens a title-only form that takes the title's place. */
	2158	.details-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: 0 0 4px; }
	2159	.details-title .page-num { flex: 0 0 auto; margin-right: 0; }
	2160	.details-title-view { min-width: 0; margin: 0; }
	2161	.details-title-view[hidden], .title-edit-form[hidden], .title-edit-toggle[hidden] { display: none; }
	2162	.title-edit-toggle {
	2163	display: inline-grid;
	2164	place-items: center;
	2165	flex: 0 0 auto;
	2166	width: 22px;
	2167	height: 22px;
	2168	border-radius: var(--radius);
	2169	color: var(--fg-faint);
	2170	}
	2171	.title-edit-toggle:hover { background: var(--bg-hover); color: var(--accent); text-decoration: none; }
	2172	.title-edit-toggle .icon { width: 14px; height: 14px; }
	2173	.title-edit-form { display: flex; align-items: center; flex: 1 1 18rem; gap: 6px; min-width: 0; }
	2174	.title-edit-form .details-title-input { flex: 1 1 auto; min-width: 8rem; }
	2175	.title-edit-form button { flex: 0 0 auto; }
	2176	.details-title-input {
	2177	width: 100%;
	2178	max-width: none;
	2179	font-family: var(--font);
	2180	font-size: calc(19.8px * var(--font-scale));
	2181	font-weight: 600;
	2182	line-height: 1.35;
	2183	letter-spacing: -0.005em;
	2184	}
	2185
f6f4b1db Keenan Nemetz 15d ago	2186	/* A thread keeps its root visible and lets the replies fold away. */
	2187	.thread-replies { margin: 0 0 10px 26px; }
	2188	.thread-replies > summary {
	2189	display: inline-flex;
	2190	align-items: center;
	2191	gap: 6px;
	2192	width: max-content;
	2193	padding: 2px 0;
	2194	color: var(--fg-muted);
796ac8c0 Keenan Nemetz 11d ago	2195	font-size: calc(12.65px * var(--font-scale));
f6f4b1db Keenan Nemetz 15d ago	2196	cursor: pointer;
	2197	list-style: none;
	2198	}
	2199	.thread-replies > summary::-webkit-details-marker { display: none; }
	2200	.thread-replies > summary:hover { color: var(--accent); }
	2201	.thread-replies[open] > summary { margin-bottom: 6px; }
	2202	.thread-chevron { display: inline-flex; color: var(--fg-faint); transition: transform 0.12s ease; }
	2203	.thread-chevron .icon { width: 12px; height: 12px; }
	2204	.thread-replies[open] .thread-chevron { transform: rotate(90deg); }
	2205	.thread-replies .comment-replies { margin: 6px 0 0; }
	2206
	2207	.discussion-composer { margin: 16px 0 0; }
	2208	.discussion-composer textarea {
	2209	width: 100%;
	2210	max-width: none;
	2211	min-height: 7rem;
	2212	padding: 12px 14px;
	2213	background: var(--bg-panel);
	2214	border-color: var(--border);
	2215	border-radius: var(--radius-lg);
	2216	line-height: 1.55;
	2217	}
	2218	.discussion-composer .form-actions { margin-top: 8px; }
	2219	.reply-target {
	2220	display: flex;
	2221	align-items: center;
	2222	justify-content: space-between;
	2223	gap: 8px;
	2224	margin: 0 0 8px;
	2225	padding: 5px 8px;
	2226	border: 1px solid var(--accent);
	2227	border-radius: var(--radius);
	2228	background: var(--accent-soft);
	2229	color: var(--fg-muted);
796ac8c0 Keenan Nemetz 11d ago	2230	font-size: calc(12.65px * var(--font-scale));
f6f4b1db Keenan Nemetz 15d ago	2231	}
	2232	.reply-target[hidden] { display: none; }
	2233	.reply-target strong { color: var(--fg); }
	2234
	2235	/* An anchored comment can show the lines it was written about. The details
306f36fc Keenan Nemetz 12d ago	2236	element keeps the conversation compact. */
f6f4b1db Keenan Nemetz 15d ago	2237	.comment-snippet {
	2238	margin: 0 14px 12px;
	2239	border: 1px solid var(--border);
	2240	border-radius: var(--radius);
	2241	background: var(--bg-raised);
	2242	overflow: hidden;
	2243	}
	2244	.comment-snippet > summary {
	2245	display: flex;
	2246	align-items: center;
	2247	flex-wrap: wrap;
	2248	gap: 4px 8px;
	2249	padding: 7px 10px;
	2250	color: var(--fg-muted);
796ac8c0 Keenan Nemetz 11d ago	2251	font-size: calc(12.65px * var(--font-scale));
f6f4b1db Keenan Nemetz 15d ago	2252	cursor: pointer;
	2253	list-style: none;
	2254	}
	2255	.comment-snippet > summary::-webkit-details-marker { display: none; }
	2256	.comment-snippet > summary:hover { background: var(--bg-hover); }
	2257	.comment-snippet code { color: var(--fg); font-family: var(--mono); }
	2258	.comment-snippet[open] > summary { border-bottom: 1px solid var(--border); }
	2259	.snippet-chevron { display: inline-flex; color: var(--fg-faint); transition: transform 0.12s ease; }
	2260	.snippet-chevron .icon { width: 12px; height: 12px; }
	2261	.comment-snippet[open] .snippet-chevron { transform: rotate(90deg); }
	2262	.snippet-code {
	2263	overflow-x: auto;
	2264	background: var(--bg-panel);
796ac8c0 Keenan Nemetz 11d ago	2265	font-family: var(--mono);
	2266	font-size: calc(12.65px * var(--font-scale));
	2267	line-height: 1.55;
f6f4b1db Keenan Nemetz 15d ago	2268	}
	2269	.snippet-line { display: flex; min-width: max-content; }
	2270	.snippet-line.anchor { background: var(--accent-soft); }
	2271	.snippet-no {
	2272	flex: 0 0 3.2rem;
	2273	padding-right: 8px;
	2274	text-align: right;
	2275	color: var(--fg-faint);
	2276	user-select: none;
	2277	border-right: 1px solid var(--border);
	2278	}
	2279	.snippet-text { padding: 0 10px; white-space: pre; color: var(--fg); }
	2280	.snippet-actions {
	2281	padding: 6px 10px;
	2282	border-top: 1px solid var(--border);
796ac8c0 Keenan Nemetz 11d ago	2283	font-size: calc(12.65px * var(--font-scale));
f6f4b1db Keenan Nemetz 15d ago	2284	}
f6f4b1db Keenan Nemetz 15d ago	2285
f09ef39e Keenan Nemetz 15d ago	2286	.meta-list {
	2287	display: grid;
	2288	grid-template-columns: auto minmax(0, 1fr);
	2289	gap: 4px 10px;
	2290	margin: 0;
796ac8c0 Keenan Nemetz 11d ago	2291	font-size: calc(13.2px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	2292	}
	2293	.meta-list dt { color: var(--fg-faint); }
	2294	.meta-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
41d1fee9 Keenan Nemetz 13d ago	2295
b74cb029 Keenan Nemetz 11d ago	2296	/* The request target is two stacked fields, not one crowded row: the sidebar is
b74cb029 Keenan Nemetz 11d ago	2297	narrow, so each branch name gets the full width and a visible label. */
41d1fee9 Keenan Nemetz 13d ago	2298	.request-target { margin: 2px 0 0; }
f2360c20 Keenan Nemetz 11d ago	2299	.target-fields { display: grid; gap: 4px; }
33e4e54f Keenan Nemetz 1d ago	2300	.target-field { display: grid; gap: 3px; min-width: 0; margin: 0; }
59c0625b Keenan Nemetz 11d ago	2301	.target-label { color: var(--fg-muted); font-size: calc(12.1px * var(--font-scale)); }
41d1fee9 Keenan Nemetz 13d ago	2302	.request-target select {
	2303	min-width: 0;
	2304	width: 100%;
b74cb029 Keenan Nemetz 11d ago	2305	min-height: 30px;
b74cb029 Keenan Nemetz 11d ago	2306	padding: 4px 7px;
796ac8c0 Keenan Nemetz 11d ago	2307	font-size: calc(13.2px * var(--font-scale));
41d1fee9 Keenan Nemetz 13d ago	2308	}
b74cb029 Keenan Nemetz 11d ago	2309	.target-actions {
	2310	display: flex;
	2311	flex-wrap: wrap;
	2312	align-items: center;
	2313	gap: 6px 10px;
33e4e54f Keenan Nemetz 1d ago	2314	margin-top: 6px;
b74cb029 Keenan Nemetz 11d ago	2315	}
b74cb029 Keenan Nemetz 11d ago	2316	.target-actions button {
41d1fee9 Keenan Nemetz 13d ago	2317	display: inline-flex;
	2318	align-items: center;
	2319	justify-content: center;
	2320	min-height: 28px;
b74cb029 Keenan Nemetz 11d ago	2321	margin-left: auto;
b74cb029 Keenan Nemetz 11d ago	2322	padding: 3px 9px;
41d1fee9 Keenan Nemetz 13d ago	2323	}
b74cb029 Keenan Nemetz 11d ago	2324	.request-target p { margin: 0; font-size: calc(12.65px * var(--font-scale)); }
41d1fee9 Keenan Nemetz 13d ago	2325	.target-summary {
	2326	display: flex;
	2327	flex-wrap: wrap;
	2328	align-items: center;
	2329	gap: 5px;
	2330	margin: 0;
796ac8c0 Keenan Nemetz 11d ago	2331	font-size: calc(13.2px * var(--font-scale));
41d1fee9 Keenan Nemetz 13d ago	2332	}
f09ef39e Keenan Nemetz 15d ago	2333	.label-row { display: inline-flex; flex-wrap: wrap; gap: 4px; }
	2334	.label-row .label { margin-left: 0; }
	2335
d3dcf54d Keenan Nemetz 11d ago	2336	.approval-list {
f09ef39e Keenan Nemetz 15d ago	2337	list-style: none;
	2338	padding: 0;
	2339	margin: 0;
	2340	display: flex;
	2341	flex-direction: column;
	2342	gap: 6px;
796ac8c0 Keenan Nemetz 11d ago	2343	font-size: calc(13.2px * var(--font-scale));
f09ef39e Keenan Nemetz 15d ago	2344	}
d3dcf54d Keenan Nemetz 11d ago	2345	.approval-list li { display: flex; align-items: center; gap: 7px; min-width: 0; }
d3dcf54d Keenan Nemetz 11d ago	2346	.approval-list .cname {
f09ef39e Keenan Nemetz 15d ago	2347	flex: 1;
	2348	min-width: 0;
	2349	overflow: hidden;
	2350	text-overflow: ellipsis;
	2351	white-space: nowrap;
	2352	}
796ac8c0 Keenan Nemetz 11d ago	2353	.approval-list .muted { font-size: calc(12.1px * var(--font-scale)); }
f09ef39e Keenan Nemetz 15d ago	2354
	2355	@media (max-width: 900px) {
	2356	.thread { grid-template-columns: 1fr; }
d3dcf54d Keenan Nemetz 11d ago	2357	.thread-side { display: block; }
	2358	.thread-side #request-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 24px; }
	2359	.thread-side #request-sidebar { display: contents; }
f09ef39e Keenan Nemetz 15d ago	2360	.thread-side section:first-child { padding-top: 12px; }
a32a859a Keenan Nemetz 5d ago	2361	.help::after,
a32a859a Keenan Nemetz 5d ago	2362	.contributors .contrib-stat::after { top: calc(100% + 7px); right: auto; left: 0; transform: none; }
f09ef39e Keenan Nemetz 15d ago	2363	.page-head { flex-wrap: wrap; }
a464f892 Keenan Nemetz 15d ago	2364	.page-head-actions { width: 100%; justify-content: flex-start; }
f09ef39e Keenan Nemetz 15d ago	2365	}
	2366
	2367	/* Form cards: fields live on a card, actions sit below it and align right.
	2368	Every primary action uses the same height and horizontal padding. */
	2369	.form-block { margin: 12px 0; }
9579c1f9 Keenan Nemetz 14d ago	2370	.danger-form + .danger-form { margin-top: 28px; }
2973f727 Keenan Nemetz 15d ago	2371	.acl-check { display: flex; align-items: center; gap: 6px; }
	2372	.acl-check input[type="checkbox"] { width: auto; margin: 0; }
	2373	table.acl select { min-width: 9rem; }
5b814e99 Keenan Nemetz 14d ago	2374	.role-options { border: 0; padding: 0; margin: 0; min-width: 0; }
	2375	.role-options legend {
	2376	padding: 0;
	2377	margin: 0 0 8px;
	2378	color: var(--fg);
796ac8c0 Keenan Nemetz 11d ago	2379	font-size: calc(14.3px * var(--font-scale));
5b814e99 Keenan Nemetz 14d ago	2380	font-weight: 600;
	2381	}
	2382	.role-options > p { margin: 0 0 10px; }
	2383	.role-option {
	2384	display: flex;
	2385	align-items: baseline;
	2386	gap: 7px;
	2387	margin: 5px 0;
	2388	padding: 7px 10px;
	2389	border: 1px solid var(--border);
	2390	border-radius: var(--radius);
	2391	color: var(--fg);
796ac8c0 Keenan Nemetz 11d ago	2392	font-size: calc(14.3px * var(--font-scale));
5b814e99 Keenan Nemetz 14d ago	2393	cursor: pointer;
	2394	}
	2395	.role-option:hover { border-color: var(--border-strong); background: var(--bg-raised); }
	2396	.role-option:has(input[type="radio"]:checked) {
	2397	border-color: var(--accent);
	2398	background: var(--accent-soft);
	2399	}
	2400	.role-option input[type="radio"] {
	2401	display: block;
	2402	flex: 0 0 auto;
	2403	width: auto;
	2404	margin: 0;
	2405	accent-color: var(--accent);
	2406	}
	2407	.role-option .role-name { font-weight: 600; }
796ac8c0 Keenan Nemetz 11d ago	2408	.role-option .role-desc { color: var(--fg-muted); font-size: calc(13.2px * var(--font-scale)); line-height: 1.45; }
5b814e99 Keenan Nemetz 14d ago	2409	.role-options.compact { display: flex; flex-wrap: wrap; gap: 4px 12px; }
	2410	.role-options.compact legend { display: none; }
	2411	.role-options.compact .role-option {
	2412	display: inline-flex;
	2413	align-items: center;