.versions {
	/* Core list */
	ol {
		list-style:none;
		margin:0 -1rem var(--svspace);
		padding:0;
	}
	li:not(li li) {
		border-top:0.2rem solid var(--caccent);
		padding:var(--svspace) 1rem;
		max-width:none;
		display:grid;
		grid-template-columns:auto 1fr;
		grid-template-areas:
			"title actions"
			"author actions"
			"changes changes";
		grid-gap:0.5rem;
	}
	li:first-child {
		border:none;
		padding-top:0;
	}
	li>strong:first-child {
		grid-area:title;
		font-size:116%;
	}
	li>p {
		grid-area:author;
		margin:0;
	}

	/* Actions area */
	nav {
		grid-area:actions;
		margin-left:auto;
	}


	/* Changes area */
	dl {
		grid-area:changes;
	}
	dt {
		min-width:5rem;
	}
	dd {
		overflow:hidden;
	}
	del{
		background:color-mix(in srgb, var(--cerror) 30%, var(--cbgmain));
	}
	ins{
		background:color-mix(in srgb, var(--csuccess) 30%, var(--cbgmain));
	}
	del,ins{
		text-decoration:none;
		padding:0.25rem;
		margin:0 0 calc(var(--svspace) / 2);
	}

	.diff-container{
		margin:0 0 0 2.5rem;

		.diff{
			del{
				&:before{
					content:'\2013';
					background:color-mix(in srgb, var(--cerror) 30%, var(--cbgmain));
				}
			}
			ins{
				&:before{
					content:'+';
					background:color-mix(in srgb, var(--csuccess) 30%, var(--cbgmain));
				}
			}
			del,ins{
				display:block;
				position:relative;
				&:before{
					position:absolute;
					left:-2.5rem;
					top:0;
					padding:0.15rem 0;
					width:2rem;
					text-align:center;
					font-size:120%;
				}
			}
			p {
				margin:0;
			}
		}
		p {
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
			position:relative;
			margin:0 0 calc(var(--svspace) / 2);
			padding:0 4rem 0 0;

			&.expandable{
				cursor:pointer;

				&::after{
					content:'more \21A7';
					font-size:90%;
					position:absolute;
					top:0;
					right:0;
				}
				&.expand{
					white-space:wrap;
					text-overflow:none;
					&::after{
						content:'less \21A5';
					}
				}
			}
		}
	}
}