/*
 * HT Pulse
 *
 * Colours come from the theme's own custom properties, the same ones Holiday
 * Hub and Celebration Planner read, so a change in the Customizer carries
 * through here without this file knowing what the palette is.
 *
 * Two palettes, one layout. A festive day runs on the site's accent and is
 * allowed sparks; a solemn one swaps the accent for a quiet blue-grey, drops
 * the sparks entirely, and softens every shadow. Nothing about the structure
 * changes between them — a block that rearranged itself would read as two
 * different features rather than one feature with manners.
 *
 * The state lives in classes, not in style attributes: `is-on` for a pressed
 * button, `is-burst` for the half-second after it, `is-new` for a face that has
 * just landed. Script adds them and takes them off; everything else is here.
 */

.htp {
	--htp-accent: var(--accent-color, #ff7618);
	--htp-ink: var(--headings-color, #23262c);
	--htp-text: var(--body-color, #4b505a);
	--htp-surface: var(--card-bg, #fff);

	--htp-muted: color-mix(in srgb, var(--htp-text) 74%, transparent);
	--htp-faint: color-mix(in srgb, var(--htp-text) 52%, transparent);
	--htp-line: color-mix(in srgb, var(--htp-ink) 13%, transparent);
	--htp-hair: color-mix(in srgb, var(--htp-ink) 8%, transparent);
	--htp-wash: color-mix(in srgb, var(--htp-ink) 4%, transparent);
	--htp-tint: color-mix(in srgb, var(--htp-accent) 10%, transparent);
	--htp-tint-strong: color-mix(in srgb, var(--htp-accent) 18%, transparent);

	--htp-radius: 20px;
	--htp-radius-sm: 14px;
	--htp-level: 0;

	margin: 34px 0;
	clear: both;
}

/* A day of mourning gets its own colour, and it is never the party colour. */
.htp--solemn {
	--htp-accent: #62748f;
	--htp-tint: color-mix(in srgb, var(--htp-accent) 9%, transparent);
	--htp-tint-strong: color-mix(in srgb, var(--htp-accent) 15%, transparent);
}

.htp *,
.htp *::before,
.htp *::after {
	box-sizing: border-box;
}

/*
 * The script hides things with the `hidden` attribute. A class below that sets
 * `display` would quietly outrank the browser's own rule for it, so this says
 * so once, here, for everything in the block.
 */
.htp [hidden] {
	display: none !important;
}

.htp__inner {
	position: relative;
	padding: 26px 26px 24px;
	border: 1px solid var(--htp-line);
	border-radius: var(--htp-radius);
	background:
		radial-gradient(120% 140% at 8% 0, var(--htp-tint) 0, transparent 58%),
		var(--htp-surface);
	overflow: hidden;
}

/* A hairline of accent along the top edge, in place of a heavier header. */
.htp__inner::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--htp-accent), color-mix(in srgb, var(--htp-accent) 25%, transparent) 70%, transparent);
}

/* ---------------------------------------------------------------- head -- */

.htp__head {
	margin: 0 0 20px;
}

.htp__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--htp-accent);
}

.htp__pip {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--htp-accent) 20%, transparent);
}

.htp--festive .htp__pip {
	animation: htp-breathe 3.4s ease-in-out infinite;
}

.htp__title {
	margin: 0 0 6px;
	font-size: clamp(19px, 2.4vw, 23px);
	line-height: 1.25;
	color: var(--htp-ink);
}

.htp__lede {
	margin: 0;
	max-width: 62ch;
	font-size: 14px;
	line-height: 1.55;
	color: var(--htp-muted);
}

/* ---------------------------------------------------------------- deck -- */

.htp__deck {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 20px;
	align-items: stretch;
}

