/**
 * MV+ calendar (/calendar/). Loaded on that page only, after main.css.
 *
 * Categories take the guidelines' expanded data palette. On light the
 * paler hues are deepened so a 3px bar or dot still reads on white; text is
 * never set in a category colour.
 */

.mv-cal {
	--cal-holiday: var(--series-2);
	--cal-gov: var(--series-3);
	--cal-school: var(--series-6);
	--cal-islamic: var(--series-5);
	--cal-event: var(--series-7);
	--cal-nakaiy: var(--series-1);
	--cal-tax: var(--series-4);
	--cal-iruvai: var(--series-3);
	--cal-hulhangu: var(--ocean-400);
	--cal-moon-lit: #F5E6A8;
	--cal-moon-dark: var(--ink-500);
	--cal-tint: 16%;
}

[data-theme="light"] .mv-cal {
	--cal-holiday: #E0533F;
	--cal-gov: #C98A00;
	--cal-school: #6E9A1F;
	--cal-islamic: var(--mint-600);
	--cal-event: var(--ocean-600);
	--cal-nakaiy: var(--lagoon-600);
	--cal-tax: #7A52D6;
	--cal-iruvai: #C98A00;
	--cal-hulhangu: var(--ocean-500);
	--cal-moon-lit: #F2C94C;
	--cal-moon-dark: var(--grey-400);
	--cal-tint: 12%;
}

.mv-cal-c--holiday { --cal-c: var(--cal-holiday); }
.mv-cal-c--gov { --cal-c: var(--cal-gov); }
.mv-cal-c--school { --cal-c: var(--cal-school); }
.mv-cal-c--islamic { --cal-c: var(--cal-islamic); }
.mv-cal-c--event { --cal-c: var(--cal-event); }
.mv-cal-c--nakaiy { --cal-c: var(--cal-nakaiy); }
.mv-cal-c--tax { --cal-c: var(--cal-tax); }

/* ---------- Page head: today and subscribe ---------- */

.mv-cal-today {
	display: grid;
	gap: var(--space-4);
	justify-items: end;
	text-align: end;
}
.mv-cal-today__date { display: grid; gap: var(--space-1); color: var(--text-muted); font-size: var(--text-sm); }
.mv-cal-today__label {
	font: var(--weight-semibold) var(--text-2xs)/1.2 var(--font-display);
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--text-accent);
}
.mv-cal-today__date strong {
	font: var(--weight-head) var(--text-xl)/var(--leading-snug) var(--font-head);
	color: var(--text-strong);
}
.mv-cal-today__next { color: var(--text-body); }
.mv-cal-today__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }

/* ---------- Layout ---------- */

.mv-cal__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--space-7);
	align-items: start;
}

/* Grid items default to min-width: auto, which lets the scrolling filter
   row on phones widen the whole page. */
.mv-cal__layout > *,
.mv-cal__col > * { min-width: 0; }
.mv-cal__col { display: grid; gap: var(--space-5); }
.mv-cal__below { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.mv-cal__below .mv-cal-card--about { grid-column: 1 / -1; }
.mv-cal-card--about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-8); }
.mv-cal-card--about h2 { grid-column: 1 / -1; }

.mv-cal__main,
.mv-cal-card {
	background: var(--surface-card);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
}
.mv-cal__main { overflow: hidden; }

.mv-cal__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4) var(--space-5);
	padding: var(--space-5);
	border-bottom: 1px solid var(--border-hairline);
}
.mv-cal__nav { display: flex; align-items: center; gap: var(--space-3); }
.mv-cal__nav .mv-icon-btn[disabled] { opacity: .35; cursor: default; background: transparent; }
.mv-cal__title { flex: 1 1 200px; min-width: 0; }
.mv-cal__title h2 { font-size: var(--text-2xl); line-height: var(--leading-snug); }
.mv-cal__title span { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: var(--space-1); }
.mv-cal__views { display: flex; gap: var(--space-2); }

.mv-cal__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--border-hairline);
}
.mv-cal__filters:empty { display: none; }
.mv-cal-filter {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 32px;
	padding: 0 var(--space-4);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--text-body);
	font: var(--weight-medium) var(--text-xs)/1 var(--font-body);
	cursor: pointer;
	transition: opacity var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.mv-cal-filter i { width: 10px; height: 10px; border-radius: 50%; background: var(--cal-c); }
.mv-cal-filter:hover { border-color: var(--border-strong); color: var(--text-strong); }
.mv-cal-filter[aria-pressed="false"] { opacity: .5; }
.mv-cal-filter[aria-pressed="false"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cal-c); }

