.diary-navigation {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--border);
}

.diary-date {
	min-width: 0;
	text-align: center;
}

#diary-date-label {
	max-width: 100%;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.15rem;
}

#diary-date {
	max-width: 100%;
}

.diary-paper {
	display: block;
	width: 100%;
	min-height: 22rem;
	margin: 1rem 0;
	padding: 1rem;
	overflow-wrap: anywhere;
	background: var(--field);
	color: var(--text);
}

#diary-preview {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.1rem;
	border: 1px solid var(--border);
}

#diary-preview > :first-child {
	margin-top: 0;
}

#diary-preview pre,
#diary-preview .table-scroll {
	max-width: 100%;
	overflow-x: auto;
}

#diary-preview table {
	border-collapse: collapse;
}

#diary-preview td,
#diary-preview th {
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--border);
}

#diary-editor {
	resize: vertical;
	font:
		1rem / 1.6 Consolas,
		"Courier New",
		monospace;
}

.diary-actions {
	display: flex;
	gap: 0.5rem;
}

.diary-quiet {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

#diary-journal [hidden] {
	display: none;
}

@media (max-width: 400px) {
	.diary-navigation {
		gap: 0.25rem;
	}

	#diary-date-label {
		font-size: 1rem;
		padding-inline: 0.3rem;
	}

	.diary-paper {
		padding: 0.5rem;
	}
}