@media (max-width: 720px) {
	.htp__deck {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.htp__inner {
		padding: 20px 18px 18px;
	}
}

/* --------------------------------------------------------------- meter -- */

.htp-meter {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	border: 1px solid var(--htp-hair);
	border-radius: var(--htp-radius-sm);
	background: var(--htp-wash);
}

.htp-meter__btn {
	position: relative;
	flex: 0 0 auto;
	width: 74px;
	height: 74px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--htp-accent) 26%, var(--htp-line));
	border-radius: 50%;
	background:
		radial-gradient(120% 120% at 50% 12%, color-mix(in srgb, var(--htp-accent) 13%, var(--htp-surface)) 0, var(--htp-surface) 72%);
	color: var(--htp-accent);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
		0 8px 18px -12px color-mix(in srgb, var(--htp-accent) 70%, transparent),
		0 1px 2px color-mix(in srgb, var(--htp-ink) 8%, transparent);
	transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.htp-meter__btn:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--htp-accent) 45%, transparent);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
		0 12px 22px -12px color-mix(in srgb, var(--htp-accent) 80%, transparent),
		0 1px 2px color-mix(in srgb, var(--htp-ink) 10%, transparent);
}

.htp-meter__btn:active {
	transform: translateY(0) scale(.955);
}

.htp-meter__btn:focus-visible {
	outline: 2px solid var(--htp-accent);
	outline-offset: 3px;
}

/* Pressed: the button becomes the colour instead of merely wearing it. */
.htp-meter__btn.is-on {
	border-color: transparent;
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--htp-accent) 92%, #fff) 0, var(--htp-accent) 62%, color-mix(in srgb, var(--htp-accent) 78%, #000) 100%);
	color: #fff;
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent),
		0 12px 24px -12px color-mix(in srgb, var(--htp-accent) 95%, transparent);
}

.htp-meter__face {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

.htp-meter__glyph {
	position: absolute;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	transition: opacity .22s ease, transform .3s cubic-bezier(.2, .9, .3, 1.2);
}

.htp-meter__glyph svg,
.htp-join__glyph svg,
.htp-icon {
	width: 100%;
	height: 100%;
	display: block;
}

.htp-meter__glyph--on {
	opacity: 0;
	transform: scale(.6);
}

/*
 * The house stroke is 1.7 at 24px. This glyph is drawn at 34, where the same
 * line looks thin and undecided, so it is set a little heavier — and back to
 * 1.7 once the button is filled, where the shape carries itself.
 */
.htp-meter__svg {
	stroke-width: 1.9;
}

.htp-meter__btn.is-on .htp-meter__svg {
	stroke-width: 1.6;
}

.htp-meter__btn.is-on .htp-meter__glyph--off {
	opacity: 0;
	transform: scale(.6);
}

.htp-meter__btn.is-on .htp-meter__glyph--on {
	opacity: 1;
	transform: scale(1);
}

/* The ring that leaves the button on a press. */
.htp-meter__ring {
	position: absolute;
	inset: -2px;
	border: 2px solid var(--htp-accent);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.htp-meter__btn.is-burst .htp-meter__ring {
	animation: htp-ring .62s cubic-bezier(.16, .8, .3, 1);
}

/* A slower, softer second ring: on a solemn day it is the whole animation. */
.htp-meter__halo {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--htp-accent) 26%, transparent) 0, transparent 70%);
	opacity: 0;
	pointer-events: none;
}

.htp-meter__btn.is-burst .htp-meter__halo {
	animation: htp-halo .9s ease-out;
}

.htp-meter__sparks {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.htp-meter__sparks i {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: var(--htp-accent);
	opacity: 0;
}

.htp-meter__sparks i:nth-child(2n) {
	width: 4px;
	height: 4px;
	background: color-mix(in srgb, var(--htp-accent) 55%, #fff);
}

.htp-meter__sparks i:nth-child(3n) {
	border-radius: 1px;
	background: color-mix(in srgb, var(--htp-accent) 70%, #ffd166);
}

.htp-meter__btn.is-burst .htp-meter__sparks i {
	/* The angle is a custom property, not a transform: the keyframes own the
	   transform, and setting it here would simply be overwritten. */
	--htp-a: calc(var(--htp-i) * 51.4deg);

	animation: htp-spark .72s cubic-bezier(.2, .7, .3, 1) forwards;
	animation-delay: calc(var(--htp-i) * 14ms);
}

.htp-meter__read {
	min-width: 0;
	flex: 1 1 auto;
}

.htp-meter__label {
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--htp-ink);
}

.htp-meter__count {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0 0 9px;
	font-size: 13px;
	color: var(--htp-muted);
}

.htp-num {
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	color: var(--htp-ink);
	font-variant-numeric: tabular-nums;
	display: inline-block;
}

.htp-meter__count.is-zero .htp-num,
.htp-join__count.is-zero .htp-num {
	display: none;
}

.htp-num.is-bump {
	animation: htp-bump .5s cubic-bezier(.2, .9, .3, 1.3);
}

.htp-meter__gauge {
	position: relative;
	height: 8px;
	border-radius: 99px;
	background: color-mix(in srgb, var(--htp-ink) 9%, transparent);
	overflow: hidden;
}

.htp-meter__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--htp-level) * 100%);
	min-width: 6px;
	border-radius: 99px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--htp-accent) 62%, #fff) 0, var(--htp-accent) 100%);
	transition: width .9s cubic-bezier(.2, .8, .2, 1);
}

