body { margin: 0; padding: 0; font-family: sans-serif; }

a { color: inherit; }

.container { display: flex; flex-direction: column;
	height: 100vh; width: 100vw; overflow: hidden; }
.body { display: flex; flex-grow: 1; overflow: hidden; }

.header { padding: .25rem .5rem; background: #aaa; color: white;
	border-bottom: 1px solid #444;
	display: flex; justify-content: space-between; align-items: baseline;
	column-gap: .5rem; }

ul.sidebar { margin: 0; padding: 0; background: #eee;
	border-right: 1px solid #ccc; min-width: 10rem; overflow: auto; }
ul.sidebar li { margin: 0; padding: 0; }
ul.sidebar li a { padding: .25rem .5rem; padding-left: 30px;
	display: block; text-decoration: none; white-space: nowrap; }
ul.sidebar li a:hover { background: #ddd; }

ul.sidebar li.parent a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 4 14 10 8 16 14' stroke='%23888' stroke-width='4' fill='none' /%3E%3C/svg%3E%0A");
	background-repeat: no-repeat; background-position: 5px center; }

ul.sidebar li.selected a { font-weight: bold;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='6' fill='%23888' /%3E%3C/svg%3E%0A");
	background-repeat: no-repeat; background-position: 5px center; }

ul.sidebar li.child a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 4 6 10 12 16 6' stroke='%23888' stroke-width='4' fill='none' /%3E%3C/svg%3E%0A");
	background-repeat: no-repeat; background-position: 5px center; }

.browser { overflow: auto; display: flex; flex-wrap: wrap;
	align-content: flex-start; justify-content: center; align-items: center;
	gap: 10px; padding: 9px; }
.browser:focus-visible { outline: 0; box-shadow: none; }
.browser img { display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); }

.view { display: flex; flex-grow: 1; overflow: hidden;
	justify-content: center; align-items: center; }
.view img { max-width: 100%; max-height: 100%; object-fit: contain; }

.viewbar { padding: .25rem .5rem; background: #eee;
	border-left: 1px solid #ccc; min-width: 20rem; overflow: auto; }
.viewbar h2 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.2rem; }
.viewbar h3 { margin: 0.25em 0; padding: 0; font-size: 1.1rem; }
.viewbar ul { margin: 0; padding: 0 0 0 1.25em; list-style-type: "- "; }
.viewbar ul.tags { padding: 0; list-style-type: none; }
.viewbar li { margin: 0; padding: 0; }
.viewbar meter { width: 1.25rem;
	/* background: white; border: 1px solid #ccc; */ }

.similar { padding: .5rem; flex-grow: 1; overflow: auto; }
.similar h2 { margin: 1em 0 0.5em 0; padding: 0; font-size: 1.2rem; }
.similar .row { display: flex; }
.similar .row ul { margin: 0; padding: 0 0 0 1.25em; list-style-type: "- "; }

.duplicates { padding: .5rem; flex-grow: 1; overflow: auto; }
.duplicates .row { display: flex; }