/* ---------- Month grid ---------- */

.mv-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mv-cal-grid__dow {
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--border-hairline);
	color: var(--text-muted);
	font: var(--weight-semibold) var(--text-2xs)/1.2 var(--font-body);
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
}
.mv-cal-grid__dow.is-weekend { color: var(--text-accent); }

.mv-cal-day {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	min-height: 116px;
	padding: var(--space-3);
	border: 0;
	border-right: 1px solid var(--border-hairline);
	border-bottom: 1px solid var(--border-hairline);
	background: transparent;
	color: var(--text-strong);
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-standard);
}
.mv-cal-day:nth-child(7n) { border-right: 0; }
.mv-cal-day:hover { background: var(--surface-hover); }
.mv-cal-day.is-weekend { background: var(--surface-hover); }
.mv-cal-day.is-off { background: color-mix(in srgb, var(--cal-holiday) 9%, transparent); }
.mv-cal-day.is-out { opacity: .4; }
.mv-cal-day.is-selected { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.mv-cal-day:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }

.mv-cal-day__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.mv-cal-day__head b {
	display: inline-grid;
	place-items: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	font: var(--weight-semibold) var(--text-sm)/1 var(--font-body);
	font-variant-numeric: tabular-nums;
}
.mv-cal-day.is-today .mv-cal-day__head b { background: var(--action-fill); color: var(--on-action-fill); }
.mv-cal-day__hijri {
	margin-inline-start: auto;
	color: var(--text-muted);
	font-size: var(--text-3xs);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	text-align: end;
}
.mv-cal-day__hijri.is-first { color: var(--text-accent); font-weight: var(--weight-semibold); }

.mv-cal-pill {
	display: block;
	padding: 2px var(--space-3);
	border-inline-start: 3px solid var(--cal-c);
	border-radius: var(--radius-xs);
	background: color-mix(in srgb, var(--cal-c) var(--cal-tint), transparent);
	color: var(--text-strong);
	font-size: var(--text-3xs);
	line-height: 1.45;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mv-cal-day__more { color: var(--text-muted); font-size: var(--text-3xs); }
.mv-cal-day__dots { display: none; gap: 3px; flex-wrap: wrap; justify-content: center; }
.mv-cal-day__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--cal-c); }

.mv-cal-moon { flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.mv-cal-moon__disc { fill: var(--cal-moon-dark); }
.mv-cal-moon__lit { fill: var(--cal-moon-lit); }

/* ---------- List ---------- */

.mv-cal-list { list-style: none; margin: 0; padding: 0; }
.mv-cal-list__row {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: var(--space-5);
	padding: var(--space-5);
	border-bottom: 1px solid var(--border-hairline);
	box-shadow: inset 3px 0 0 var(--cal-c);
}
.mv-cal-list__row:last-child { border-bottom: 0; }
.mv-cal-list__date b { display: block; font: var(--weight-semibold) var(--text-sm)/1.3 var(--font-body); color: var(--text-strong); }
.mv-cal-list__date span { color: var(--text-muted); font-size: var(--text-2xs); }
.mv-cal-list__title { font: var(--weight-head) var(--text-md)/var(--leading-snug) var(--font-head); color: var(--text-strong); }
.mv-cal-empty { padding: var(--space-8) var(--space-5); color: var(--text-muted); }

.mv-cal-meta { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-2xs); line-height: 1.5; }
.mv-cal-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-inline-end: var(--space-3);
	color: var(--text-body);
	font-weight: var(--weight-semibold);
}
.mv-cal-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cal-c, var(--text-muted)); }
.mv-cal-tag--expected {
	padding: 0 var(--space-3);
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-pill);
	color: var(--text-muted);
	font-weight: var(--weight-medium);
}
.mv-cal-tag--expected::before { display: none; }

/* ---------- Sidebar cards ---------- */

.mv-cal__aside { display: grid; gap: var(--space-5); }
.mv-cal-card { padding: var(--space-6); }
.mv-cal-card[hidden] { display: none; }
.mv-cal-card h2 { font-size: var(--text-lg); line-height: var(--leading-snug); margin-bottom: var(--space-4); }
.mv-cal-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.mv-cal-card__head h2 { margin: 0; }
.mv-cal-card__sub { color: var(--text-muted); font-size: var(--text-xs); margin: 0 0 var(--space-4); }
.mv-cal-note { color: var(--text-muted); font-size: var(--text-2xs); line-height: 1.5; margin-top: var(--space-4); }
.mv-cal-note + .mv-cal-note { margin-top: var(--space-2); }
.mv-cal-card--about p { color: var(--text-body); font-size: var(--text-xs); line-height: 1.55; }

