/* simple.css is the base, this file only holds app-specific bits */
:root {
	--container-max-width: 120ch;
	--clr-danger: #dc2626;
}

body {
	grid-template-columns: 1fr min(var(--container-max-width), 90%) 1fr;
	/* main stretches, so the footer sits at the viewport bottom on short pages */
	grid-template-rows: auto 1fr auto;
	min-height: 100dvh;
}
body > header {
	grid-row: 1;
}
body > main {
	grid-row: 2;
}
body > footer {
	grid-row: 3;
	margin-top: 2rem;
	padding: 1rem;
}

body > header.main__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem 1rem;
	text-align: start;
}
.main__home {
	margin-inline-end: auto;
	font-weight: bold;
	text-decoration: none;
}
.main__header form {
	margin: 0;
}

.link-btn {
	all: unset;
	color: var(--accent);
	text-decoration: underline;
	cursor: pointer;
}

form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.form-group {
	display: flex;
	flex-direction: column;
}
.form-group__label {
	font-weight: 600;
}
.form-group__input {
	margin: 0;
}
form button {
	align-self: flex-start;
}
button.danger {
	background-color: var(--clr-danger);
	border-color: var(--clr-danger);
}

.error {
	color: var(--clr-danger);
	white-space: pre-line;
}

.birthday-input-group {
	display: flex;
	gap: 1em;
}
.birthday-input {
	width: 10ch;
}
.form-controls {
	display: flex;
	gap: 1em;
	justify-content: space-between;
}

.main-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0 0 1rem;
}

/* Calendar */
.calendar {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1.5rem;
	font-size: 0.8rem;
}
.calendar__month-name {
	margin: 0 0 0.25rem;
	font-size: 1rem;
}
.calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	text-align: center;
}
.calendar__weekday {
	color: var(--text-light);
}
.calendar__day {
	/* each day anchors its own popup; anchor-scope keeps the shared name local */
	anchor-name: --calendar-day;
	anchor-scope: --calendar-day;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 2.2em;
	line-height: 1.4;
	border-radius: var(--standard-border-radius);
}
.calendar__day--today {
	box-shadow: inset 0 0 0 1px var(--accent);
}
.calendar__day[tabindex] {
	cursor: pointer;
	background-color: var(--accent-bg);
	font-weight: bold;
}
.calendar__markers {
	display: flex;
	justify-content: center;
	gap: 2px;
}
.calendar__marker {
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background-color: var(--accent);
}

.calendar__popup {
	display: none;
	font-size: 1rem;
	font-weight: normal;
	text-align: start;
	position: absolute;
	position-anchor: --calendar-day;
	position-area: block-end span-inline-end;
	position-try-fallbacks:
		flip-inline,
		flip-block,
		flip-block flip-inline;
	z-index: 1;
	width: max-content;
	max-width: min(20rem, 90vw);
	padding: 0.5rem 1rem;
	background-color: var(--bg);
	border: var(--border-width) solid var(--border);
	border-radius: var(--standard-border-radius);
	box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.2);
}
.calendar__day:hover .calendar__popup,
.calendar__day:focus-within .calendar__popup {
	display: block;
}
.calendar__person + .calendar__person {
	border-top: var(--border-width) solid var(--border);
	margin-top: 0.5rem;
	padding-top: 0.5rem;
}
.calendar__person small {
	margin-inline-start: 0.5rem;
	color: var(--text-light);
}
.calendar__person p {
	margin: 0.25rem 0 0;
	white-space: pre-line;
}