/**
 * The theme's own chrome: cards, menus, sidebar, widgets, everything around the content.
 *
 * The content itself lives in ds-content.css (shared with the block editor), and rules general
 * enough to be framework rules live in the foundation fork at
 * spaces-markup/vendor/dol-lab/foundation-sites-template. Only this file is front-end only,
 * which is why it may nest freely.
 */

.defaultspace-settings-container ul:not(.tabs) {
	font-size: 0.9rem;
}

@view-transition {
	navigation: auto;
}

/* ! not in use? */
.info-label {
	font-size: 16.5px;
	font-weight: 300;
	color: var(--f-color-text-2);
	padding-bottom: 4px;
}

.info-content {
	color: var(--f-color-text-1);
	/* font-size: 0.85rem; */
}

h1 i {
	/* icons in post header */
	margin-right: 10px;
}

.widget ul:last-child {
	/* avoid bottom whitespace in list widgets */
	margin-bottom: 0;
}

/* don't show the default post status */
.type-post.status-publish .post-status-icon-publish {
	display: none;
}

/* A post that is not published says so across its own body; each state only names its word. */
.status-draft,
.post-attribute-preview,
.status-trash {
	&:after {
		content: var(--ds-watermark);
		width: 100%;
		position: absolute;
		color: var(--f-color-text-0);
		opacity: 0.15;
		font-size: 60px;
		transform: translateX(20%) rotate(-6deg) translateY(4%);
		mix-blend-mode: multiply;
		pointer-events: none;
	}
}

.status-draft {
	--ds-watermark: "DRAFT";
}

.post-attribute-preview {
	--ds-watermark: "PREVIEW";
}

.status-trash {
	--ds-watermark: "TRASHED";

	&:after {
		color: var(--f-color-danger);
		opacity: 0.5;
	}
}

/* While it is being written it is obviously a draft. */
:is(.status-draft, .post-attribute-preview, .status-trash).editing {
	--ds-watermark: "";
}

.grid-container.current-space-header {
	margin-bottom: 8px;
	margin-top: 40px;
}

p:has(.fe-read-more),
.fe-read-more {
	/* legacy support for old read-more tags... recreate old excerpts */
	display: none;
}

/*
 * The two states of a post card.
 *
 * A card is rendered once and carries everything both states need (see
 * concept-post-card-expand.md and ds_get_post_card()). `.overview` is the collapsed state in the
 * stream, `.full` the opened one; everything below is what the two look like, and nothing here
 * may depend on markup the server only sends in one of them.
 */

.post-card.overview .post-content {
	/* important: if you change this, you need to change the container-query below! */
	--ds-max-excerpt-height: 38vh;
	max-height: var(--ds-max-excerpt-height);
	position: relative;
	overflow: hidden;
}

.post-card.overview.sticky .post-content {
	--ds-max-excerpt-height: 10vh;
}

.post-card.overview .post-content:has(.fe-read-more) .ds-read-more {
	/* this is legacy-support... */
	display: block;
}

/*
 * The author's own cut. With the whole post in the card, core marks the <!--more--> position with
 * a <span id="more-{ID}">, so the collapsed state hides everything behind it: the cut is honoured
 * exactly where it was made, and opening the card costs no request. The read-more button and
 * anything a plugin appended are not part of the post and stay.
 */
.post-card.overview .post-content > span[id^="more-"] ~ *:not(.ds-read-more-wrapper, .after-post-content),
.post-card.overview .post-content > *:has(> span[id^="more-"]) ~ *:not(.ds-read-more-wrapper, .after-post-content) {
	display: none;
}

/* There is provably more to read, so the button shows even if the teaser is short. */
.post-card.overview.has-more-tag .ds-read-more {
	display: block;
}

/* --ds-max-excerpt-height - 2 */
@container (height < 36vh ) {
	.post-card:not(.sticky) .ds-read-more {
		/* don't show read-more if container is smaller than --ds-max-excerpt-height */
		display: none;
	}
}
@container (height < 8vh) {
    .post-card.sticky .ds-read-more { display: none; }
}

/*
 * Areas (concept-post-card-expand.md §4): a section the server left for the client to fill. It is
 * an empty placeholder until then, and comments belong to the open card either way — a filled area
 * stays in the DOM when the card collapses again, so the state, not the data, decides who sees it.
 */