.mv-cal-select {
	max-width: 170px;
	min-height: 32px;
	padding: 0 var(--space-3);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-sm);
	background: var(--surface-card);
	color: var(--text-strong);
	font: var(--text-xs)/1 var(--font-body);
}

.mv-cal-link {
	margin-top: var(--space-3);
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-link);
	font: var(--weight-medium) var(--text-xs)/1.3 var(--font-body);
	cursor: pointer;
}
.mv-cal-link:hover { color: var(--text-link-hover); text-decoration: underline; }

/* Selected day */
.mv-cal-detail__date { font-size: var(--text-xl) !important; margin-bottom: var(--space-1) !important; }
.mv-cal-detail__hijri { color: var(--text-accent); font-size: var(--text-xs); margin-bottom: var(--space-4); }
.mv-cal-detail__ev { padding-top: var(--space-4); margin-top: var(--space-4); border-top: 1px solid var(--border-hairline); }
.mv-cal-detail__ev h3 { font-size: var(--text-md); line-height: var(--leading-snug); margin-top: var(--space-2); }

/* Prayer times */
.mv-cal-prayer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.mv-cal-prayer div { padding: var(--space-3); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); }
.mv-cal-prayer small { display: block; color: var(--text-muted); font-size: var(--text-3xs); font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase; }
.mv-cal-prayer b { font: var(--weight-semibold) 15px/1.4 var(--font-body); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.mv-cal-prayer .is-next { border-color: var(--action-fill); background: color-mix(in srgb, var(--action-fill) 12%, transparent); }
.mv-cal-prayer .is-next small { color: var(--text-accent); }

/* Nakaiy */
.mv-cal-nakaiy__name { display: flex; align-items: center; gap: var(--space-3); font: var(--weight-title) var(--text-2xl)/1.15 var(--font-head); color: var(--text-strong); margin-bottom: var(--space-2); }
.mv-cal-season {
	padding: 2px var(--space-3);
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--cal-season) 22%, transparent);
	color: var(--text-strong);
	font: var(--weight-semibold) var(--text-3xs)/1.4 var(--font-body);
}
.mv-cal-season--iruvai { --cal-season: var(--cal-iruvai); }
.mv-cal-season--hulhangu { --cal-season: var(--cal-hulhangu); }
.mv-cal-nakaiy__wx { color: var(--text-body); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.mv-cal-progress { height: 6px; border-radius: var(--radius-pill); background: var(--surface-active); overflow: hidden; margin-bottom: var(--space-4); }
.mv-cal-progress i { display: block; height: 100%; border-radius: inherit; background: var(--cal-nakaiy); }
.mv-cal-strip { display: flex; gap: 2px; margin-bottom: var(--space-2); }
.mv-cal-strip span { flex: 1; height: 14px; border-radius: 3px; background: var(--cal-season); opacity: .35; }
.mv-cal-strip span.is-current { opacity: 1; box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 3.5px var(--text-strong); }
.mv-cal-strip__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); color: var(--text-muted); font-size: var(--text-3xs); }
.mv-cal-strip__legend span { display: inline-flex; align-items: center; gap: 6px; }
.mv-cal-strip__legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--cal-season); }
.mv-cal-nakaiy__next { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); color: var(--text-body); font-size: var(--text-xs); }
.mv-cal-nakaiy__next b { font-weight: var(--weight-semibold); color: var(--text-strong); }

/* Moon and tides */
.mv-cal-moonrow { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.mv-cal-moonrow b { display: block; font: var(--weight-head) var(--text-md)/1.3 var(--font-head); color: var(--text-strong); }
.mv-cal-moonrow small { color: var(--text-muted); font-size: var(--text-2xs); }
.mv-cal-tide { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-hover); color: var(--text-body); font-size: var(--text-xs); line-height: 1.5; margin-bottom: var(--space-4); }
.mv-cal-tide--spring { background: color-mix(in srgb, var(--cal-nakaiy) 14%, transparent); }
.mv-cal-tide b { color: var(--text-strong); font-weight: var(--weight-semibold); }
.mv-cal-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); text-align: center; color: var(--text-muted); font-size: var(--text-3xs); }
.mv-cal-phases div { padding: var(--space-3) var(--space-1); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); }
.mv-cal-phases b { display: block; margin-top: var(--space-1); color: var(--text-strong); font-size: var(--text-2xs); font-weight: var(--weight-medium); }

