/*
 * Holiday Hub
 *
 * The palette is inherited from Groovy's own custom properties, so anything
 * changed in the Customizer carries through here untouched.
 *
 * Filtering, sorting and the tiles/list switch are driven by the radio inputs
 * in .hh-state, read through :has(). No script is involved in any of it.
 */

.hh,
.hh-cal,
.hh-month,
.hh-profile,
.hh-auth,
.hh-dayhead,
.hh-hero {
	--hh-accent: var(--epcl-main-color, #ff4c60);
	--hh-accent-2: var(--epcl-secondary-color, #fed267);
	--hh-ink: var(--epcl-titles-color, #22252b);
	--hh-text: var(--epcl-text-color, #4a4f5a);
	--hh-surface: var(--epcl-content-background-color, #fff);
	--hh-radius: var(--epcl-boxes-border-radius, 16px);
	--hh-shadow: var(--epcl-boxes-shadow, 0 3px 12px -1px rgba(7, 10, 25, .1));
	--hh-shadow-lift: 0 14px 30px -12px rgba(7, 10, 25, .28);
	--hh-title-font: var(--epcl-title-font-family, "Outfit", sans-serif);
	--hh-line: color-mix(in srgb, var(--hh-ink) 13%, transparent);
	--hh-soft: color-mix(in srgb, var(--hh-ink) 5%, transparent);
	--hh-muted: color-mix(in srgb, var(--hh-text) 65%, transparent);
	--hh-gap: 22px;
	--hh-columns: 3;
}

/* The state inputs exist only to be :checked. */
.hh-state {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/*  Toolbar                                                           */
/* ------------------------------------------------------------------ */

.hh-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 var(--hh-gap);
}

.hh-facets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hh-facet,
.hh-sort label,
.hh-views label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 100px;
	background: var(--hh-soft);
	color: var(--hh-text);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

.hh-facet:hover,
.hh-sort label:hover,
.hh-views label:hover {
	background: color-mix(in srgb, var(--hh-accent) 14%, transparent);
	color: var(--hh-ink);
}

.hh-facet__n {
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 100px;
	background: var(--hh-surface);
	color: var(--hh-muted);
	font-size: 11.5px;
	font-weight: 700;
	text-align: center;
}

.hh-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.hh-sort {
	display: flex;
	gap: 4px;
	padding: 3px;
	border-radius: 100px;
	background: var(--hh-soft);
}

.hh-sort label {
	padding: 5px 12px;
	background: transparent;
	font-size: 13px;
}

.hh-views {
	display: flex;
	gap: 2px;
	padding: 3px;
	border-radius: 100px;
	background: var(--hh-soft);
}

.hh-views label {
	padding: 6px 9px;
	background: transparent;
}

.hh-views svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	display: block;
}

/* Checked states. */
.hh:has(> .hh-state > input[name$="-scope"][value=""]:checked) .hh-facet[for$="-scope-all"],
.hh:has(> .hh-state > input[name$="-sort"][value="curated"]:checked) .hh-sort label[for$="-sort-curated"],
.hh:has(> .hh-state > input[name$="-sort"][value="views"]:checked) .hh-sort label[for$="-sort-views"],
.hh:has(> .hh-state > input[name$="-sort"][value="az"]:checked) .hh-sort label[for$="-sort-az"],
.hh:has(> .hh-state > input[name$="-view"][value="grid"]:checked) .hh-views label[for$="-view-grid"],
.hh:has(> .hh-state > input[name$="-view"][value="list"]:checked) .hh-views label[for$="-view-list"] {
	background: var(--hh-accent);
	color: #fff;
}

.hh:has(> .hh-state > input[name$="-scope"][value=""]:checked) .hh-facet[for$="-scope-all"] .hh-facet__n {
	background: rgba(255, 255, 255, .28);
	color: #fff;
}

/* ------------------------------------------------------------------ */
/*  Items                                                             */
/* ------------------------------------------------------------------ */

.hh {
	container-type: inline-size;
	container-name: hh;
}

.hh-items {
	display: grid;
	gap: var(--hh-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr));
}

.hh:has(> .hh-state > input[name$="-view"][value="list"]:checked) .hh-items {
	grid-template-columns: 1fr;
	gap: 10px;
}

/* Sorting: each card knows its position under every option. */
.hh:has(> .hh-state > input[name$="-sort"][value="curated"]:checked) .hh-card { order: var(--o-curated, 0); }
.hh:has(> .hh-state > input[name$="-sort"][value="az"]:checked) .hh-card { order: var(--o-az, 0); }
.hh:has(> .hh-state > input[name$="-sort"][value="views"]:checked) .hh-card { order: var(--o-views, 0); }

.hh-noresults {
	display: none;
	margin: 18px 0 0;
	padding: 26px;
	border-radius: var(--hh-radius);
	background: var(--hh-soft);
	color: var(--hh-muted);
	text-align: center;
}

.hh-empty {
	margin: 0;
	padding: 34px 26px;
	border-radius: var(--hh-radius);
	background: var(--hh-soft);
	color: var(--hh-muted);
	text-align: center;
}

/* ------------------------------------------------------------------ */
/*  Card                                                              */
/* ------------------------------------------------------------------ */

.hh-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--hh-radius);
	background: var(--hh-surface);
	box-shadow: var(--hh-shadow);
	transition: transform .22s ease, box-shadow .22s ease;
}

.hh-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--hh-shadow-lift);
}