.post-card .card-section[data-area-state="deferred"],
.post-card.overview .section_comments,
.post-card.overview .section_comment_editor {
	display: none;
}

/* Read more and the default category belong to the collapsed state. */
.post-card:not(.overview) .ds-read-more-wrapper,
.post-card.overview .info-chip-default-term {
	display: none;
}

/*
 * So do the stacked comment avatars: the open card lists the comments themselves. The list carries
 * the `flex` utility (`display: flex !important`), so this needs the same weapon — and it needs to
 * win, or the avatars flying into their comments would pair with themselves (tagCommentAvatars()
 * takes the first *visible* avatar per comment id).
 */
.post-card:not(.overview) .comment-avatar-list {
	display: none !important;
}

/* The editor says "add a comment" better than the link does (see $comment_footer_class). */
.post-card:not(.overview) .comment-footer.few-comments .respond-link {
	display: none;
}

/* A chip list (or its whole section) that is left with nothing visible takes up no room. */
.post-card.overview .info-chips:not(:has(.info-chip:not(.info-chip-default-term))),
.post-card.overview .section_many_taxonomies:not(:has(.info-chip:not(.info-chip-default-term))) {
	display: none;
}

/* Smoothly grow the feature image when the card changes from overview to full content. */
.post-card .clipped.feature-image {
	height: 150px;
	transition: height 0.4s ease;
}

.post-card:not(.overview) .clipped.feature-image {
	height: 200px;
}

.post-card.overview .post-content .ds-read-more-wrapper {
	container-type: size;
	height: 100%;
	pointer-events: none;
	position: absolute;
	top: 0px;
	width: 100%;
	z-index: 10;

	& .ds-read-more {
		position: absolute;
		pointer-events: all;
		padding: 0;
		/* extends the shadow to the left, in case there is a full-width-image. */
		box-shadow: -80px 60px 15px 80px var(--ds-card-color, var(--f-color-bg-1));
		width: 125%;
		left: 0;
		bottom: 0;
		text-align: left !important;
		background-color: var(--ds-card-color, var(--f-color-bg-1));
		color: var(--f-color-brand);
	}
}

.post-card.loading .ds-read-more {
	pointer-events: none;
 	&::after {
		content: '';
		display: inline-block;
		width: 0.7em;
		height: 0.7em;
		border: 1.5px solid currentColor;
		border-right-color: transparent;
		border-radius: 50%;
		animation: spin 0.6s linear infinite;
		margin-left: 0.45em;
		vertical-align: middle;
	}
}

.page-card,
.report-card {
	& .prose-layout {
		--target-offset-left: 1fr;
	}
}

.spaces-editor-comment-form .ck-editor__main,
.user-generated.comment-content {
	--target-offset-left: 48px;
}

.section_comments {
	& .editing #comment-submit {
		border-radius: 0;
	}

	& .card-header {
		justify-content: center;
	}
}

/* Linked-image affordance: a corner badge replaces the inline text-link icon on images. */
.user-generated a.image-link {
	position: relative;
	display: inline-block;
}

/* Never let the inline text-link icon render over image content. */
.user-generated a.image-link::after,
.user-generated a.image-link::before {
	content: none !important;
}

.user-generated a.image-link .image-link-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background-color: rgba(0, 0, 0, 0.55);
	color: #fff;
	pointer-events: none;
	transition: background-color 0.18s ease;
}

.user-generated a.image-link:hover .image-link-badge,
.user-generated a.image-link:focus .image-link-badge,
.user-generated a.image-link:focus-visible .image-link-badge {
	background-color: rgba(0, 0, 0, 0.8);
}