/* The light that runs along the bar when it grows. */
.htp-meter__notch {
	position: absolute;
	inset: 0;
	border-radius: 99px;
	background: linear-gradient(90deg, transparent 0, color-mix(in srgb, #fff 65%, transparent) 50%, transparent 100%);
	opacity: 0;
	transform: translateX(-100%);
	pointer-events: none;
}

.htp-meter.is-rise .htp-meter__notch {
	animation: htp-sheen 1s ease-out;
}

.htp-meter__tier {
	min-height: 15px;
	margin: 7px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--htp-accent);
}

/* ---------------------------------------------------------------- join -- */

.htp-join {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid var(--htp-hair);
	border-radius: var(--htp-radius-sm);
	background:
		linear-gradient(180deg, var(--htp-tint) 0, transparent 120px),
		var(--htp-surface);
}

.htp-join__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 12px 18px;
	border: 1px solid color-mix(in srgb, var(--htp-accent) 40%, transparent);
	border-radius: 99px;
	background: var(--htp-surface);
	color: var(--htp-ink);
	font-size: 14.5px;
	font-weight: 650;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--htp-ink) 7%, transparent);
	transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}

.htp-join__btn:hover {
	transform: translateY(-1px);
	background: var(--htp-tint);
	border-color: color-mix(in srgb, var(--htp-accent) 60%, transparent);
	box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--htp-accent) 90%, transparent);
}

html:not([scheme="dark"]) .htp-join__btn:not(.is-on):hover {
	color: var(--htp-ink);
}

.htp-join__btn:active {
	transform: translateY(0) scale(.99);
}

.htp-join__btn:focus-visible {
	outline: 2px solid var(--htp-accent);
	outline-offset: 2px;
}

.htp-join__btn.is-on {
	border-color: transparent;
	background: linear-gradient(160deg, color-mix(in srgb, var(--htp-accent) 90%, #fff), var(--htp-accent));
	color: #fff;
	box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--htp-accent) 95%, transparent);
}

.htp-join__glyph {
	position: relative;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: var(--htp-accent);
}

.htp-join__btn.is-on .htp-join__glyph {
	color: #fff;
}

.htp-join__off,
.htp-join__on {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition: opacity .2s ease, transform .3s cubic-bezier(.2, .9, .3, 1.2);
}

.htp-join__on {
	opacity: 0;
	transform: scale(.6);
}

.htp-join__btn.is-on .htp-join__off {
	opacity: 0;
	transform: scale(.6);
}

.htp-join__btn.is-on .htp-join__on {
	opacity: 1;
	transform: scale(1);
}

.htp-join__who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	min-height: 32px;
}

/*
 * A full pile of faces leaves a narrow column for the count, and a count in a
 * narrow column becomes three words on three lines. Given its own line it
 * stays one sentence.
 */
.htp-join__count {
	flex: 1 1 150px;
	margin: 0;
	font-size: 13px;
	color: var(--htp-muted);
}

.htp-join__count .htp-num {
	font-size: 15px;
	margin-right: 3px;
}

/* --------------------------------------------------------------- stack -- */

.htp-stack {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.htp-stack:empty {
	display: none;
}

.htp-ava {
	position: relative;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 50%;
	overflow: hidden;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	background: hsl(var(--htp-hue, 210) 42% 48%);
	box-shadow: 0 0 0 2px var(--htp-surface);
}

.htp-stack .htp-ava + .htp-ava {
	margin-left: -11px;
}

.htp-ava img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

/*
 * The overflow bubble steps out of the pile rather than under it: the faces
 * overlap newest-first, and that stacking order would otherwise bury the one
 * element nobody's z-index can rescue.
 */
.htp-stack .htp-ava + .htp-ava--more {
	margin-left: 5px;
}

.htp-ava--more {
	background: color-mix(in srgb, var(--htp-ink) 14%, var(--htp-surface));
	color: var(--htp-ink);
	font-size: 10px;
	letter-spacing: -.02em;
}

.htp-ava.is-new {
	animation: htp-land .5s cubic-bezier(.2, .9, .3, 1.4);
}

/* ---------------------------------------------------------------- wall -- */

.htp-wall {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--htp-hair);
}

