/*
 * All National Days Child — Interactive Calendar & Date Panel Stylesheet (calendar.css)
 * Loaded non-blocking only on views rendering the interactive calendar.
 * Strictly light palette (--paper, --cream, --peach, --primary terracotta ring).
 */

.and-calendar-block {
	margin-block: clamp(3rem, 5.5vw, 4.5rem);
	background-color: var(--cream);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	padding: clamp(1.25rem, 3vw, 2.25rem);
	box-shadow: var(--shadow);
}

.and-calendar-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 3px double var(--line-strong);
}

.and-calendar-toolbar__title {
	font-family: var(--font-serif);
	font-size: clamp(1.55rem, 1.3rem + 1vw, 2.2rem);
	margin: 0.15rem 0 0;
	color: var(--ink);
}

.and-calendar-toolbar__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
}

.and-cal-nav-btn,
.and-cal-today-btn,
.and-cal-select {
	min-height: 44px;
	padding: 0.45rem 0.85rem;
	font-family: var(--font-sans);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--ink);
	background-color: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	cursor: pointer;
	touch-action: manipulation;
}

.and-cal-nav-btn:hover,
.and-cal-today-btn:hover,
.and-cal-select:hover {
	border-color: var(--ink);
	background-color: var(--sand);
}

.and-cal-today-btn {
	background-color: var(--primary);
	border-color: var(--primary);
	color: #FFFEFB;
}

.and-cal-today-btn:hover {
	background-color: var(--primary-ink);
	border-color: var(--primary-ink);
	color: #FFFEFB;
}

.and-chevron-left {
	transform: rotate(180deg);
}

/* 7-Column ARIA Calendar Grid */
.and-cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}

.and-cal-weekday {
	text-align: center;
	font-size: 0.74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--muted);
	padding-block: 0.4rem;
}

.and-cal-days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.4rem;
}

.and-cal-cell {
	min-height: 60px;
}

@media (min-width: 768px) {
	.and-cal-days {
		gap: 0.55rem;
	}
	.and-cal-cell {
		min-height: 104px;
	}
}

.and-cal-cell--empty {
	background-color: rgba(241, 236, 225, 0.55);
	border: 1px dashed var(--line);
	border-radius: 10px;
}

.and-cal-day-btn {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	min-height: 60px;
	padding: 0.45rem;
	background-color: var(--paper);
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--ink);
	text-align: left;
	touch-action: manipulation;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 768px) {
	.and-cal-day-btn {
		min-height: 104px;
		padding: 0.65rem 0.75rem;
	}
}

.and-cal-day-btn:hover,
.and-cal-day-btn:focus-visible {
	border-color: var(--ink);
	box-shadow: 0 4px 14px rgba(23, 26, 33, 0.07);
	outline: none;
}

/* Current Day Marked by a Coral Ring */
.and-cal-cell.is-today .and-cal-day-btn {
	background-color: var(--peach);
	border: 2px solid var(--primary);
}

/* Scheduled Upcoming Day Cell Highlight */
.and-cal-cell.has-upcoming .and-cal-day-btn {
	background-color: var(--mint);
	border: 1.5px solid var(--emerald);
}

.and-cal-day-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem;
	width: 100%;
}

.and-cal-upcoming-pill {
	display: none;
	padding: 0.1rem 0.38rem;
	background-color: var(--emerald);
	color: #FFFFFF;
	border-radius: 4px;
	font-size: 0.6rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

@media (min-width: 768px) {
	.and-cal-upcoming-pill {
		display: inline-block;
	}
}

.and-cal-day-num {
	font-family: var(--font-serif);
	font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.18rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.and-cal-cell.is-today .and-cal-day-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 2px solid var(--primary);
	background-color: var(--paper);
	color: var(--primary-ink);
}

.and-cal-day-preview {
	display: none;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--text);
	margin-block: 0.35rem;
	padding: 0.2rem 0.4rem;
	background-color: var(--cream);
	border-radius: 5px;
}

@media (min-width: 900px) {
	.and-cal-day-preview {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* CSS-Only Entry Dot (Zero Icons) */
.and-cal-dots {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: auto;
}

.and-cal-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--primary);
	display: inline-block;
}

.and-cal-cell.has-upcoming .and-cal-dot {
	background-color: var(--emerald);
}

.and-cal-count {
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* Interactive Day Panel: Side Panel on Desktop / Bottom Sheet on Mobile (Strictly Light) */
.and-day-panel {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.and-day-panel[hidden] {
	display: none !important;
}

.and-day-panel__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(249, 246, 240, 0.78);
}

.and-day-panel__sheet {
	position: relative;
	z-index: 2;
	width: 100%;
	max-height: 86dvh;
	background-color: var(--paper);
	border-top: 1px solid var(--line-strong);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	padding: 1rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
	.and-day-panel {
		align-items: stretch;
	}
	.and-day-panel__sheet {
		width: min(92vw, 460px);
		max-height: 100dvh;
		height: 100dvh;
		border-top: 0;
		border-left: 1px solid var(--line-strong);
		border-radius: 0;
		padding: 1.5rem;
	}
	.and-day-panel__handle {
		display: none;
	}
}

.and-day-panel__handle {
	width: 44px;
	height: 4px;
	background-color: var(--line);
	border-radius: 4px;
	margin: 0 auto 0.85rem;
}

.and-day-panel__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--line);
}

.and-day-panel__title {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	margin: 0.2rem 0 0;
	color: var(--ink);
}

.and-day-panel__top-actions {
	display: flex;
	gap: 0.45rem;
}

.and-day-panel__body {
	flex: 1;
	overflow-y: auto;
	padding-block: 1.15rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.and-panel-item {
	padding: 1.15rem;
	background-color: var(--cream);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.and-panel-item--upcoming {
	background-color: var(--mint);
	border: 1.5px solid var(--emerald);
}

.and-panel-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}

.and-panel-item__title {
	font-family: var(--font-serif);
	font-size: 1.2rem;
	margin: 0 0 0.45rem;
	color: var(--ink);
}

.and-panel-item__desc {
	font-size: 0.92rem;
	color: var(--text);
	line-height: 1.55;
	margin: 0 0 0.75rem;
}

.and-day-panel__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}