/* files.html: the two panes are a file list and a preview, in place of the
   diff editor's textarea/coloured-view pair -- reuses .cols/.field from
   prosediff.css for the same split-and-scroll layout, but narrower for the
   list side since it's just names and sizes, not prose. */
.files-cols { grid-template-columns: 1fr 2fr; }

.file-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: var(--panel);
}
.file-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	width: 100%;
	padding: 8px 12px;
	border: none;
	border-top: 1px solid var(--rule);
	border-radius: 0;
	background: none;
	font: inherit;
	/* It's a <button> for click/keyboard handling, but should read as a plain
	   list row, not one of the toolbar buttons -- override the rest of the
	   global `button` rule too (font: inherit only resets the font shorthand,
	   which excludes text-transform/letter-spacing/border/border-radius). */
	text-transform: none;
	letter-spacing: normal;
	text-align: left;
	cursor: pointer;
}
.file-row:first-child { border-top: none; }
.file-row:hover { background: var(--bg); }
.file-row.active { background: var(--rev-bg); }
.file-name {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--ink);
	word-break: break-all;
}
.file-size {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-soft);
	white-space: nowrap;
}

.preview {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: var(--panel);
	padding: 14px 16px;
}
.preview .empty { padding: 0; }
.preview img {
	display: block;
	max-width: 100%;
	height: auto;
}
.preview pre {
	margin: 0;
	white-space: pre-wrap;
	word-wrap: break-word;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink);
}