.htp-wall__head {
	margin: 0 0 12px;
}

.htp-wall__title {
	margin: 0 0 4px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--htp-ink);
}

.htp-wall__lede {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--htp-faint);
}

.htp-wall__lock {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px dashed color-mix(in srgb, var(--htp-accent) 34%, var(--htp-line));
	border-radius: var(--htp-radius-sm);
	background: var(--htp-tint);
}

.htp-wall__lockicon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--htp-surface);
	color: var(--htp-accent);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--htp-ink) 10%, transparent);
}

.htp-wall__lockicon .htp-icon {
	width: 18px;
	height: 18px;
}

.htp-wall__locktext {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--htp-text);
}

.htp-wall__teaser {
	grid-column: 2;
	margin: 2px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--htp-accent);
}

.htp-wall__empty {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--htp-faint);
}

/* ------------------------------------------------------------ composer -- */

.htp-compose {
	margin: 0 0 14px;
	padding: 12px 12px 10px;
	border: 1px solid var(--htp-line);
	border-radius: var(--htp-radius-sm);
	background: var(--htp-surface);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.htp-compose:focus-within {
	border-color: color-mix(in srgb, var(--htp-accent) 55%, transparent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--htp-accent) 13%, transparent);
}

.htp-compose__text {
	display: block;
	width: 100%;
	min-height: 54px;
	max-height: 220px;
	padding: 4px 4px 8px;
	border: 0;
	background: none;
	color: var(--htp-ink);
	font: inherit;
	font-size: 14.5px;
	line-height: 1.55;
	resize: none;
	outline: none;
}

.htp-compose__text::placeholder {
	color: var(--htp-faint);
}

.htp-compose__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--htp-hair);
}

.htp-compose__code {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--htp-faint);
}

.htp-compose__code .htp-icon {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	color: var(--htp-accent);
}

.htp-compose__left {
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	color: var(--htp-faint);
}

.htp-compose__left.is-close {
	color: var(--htp-accent);
	font-weight: 700;
}

.htp-compose__send {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border: 0;
	border-radius: 99px;
	background: linear-gradient(160deg, color-mix(in srgb, var(--htp-accent) 90%, #fff), var(--htp-accent));
	color: #fff;
	font-size: 13px;
	font-weight: 650;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--htp-accent) 95%, transparent);
	transition: transform .18s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
}

.htp-compose__send .htp-icon {
	width: 14px;
	height: 14px;
}

.htp-compose__send:hover {
	transform: translateY(-1px);
}

.htp-compose__send[disabled] {
	opacity: .5;
	cursor: default;
	transform: none;
}

.htp-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 14px;
	padding: 11px 13px;
	border-radius: var(--htp-radius-sm);
	background: var(--htp-tint);
	border: 1px solid color-mix(in srgb, var(--htp-accent) 26%, transparent);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--htp-text);
}