.user-generated a.image-link .image-link-badge svg {
	width: 15px;
	height: 15px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.comment-content img {
	max-height: 40vh;
	width: auto;
	margin: 0.5em 0;
}

.comment-content iframe {
	padding: 0.5em 0;
}

.comment-content .card-header {
	padding-bottom: 0.5rem;
}

.card-section.section_many_taxonomies {
	border-top: none;
	background-position: bottom;
	/* border-bottom: 1px solid var(--f-color-border-0); */

	& > .info-chips {
		flex-direction: row-reverse;
		flex-wrap: wrap-reverse !important;
	}
}

.space-header .visible-registered-users-network i {
	/* hide the default privacy icon in space-cards. ask leon :) */
	display: none;
}

.space-description-content {
	overflow-wrap: break-word;
	font-size: 0.9rem;
}

.space-description-overflow {
	position: relative;
	max-height: 250px;
	overflow: hidden;
	transition: max-height 0.5s ease;
}

.space-description-wrapper.extended .space-description-overflow {
	max-height: 3000px;
	padding-bottom: 20px;
}

.space-description-wrapper .read {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: 0;
}

.space-description-wrapper:not(.extended) .read {
	padding-top: 60px;
	background-image: linear-gradient(
		to bottom,
		transparent,
		var(--f-color-bg-1) 70%
	);
}

.space-description-wrapper:not(.has-overflow) .read,
.space-description-wrapper.extended .read-more,
.space-description-wrapper:not(.extended) .read-less {
	display: none;
}

.space-description-overflow.is-mobile-search-page {
	max-height: 80px;
}

.add-header-image {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	width: 36px;
	height: 36px;
	display: flex;
}

.customize-partial-edit-shortcut,
.widget .customize-partial-edit-shortcut {
	position: relative;
	float: right;
	width: 100%;
}

.customize-partial-edit-shortcut button {
	left: initial !important;
	right: -20px !important;
	top: -18px;
	border-radius: 20px;
}

/* The four move arrows are buttons of one menu row now, and a menu row is
   spaces-markup's (assets/css/menu.css): what they looked like here is what
   `.spaces-menu-item.is-secondary` looks like everywhere. */

/* menu styles */

/* don't show child-entries while loading the page */
.ds-main-menu-container .menu-item-has-children > ul {
	list-style: none;
	display: none;
}

/* only show the menu's dot menu, if at least one tab is active. */
.ds-main-menu-dots {
	overflow: hidden;
	max-height: 0px;
	transition: all 1s ease-in-out;
}

.is-active ~ .ds-main-menu-dots {
	max-height: 40px;
}

#primary-swap-menu .customize-partial-edit-shortcut button,
#secondary-swap-menu .customize-partial-edit-shortcut button {
	right: 2px !important;
	top: 2px;
}

/* underlines links in a non-static menu, because the links behave different (page reload) */
.tabs-content:not(.menu-is-static) .has-submenu-toggle > a > span {
	text-decoration: underline;
	text-decoration-color: color-mix(
		in oklab,
		var(--f-color-text-0) 30%,
		transparent 70%
	);
}

.tabs-panel.menu-is-static {
	max-height: 70vh;
	/* limit the height of a static menu. */
}

.current .space-header .customize-partial-edit-shortcut-header_image {
	position: absolute;
	right: calc(25px + 0.75rem);
	bottom: calc(15px + 0.75rem);
}

.widget_archive .accordion-content {
	padding: 0.5rem 0.75rem;
}

.widget_archive ul,
.widget_categories ul {
	list-style: none;
	margin: initial;
}

.widget:not(.widget_shortcodes) .textwidget ul {
	list-style: initial;
	margin-left: 1.25rem;
}

/* Sticky sidebar requires this config: https://blixhavn.github.io/sticky-sidebar-v2/ */
#defaultspace-sticky-sidebar {
	will-change: min-height;
}

#defaultspace-sticky-sidebar > div {
	transform: translate(0, 0);
	/* For browsers don't support translate3d. */
	transform: translate3d(0, 0, 0);
	will-change: position, transform;
}

.scoped-search {
	display: flex;
	align-items: center;
	position: relative;
	margin: 0;
	border-bottom: 1px solid var(--f-color-border-0);

	#scoped-search-input {
		flex: 1;
		margin: 0;
		border: none;
		border-radius: 0;
	}

	#scoped-search-input:focus {
		border: none;
	}

	#scoped-search-submit {
		--_scoped-search-button: 0%;
		--_fringing-buffer: 0px;
		background: radial-gradient(
			circle at center,
			var(--f-color-success) var(--_scoped-search-button),
			transparent calc(var(--_scoped-search-button) + var(--_fringing-buffer))
		);
		transition:
			color 1s,
			--_scoped-search-button 0.3s ease-in-out;
		left: 0;
		top: 0;
		bottom: 0;
		cursor: pointer;
		font-size: 0.75rem;
		border-radius: 0;
		i {
			color: var(--f-color-text-1);
		}
		&.active {
			--_scoped-search-button: 50%;
			--fringing-buffer: 1px;
			opacity: 1;
			i {
				color: var(--f-color-success-contrast);
			}
		}

		&.active:hover {
			--_scoped-search-button: 44%;
		}
	}
}

