/*
 * Hawver Labs: Social Archive. Takes its fonts and colors from the theme
 * (currentColor); restyle with these on .hawver-social:
 *   --hawver-social-accent   links, the active year
 *   --hawver-social-rule     lines between posts
 *   --hawver-social-muted    dates and counts
 *   --hawver-social-width    widest the column gets
 */
.hawver-social {
	--hawver-social-accent: #1d9bf0;
	--hawver-social-rule: color-mix(in srgb, currentColor 14%, transparent);
	--hawver-social-muted: color-mix(in srgb, currentColor 60%, transparent);
	--hawver-social-width: 992px;

	max-width: var(--hawver-social-width);
	margin: 0 auto 2em;
}

.hawver-social__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Search and years: icons top right, panels slide out to the left ---------- */

.hawver-social__tools {
	margin-bottom: 1.25rem;
}

.hawver-social__tools[hidden] {
	display: none;
}

.hawver-social__bar {
	--_toggle: 2.5rem;
	--_slide: 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Panels share the first column; the two icons sit in the last two, at the top. */
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: start;
	gap: 0.35rem;
	min-height: var(--_toggle);
}

/* Always the last two columns, even when no panel is open to fill the first. */
.hawver-social__toggle:nth-last-child(2) {
	grid-column: 2;
}

.hawver-social__toggle:last-child {
	grid-column: 3;
}

.hawver-social__toggle {
	grid-row: 1;
	position: relative;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--_toggle);
	height: var(--_toggle);
	padding: 0;
	border: 1px solid var(--hawver-social-rule);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.hawver-social__toggle:hover,
.hawver-social__toggle[aria-expanded="true"] {
	border-color: var(--hawver-social-accent);
	color: var(--hawver-social-accent);
}

.hawver-social__toggle:focus-visible {
	outline: 2px solid var(--hawver-social-accent);
	outline-offset: 2px;
}

/* The icon becomes an ✕ while its panel is open. */
.hawver-social__icon--close,
.hawver-social__toggle[aria-expanded="true"] .hawver-social__icon:not(.hawver-social__icon--close) {
	display: none;
}

.hawver-social__toggle[aria-expanded="true"] .hawver-social__icon--close {
	display: block;
}

/* A dot when a filter is on but its panel is closed. */
.hawver-social__toggle.has-value::after {
	content: "";
	position: absolute;
	top: 0.2rem;
	right: 0.2rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--hawver-social-accent);
}

.hawver-social__toggle.has-value[aria-expanded="true"]::after {
	display: none;
}

/*
 * The panels fill the bar from the left edge up to the icons, revealed from
 * the right as if sliding out of them.
 */
/*
 * Closed panels are taken out of the flow; an open one (and one still sliding
 * shut) takes up room, so the year pills can wrap onto as many lines as needed.
 */
.hawver-social__panel {
	grid-row: 1;
	grid-column: 1;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	align-items: center;
	min-height: var(--_toggle);
	visibility: hidden;
	clip-path: inset(0 0 0 100%);
	opacity: 0;
	transition: clip-path var(--_slide), opacity var(--_slide), visibility 0s linear 0.35s;
}

.hawver-social__panel.is-open,
.hawver-social__panel.is-closing {
	position: relative;
}

.hawver-social__panel.is-open {
	visibility: visible;
	clip-path: inset(0 0 0 0);
	opacity: 1;
	transition: clip-path var(--_slide), opacity var(--_slide), visibility 0s;
}

.hawver-social__search {
	display: block;
	width: 100%;
}

.hawver-social__search input {
	box-sizing: border-box;
	width: 100%;
	height: var(--_toggle);
	padding: 0 1em;
	border: 1px solid var(--hawver-social-accent);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
}

/* The ✕ icon closes the panel; the browser's own clear button beside it would be a second ✕. */
.hawver-social__search input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.hawver-social__search input:focus {
	outline: 2px solid color-mix(in srgb, var(--hawver-social-accent) 30%, transparent);
	outline-offset: 1px;
}

