* {
	box-sizing: border-box;
	font-variant-numeric: tabular-nums;
}

html {
	--body-font: 'Fira Sans', sans-serif;
	--heading-font: 'Fira Sans', sans-serif;

	--pink: hsl(330deg, 87.5%, 50%);
	--text-color: hsl(0deg, 0%, 25%);
	--placeholder-color: hsl(330deg, 50%, 75%);
	--page-color: hsl(330deg, 50%, 97%);
	--card-color: white;
	--card-border-color: hsl(330deg, 50%, 80%);
	--menu-color: hsl(210deg, 50%, 97%);
	--menu-border-color: hsl(210deg, 50%, 80%);
	--search-text-color: hsl(210deg, 50%, 25%);
	--search-placeholder-color: hsl(210deg, 50%, 75%);
	--controls-text-color: hsl(210deg, 25%, 50%);
	--controls-input-color: hsl(210deg, 75%, 25%);

	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

html.dark {
	color-scheme: dark;
	--pink: hsl(330deg, 100%, 73%);
	--text-color: hsl(330deg, 25%, 90%);
	--placeholder-color: hsl(330deg, 0%, 75%);
	--page-color: hsl(0deg, 0%, 10%);
	--card-color: hsl(330deg, 0%, 17%);
	--card-border-color: hsl(330deg, 0%, 34%);
	--menu-color: hsl(210deg, 30%, 30%);
	--menu-border-color: hsl(210deg, 30%, 60%);
	--search-text-color: hsl(210deg, 50%, 90%);
	--search-placeholder-color: hsl(210deg, 50%, 75%);
	--controls-text-color: hsl(210deg, 20%, 80%);
	--controls-input-color: hsl(0deg, 0%, 90%);
}

#container {
	width: 100%;
	padding-bottom: 16px;
}

input,
textarea,
button,
select {
	background-color: inherit;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	border: none;
	color: var(--text-color);
	font-size: inherit;
	font-family: var(--body-font);
}

select {
	border-bottom: 1px solid var(--placeholder-color);
	field-sizing: content;
	padding: 3px 0px;
	margin: -3px 0px;
	cursor: pointer;
}

input[type='button'],
input[type='submit'] {
	border: 0;
	padding: 0;
	font-family: var(--heading-font);
	font-weight: 600;
	color: var(--pink);
	cursor: pointer;
}

.vote-buttons {
	display: inline-flex;
	align-items: baseline;
	user-select: none;
	margin: 0 -4px;
}

.vote-buttons label {
	padding: 0px 5px;
}

.vote-buttons input {
	display: none;
}

.vote-buttons input:enabled + svg {
	cursor: pointer;
}

.vote-buttons input + svg {
	opacity: 0.4;
}

.vote-buttons input:checked + svg {
	opacity: 1;
}

#cancel {
	position: absolute;
	top: 0;
	right: 0;
	color: var(--search-placeholder-color);
}

#cancel:hover {
	text-decoration: none;
}

input[type='button']:enabled:active,
input[type='button']:enabled:hover,
input[type='button']:enabled:focus,
input[type='submit']:enabled:active,
input[type='submit']:enabled:hover,
input[type='submit']:enabled:focus {
	text-decoration: underline;
}

input[type='button']:disabled,
input[type='submit']:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

::placeholder {
	color: var(--placeholder-color);
}

body {
	width: 100%;
	margin: 0;
	height: 100%;
	padding: 0;
	color: var(--text-color);
	font-family: var(--body-font);
	font-size: 16px;
	line-height: 1.3;
	background-color: var(--page-color);
	transition: background-color 0.2s;
	overflow-y: scroll;
	caret-color: var(--pink);
}

footer .controls {
	font-size: 12px;
	text-align: center;
	padding: 0;
	margin: auto;
}

.card {
	margin: 16px;
	padding: 16px;
	background-color: var(--card-color);
	transition: background-color 0.2s;
	border: 2px solid var(--card-border-color);
	border-radius: 4px;
	overflow-x: auto;
}

#container > .card:last-child {
	margin-bottom: 0;
}

.card .title {
	font-family: var(--heading-font);
	align-items: baseline;
	width: 100%;
	position: relative;
	margin-top: -4px;
	display: flex;
	justify-content: space-between;
}

.card .info {
	display: flex;
	position: relative;
	overflow: hidden;
}

.card .info button {
	margin-left: 0.5em;
}

.card .info select {
	opacity: 0;
	width: 1px;
	left: 0;
	position: absolute;
	pointer-events: none;
}

.card .scope:not(.editing) {
	color: inherit;
	opacity: 0.5;
}

.card .body {
	margin: 0;
}

.card button:enabled {
	cursor: pointer;
	opacity: 0.4;
}

.card button:enabled:hover {
	opacity: 1;
}

.card hr {
	border: 1px solid black;
	border-bottom: none;
	margin: 12px auto 8px;
	opacity: 0.15;
}

.card .meta-info {
	opacity: 0.5;
}

