/*
 * Like, save and share, and Saved posts. Colours come from the text around
 * them (currentColor), or a Kadence palette colour chosen in the settings
 * (--sps-reactions-colour, set on .sps-reactions and .sps-saved so it
 * follows the dark palette on <body>), and translucent neutrals. A filled
 * icon shows what is liked or saved.
 *
 * Themes style button:hover, :focus and :active (Kadence: its button
 * colours and a drop shadow). A clicked button keeps focus, so every state
 * is set here, or the theme's look stays until the page is reloaded.
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 * SPDX-FileCopyrightText: 2026 Marcus Quinn
 * Additional terms (GPL-3.0 section 7(b)): SEOPROSTACK-ATTRIBUTION.txt
 * Provenance: wpas-5149fc42f5cbc37c. Copies, even of part, keep these lines.
 */
.sps-reactions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-block: 1.5em;
}

.sps-reactions.aligncenter {
	justify-content: center;
}

.sps-reactions.alignright {
	justify-content: flex-end;
	float: none;
}

.sps-reactions.alignleft {
	float: none;
}

.sps-reactions__button {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 2.5em;
	margin: 0;
	padding: 0.35em 0.95em;
	border: 1px solid rgba(127, 127, 127, 0.35);
	border-radius: 999px;
	background: transparent;
	color: var(--sps-reactions-colour, inherit);
	font: inherit;
	font-size: 0.9em;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sps-reactions__button:focus,
.sps-reactions__button:active {
	background: transparent;
	color: var(--sps-reactions-colour, inherit);
	box-shadow: none;
}

.sps-reactions__button:hover {
	border-color: rgba(127, 127, 127, 0.6);
	background: rgba(127, 127, 127, 0.12);
	color: var(--sps-reactions-colour, inherit);
	box-shadow: none;
}

.sps-reactions__button:focus:not(:focus-visible) {
	outline: none;
}

.sps-reactions__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.sps-reactions__button[aria-pressed="true"],
.sps-reactions__button[aria-pressed="true"]:hover,
.sps-reactions__button[aria-pressed="true"]:focus,
.sps-reactions__button[aria-pressed="true"]:active {
	border-color: currentColor;
	background: rgba(127, 127, 127, 0.12);
	color: var(--sps-reactions-colour, inherit);
	box-shadow: none;
}

.sps-reactions__icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sps-reactions__button[aria-pressed="true"] .sps-reactions__icon {
	fill: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
	.sps-reactions__like[aria-pressed="true"] .sps-reactions__icon {
		animation: sps-reactions-pop 0.25s ease-out;
	}
}

@keyframes sps-reactions-pop {
	50% {
		transform: scale(1.25);
	}
}

.sps-reactions__count {
	font-variant-numeric: tabular-nums;
	opacity: 0.8;
}

.sps-reactions__status {
	font-size: 0.85em;
	opacity: 0.8;
}

.sps-reactions__status:empty {
	display: none;
}

/* Icon-only buttons (buttons() with icons): a square, its word kept for
   screen readers. */
.sps-reactions--icons .sps-reactions__button {
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5em;
}

.sps-reactions--icons .sps-reactions__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* "12 Likes · 3 Shortlists" (tallies()). */
.sps-tallies {
	margin: 0;
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}

/* Saved posts */

.sps-saved__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sps-saved__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em 1em;
	padding: 0.75em 0;
	border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

.sps-saved__link {
	flex: 1 1 12em;
	font-weight: 600;
}

.sps-saved__excerpt {
	flex-basis: 100%;
	order: 3;
	margin: 0;
	font-size: 0.9em;
	opacity: 0.85;
}

.sps-saved__remove {
	padding: 0.2em 0.8em;
	min-height: 2em;
	font-size: 0.8em;
}

.sps-saved__empty,
.sps-saved__note {
	margin: 0;
	opacity: 0.8;
}

/* The shortlist is a deliberate call to action, not another automatic button. */
.sps-shortlist {
	justify-content: center;
	min-height: 48px;
	padding: 0.8em 1.5em;
	border-radius: 6px;
	font-size: 1em;
	font-weight: 600;
}

.sps-panel {
	box-sizing: border-box;
	position: fixed;
	inset: 0 0 0 auto;
	width: min(30rem, 100%);
	max-width: 100%;
	height: 100%;
	height: 100dvh;
	max-height: 100%;
	margin: 0;
	padding: 24px;
	border: 1px solid rgb(127 127 127 / 40%);
	background: var(--global-palette9, Canvas);
	color: var(--global-palette3, CanvasText);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sps-panel::backdrop {
	background: rgb(0 0 0 / 45%);
}

.sps-panel__title {
	margin-block: 16px 0;
	font-size: 1.25em;
}

/* Your lists in a modal (from links to the Your lists page): centred, about
   a reading column wide, full screen on phones (below). */
.sps-panel--modal {
	inset: 0;
	width: min(52rem, 100% - 32px);
	height: auto;
	max-height: min(90dvh, 100% - 32px);
	margin: auto;
	padding: 0 clamp(20px, 4vw, 40px) clamp(20px, 4vw, 32px);
	border: 0;
	border-radius: var(--spd-radius, 16px);
	box-shadow: 0 24px 64px rgb(0 0 0 / 28%);
}

.sps-panel__head {
	position: sticky;
	inset-block-start: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-inline: calc(-1 * clamp(20px, 4vw, 40px));
	padding: clamp(16px, 3vw, 24px) clamp(20px, 4vw, 40px) 8px;
	background: inherit;
}

.sps-panel--modal .sps-panel__title {
	margin: 0;
	font-size: clamp(1.4em, 3vw, 1.8em);
}

.sps-panel__close {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

/* A modal focuses its close button when it opens. Themes colour a focused
   button as a primary button (Kadence: button:focus), which showed a filled
   button in the wrong colours until the visitor clicked elsewhere: keep it
   plain, with a focus ring only for keyboard focus. */
.sps-panel__close:focus {
	border: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
}

.sps-panel__close:hover,
.sps-panel__close:focus-visible {
	background: rgb(127 127 127 / 18%);
	color: inherit;
}

.sps-panel__close:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

html:has(.sps-panel--modal[open]) {
	overflow: hidden;
}

/* Your lists: in the panel and the Your lists block. */

.sps-lists__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-block: 16px;
}

.sps-lists__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sps-lists__tab[aria-selected="true"],
.sps-lists__tab[aria-selected="true"]:hover,
.sps-lists__tab[aria-selected="true"]:focus {
	border-color: currentColor;
	font-weight: 700;
	background: rgb(127 127 127 / 12%);
}

.sps-lists__count {
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	opacity: 0.75;
}

.sps-lists__new {
	border-style: dashed;
}

.sps-lists__toolbar,
.sps-lists__row,
.sps-lists__manage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.sps-lists__toolbar {
	gap: 8px 16px;
	padding-block: 8px;
	border-bottom: 1px solid rgb(127 127 127 / 25%);
	font-size: 0.9em;
}

.sps-lists__toolbar .sps-reactions__button {
	font-size: 1em;
}

.sps-lists__pick {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.sps-lists__pick select {
	min-width: 0;
	max-width: 14em;
}

.sps-lists__manage {
	margin-inline-start: auto;
}

/* The toolbar's right: other plugins' actions ("Message selected"), then
   More actions, whose list opens under it. */
.sps-lists__toolbar {
	position: relative;
}

.sps-lists__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
}

.sps-lists__end > .sps-lists__actions {
	display: contents;
}

.sps-lists__more {
	min-width: 44px;
	justify-content: center;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1;
}

.sps-lists__menu {
	position: absolute;
	inset-block-start: calc(100% + 4px);
	inset-inline-end: 0;
	z-index: 20;
	display: grid;
	gap: 4px;
	min-width: min(18rem, 100%);
	padding: 8px;
	border: 1px solid rgb(127 127 127 / 30%);
	border-radius: 8px;
	background: var(--global-palette9, Canvas);
	color: var(--global-palette3, CanvasText);
	box-shadow: 0 16px 40px rgb(0 0 0 / 18%);
}

.sps-lists__menu[hidden] {
	display: none;
}

.sps-lists__menu .sps-lists__row {
	display: grid;
	gap: 4px;
	padding: 4px 4px 8px;
	border-bottom: 1px solid rgb(127 127 127 / 20%);
}

.sps-lists__menu .sps-lists__pick select {
	flex: 1 1 auto;
	max-width: none;
}

.sps-lists__menu-item {
	justify-content: flex-start;
	width: 100%;
	border-color: transparent;
	text-align: start;
}

.sps-lists__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	cursor: pointer;
}

.sps-lists__name {
	display: grid;
	gap: 8px;
	margin-block-end: 16px;
}

.sps-lists :is(select, input[type="text"]),
.sps-chooser input[type="text"] {
	box-sizing: border-box;
	min-height: 44px;
	padding: 0.4em 0.75em;
	border: 1px solid rgb(127 127 127 / 45%);
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
}

.sps-lists input[type="text"],
.sps-chooser input[type="text"] {
	flex: 1 1 12em;
	min-width: 0;
}

.sps-lists select option {
	background: var(--global-palette9, Canvas);
	color: var(--global-palette3, CanvasText);
}

.sps-lists__note {
	margin-block: 16px 0;
	font-size: 0.9em;
	opacity: 0.85;
}

.sps-lists__link {
	color: inherit;
	text-decoration: underline;
}

.sps-lists [role="tabpanel"]:focus-visible,
.sps-lists :is(input, select):focus-visible,
.sps-chooser input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.sps-lists [hidden],
.sps-chooser [hidden] {
	display: none;
}

.sps-lists .sps-saved__item {
	overflow-wrap: anywhere;
}

/* A list's posts: tick box, photo, then the title over its lines, each on
   its own column, so tick boxes line up under "Select all" and the lines
   start under the title. Element and class in the selectors: themes indent
   lists and space paragraphs in content (Kadence: .single-content ul, p),
   which pushed the rows right of "Select all" and set each line apart. */
.sps-lists ul.sps-saved__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sps-lists ul.sps-saved__list > li.sps-saved__item {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.15em 0;
	margin: 0;
}

.sps-lists .sps-saved__item > .sps-saved__select,
.sps-lists .sps-saved__item > img,
.sps-lists .sps-saved__item > .sps-saved__remove {
	grid-row: 1 / span 4;
}

.sps-lists .sps-saved__item > .sps-saved__select {
	grid-column: 1;
	margin-inline-end: 16px;
}

.sps-lists .sps-saved__item > img {
	grid-column: 2;
	margin-inline-end: 16px;
}

.sps-lists .sps-saved__item > .sps-saved__link,
.sps-lists .sps-saved__item > p.sps-saved__excerpt {
	grid-column: 3;
	margin: 0;
}

.sps-lists .sps-saved__item > .sps-saved__link {
	align-self: end;
}

.sps-lists .sps-saved__item > p.sps-saved__excerpt {
	align-self: start;
	line-height: 1.45;
}

.sps-lists .sps-saved__item > .sps-saved__remove {
	grid-column: 4;
	margin-inline-start: 16px;
}

.sps-lists .sps-saved__link {
	color: inherit;
}

.sps-lists input[type="checkbox"],
.sps-chooser input[type="checkbox"] {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--sps-reactions-colour, auto);
}

