.entry-month-strip {
	display: grid;
	gap: var(--space-3);
}

.entry-month-strip-header {
	display: flex;
}

.entry-month-strip-nav {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
}

.entry-month-strip-label {
	color: var(--color-muted);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 0;
	text-transform: uppercase;
}

.entry-month-strip-nav-link {
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-surface-subtle);
	display: grid;
	place-items: center;
	color: var(--color-muted);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.entry-month-strip-nav-link:hover {
	border-color: var(--color-text);
	color: var(--color-text);
}

.entry-month-strip-nav-link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.entry-month-strip-grid {
	display: grid;
	grid-template-columns: repeat(var(--entry-month-strip-days), minmax(1.5rem, 1fr));
	gap: var(--space-2);
	overflow-x: auto;
	padding-bottom: var(--space-1);
	padding-top: var(--space-1);
}

.entry-month-day {
	width: 100%;
	min-width: 0;
	aspect-ratio: 1;
	border: 1px solid var(--color-border);
	border-radius: 0.4rem;
	background: var(--color-surface-subtle);
	display: grid;
	place-items: center;
	color: inherit;
	text-decoration: none;
	transition: border-color 120ms ease, outline-color 120ms ease;
}

.entry-month-day:hover {
	border-color: var(--color-text);
}

.entry-month-day:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.entry-month-day--empty {
	background: var(--color-surface-subtle);
}

.entry-month-day--incomplete {
	background: var(--color-success-surface);
	border-color: var(--color-success-border);
}

.entry-month-day--complete {
	background: var(--color-success-text);
	border-color: var(--color-success-text);
	color: var(--color-surface);
}

.entry-month-day--selected {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.entry-month-day-mark {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
}

.entry-header {
	display: grid;
	gap: var(--space-4);
}

.entry-title-group {

	h1,
	p {
		margin-bottom: var(--space-2);
	}
}

.entry-date {
	color: var(--color-muted);
}

.entry-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: var(--space-3);
}

.entry-readonly {
	width: 100%;
	min-height: 24rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-4);
	background: var(--color-surface-subtle);
	color: var(--color-text);
	font: inherit;
	line-height: 1.7;
	white-space: pre-wrap;
}