/* Coming up, long weekends, tax */
.mv-cal-up {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-3) 0 var(--space-3) var(--space-4);
	border-top: 1px solid var(--border-hairline);
	box-shadow: inset 3px 0 0 var(--cal-c);
}
.mv-cal-up:first-child { border-top: 0; }
.mv-cal-up b { display: block; font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--text-strong); }
.mv-cal-up small { color: var(--text-muted); font-size: var(--text-2xs); }
.mv-cal-up__count { margin-inline-start: auto; color: var(--text-muted); font-size: var(--text-2xs); white-space: nowrap; font-variant-numeric: tabular-nums; }

.mv-cal-row { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--border-hairline); font-size: var(--text-xs); color: var(--text-muted); }
.mv-cal-row:first-child { border-top: 0; padding-top: 0; }
.mv-cal-row > b { font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--text-strong); }
.mv-cal-row .mv-cal-meta { margin-top: 0; }
.mv-cal-row__tip { color: var(--text-accent); font-weight: var(--weight-medium); }
.mv-cal-count {
	display: inline-block;
	margin-inline-start: var(--space-3);
	padding: 1px var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--action-fill);
	color: var(--on-action-fill);
	font: var(--weight-semibold) var(--text-3xs)/1.5 var(--font-body);
	vertical-align: 1px;
}

/* Ramazan: the one deep Ocean card, in both themes. */
.mv-cal-card--ramazan {
	background: var(--ocean-700);
	border-color: transparent;
	color: #E3F1F8;
}
.mv-cal-card--ramazan h2,
.mv-cal-card--ramazan b { color: var(--white); }
.mv-cal-card--ramazan .mv-cal-card__sub { color: #B4D2E2; }
.mv-cal-ramazan__big { font: var(--weight-title) var(--text-2xl)/1.15 var(--font-head); color: var(--white); margin-bottom: var(--space-2); }
.mv-cal-ramazan__times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
.mv-cal-ramazan__times div { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: rgba(255, 255, 255, .08); }
.mv-cal-ramazan__times small { display: block; font-size: var(--text-3xs); letter-spacing: .04em; text-transform: uppercase; color: #B4D2E2; }
.mv-cal-ramazan__times b { font: var(--weight-semibold) var(--text-lg)/1.3 var(--font-body); font-variant-numeric: tabular-nums; }
.mv-cal-ramazan__countdown { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: rgba(255, 255, 255, .12); font-size: var(--text-xs); margin-bottom: var(--space-4); }
.mv-cal-ramazan__nights { display: flex; gap: 3px; }
.mv-cal-ramazan__nights span { flex: 1; height: 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .18); }
.mv-cal-ramazan__nights span.is-done { background: var(--mint-500); }
.mv-cal-ramazan__nights span.is-last10 { box-shadow: 0 0 0 1px var(--series-3); }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
	.mv-cal__layout { grid-template-columns: minmax(0, 1fr); }
	.mv-cal__aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	.mv-cal__below { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mv-cal__below .mv-cal-card--about { grid-column: auto; }
	.mv-cal-card--about { display: block; }
	.mv-cal-card--about p + p { margin-top: var(--space-3); }
}

@media (max-width: 780px) {
	.mv-page-head__row .mv-cal-today { justify-items: start; text-align: start; }
	.mv-cal-today__actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
	.mv-cal__aside,
	.mv-cal__below { grid-template-columns: minmax(0, 1fr); }
	.mv-cal__toolbar { padding: var(--space-4); }
	.mv-cal__title { order: -1; flex-basis: 100%; }
	.mv-cal__views { margin-inline-start: auto; }
	.mv-cal__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-inline: var(--space-4); }
	.mv-cal__filters::-webkit-scrollbar { display: none; }
	.mv-cal-filter { flex: 0 0 auto; }
	.mv-cal-grid__dow { padding: var(--space-3) 0; text-align: center; letter-spacing: .04em; }
	.mv-cal-day { min-height: 64px; padding: var(--space-2) var(--space-1); align-items: center; }
	.mv-cal-day__head { flex-direction: column; gap: 0; margin: 0; }
	.mv-cal-day__head .mv-cal-moon { display: none; }
	.mv-cal-day__hijri { margin: 0; text-align: center; font-size: 13px; }
	.mv-cal-pill, .mv-cal-day__more { display: none; }
	.mv-cal-day__dots { display: flex; margin-top: var(--space-1); }
	.mv-cal-list__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
	.mv-cal-card { padding: var(--space-5); }
}

/* Phones: notes, counts and small print stay at 13px or more. */
@media (max-width: 600px) {
	.mv-cal-note,
	.mv-cal-up__count,
	.mv-cal-count,
	.mv-cal small { font-size: var(--text-xs); }
}