.sps-lists .sps-saved__remove {
	min-height: 44px;
}

.sps-lists img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
}

.sps-panel__actions {
	margin-block-start: 16px;
}

/* Save to list */

.sps-chooser {
	box-sizing: border-box;
	width: min(26rem, calc(100% - 32px));
	max-height: calc(100dvh - 32px);
	padding: 24px;
	border: 1px solid rgb(127 127 127 / 40%);
	border-radius: 8px;
	background: var(--global-palette9, Canvas);
	color: var(--global-palette3, CanvasText);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sps-chooser::backdrop {
	background: rgb(0 0 0 / 45%);
}

.sps-chooser__title {
	margin: 0;
	font-size: 1.25em;
}

.sps-chooser__post {
	margin: 4px 0 0;
	opacity: 0.85;
	overflow-wrap: anywhere;
}

.sps-chooser__lists {
	margin: 16px 0;
	padding: 0;
	list-style: none;
}

.sps-chooser__list {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	border-bottom: 1px solid rgb(127 127 127 / 20%);
	cursor: pointer;
}

.sps-chooser__name {
	flex: 1;
	overflow-wrap: anywhere;
}

.sps-chooser__new {
	display: grid;
	gap: 8px;
}

.sps-chooser__done {
	margin-block-start: 16px;
}

.sps-chooser .sps-reactions__status {
	display: block;
	margin-block: 12px 0;
}

.sps-chooser .sps-reactions__status:empty {
	display: none;
}

[data-sps-shortlist-count]:not(:empty) {
	min-width: 1.5em;
	padding: 0.15em;
	border-radius: 50%;
	background: rgb(127 127 127 / 15%);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

@media (width <= 600px) {
	.sps-shortlist {
		width: 100%;
	}

	.sps-panel {
		width: 100%;
		padding: 16px;
	}

	.sps-panel--modal {
		width: 100%;
		height: 100%;
		height: 100dvh;
		max-height: 100%;
		padding-top: 0;
		border-radius: 0;
	}

	.sps-panel--modal .sps-panel__head {
		margin-inline: -16px;
		padding-inline: 16px;
	}

	.sps-chooser {
		padding: 16px;
	}

	.sps-lists__manage {
		margin-inline-start: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sps-shortlist {
		transition: none;
	}
}