.hh-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--hh-soft);
}

.hh-card__media img,
.hh-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.hh-card:hover .hh-card__img {
	transform: scale(1.045);
}

.hh-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px 18px;
}

.hh-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.hh-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 100px;
	background: var(--hh-soft);
	color: var(--hh-muted);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.7;
}

.hh-chip--date {
	background: color-mix(in srgb, var(--hh-accent) 12%, transparent);
	color: color-mix(in srgb, var(--hh-accent) 82%, var(--hh-ink));
}

.hh-chip--date:hover {
	background: var(--hh-accent);
	color: #fff;
}

.hh-chip--scope {
	background: color-mix(in srgb, var(--hh-accent-2) 42%, transparent);
	color: color-mix(in srgb, var(--hh-ink) 88%, transparent);
}

.hh-chip--floating {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--hh-line);
	cursor: help;
}

.hh-card__title {
	margin: 0;
	font-family: var(--hh-title-font);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -.01em;
}

.hh-card__title a {
	color: var(--hh-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--hh-accent), var(--hh-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	transition: background-size .3s ease, color .2s ease;
}

.hh-card:hover .hh-card__title a {
	color: var(--hh-accent);
	background-size: 100% 2px;
}

.hh-card__summary {
	margin: 0;
	color: var(--hh-muted);
	font-size: 14px;
	line-height: 1.62;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Favorite */

.hh-fav {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 10px -2px rgba(7, 10, 25, .3);
	color: color-mix(in srgb, var(--hh-ink) 40%, transparent);
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), color .2s ease, background .2s ease;
}

.hh-fav svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	display: block;
}

.hh-fav:hover {
	transform: scale(1.12);
	color: var(--hh-accent);
}

.hh-fav[aria-pressed="true"] {
	color: var(--hh-accent);
	background: #fff;
}

.hh-fav.is-just-saved {
	animation: hh-pop .42s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes hh-pop {
	0% { transform: scale(1); }
	45% { transform: scale(1.34); }
	100% { transform: scale(1); }
}

/* ------------------------------------------------------------------ */
/*  Compact list                                                      */
/* ------------------------------------------------------------------ */

.hh:has(> .hh-state > input[name$="-view"][value="list"]:checked) .hh-card {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 10px 54px 10px 10px;
	border-radius: calc(var(--hh-radius) * .8);
}

.hh:has(> .hh-state > input[name$="-view"][value="list"]:checked) .hh-card:hover {
	transform: none;
}

.hh:has(> .hh-state > input[name$="-view"][value="list"]:checked) .hh-card__media {
	flex: 0 0 auto;
	width: 62px;
	height: 62px;
	aspect-ratio: 1;
	border-radius: 12px;
}

.hh:has(> .hh-state > input[name$="-view"][value="list"]:checked) .hh-card__body {
	gap: 4px;
	padding: 0;
	min-width: 0;
}

.hh:has(> .hh-state > input[name$="-view"][value="list"]:checked) .hh-card__title {
	font-size: 16px;
}

.hh:has(> .hh-state > input[name$="-view"][value="list"]:checked) .hh-card__summary {
	-webkit-line-clamp: 1;
	line-clamp: 1;
	font-size: 13.5px;
}

.hh:has(> .hh-state > input[name$="-view"][value="list"]:checked) .hh-fav {
	top: 50%;
	right: 12px;
	width: 32px;
	height: 32px;
	transform: translateY(-50%);
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
}

.hh:has(> .hh-state > input[name$="-view"][value="list"]:checked) .hh-fav:hover {
	transform: translateY(-50%) scale(1.14);
}

/* ------------------------------------------------------------------ */
/*  Day header                                                        */
/* ------------------------------------------------------------------ */

.hh-dayhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 var(--hh-gap);
	padding: 12px 14px;
	border-radius: 100px;
	background: var(--hh-surface);
	box-shadow: var(--hh-shadow);
}