.htp-note--bad {
	background: color-mix(in srgb, #d6455b 9%, transparent);
	border-color: color-mix(in srgb, #d6455b 32%, transparent);
	color: color-mix(in srgb, #8d1f30 85%, var(--htp-ink));
}

/* --------------------------------------------------------------- notes -- */

.htp-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.htp-list:empty {
	display: none;
}

.htp-wish {
	position: relative;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: start;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--htp-hair);
	border-radius: var(--htp-radius-sm);
	background: var(--htp-wash);
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.htp-wish::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	border-radius: 99px 0 0 99px;
	background: linear-gradient(180deg, var(--htp-accent), transparent);
	opacity: 0;
	transition: opacity .2s ease;
}

.htp-wish:hover,
.htp-wish:focus-within {
	border-color: color-mix(in srgb, var(--htp-accent) 30%, transparent);
	background: var(--htp-surface);
}

.htp-wish:hover::before,
.htp-wish:focus-within::before {
	opacity: 1;
}

.htp-wish.is-new {
	animation: htp-rise .45s cubic-bezier(.2, .9, .3, 1.1);
}

.htp-wish--mine {
	border-color: color-mix(in srgb, var(--htp-accent) 34%, transparent);
	background: var(--htp-surface);
}

.htp-wish--pending,
.htp-wish--held {
	border-style: dashed;
	background: none;
}

.htp-wish__ava .htp-ava {
	width: 34px;
	height: 34px;
	box-shadow: none;
}

.htp-wish__body {
	min-width: 0;
}

.htp-wish__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 3px;
	font-size: 12px;
	color: var(--htp-faint);
}

.htp-wish__name {
	font-size: 13px;
	font-weight: 650;
	color: var(--htp-ink);
}

.htp-wish__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--htp-text);
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.htp-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 99px;
	background: color-mix(in srgb, var(--htp-ink) 8%, transparent);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--htp-faint);
}

.htp-chip .htp-icon {
	width: 11px;
	height: 11px;
}

.htp-chip--held {
	background: color-mix(in srgb, #d6455b 12%, transparent);
	color: color-mix(in srgb, #8d1f30 80%, var(--htp-ink));
}

.htp-wish__aside {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* -------------------------------------------------------------- claps -- */

.htp-clap {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border: 1px solid transparent;
	border-radius: 99px;
	background: none;
	color: var(--htp-faint);
	font-size: 12px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	opacity: .65;
	transition: opacity .2s ease, color .2s ease, background .2s ease, border-color .2s ease, transform .18s cubic-bezier(.2, .8, .3, 1);
}

.htp-clap .htp-icon {
	width: 16px;
	height: 16px;
}

.htp-wish:hover .htp-clap,
.htp-wish:focus-within .htp-clap {
	opacity: 1;
	background: var(--htp-surface);
	border-color: var(--htp-hair);
}

.htp-clap:hover {
	color: var(--htp-accent);
	border-color: color-mix(in srgb, var(--htp-accent) 40%, transparent);
	transform: translateY(-1px);
}

.htp-clap:focus-visible {
	outline: 2px solid var(--htp-accent);
	outline-offset: 2px;
}

.htp-clap.is-on {
	opacity: 1;
	color: var(--htp-accent);
	background: var(--htp-tint);
	border-color: color-mix(in srgb, var(--htp-accent) 34%, transparent);
}

.htp-clap.is-clapping .htp-icon {
	animation: htp-clap .5s cubic-bezier(.2, .9, .3, 1.3);
}

/* The tooltip: the hands and the word, above the button, on hover or focus. */
.htp-clap::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 7px);
	left: 50%;
	z-index: 3;
	padding: 5px 9px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--htp-ink) 92%, #000);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 4px);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}

.htp-clap::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 3px);
	left: 50%;
	z-index: 3;
	width: 8px;
	height: 8px;
	background: color-mix(in srgb, var(--htp-ink) 92%, #000);
	opacity: 0;
	transform: translate(-50%, 4px) rotate(45deg);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}

.htp-wish:hover .htp-clap::after,
.htp-wish:hover .htp-clap::before,
.htp-clap:focus-visible::after,
.htp-clap:focus-visible::before {
	opacity: 1;
	transform: translate(-50%, 0) rotate(var(--htp-rot, 0deg));
}

.htp-wish:hover .htp-clap::before,
.htp-clap:focus-visible::before {
	--htp-rot: 45deg;
}

/* The "+1" that floats off a fresh clap. */
.htp-clap__pop {
	position: absolute;
	top: -2px;
	left: 50%;
	font-size: 11px;
	font-weight: 700;
	color: var(--htp-accent);
	pointer-events: none;
	animation: htp-pop .75s ease-out forwards;
}

.htp-drop {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--htp-faint);
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease, color .2s ease, background .2s ease;
}

.htp-wish:hover .htp-drop,
.htp-wish:focus-within .htp-drop {
	opacity: .8;
}