/* Years: one row that scrolls sideways when there are more than fit, fading at the edges. */
/* Years: as many lines as it takes, so every year is in reach. */
.hawver-social__years {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.35rem;
	width: 100%;
	padding: 0.35rem 0;
}

.hawver-social__year-button {
	flex: none;
	padding: 0.3em 0.8em;
	border: 1px solid var(--hawver-social-rule);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.hawver-social__year-button:hover {
	border-color: var(--hawver-social-accent);
}

.hawver-social__year-button[aria-pressed="true"] {
	border-color: var(--hawver-social-accent);
	background: var(--hawver-social-accent);
	color: #fff;
}

.hawver-social__status {
	margin: 0.5rem 0 0;
	color: var(--hawver-social-muted);
	font-size: 0.85em;
}

.hawver-social__status:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.hawver-social__panel,
	.hawver-social__panel.is-open {
		transition: none;
	}
}

/* ---------- Years and posts ---------- */

.hawver-social__year + .hawver-social__year {
	margin-top: 2rem;
}

.hawver-social .hawver-social__year-heading {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	margin: 0 0 0.25rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid currentColor;
	font-variant-numeric: tabular-nums;
}

.hawver-social__year-count {
	color: var(--hawver-social-muted);
	font-size: 0.5em;
	font-weight: 400;
}

/*
 * One row per post: date | text and photos | counts and "View on X".
 * No line underneath, so more posts fit on screen.
 */
.hawver-social__post {
	display: grid;
	grid-template-columns: 3.75rem minmax(0, 1fr) auto;
	align-items: start;
	gap: 0 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--hawver-social-rule);
}

.hawver-social__date {
	padding-top: 0.15em;
	color: var(--hawver-social-muted);
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hawver-social__body {
	min-width: 0;
}

.hawver-social__side {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--hawver-social-muted);
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
}

.hawver-social__count {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	white-space: nowrap;
}

.hawver-social__count .hawver-social__icon {
	width: 13px;
	height: 13px;
}

@media (max-width: 30rem) {
	.hawver-social__post {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.15rem 0.75rem;
	}

	/* Phones: the date sits above the text instead of beside it. */
	.hawver-social__date {
		grid-column: 1 / -1;
		padding-top: 0;
	}
}

.hawver-social .hawver-social__text {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.hawver-social__text a {
	color: var(--hawver-social-accent);
	text-decoration: none;
}

.hawver-social__text a:hover {
	text-decoration: underline;
}

/* "View on X": a small round icon, like the search and calendar icons. */
.hawver-social__original {
	display: grid;
	flex: none;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid var(--hawver-social-rule);
	border-radius: 50%;
	color: var(--hawver-social-muted);
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s;
}

.hawver-social__original:hover,
.hawver-social__original:focus-visible {
	border-color: var(--hawver-social-accent);
	color: var(--hawver-social-accent);
}

.hawver-social__original:focus-visible {
	outline: 2px solid var(--hawver-social-accent);
	outline-offset: 2px;
}

.hawver-social__original .hawver-social__icon {
	width: 15px;
	height: 15px;
}

/* Photos: one fills the width; two or more share a tidy grid. */
.hawver-social__media {
	display: grid;
	gap: 4px;
	margin-top: 0.75rem;
	overflow: hidden;
	border: 1px solid var(--hawver-social-rule);
	border-radius: 14px;
}

.hawver-social__media:not([data-count="1"]) {
	grid-template-columns: 1fr 1fr;
}

.hawver-social__media[data-count="3"] > :first-child {
	grid-row: span 2;
}

.hawver-social__photo,
.hawver-social__video {
	display: block;
	min-height: 0;
}

.hawver-social__photo img,
.hawver-social__video {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 32rem;
	object-fit: cover;
}

.hawver-social__media[data-count="1"] .hawver-social__photo img {
	height: auto;
}

.hawver-social__post[hidden],
.hawver-social__year[hidden] {
	display: none;
}