.tg-list {
	border-radius: 5px;
	box-shadow: 0 0 3px 1px #ccc;

	display: flex;
	flex-direction: column;
	margin: 8px;

	& & {
		font-size: .9em;
	}

	& > .item:not([hidden]) {
		display: grid;
		grid-template:
			"n t t" auto
			"v v s" 2em / auto 1fr 3fr;

		padding: 8px;

		text-decoration: none;
		color: inherit;

		transition: background .2s;

		&:not([hidden]) + &, .tg-list + & {
			border-top: 1px solid #ccc;
		}

		&:hover, &:focus, &:focus-visible {
			background: rgb(0, 0, 0, .1);
		}

		& > * {
			margin: auto .5rem;
		}

		& > .number { grid-area: n; }

		& > .abst  { grid-area: t; font-size: 1.4em; }

		& > .version { grid-area: v; }

		& > .status { grid-area: s; }

		& > .oldtoggle { grid-area: o; }
	}

	& > .btn {
		appearance: none;
		display: block;
		margin: 6px;

		font-size: inherit;
		text-align: start;

		&:has(+ .tg-list:not([hidden])) {
			border-bottom: 0;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}

		& + .tg-list {
			margin-top: -6px;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.tg-list > .item {
		transition: none;
	}
}