@property --_scoped-search-button {
	syntax: "<percentage>";
	initial-value: 0%;
	inherits: false;
}

/* avoid jumping when content is loaded. this is hacky. solve it by pre-populating the widgets with events in php.*/
#event-schedule {
	min-height: 120px;
}

.editor-button {
	width: 54px !important;
}

.editor-button .card {
	height: 100%;
	align-items: center;
	justify-content: center;
}

.ck.ck-content.ck-editor__editable.ck-editor__editable_inline {
	padding: var(--f-spacing-5) 0;
	display: inline-block;
}

.widget_spaces-editor-widget .drafts-container {
	display: flex;
}

.widget_spaces-editor-widget .editor-mini-view ~ .drafts-container {
	display: none;
}

.swap-container {
	position: relative;
	transition:
		transform 0.28s,
		opacity 0.28s;
	opacity: 0.5;
	margin-bottom: 45px;
}

.swap-container-parent .swap-container:not(.visible) {
	/* avoid display: none, because things might not render properly
	in hidden container (event-organizer fullcalendar) */
	position: absolute;
	pointer-events: none;
	width: 0;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
}

.swap-container-parent .swap-container {
	transform: translateX(-400px);
}

.swap-container-parent .swap-container:nth-child(2) {
	transform: translateX(400px);
}

.swap-container-parent .swap-container.visible {
	transform: translateX(0px);
	opacity: 1;
}

.swap-container-parent .swap-container.animate {
	display: block;
}

/* shows when your main menu does not show stream */
.back-to-stream {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 2em;
	cursor: pointer;
	height: 100%;
	border-right: 1px solid var(--f-color-bg-0);
	border-left: 1px solid var(--f-color-bg-0);
	box-shadow: inset 0 -2px var(--f-color-bg-2);
}

.back-to-stream:hover {
	background-color: var(--f-color-bg-2) !important;
}

/*
 * A status icon means opposite things in the two places it appears: on a Space card it offers
 * what you have not done yet, in the sidebar of a Space it reports what you have.
 */
.space-card :is(.notification-status:not(.subscribed), .star-status:not(.starred)),
.sidebar :is(.notification-status.subscribed, .star-status.starred) {
	display: none;
}

.space-card .status-icon {
	flex-grow: 0;
}

/*
 * A dot menu stays quiet until you are on the card it belongs to: hover or keyboard focus
 * brings it out, and an open menu stays (aria-expanded, so the popover keeps its anchor).
 * Touch has no hover, so on mobile it is always there.
 */
body:not(.is-mobile) :is(.card-user, .post-card):not(:hover):not(:focus-within) .dots:not([aria-expanded="true"]) {
	opacity: 0;
	pointer-events: none;
}

:is(.card-user, .post-card) .dots {
	transition: color 150ms ease, opacity 150ms ease;
}

.ds-delete-failed {
	animation: ds-delete-shake 450ms ease-in-out;
}

.js-ds-delete-card-error {
	margin: 0;
	outline: 0;
}

.ds-post-delete-status {
	display: grid;
	place-items: center;
	min-height: 6rem;
	margin: 0;
	text-align: center;
}

@keyframes ds-delete-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-0.5rem); }
	40%, 80% { transform: translateX(0.5rem); }
}

@media (prefers-reduced-motion: reduce) {
	.ds-delete-failed {
		animation: none;
	}
}

.button.clear.dots,
.edit-button a {
	color: var(--f-color-text-2);

	&:hover {
		color: var(--f-color-text-0);
	}
}

.respond-link {
	flex: 1;
	color: var(--f-color-text-1);
}

.query-description {
	font-size: 0.875rem;
	color: var(--f-color-text-2);
	cursor: default;
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	& > li {
		list-style: none;
	}
}

.query-description a:hover {
	text-decoration: underline;
}

.query-description > * {
	margin-right: 10px;
}

@keyframes pin-wiggle {
	0%   { transform: translateY(-28px) rotate(0deg); opacity: 0; }
	28%  { transform: translateY(3px) rotate(0deg); opacity: 1; }
	40%  { transform: translateY(0) rotate(-22deg); }
	54%  { transform: translateY(0) rotate(17deg); }
	65%  { transform: translateY(0) rotate(-10deg); }
	75%  { transform: translateY(0) rotate(6deg); }
	85%  { transform: translateY(0) rotate(-3deg); }
	100% { transform: translateY(0) rotate(0deg); }
}