.htp-drop:hover {
	color: #c23b51;
	background: color-mix(in srgb, #c23b51 10%, transparent);
	opacity: 1;
}

.htp-drop .htp-icon {
	width: 14px;
	height: 14px;
}

/* ---------------------------------------------------------------- more -- */

.htp-more {
	/* Flex rather than inline-flex: auto margins only centre a block box. */
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 6px;
	margin: 14px auto 0;
	padding: 9px 18px;
	border: 1px solid var(--htp-line);
	border-radius: 99px;
	background: var(--htp-surface);
	color: var(--htp-ink);
	font-size: 13px;
	font-weight: 650;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s ease, background .2s ease, transform .18s ease;
}

.htp-more:hover {
	border-color: color-mix(in srgb, var(--htp-accent) 45%, transparent);
	background: var(--htp-tint);
	transform: translateY(-1px);
}

.htp-more .htp-icon {
	width: 14px;
	height: 14px;
	color: var(--htp-accent);
}

.htp-more[hidden] {
	display: none;
}

.htp-icon--sm {
	width: 14px;
	height: 14px;
}

.htp .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.htp.is-busy {
	cursor: progress;
}

/* -------------------------------------------------------------- phone -- */

/*
 * On a narrow screen the composer's footer and a note's applause both want a
 * row of their own rather than a share of one: three items on one line turn
 * "Share it" into two words on two lines and squeeze a note into a column four
 * words wide.
 */
@media (max-width: 560px) {
	.htp-compose__foot {
		flex-wrap: wrap;
	}

	.htp-compose__code {
		order: 3;
		flex: 1 0 100%;
		padding-top: 9px;
	}

	.htp-compose__left {
		margin-left: auto;
	}

	.htp-wish {
		grid-template-columns: 30px minmax(0, 1fr);
		padding: 11px 12px;
	}

	.htp-wish__ava .htp-ava {
		width: 30px;
		height: 30px;
	}

	.htp-wish__aside {
		grid-column: 2;
		justify-content: flex-end;
		margin-top: 2px;
	}

	/* Nothing hovers on a phone, so the applause is simply always there. */
	.htp-clap {
		opacity: 1;
	}

	.htp-drop {
		opacity: .7;
	}
}

/* -------------------------------------------------------------- motion -- */

@keyframes htp-ring {
	0% {
		opacity: .85;
		transform: scale(.82);
	}

	100% {
		opacity: 0;
		transform: scale(1.65);
	}
}

@keyframes htp-halo {
	0% {
		opacity: .75;
		transform: scale(.6);
	}

	100% {
		opacity: 0;
		transform: scale(2.1);
	}
}

@keyframes htp-spark {
	0% {
		opacity: 0;
		transform: rotate(var(--htp-a, 0deg)) translateY(0) scale(.4);
	}

	18% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: rotate(var(--htp-a, 0deg)) translateY(-46px) scale(.75);
	}
}

@keyframes htp-bump {
	0% {
		transform: translateY(0) scale(1);
	}

	38% {
		transform: translateY(-5px) scale(1.12);
	}

	100% {
		transform: translateY(0) scale(1);
	}
}

@keyframes htp-sheen {
	0% {
		opacity: .9;
		transform: translateX(-100%);
	}

	100% {
		opacity: 0;
		transform: translateX(100%);
	}
}

@keyframes htp-land {
	0% {
		opacity: 0;
		transform: translateY(-9px) scale(.6);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes htp-rise {
	0% {
		opacity: 0;
		transform: translateY(8px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes htp-clap {
	0% {
		transform: scale(1) rotate(0);
	}

	30% {
		transform: scale(1.25) rotate(-12deg);
	}

	60% {
		transform: scale(1.1) rotate(9deg);
	}

	100% {
		transform: scale(1) rotate(0);
	}
}

@keyframes htp-pop {
	0% {
		opacity: 0;
		transform: translate(-50%, 4px);
	}

	25% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate(-50%, -22px);
	}
}

@keyframes htp-breathe {
	0%, 100% {
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--htp-accent) 20%, transparent);
	}

	50% {
		box-shadow: 0 0 0 6px color-mix(in srgb, var(--htp-accent) 6%, transparent);
	}
}

/*
 * Somebody who has asked for less movement gets the state changes and none of
 * the theatre: the button still fills, the bar still moves, nothing flies.
 */
@media (prefers-reduced-motion: reduce) {
	.htp *,
	.htp *::before,
	.htp *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .08s !important;
	}

	.htp-meter__sparks {
		display: none;
	}
}