.hh-dayhead__nav {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 14px;
	border-radius: 100px;
	color: var(--hh-muted);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s ease, color .18s ease;
}

.hh-dayhead__nav:hover {
	background: var(--hh-soft);
	color: var(--hh-ink);
}

.hh-dayhead__nav svg {
	width: 15px;
	height: 15px;
	display: block;
}

.hh-dayhead__nav--prev svg {
	transform: rotate(180deg);
}

.hh-dayhead__now {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.25;
	text-align: center;
}

.hh-dayhead__date {
	font-family: var(--hh-title-font);
	font-size: 17px;
	font-weight: 800;
	color: var(--hh-ink);
}

.hh-dayhead__count {
	font-size: 12.5px;
	color: var(--hh-muted);
}

/* ------------------------------------------------------------------ */
/*  Day archive hero                                                  */
/* ------------------------------------------------------------------ */

.hh-hero {
	margin: 0 0 26px;
	padding: 34px 30px 26px;
	border-radius: var(--hh-radius);
	background: var(--hh-surface);
	box-shadow: var(--hh-shadow);
	text-align: center;
}

.hh-hero__kicker {
	margin: 0 0 6px;
	color: var(--hh-accent);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hh-hero__title {
	margin: 0 0 10px;
	font-family: var(--hh-title-font);
	font-size: clamp(26px, 4.4vw, 40px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.02em;
	color: var(--hh-ink);
}

.hh-hero__lede {
	margin: 0 auto;
	max-width: 60ch;
	color: var(--hh-muted);
	font-size: 15.5px;
}

.hh-hero__desc {
	margin: 14px auto 0;
	max-width: 68ch;
	color: var(--hh-text);
	font-size: 15px;
}

.hh-hero .hh-dayhead {
	margin: 22px 0 0;
	box-shadow: none;
	background: var(--hh-soft);
}

.hh-sectiontitle {
	margin: 46px 0 18px;
	font-family: var(--hh-title-font);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--hh-ink);
}

/* ------------------------------------------------------------------ */
/*  Month page                                                        */
/* ------------------------------------------------------------------ */

.hh-month__toc {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 30px;
	padding: 16px;
	border-radius: var(--hh-radius);
	background: var(--hh-surface);
	box-shadow: var(--hh-shadow);
}

.hh-month__tocitem {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 42px;
	padding: 6px 4px;
	border-radius: 11px;
	background: var(--hh-soft);
	color: var(--hh-ink);
	text-decoration: none;
	line-height: 1.15;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

.hh-month__tocitem:hover {
	background: var(--hh-accent);
	color: #fff;
	transform: translateY(-2px);
}

.hh-month__tocitem.is-today {
	background: var(--hh-accent);
	color: #fff;
}

.hh-month__tocday {
	font-family: var(--hh-title-font);
	font-size: 15px;
	font-weight: 800;
}

.hh-month__tocn {
	font-size: 10.5px;
	opacity: .72;
}

.hh-day {
	margin: 0 0 34px;
	scroll-margin-top: 90px;
}

.hh-day__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-family: var(--hh-title-font);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.hh-day__head a {
	color: var(--hh-ink);
	text-decoration: none;
}

.hh-day__head a:hover {
	color: var(--hh-accent);
}

.hh-day__n {
	padding: 2px 10px;
	border-radius: 100px;
	background: var(--hh-soft);
	color: var(--hh-muted);
	font-size: 12.5px;
	font-weight: 700;
}

.hh-day.is-today .hh-day__n {
	background: var(--hh-accent);
	color: #fff;
}

/* ------------------------------------------------------------------ */
/*  Calendar                                                          */
/* ------------------------------------------------------------------ */

.hh-cal {
	container-type: inline-size;
	container-name: hhcal;
	padding: 22px;
	border-radius: var(--hh-radius);
	background: var(--hh-surface);
	box-shadow: var(--hh-shadow);
}

.hh-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 16px;
}

.hh-cal__title {
	font-family: var(--hh-title-font);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--hh-ink);
}