.post-card.sticky {
	border: 1px solid var(--f-color-border-1);
	--ds-card-color: color-mix(in oklab, var(--f-color-bg-2) 70%, var(--f-color-bg-0));
	/* --ds-card-color: var(--f-color-bg-2); */
	background-color: var( --ds-card-color , var(--f-color-bg-1) );
}

.post-card.sticky .fa-map-pin {
	display: inline-block;
	transform-origin: bottom center;
	animation: pin-wiggle 0.7s ease-out 0.8s 1 both;
}

.swap-container.is_tax:not(.is_home) .info-chip-taxonomy {
	.key {
		border-bottom-right-radius: 0;
		border-top-right-radius: 0;
	}

	.value {
		display: block;
	}
}

/*
 * A chip may not be wider than the row it sits in: a long value (a course title) would otherwise
 * push the sidebar card past the grid column. The chip's spans already truncate, but only once the
 * value is allowed to shrink and the flex wrapper holding the chip set may go below its content
 * width. Icon and key carry the short, identifying part, so the value is what gives way.
 */
.card-divider > .px-1:has(> .info-chips) {
	min-width: 0;
}

.info-chip {
	max-width: 100%;

	& > .tag-icon,
	& > .key {
		flex-shrink: 0;
	}

	& > .value {
		min-width: 0;
	}
}

.info-chip-taxonomy {
	/* don't show value for taxonomies. requires border-adjustment. */
	& .key {
		border-bottom-right-radius: 0.25rem;
		border-top-right-radius: 0.25rem;
	}

	& .value {
		display: none;
	}
}

/* make sure featherlight images don't show larger than screen ... */
.featherlight .featherlight-image {
	max-width: 100% !important;
	max-height: 90vh !important;
	height: 100% !important;
	object-fit: contain;
}

.featherlight .featherlight-content {
	position: relative;
}

/*
 * The card header and the feature image link to the post in both states (one rendering, two
 * states). In the full state the reader is already there: the click is swallowed by
 * initPostClick() and the title reads as text rather than as a link.
 */
.card:not(.overview) .post-card-anchor,
.card:not(.overview) .section_thumbnail {
	cursor: text;
	-webkit-user-drag: none;
	user-drag: none;

	& > * {
		user-select: text;
	}
}

.post-card {
	.fe-read-more {
		grid-column: -1 / 1;
	}
}

.post-card-footer {
	height: auto;
	min-height: 32px;
}

.taxonomy-breadcrumb {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;

	& .fa-angle-right {
		padding: 0 6px 0 2px;
		opacity: 0.5;
	}

	& .has-child {
		margin-right: 20px;
		position: relative;
		overflow: visible;

		&::after {
			content: ">";
			/* fa fa-angle-right */
			content: "\f105";
			opacity: 0.6;
			font-family: var(--fa-style-family, "Font Awesome 7 Free");
			font-weight: var(--fa-style, 900);
			position: absolute;
			right: -14px;
			top: 5px;
		}
	}
}

.comment-avatar-list .avatar-container:hover {
	z-index: 99 !important;
}

/**
 * Comment avatars are round: the ones next to single comments and the author of the comment
 * being written (the editor and the stand-in that holds its place). The stacked avatars on a
 * collapsed card get this from the framework, which reads --f-avatar-radius everywhere an
 * avatar has a corner.
 */
.gb-ci,
[data-editor-type="comment"] {
	--f-avatar-radius: 50%;
}

/**
 * Expanding a post card is a view transition (see ds-main.js): the card morphs
 * into its expanded self while the stacked comment avatars fly to their comments.
 */
::view-transition-group(ds-expanding-card) {
	animation-duration: 0.4s;
}

::view-transition-old(ds-expanding-card),
::view-transition-new(ds-expanding-card) {
	/* Reveal the taller card instead of stretching both snapshots into the new box. */
	height: 100%;
	overflow: clip;
	object-fit: none;
	object-position: top left;
}