.card .meta-row {
	margin-top: 0.5em;
	font-size: 14px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.card .meta-actions {
	text-align: right;
	display: flex;
	gap: 0.25em;
}

.card .other-buttons {
	display: inline-flex;
	align-items: baseline;
	gap: 0.25em;
}

.card .date {
	color: inherit;
}

.notes .note:last-child {
	padding-bottom: 8px;
}

#login > div > input[type='text'],
#login > div > input[type='password'] {
	width: 50%;
	font-family: inherit;
	font-size: inherit;
	margin: 3px auto;
	padding: 2px;
	border-bottom: 1px solid var(--placeholder-color);
}

.note input[type='text'],
#login input[type='text'],
#login input[type='password'],
#create input[type='text'],
textarea {
	display: block;
	border: none;
	border-radius: 0;
}

.note-controls {
	margin-inline-start: 4px;
	position: relative;
	opacity: 0;
}

.note:hover .note-controls,
.note:focus-within .note-controls {
	opacity: 1;
}

#create input[type='text']#scope {
	width: unset;
	min-width: unset;
	max-width: unset;
	display: inline;
	color: var(--pink);
	font-family: var(--heading-font);
}

#create input[type='text'],
textarea {
	padding: 0;
	border: none;
	resize: none;
	width: 100%;
	min-width: 100%;
	max-width: 100%;
}

#create textarea {
	overflow: hidden;
	padding-bottom: 16px;
}

.editing {
	color: inherit;
	background-color: var(--page-color);
}

p.new_note.note input[type='text'] {
	width: 100%;
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	padding: 0;
}

input[type='submit'].note-submit {
	float: right;
	position: relative;
	right: 0;
	padding-bottom: 0;
}

span.controls-left {
	float: left;
	font-size: 12px;
	margin-top: 6px;
}

.controls {
	display: block;
	font-size: 12px;
	margin: 6px 0 0 auto;
	width: fit-content;
	width: -moz-fit-content;
	height: fit-content;
	height: -moz-fit-content;
	text-align: right;
}

.controls > li {
	display: inline-block;
	height: 16px;
}

.controls > li + li::before {
	content: '•';
	height: 14px;
	width: 12px;
	text-align: center;
	padding: 0 2px;
	font-family: var(--heading-font);
}

h2,
.name {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 22px;
	font-family: var(--heading-font);
	color: inherit;
	display: inline;
}

.name {
	font-weight: bold;
}

.note {
	font-size: 12px;
	color: inherit;
	text-indent: -15px;
	padding-left: 15px;
	margin: 0;
	padding-bottom: 0;
	padding-top: 0;
}

.note-author::after {
	content: ': ';
}

#menu {
	position: sticky;
	margin-bottom: 16px;
	top: 0;
	z-index: 1000;
	background-color: var(--menu-color);
	transition: background-color 0.2s;
	border: 2px solid var(--menu-border-color);
	border-radius: 0 0 4px 4px;
}

#search {
	display: inline;
	width: 100%;
	outline: none;
	font-size: 24px;
	border: none;
	font-family: var(--heading-font);
	text-align: center;
	color: var(--search-text-color);
	padding: 10px 54px 15px 54px;
	vertical-align: top;
}

#search::placeholder {
	color: var(--search-placeholder-color);
}

#search-row {
	position: relative;
}

#search-row input[type='button'] {
	height: 54px;
	width: 54px;
	font-size: 24px;
	font-family: var(--body-font);
	margin: 0;
	padding: 0;
	padding-bottom: 5px;
}

#control-row {
	padding-top: 10px;
}

#top-controls {
	padding: 0 12px;
	margin: 0 auto;
	color: var(--controls-text-color);
}

#top-controls li:first-child::before {
	display: none;
}

#top-controls input {
	color: var(--controls-input-color);
}

#top-controls input[type='button']:enabled:active,
#top-controls input[type='button']:enabled:hover,
#top-controls input[type='button']:enabled:focus,
#top-controls input[type='submit']:enabled:active,
#top-controls input[type='submit']:enabled:hover,
#top-controls input[type='submit']:enabled:focus {
	text-decoration: underline;
}

.error-line {
	text-align: center;
	color: var(--pink);
}

.annotation-progress-bar {
	width: 100%;
	height: 6px;
	border-radius: 3px;
	overflow: hidden;
	background-color: color-mix(
		in oklab,
		var(--placeholder-color),
		transparent 75%
	);
}

.annotation-progress-bar > div {
	height: 100%;
	background-color: var(--placeholder-color);
}

.annotation-progress-label {
	display: block;
	font-size: 11px;
	color: var(--placeholder-color);
	margin-top: 6px;
}

.result-count {
	text-align: center;
	margin: -8px 0;
	font-size: 12px;
}

h1,
h2,
h3 {
	font-family: var(--heading-font);
	font-weight: 300;
}

a {
	text-decoration: none;
	color: var(--pink);
}

a:hover {
	text-decoration: underline;
}

/* 512px + 2 * 16px + (scrollbar) 17px */

@media (min-width: 562px) {
	.card {
		margin-left: auto;
		margin-right: auto;
		width: calc(512px - 2 * 16px);
	}

	#menu {
		left: calc((100% - 512px) / 2 - 2px);
		width: 516px; /* 512px + 4px */
		border-top-width: 0;
	}
}

@media (max-width: 561px) {
	.card {
		width: calc(100% - 2 * 16px);
	}

	#menu {
		width: 100%;
		border-width: 0 0 2px 0;
		border-radius: 0;
	}
}