.hh-cal__year {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 13px;
	border-radius: 100px;
	background: var(--hh-soft);
	color: var(--hh-muted);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.hh-cal__year:hover {
	background: var(--hh-accent);
	color: #fff;
}

.hh-cal__year svg {
	width: 14px;
	height: 14px;
}

.hh-cal__year--prev svg {
	transform: rotate(180deg);
}

.hh-cal__tabs {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 4px;
	margin: 0 0 18px;
	padding: 5px;
	border-radius: 14px;
	background: var(--hh-soft);
}

.hh-cal__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 8px 2px 7px;
	border-radius: 10px;
	cursor: pointer;
	color: var(--hh-muted);
	transition: background .18s ease, color .18s ease;
}

.hh-cal__tab:hover {
	background: color-mix(in srgb, var(--hh-accent) 12%, transparent);
	color: var(--hh-ink);
}

.hh-cal__tabname {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .01em;
}

/* A sparkline of how busy each month is. */
.hh-cal__tabbar {
	display: block;
	width: 100%;
	max-width: 34px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(
		to right,
		currentColor calc(var(--v) * 1%),
		color-mix(in srgb, currentColor 18%, transparent) calc(var(--v) * 1%)
	);
	opacity: .55;
}

.hh-cal__months > .hh-cal__month {
	display: none;
}

.hh-cal:has(> .hh-state > input[value="1"]:checked) .hh-cal__month[data-month="1"],
.hh-cal:has(> .hh-state > input[value="2"]:checked) .hh-cal__month[data-month="2"],
.hh-cal:has(> .hh-state > input[value="3"]:checked) .hh-cal__month[data-month="3"],
.hh-cal:has(> .hh-state > input[value="4"]:checked) .hh-cal__month[data-month="4"],
.hh-cal:has(> .hh-state > input[value="5"]:checked) .hh-cal__month[data-month="5"],
.hh-cal:has(> .hh-state > input[value="6"]:checked) .hh-cal__month[data-month="6"],
.hh-cal:has(> .hh-state > input[value="7"]:checked) .hh-cal__month[data-month="7"],
.hh-cal:has(> .hh-state > input[value="8"]:checked) .hh-cal__month[data-month="8"],
.hh-cal:has(> .hh-state > input[value="9"]:checked) .hh-cal__month[data-month="9"],
.hh-cal:has(> .hh-state > input[value="10"]:checked) .hh-cal__month[data-month="10"],
.hh-cal:has(> .hh-state > input[value="11"]:checked) .hh-cal__month[data-month="11"],
.hh-cal:has(> .hh-state > input[value="12"]:checked) .hh-cal__month[data-month="12"] {
	display: block;
}

.hh-cal:has(> .hh-state > input[value="1"]:checked) .hh-cal__tab:nth-of-type(1),
.hh-cal:has(> .hh-state > input[value="2"]:checked) .hh-cal__tab:nth-of-type(2),
.hh-cal:has(> .hh-state > input[value="3"]:checked) .hh-cal__tab:nth-of-type(3),
.hh-cal:has(> .hh-state > input[value="4"]:checked) .hh-cal__tab:nth-of-type(4),
.hh-cal:has(> .hh-state > input[value="5"]:checked) .hh-cal__tab:nth-of-type(5),
.hh-cal:has(> .hh-state > input[value="6"]:checked) .hh-cal__tab:nth-of-type(6),
.hh-cal:has(> .hh-state > input[value="7"]:checked) .hh-cal__tab:nth-of-type(7),
.hh-cal:has(> .hh-state > input[value="8"]:checked) .hh-cal__tab:nth-of-type(8),
.hh-cal:has(> .hh-state > input[value="9"]:checked) .hh-cal__tab:nth-of-type(9),
.hh-cal:has(> .hh-state > input[value="10"]:checked) .hh-cal__tab:nth-of-type(10),
.hh-cal:has(> .hh-state > input[value="11"]:checked) .hh-cal__tab:nth-of-type(11),
.hh-cal:has(> .hh-state > input[value="12"]:checked) .hh-cal__tab:nth-of-type(12) {
	background: var(--hh-accent);
	color: #fff;
}