/* Avatars travel above the card they are leaving, and take a little longer doing it. */
::view-transition-group(*.ds-flying-avatar) {
	z-index: 10;
	animation-duration: 0.5s;
	animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/**
 * Opening a Space is a cross-document view transition (@view-transition above): the header of
 * the card you clicked grows into the Space's own header. Card and Space render the same
 * `.clipped.space-header`, so the browser only has to morph the box.
 *
 * The Space a page *is* gets its name here rather than from ds-main.js, because the page
 * being arrived at is named in 'pagereveal', which fires while the document is still parsing and
 * no script of ours has run. tagSpaceHeader() names the card at the other end, and where a page
 * holds both (the home Space lists Space cards beside its own header) it sets the class below,
 * because two elements sharing one name make the browser skip the transition.
 */
.card.current > .space-header,
.card.current > a > .space-header {
	view-transition-name: ds-space-header;
}

.ds-space-header-on-card .card.current > .space-header,
.ds-space-header-on-card .card.current > a > .space-header {
	view-transition-name: none;
}

::view-transition-group(ds-space-header) {
	animation-duration: 0.4s;
}

::view-transition-old(ds-space-header),
::view-transition-new(ds-space-header) {
	/* Let both snapshots cover the growing box, the way the image inside `.clipped` does. */
	height: 100%;
	object-fit: cover;
}

/*
 * Nothing to grow into. The arriving page names its header from the stylesheet, so it is only
 * missing when the element has not been parsed at the moment the browser captures the page, and
 * an unpaired snapshot is the only child of its image pair. Left alone it would sit on top of
 * the new page and fade, which reads as a ghost of the card you just left; better to let the
 * page cross-fade on its own and say nothing.
 */
::view-transition-old(ds-space-header):only-child,
::view-transition-new(ds-space-header):only-child {
	animation: none;
	opacity: 0;
}

/**
 * Opening a profile is the same move one avatar smaller: the avatar you clicked grows into the
 * one the profile shows. Both ends name the same box, the `.clipped` square inside the
 * `.avatar-container` that holds nothing but the cover-fitted image: the container itself is not
 * that box on a profile, where it also holds the edit buttons, and a snapshot of those has
 * nowhere to grow from. The profile's image paints the thumbnail underneath the full file
 * (`--avatar-preview` in spaces-markup), so the two snapshots pair on the same pixels.
 *
 * Split the same way as the Space header above: the profile a page *is* gets its name here,
 * tagAvatar() names the avatar at the other end, and where a page holds both (a profile opened
 * from another profile) it sets the class below.
 */
.card-user.profile .avatar-container > .clipped {
	view-transition-name: ds-avatar;
}

.ds-avatar-on-trigger .card-user.profile .avatar-container > .clipped {
	view-transition-name: none;
}

::view-transition-group(ds-avatar) {
	/* Above the page it is leaving, the way the comment avatars travel. */
	z-index: 10;
	animation-duration: 0.4s;
}

::view-transition-old(ds-avatar),
::view-transition-new(ds-avatar) {
	height: 100%;
	object-fit: cover;
}

/* Nothing to grow into, as above: no ghost, just the page cross-fading. */
::view-transition-old(ds-avatar):only-child,
::view-transition-new(ds-avatar):only-child {
	animation: none;
	opacity: 0;
}

.page-template-template-card {
	& .page-title {
		padding-left: 1.5rem;
	}
}

.page-template-template-no-card-php .template-content .page-card {
	background-color: transparent;
	border: none;
}
.page-template-template-no-card details {
	background-color: var(--f-color-bg-1);
	border-radius: var(--f-radius);
	font-size: 1.05rem;
}
.page-template-template-no-card details > summary {
	padding-block: 1em;
}
.page-template-template-no-card .prose-layout {
	display: block;
	padding: 0.75em;
}
.page-template-template-no-card .mt-7 {
	margin-block-start: 0em;
}
.page-template-template-no-card .query-description {
	display: none;
}
.page-template-template-no-card .py-4 {
	padding-block: 0em;
}
.page-template-template-no-card .px-2,
body details {
	padding-inline: 1rem;
}
/*d
**
**  Emoji reactions: the popups of
**  @ /app/plugins/emoji-reaction/public/css/emoji-reaction-public.css
**  in our colors (they bring their own, for a theme that has none).
**
*/

.emoji-reaction-popup {
	border: 1px solid var(--f-color-border-1);
	background: var(--f-color-bg-1);
	color: var(--f-color-text-0);
	box-shadow: 0 2px 4px 0 var(--f-color-border-0);
	&.inverted {
		background: var(--f-color-text-0);
		color: var(--f-color-bg-1);
	}
	& .emoji-reaction-button:hover {
		background-color: var(--f-color-bg-2);
	}
}