.hh-cal__dow,
.hh-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.hh-cal__dow {
	margin: 0 0 8px;
	color: var(--hh-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
}

.hh-cal__day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	aspect-ratio: 1;
	border-radius: 12px;
	color: var(--hh-ink);
	text-decoration: none;
	/* The heat shade: more holidays, more colour. */
	background: color-mix(
		in srgb,
		var(--hh-accent) calc(min(100, (var(--n, 0) / max(1, var(--hh-cal-max, 1))) * 62) * 1%),
		var(--hh-soft)
	);
	transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease;
}

.hh-cal__day:hover,
.hh-cal__day:focus-visible {
	transform: scale(1.09);
	box-shadow: 0 6px 16px -6px rgba(7, 10, 25, .45);
	z-index: 2;
}

.hh-cal__day.is-empty {
	color: var(--hh-muted);
}

.hh-cal__day.is-today {
	box-shadow: inset 0 0 0 2px var(--hh-ink);
	font-weight: 800;
}

.hh-cal__num {
	font-family: var(--hh-title-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.hh-cal__n {
	font-size: 10px;
	font-weight: 700;
	opacity: .62;
	line-height: 1;
}

.hh-cal__day.is-saved::after {
	content: "";
	position: absolute;
	top: 5px;
	right: 5px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hh-accent);
	box-shadow: 0 0 0 2px var(--hh-surface);
}

.hh-cal__pad {
	aspect-ratio: 1;
}

.hh-cal__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0;
	color: var(--hh-muted);
	font-size: 11.5px;
	font-weight: 600;
}

.hh-cal__scale {
	display: inline-flex;
	gap: 3px;
}

.hh-cal__scale i {
	width: 14px;
	height: 14px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--hh-accent) calc(var(--n) * 15%), var(--hh-soft));
}

.hh-cal__legendsaved {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
}

.hh-cal__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hh-accent);
}

/* Hover preview, filled in by script. */
.hh-cal__preview {
	position: absolute;
	z-index: 40;
	width: min(280px, 78vw);
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--hh-surface);
	box-shadow: 0 18px 40px -14px rgba(7, 10, 25, .5);
	font-size: 13px;
	pointer-events: none;
}

.hh-cal__preview strong {
	display: block;
	margin: 0 0 6px;
	font-family: var(--hh-title-font);
	font-size: 14px;
	color: var(--hh-ink);
}

.hh-cal__preview ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hh-cal__preview li {
	padding: 3px 0;
	color: var(--hh-text);
	line-height: 1.4;
}

.hh-cal__preview em {
	color: var(--hh-muted);
	font-size: 12px;
	font-style: normal;
}

/* ------------------------------------------------------------------ */
/*  Live search                                                       */
/* ------------------------------------------------------------------ */

.hh-search {
	position: relative;
}

.hh-search__field {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-radius: 100px;
	background: var(--hh-surface);
	box-shadow: var(--hh-shadow);
}

.hh-search__field svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--hh-muted);
}

.hh-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--hh-ink);
	font: inherit;
	font-size: 15px;
	outline: none;
}

.hh-search__results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 30;
	overflow: hidden;
	border-radius: 16px;
	background: var(--hh-surface);
	box-shadow: 0 18px 40px -14px rgba(7, 10, 25, .45);
}

.hh-search__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	color: var(--hh-ink);
	text-decoration: none;
}

.hh-search__item:hover,
.hh-search__item.is-active {
	background: var(--hh-soft);
}

.hh-search__item img {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border-radius: 10px;
	object-fit: cover;
}

.hh-search__name {
	font-weight: 600;
	line-height: 1.3;
}

.hh-search__date {
	display: block;
	color: var(--hh-muted);
	font-size: 12px;
}

.hh-search__none {
	padding: 16px;
	color: var(--hh-muted);
	text-align: center;
}

/* ------------------------------------------------------------------ */
/*  Accounts                                                          */
/* ------------------------------------------------------------------ */

.hh-auth {
	max-width: 420px;
	margin: 0 auto;
	padding: 28px;
	border-radius: var(--hh-radius);
	background: var(--hh-surface);
	box-shadow: var(--hh-shadow);
}

.hh-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin: 0 0 20px;
	padding: 4px;
	border-radius: 100px;
	background: var(--hh-soft);
}

.hh-auth__tabs label {
	padding: 9px;
	border-radius: 100px;
	color: var(--hh-muted);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.hh-auth:has(#hh-auth-in:checked) .hh-auth__tabs label[for="hh-auth-in"],
.hh-auth:has(#hh-auth-up:checked) .hh-auth__tabs label[for="hh-auth-up"] {
	background: var(--hh-surface);
	color: var(--hh-ink);
	box-shadow: var(--hh-shadow);
}

.hh-auth__form {
	display: none;
	flex-direction: column;
	gap: 14px;
}

.hh-auth:has(#hh-auth-in:checked) .hh-auth__form--in,
.hh-auth:has(#hh-auth-up:checked) .hh-auth__form--up {
	display: flex;
}

.hh-auth__notice {
	margin: 0 0 16px;
	padding: 11px 14px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--hh-accent) 12%, transparent);
	color: color-mix(in srgb, var(--hh-accent) 78%, var(--hh-ink));
	font-size: 14px;
}

.hh-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hh-muted);
}

.hh-field input {
	padding: 11px 14px;
	border: 1px solid var(--hh-line);
	border-radius: 12px;
	background: var(--hh-surface);
	color: var(--hh-ink);
	font: inherit;
	font-size: 15px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.hh-field input:focus {
	outline: none;
	border-color: var(--hh-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hh-accent) 18%, transparent);
}

.hh-field small {
	font-weight: 500;
	opacity: .8;
}

.hh-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--hh-muted);
}

.hh-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 0;
	border-radius: 100px;
	font-family: var(--hh-title-font);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.hh-btn--primary {
	background: var(--hh-accent);
	color: #fff;
}

.hh-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -10px var(--hh-accent);
	color: #fff;
}

.hh-btn--ghost {
	background: var(--hh-soft);
	color: var(--hh-ink);
}

.hh-btn--ghost:hover {
	background: color-mix(in srgb, var(--hh-accent) 14%, transparent);
}

.hh-google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--hh-line);
	border-radius: 100px;
	background: var(--hh-surface);
	color: var(--hh-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background .18s ease, box-shadow .18s ease;
}

.hh-google:hover {
	background: var(--hh-soft);
	box-shadow: var(--hh-shadow);
	color: var(--hh-ink);
}

.hh-auth__or {
	position: relative;
	margin: 18px 0;
	text-align: center;
}

.hh-auth__or::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--hh-line);
}

.hh-auth__or span {
	position: relative;
	padding: 0 12px;
	background: var(--hh-surface);
	color: var(--hh-muted);
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.hh-auth__lost,
.hh-auth__fine {
	color: var(--hh-muted);
	font-size: 13px;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/*  Profile                                                           */
/* ------------------------------------------------------------------ */

.hh-profile__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 22px;
	padding: 20px 22px;
	border-radius: var(--hh-radius);
	background: var(--hh-surface);
	box-shadow: var(--hh-shadow);
}

.hh-profile__avatar,
.hh-account__avatar {
	border-radius: 50%;
}

.hh-profile__id {
	flex: 1;
	min-width: 0;
}

.hh-profile__id h2 {
	margin: 0;
	font-family: var(--hh-title-font);
	font-size: 21px;
	font-weight: 800;
}

.hh-profile__id p {
	margin: 2px 0 0;
	color: var(--hh-muted);
	font-size: 13.5px;
}

.hh-profile__stats {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin: 0 0 22px;
}

.hh-stat {
	padding: 18px 20px;
	border-radius: var(--hh-radius);
	background: var(--hh-surface);
	box-shadow: var(--hh-shadow);
}

.hh-stat strong {
	display: block;
	font-family: var(--hh-title-font);
	font-size: 27px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--hh-ink);
}

.hh-stat span,
.hh-stat a {
	color: var(--hh-muted);
	font-size: 13.5px;
}

.hh-stat--next strong {
	color: var(--hh-accent);
}

.hh-profile__sync {
	margin: 0 0 26px;
	padding: 22px;
	border-radius: var(--hh-radius);
	background: color-mix(in srgb, var(--hh-accent-2) 26%, var(--hh-surface));
}

.hh-profile__sync h3 {
	margin: 0 0 6px;
	font-family: var(--hh-title-font);
	font-size: 19px;
	font-weight: 800;
}

.hh-profile__sync p {
	margin: 0 0 14px;
	color: var(--hh-text);
	font-size: 14.5px;
}

.hh-profile__feed {
	display: flex;
	gap: 8px;
}

.hh-profile__feedurl {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--hh-line);
	border-radius: 100px;
	background: var(--hh-surface);
	color: var(--hh-muted);
	font-size: 13px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.hh-profile__fine {
	margin: 10px 0 0;
	color: var(--hh-muted);
	font-size: 12.5px;
}

.hh-account {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 18px;
	border-radius: var(--hh-radius);
	background: var(--hh-surface);
	box-shadow: var(--hh-shadow);
}

.hh-account__who {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hh-account__who span {
	display: block;
	color: var(--hh-muted);
	font-size: 13px;
}

/* ------------------------------------------------------------------ */
/*  Toast                                                             */
/* ------------------------------------------------------------------ */

.hh-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	border-radius: 100px;
	background: var(--epcl-titles-color, #22252b);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 14px 34px -12px rgba(7, 10, 25, .6);
	transform: translate(-50%, 20px);
	opacity: 0;
	transition: transform .28s cubic-bezier(.34, 1.4, .64, 1), opacity .28s ease;
}

.hh-toast.is-in {
	transform: translate(-50%, 0);
	opacity: 1;
}

.hh-toast a {
	color: var(--epcl-secondary-color, #fed267);
	text-decoration: underline;
}

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

/*
 * These react to the container, not the window: the calendar also runs in a
 * ~300px sidebar, where a twelve-column month strip has no room.
 */

@container hhcal (max-width: 560px) {
	.hh-cal__tabs {
		grid-template-columns: repeat(6, 1fr);
	}
}

@container hhcal (max-width: 380px) {
	.hh-cal {
		padding: 14px;
	}

	.hh-cal__tabs {
		grid-template-columns: repeat(4, 1fr);
		gap: 2px;
	}

	.hh-cal__tab {
		padding: 6px 1px 5px;
	}

	.hh-cal__tabname {
		font-size: 11px;
	}

	.hh-cal__tabbar {
		display: none;
	}

	.hh-cal__grid,
	.hh-cal__dow {
		gap: 3px;
	}

	.hh-cal__day {
		border-radius: 8px;
	}

	.hh-cal__num {
		font-size: 12px;
	}

	.hh-cal__n {
		display: none;
	}

	.hh-cal__title {
		font-size: 20px;
	}

	.hh-cal__legend {
		font-size: 10.5px;
	}

	.hh-cal__legendsaved {
		margin-left: 0;
	}
}

@container hh (max-width: 520px) {
	.hh-toolbar {
		gap: 10px;
	}

	.hh-tools {
		width: 100%;
		justify-content: space-between;
		margin-left: 0;
	}

	.hh-facets {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.hh-facet {
		flex: 0 0 auto;
	}
}

@media (max-width: 900px) {
	.hh-cal__tabs {
		grid-template-columns: repeat(6, 1fr);
	}
}

@media (max-width: 680px) {
	.hh-toolbar {
		gap: 10px;
	}

	.hh-tools {
		width: 100%;
		justify-content: space-between;
		margin-left: 0;
	}

	.hh-facets {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		margin: 0 -4px;
		padding-inline: 4px;
		scrollbar-width: none;
	}

	.hh-facets::-webkit-scrollbar {
		display: none;
	}

	.hh-facet {
		flex: 0 0 auto;
	}

	.hh-hero {
		padding: 24px 18px 20px;
	}

	.hh-dayhead {
		padding: 8px;
	}

	.hh-dayhead__nav span {
		display: none;
	}

	.hh-cal {
		padding: 14px;
	}

	.hh-cal__grid,
	.hh-cal__dow {
		gap: 4px;
	}

	.hh-cal__num {
		font-size: 12.5px;
	}

	.hh-cal__n {
		font-size: 9px;
	}

	.hh-profile__feed {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hh-card,
	.hh-card__img,
	.hh-fav,
	.hh-cal__day,
	.hh-toast,
	.hh-btn {
		transition: none;
	}

	.hh-fav.is-just-saved {
		animation: none;
	}
}