/**
 * SocialKit — layout only.
 *
 * Typography and colors come from the theme. Themes tune the feed through the
 * custom properties declared on .socialkit.
 */

.socialkit {
	--sck-gap: var(--wp--style--block-gap, 1.5em);
	--sck-min: 14em;
	/* The narrowest a card may get when a column count is set. */
	--sck-min-fixed: 8em;
	/* The narrowest a card may get in a carousel that shows a set number of posts. */
	--sck-min-view: 5em;
	--sck-radius: 0;
	--sck-lines: 4;
}

.sck-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sck-icon {
	flex: none;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

/* An image the site owner chose in place of a built-in icon keeps its proportions. */
.sck-icon--custom {
	object-fit: contain;
}

/* Header, follow links and filter. */

.sck-header,
.sck-follow-links,
.sck-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
}

.sck-header {
	justify-content: space-between;
	margin-block-end: var(--sck-gap);
}

.sck-heading,
.sck-follow-links {
	margin: 0;
}

/* The follow links and the filter are drawn here, not by the theme's link style: the text's
   color, no underline and a weight of their own. Two classes, so a theme rule such as
   ".entry-content a" or its :hover does not reach them; the "Links" text style of the
   Customization tab, written with the same two classes after this file, still does.
   At least 44px tall, so they are easy to tap, and never narrower than 24px. A long
   account name breaks instead of widening the page on a narrow screen. */
.socialkit .sck-follow,
.socialkit .sck-filter__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-block-size: 44px;
	min-inline-size: 24px;
	overflow-wrap: anywhere;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

/* A follow link underlines itself only under the pointer or the keyboard. */
.socialkit .sck-follow:hover,
.socialkit .sck-follow:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 0.09em;
	text-underline-offset: 0.25em;
}

.sck-filter {
	gap: 0.25em 0.35em;
	margin-block-end: var(--sck-gap);
}

/* A pill per network. The current one sits on a tint of the text's color, so it reads on
   any background; every item keeps its weight, so marking one moves nothing. */
.socialkit .sck-filter__item {
	box-sizing: border-box;
	padding: 0.3em 0.8em;
	border: 1px solid transparent;
	border-radius: 999px;
	line-height: 1.3;
}

.socialkit .sck-filter__item:hover,
.socialkit .sck-filter__item:focus-visible {
	background-color: color-mix(in srgb, currentColor 8%, transparent);
	text-decoration: none;
}

.socialkit .sck-filter__item[aria-current="true"] {
	border-color: color-mix(in srgb, currentColor 18%, transparent);
	background-color: color-mix(in srgb, currentColor 12%, transparent);
}

/* Without color-mix(), a line under the current item, as before. */
@supports not (background-color: color-mix(in srgb, red 10%, transparent)) {
	.socialkit .sck-filter__item {
		border: 0;
		border-block-end: 2px solid transparent;
		border-radius: 0;
	}

	.socialkit .sck-filter__item[aria-current="true"] {
		border-block-end-color: currentColor;
	}
}

/* In forced colors a background is dropped and every border painted: the current item keeps
   the system's highlight, drawn on purpose, and the others show no border. */
@media (forced-colors: active) {
	.socialkit .sck-filter__item {
		border-color: Canvas;
	}

	.socialkit .sck-filter__item[aria-current="true"] {
		forced-color-adjust: none;
		border-color: Highlight;
		background-color: Highlight;
		color: HighlightText;
	}

	/* A carousel's arrow with nowhere to go takes the system's color for what is unavailable.
	   One class more than the rule that dims it, which comes later in this file. */
	.socialkit .sck-carousel__button[aria-disabled="true"] .sck-icon {
		color: GrayText;
	}
}

/* A visible focus ring even on themes that remove outlines. */
.socialkit a:focus-visible,
.socialkit button:focus-visible,
.socialkit [tabindex]:focus-visible,
.socialkit iframe:focus-visible,
.socialkit video:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* While a request is pending: the script sets these and restores them afterwards. */
.socialkit[aria-busy="true"] {
	cursor: progress;
}

.sck-more[aria-disabled="true"],
.sck-filter__item[aria-disabled="true"] {
	cursor: progress;
	pointer-events: none;
}

/* Grid. */

/* Two classes, so theme rules such as ".entry-content ul" do not add bullets or indents. */
.socialkit .sck-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sck-min)), 1fr));
	gap: var(--sck-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* At most N columns; a column is dropped when cards would get narrower than --sck-min-fixed.
   This follows the feed's own width, not the viewport's. */
.socialkit[class*="sck-cols-"] .sck-list {
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			min(100%, max(var(--sck-min-fixed), (100% - (var(--sck-columns) - 1) * var(--sck-gap)) / var(--sck-columns) - 0.01px)),
			1fr
		)
	);
}

.sck-cols-1 { --sck-columns: 1; }
.sck-cols-2 { --sck-columns: 2; }
.sck-cols-3 { --sck-columns: 3; }
.sck-cols-4 { --sck-columns: 4; }
.sck-cols-5 { --sck-columns: 5; }
.sck-cols-6 { --sck-columns: 6; }

/* Lines of a post's text on a card with an image, when a feed sets its own number
   (the block's "Lines of text", or lines in the shortcode); the site's default is in --sck-lines. */
.sck-lines-1 { --sck-lines: 1; }
.sck-lines-2 { --sck-lines: 2; }
.sck-lines-3 { --sck-lines: 3; }
.sck-lines-4 { --sck-lines: 4; }
.sck-lines-5 { --sck-lines: 5; }
.sck-lines-6 { --sck-lines: 6; }
.sck-lines-7 { --sck-lines: 7; }
.sck-lines-8 { --sck-lines: 8; }
.sck-lines-9 { --sck-lines: 9; }
.sck-lines-10 { --sck-lines: 10; }
.sck-lines-11 { --sck-lines: 11; }
.sck-lines-12 { --sck-lines: 12; }
.sck-lines-13 { --sck-lines: 13; }
.sck-lines-14 { --sck-lines: 14; }
.sck-lines-15 { --sck-lines: 15; }
.sck-lines-16 { --sck-lines: 16; }
.sck-lines-17 { --sck-lines: 17; }
.sck-lines-18 { --sck-lines: 18; }
.sck-lines-19 { --sck-lines: 19; }
.sck-lines-20 { --sck-lines: 20; }

/* Carousel. */

/* The same cards in one row that scrolls sideways and stops card by card. It needs no
   script: touch, a trackpad, the scrollbar and the keyboard all scroll it. The script
   adds the arrows and, where they are asked for, the bullets. A card is --sck-min wide,
   and never so wide that the next one does not show. Where a number of posts in view
   is set for the screen (--sck-view, below), --sck-track is that share of the row;
   without a number it has no value, and the width above is used. The padding leaves
   room for focus rings, which a scrolling box would cut off. The row is positioned, so
   the visually hidden texts inside the cards, which are absolutely positioned, scroll
   with it instead of widening the page. */
.socialkit.sck-layout-carousel .sck-list {
	--sck-track: max(var(--sck-min-view), (100% - (var(--sck-view) - 1) * var(--sck-gap)) / var(--sck-view));

	position: relative;
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: var(--sck-track, min(85%, var(--sck-min)));
	margin: -4px;
	padding: 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: 4px;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.sck-layout-carousel .sck-item {
	scroll-snap-align: start;
}

/* A mouse can take the row in hand: the script marks a row that has somewhere to scroll, and
   the drag itself. While the row is dragged nothing in it is selected or dragged on its own,
   and the snap waits until the row is let go and sent to its nearest stop. */
.socialkit.sck-layout-carousel .sck-list.sck-grabbable {
	cursor: grab;
}

.socialkit.sck-layout-carousel .sck-list.sck-grabbing,
.socialkit.sck-layout-carousel .sck-list.sck-grabbing * {
	cursor: grabbing;
}

.socialkit.sck-layout-carousel .sck-list.sck-grabbing {
	-webkit-user-select: none;
	user-select: none;
	scroll-snap-type: none;
}

.socialkit .sck-list:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Posts in view. A carousel carries one of these classes for each kind of screen it has
   a number for; a screen without one keeps the width the cards choose themselves. A
   card never gets narrower than --sck-min-view: in a narrow column the row then shows
   fewer posts than the number. */
.sck-view-mobile-1 { --sck-view-mobile: 1; }
.sck-view-mobile-2 { --sck-view-mobile: 2; }
.sck-view-mobile-3 { --sck-view-mobile: 3; }
.sck-view-tablet-1 { --sck-view-tablet: 1; }
.sck-view-tablet-2 { --sck-view-tablet: 2; }
.sck-view-tablet-3 { --sck-view-tablet: 3; }
.sck-view-tablet-4 { --sck-view-tablet: 4; }
.sck-view-desktop-1 { --sck-view-desktop: 1; }
.sck-view-desktop-2 { --sck-view-desktop: 2; }
.sck-view-desktop-3 { --sck-view-desktop: 3; }
.sck-view-desktop-4 { --sck-view-desktop: 4; }
.sck-view-desktop-5 { --sck-view-desktop: 5; }
.sck-view-desktop-6 { --sck-view-desktop: 6; }

/* The number in force. The two media queries at the end of this section change it. */
.socialkit.sck-layout-carousel {
	--sck-view: var(--sck-view-mobile);
}

/* The controls below the posts, in one row: an arrow, the bullets when there are any, the other arrow. */
.sck-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin-block-start: 0.5em;
}

/* An arrow waits, hidden, until the script finds somewhere to scroll to: it keeps its box, so showing it moves nothing. */
.sck-carousel__button[hidden] {
	display: inline-flex;
	visibility: hidden;
}

/* At either end of the row an arrow has nowhere to go. It stays in its place and keeps
   the focus it may have: only its icon is dimmed, to a share of the text color, so the
   focus ring, drawn in the button's own color, keeps its contrast. */
.sck-carousel__button[aria-disabled="true"] {
	cursor: default;
}

.sck-carousel__button[aria-disabled="true"] .sck-icon {
	color: color-mix(in srgb, currentColor 40%, transparent);
}

/* Bullets, for a carousel that shows them in place of its scrollbar: one for each group
   of posts that fits in view. The script draws them, so the box waits hidden, and keeps
   its room. Past the number that fits, it holds a count such as "3 / 20". */
.sck-carousel__bullets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
}

.sck-carousel__bullets[hidden] {
	display: flex;
	visibility: hidden;
}

/* A 44px target, like the arrows: well clear of the 24px minimum, with room between the dots.
   Two classes, so a theme's button styles do not reach it. The script counts on this width
   to decide how many bullets fit (BULLET in socialkit.js). */
.socialkit .sck-carousel__bullet {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-inline-size: 44px;
	min-block-size: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	appearance: none;
}

/* The dot is a small disc in a tint of the text color. The one for the posts in view is a
   pill in the full color and several times as wide, so the state is a shape as much as a
   color: it shows at a glance, and in forced colors too (below, where a background would be
   dropped, the shape is drawn with a border). */
.socialkit .sck-carousel__bullet::before {
	content: "";
	box-sizing: border-box;
	inline-size: var(--sck-bullet-size, 0.5em);
	block-size: var(--sck-bullet-size, 0.5em);
	border-radius: 999px;
	background-color: color-mix(in srgb, currentColor 35%, transparent);
}

.socialkit .sck-carousel__bullet:hover::before,
.socialkit .sck-carousel__bullet:focus-visible::before {
	background-color: color-mix(in srgb, currentColor 60%, transparent);
}

.socialkit .sck-carousel__bullet[aria-current="true"]::before {
	inline-size: var(--sck-bullet-active-size, 2.5em);
	background-color: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
	.socialkit .sck-carousel__bullet::before {
		transition: inline-size 0.25s ease, background-color 0.15s ease;
	}
}

@media (forced-colors: active) {
	.socialkit .sck-carousel__bullet::before {
		border: 0.125em solid currentColor;
	}

	.socialkit .sck-carousel__bullet[aria-current="true"]::before {
		border-width: calc(var(--sck-bullet-size, 0.5em) / 2);
	}
}

/* Positioned, like a bullet, so its visually hidden text stays inside it. */
.sck-carousel__count {
	position: relative;
	font-variant-numeric: tabular-nums;
}

/* Once the bullets, or with nothing under the row the arrows, stand in for the scrollbar,
   the script takes it away. Where a scrollbar takes room the row keeps that room (the
   script measures it), so nothing below the row moves. */
.socialkit.sck-layout-carousel.sck-hide-scrollbar .sck-list {
	padding-block-end: calc(4px + var(--sck-scrollbar, 0px));
	scrollbar-width: none;
}

.socialkit.sck-layout-carousel.sck-hide-scrollbar .sck-list::-webkit-scrollbar {
	display: none;
}

/* No arrows: the script still uses them, so they are printed, but never shown. */
.socialkit.sck-arrows-none .sck-carousel__button {
	display: none;
}

/* Arrows beside the posts, or outside their column. They are printed around the row. On a
   narrow screen, and outside the column wherever the page leaves no room, they go below
   it, one at each side of the bullets, so the posts keep the whole width. */
.socialkit.sck-arrows-sides .sck-carousel,
.socialkit.sck-arrows-outside .sck-carousel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas:
		"list list list"
		"previous bullets next";
	align-items: center;
	column-gap: 0.25em;
}

.socialkit.sck-arrows-sides .sck-list,
.socialkit.sck-arrows-outside .sck-list {
	grid-area: list;
}

.socialkit.sck-arrows-sides .sck-carousel__previous,
.socialkit.sck-arrows-outside .sck-carousel__previous {
	grid-area: previous;
	justify-self: end;
	margin-block-start: 0.5em;
}

.socialkit.sck-arrows-sides .sck-carousel__next,
.socialkit.sck-arrows-outside .sck-carousel__next {
	grid-area: next;
	justify-self: start;
	margin-block-start: 0.5em;
}

.socialkit.sck-arrows-sides .sck-carousel__bullets,
.socialkit.sck-arrows-outside .sck-carousel__bullets {
	grid-area: bullets;
	margin-block-start: 0.5em;
}

/* Outside the column: the row keeps the whole width, and each arrow is moved out beyond
   its end, at the middle of the row. The script sets sck-arrows-out only where the page
   leaves room for them, inside the window and inside any box that would cut them off. */
.socialkit.sck-arrows-outside.sck-arrows-out .sck-carousel {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"list"
		"bullets";
}

.socialkit.sck-arrows-outside.sck-arrows-out .sck-carousel__previous,
.socialkit.sck-arrows-outside.sck-arrows-out .sck-carousel__next {
	grid-area: list;
	align-self: center;
	margin-block-start: 0;
}

.socialkit.sck-arrows-outside.sck-arrows-out .sck-carousel__previous {
	justify-self: start;
	translate: calc(-100% - 0.5em) 0;
}

.socialkit.sck-arrows-outside.sck-arrows-out .sck-carousel__next {
	justify-self: end;
	translate: calc(100% + 0.5em) 0;
}

[dir="rtl"] .socialkit.sck-arrows-outside.sck-arrows-out .sck-carousel__previous {
	translate: calc(100% + 0.5em) 0;
}

[dir="rtl"] .socialkit.sck-arrows-outside.sck-arrows-out .sck-carousel__next {
	translate: calc(-100% - 0.5em) 0;
}

/* A feed follows its container, with one exception besides the post dialog: the numbers
   of posts in view are chosen for phones, tablets and desktops, so they follow the
   screen, and the arrows move beside the posts at the tablet width. Those two media
   queries are not in this file: the widths are the site's own, its theme's breakpoints,
   so SCK_Renderer::carousel_css() prints them with this stylesheet (768 and 1025 pixels
   unless they were changed under Customization, Carousel). A carousel without these
   options is not touched by either query. */

/* Card. */

.sck-item {
	min-width: 0;
}

.sck-card {
	--sck-card-gap: 0.75em;

	display: flex;
	flex-direction: column;
	gap: var(--sck-card-gap);
	height: 100%;
}

/* The header is a band behind the account, its date and the network's mark: a tint of the text
   color, or what a theme sets in --sck-header-bg, joined to the image under it. */
.sck-card__header {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 0.75em;
	border-radius: var(--sck-radius) var(--sck-radius) 0 0;
	background-color: var(--sck-header-bg, color-mix(in srgb, currentColor 6%, transparent));
}

.sck-card__header + .sck-card__media {
	margin-block-start: calc(-1 * var(--sck-card-gap));
}

.sck-card__header + .sck-card__media img,
.sck-card__header + .sck-card__media .sck-embed {
	border-start-start-radius: 0;
	border-start-end-radius: 0;
}

.sck-card__avatar {
	flex: none;
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	object-fit: cover;
}

/* The network's mark beside the account, large enough to read at a glance. Themes set --sck-mark-size. */
.sck-card__network {
	display: flex;
	flex: none;
}

.sck-card__network .sck-icon {
	width: var(--sck-mark-size, 1.5em);
	height: var(--sck-mark-size, 1.5em);
}

/* The byline gives way to the network's mark instead of running under it. */
.sck-card__byline {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The account's name keeps to one line, cut with an ellipsis (the whole name is the span's
   title), so every header in a row is the same height and the images under them line up. */
.sck-card__author {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sck-card__media {
	position: relative;
	display: block;
}

.sck-card__media img,
.sck-embed {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sck-radius);
}

.sck-card__media img {
	object-fit: cover;
}

/* Image shape. Without one of these classes an image keeps its own proportions,
   and its width and height attributes reserve the space before it loads. */
.sck-ratio-square .sck-card__media img {
	aspect-ratio: 1;
}

.sck-ratio-portrait .sck-card__media img {
	aspect-ratio: 4 / 5;
}

.sck-ratio-landscape .sck-card__media img {
	aspect-ratio: 16 / 9;
}

/* Image fit, for a feed with a shape. The feed's "contain" shows every image whole inside the
   shape, on a tinted band, so none is blown up; with the default, an image whose proportions are
   far from the shape, such as the wide banner a shared link brings, is shown so on its own. The
   band takes a tint of the text color, or what a theme sets in --sck-media-bg. */
.sck-fit-contain .sck-card__media img,
.sck-card__media--fit img {
	object-fit: contain;
	background-color: var(--sck-media-bg, color-mix(in srgb, currentColor 6%, transparent));
}

.sck-embed {
	aspect-ratio: 16 / 9;
	border: 0;
}

/* A play icon sits on a photo, so it cannot inherit the text color, and the photo
   can be any color, white included. The icon is white on a dark disc of its own,
   which keeps it at 4.7:1 or more on any thumbnail: these two are the only fixed
   colors of the feed itself. */
.sck-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	pointer-events: none;
}

/* Icon and padding together are 3em across, the size the icon alone used to be. */
.sck-play .sck-icon {
	box-sizing: content-box;
	width: 1.75em;
	height: 1.75em;
	padding: 0.625em;
	border-radius: 50%;
	background: rgb(0 0 0 / 55%);
}

/* A custom play image is an <img> inside the media box: shown whole, as its owner drew it, without the
   disc. A dark edge keeps a light image visible on a light thumbnail. */
.sck-play .sck-icon--custom {
	width: 3em;
	height: 3em;
	padding: 0;
	border-radius: 0;
	background: none;
	filter: drop-shadow(0 0 1px rgb(0 0 0 / 80%)) drop-shadow(0 0 0.15em rgb(0 0 0 / 50%));
	object-fit: contain;
}

.sck-card__title,
.sck-card__text {
	margin: 0;
	overflow-wrap: anywhere;
}

.sck-card__text {
	display: -webkit-box;
	overflow: hidden;
	white-space: pre-line;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--sck-lines);
	line-clamp: var(--sck-lines);
}

/* A card without an image opens no dialog: it shows all the text it was given. */
.sck-item--no-media .sck-card__text {
	-webkit-line-clamp: none;
	line-clamp: none;
}

/* A card too narrow for the counts and the share button side by side, as in a carousel
   of three on a phone, puts the button on a line of its own instead of over the counts. */
.sck-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin-block-start: auto;
}

.socialkit .sck-card__stats {
	flex: 1 1 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sck-stat {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

/* A 44px target with the icon centred. The hidden button below keeps this same box. */
.sck-share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	margin-inline-start: auto;
	padding: 0.25em;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* Hidden until the script confirms the browser can share: it keeps its box so revealing it moves nothing.
   The display value also outweighs a theme's own [hidden] rule. */
.sck-share[hidden] {
	display: inline-flex;
	visibility: hidden;
}

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

.sck-more {
	display: block;
	width: fit-content;
	margin: var(--sck-gap) auto 0;
}

/* The link is styled as the theme's button, whose text color may match the page:
   the ring goes inside, where the text color always contrasts with the button. */
.socialkit .sck-more:focus-visible {
	outline-offset: -4px;
}

.sck-notice {
	padding: 0.75em 1em;
	border: 1px dashed currentColor;
}

.sck-share[data-sck-copied]::after {
	content: attr(data-sck-copied);
	margin-inline-start: 0.35em;
}

/* Post dialog. */

/* The page behind an open dialog does not scroll; the gutter stays, so nothing shifts. */
html:has(.sck-modal[open]) {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* The dialog is the whole viewport and has no surface of its own: it lays out the
   panel that holds the post and the controls around it. The controls sit on the
   backdrop, so, like the play icon on a photo, they cannot inherit a color: the
   backdrop and its white controls are the only other fixed colors in this file. */
.sck-modal {
	box-sizing: border-box;
	inset: 0;
	inline-size: 100vw;
	max-inline-size: none;
	block-size: 100vh;
	block-size: 100dvh;
	max-block-size: none;
	margin: 0;
	padding: 0.75rem;
	border: 0;
	background: none;
	color: #fff;
	overflow: hidden;
}

/* Small screens: Close above the post, the arrows and the count below it. The post
   takes the room between them, so the arrows stay under the thumb whatever its height. */
.sck-modal[open] {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"close close close"
		"panel panel panel"
		"previous count next";
	align-content: center;
	align-items: center;
	gap: 0.5rem;
}

/* Focus lands on the dialog when it opens, so a screen reader names the post and
   no control looks pressed. It is a container, not a control: its own ring would
   outline the whole screen. Every control inside keeps its ring. */
.sck-modal:focus {
	outline: none;
}

.sck-modal::backdrop {
	background: rgb(0 0 0 / 75%);
}

/* 44px targets, like the share button. The carousel's arrows are the same buttons. */
.sck-modal__button,
.sck-carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 0.25em;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.sck-modal__button .sck-icon,
.sck-carousel__button .sck-icon {
	width: 1.75em;
	height: 1.75em;
}

/* At either end of the feed the dialog's arrow has nowhere to go: it keeps its box and is not shown. */
.sck-modal__button:disabled {
	visibility: hidden;
}

.sck-modal__close {
	grid-area: close;
	justify-self: end;
}

.sck-modal__previous {
	grid-area: previous;
	justify-self: end;
}

.sck-modal__next {
	grid-area: next;
	justify-self: start;
}

/* The arrows point the way the feed runs. */
[dir="rtl"] .sck-modal__previous .sck-icon,
[dir="rtl"] .sck-modal__next .sck-icon,
[dir="rtl"] .sck-carousel__button .sck-icon {
	transform: scaleX(-1);
}

.sck-modal__count {
	grid-area: count;
	margin: 0;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* The panel. Drawn above the page, it cannot inherit the page's background: it takes
   the theme's base and contrast colors where the theme declares them, the system's
   otherwise; --sck-modal-bg, --sck-modal-color and --sck-modal-radius override them. */
.sck-modal__content {
	grid-area: panel;
	box-sizing: border-box;
	align-self: center;
	justify-self: center;
	inline-size: 100%;
	max-inline-size: 40rem;
	max-block-size: 100%;
	min-block-size: 8em;
	border-radius: var(--sck-modal-radius, 0.75rem);
	background: var(--sck-modal-bg, var(--wp--preset--color--base, Canvas));
	color: var(--sck-modal-color, var(--wp--preset--color--contrast, CanvasText));
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.sck-modal__message {
	margin: 0;
	padding: 3em 1.25em;
	text-align: center;
}

/* The post: its media on a stage, then who posted it, the text, and the way on. */
.sck-detail {
	display: flex;
	flex-direction: column;
}

/* The stage is tinted with the text color, so it suits a light and a dark theme alike. */
.sck-detail__media {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.sck-detail .sck-card__media {
	inline-size: 100%;
}

/* The whole image, never cropped, never taller than the room it has. A video file's player takes the image's place and its shape. */
.sck-detail .sck-card__media img,
.sck-detail .sck-video {
	width: auto;
	max-width: 100%;
	max-height: 60vh;
	max-height: 60dvh;
	margin-inline: auto;
	border-radius: 0;
	object-fit: contain;
}

.sck-detail .sck-video {
	display: block;
	height: auto;
}

/* A video's poster fills the stage's width, the size the player takes when it starts, so starting it moves nothing. */
.sck-detail .sck-card__media[data-sck-video] img {
	width: 100%;
}

.sck-detail .sck-embed {
	border-radius: 0;
}

.sck-detail__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Hairlines in a share of the text color. Where color-mix is unknown they are the text color itself.
   The dialog paints its own surface: no band behind the header, and the whole account name. */
.sck-detail .sck-card__header {
	padding: 1em 1.25em;
	border-radius: 0;
	border-block-end: 1px solid currentColor;
	border-block-end-color: color-mix(in srgb, currentColor 15%, transparent);
	background-color: transparent;
}

.sck-detail .sck-card__author {
	white-space: normal;
}

.sck-detail__scroll {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	padding: 1.25em;
}

.sck-detail__footer {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding: 1em 1.25em;
	border-block-start: 1px solid currentColor;
	border-block-start-color: color-mix(in srgb, currentColor 15%, transparent);
}

.sck-detail .sck-card__footer {
	margin-block-start: 0;
}

/* The full text: no line clamp here. */
.sck-detail .sck-card__text {
	display: block;
	overflow: visible;
	-webkit-line-clamp: none;
	line-clamp: none;
}

/* Wide screens: the arrows beside the post and Close above its far corner, all outside
   the panel. The panel has one height for every post, so moving through the feed moves
   nothing: the media fills a stage on one side, and on the other the account stays at
   the top, the way on at the bottom, and only the text between them scrolls. */
@media (min-width: 60em) {
	.sck-modal {
		padding: 1.5rem;
	}

	.sck-modal[open] {
		grid-template-columns: auto minmax(0, 72rem) auto;
		grid-template-rows: auto minmax(0, auto) auto;
		grid-template-areas:
			". . close"
			"previous panel next"
			". count .";
		justify-content: center;
		column-gap: 0.75rem;
	}

	.sck-modal__close,
	.sck-modal__previous,
	.sck-modal__next {
		justify-self: center;
	}

	.sck-modal__button .sck-icon {
		width: 2.25em;
		height: 2.25em;
	}

	.sck-modal__content {
		max-inline-size: none;
		block-size: min(44rem, calc(100vh - 11rem));
		block-size: min(44rem, calc(100dvh - 11rem));
		overflow: hidden;
	}

	.sck-detail {
		block-size: 100%;
	}

	.sck-detail--has-media {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
		grid-template-rows: minmax(0, 1fr);
	}

	.sck-detail__media,
	.sck-detail__body {
		min-block-size: 0;
	}

	.sck-detail .sck-card__media {
		display: grid;
		place-items: center;
		block-size: 100%;
	}

	/* As tall as the panel at most: the same measure, since a percentage has nothing definite to refer to here. */
	.sck-detail .sck-card__media img,
	.sck-detail .sck-video {
		max-height: min(44rem, calc(100vh - 11rem));
		max-height: min(44rem, calc(100dvh - 11rem));
	}

	.sck-detail__scroll {
		flex: 1 1 auto;
		min-block-size: 0;
		overflow: auto;
		overscroll-behavior: contain;
	}

	/* A YouTube post is its video, so it is laid out like a watch page: the video
	   across the top, then the channel, the description and the way on, in one
	   column that scrolls as a whole. The panel is as wide as a 16:9 video that
	   takes about seven tenths of its height, so the description starts in view. */
	.sck-modal:has(.sck-detail--youtube)[open] {
		grid-template-columns: auto minmax(0, calc(min(44rem, 100dvh - 11rem) * 1.244)) auto;
	}

	.sck-modal__content:has(.sck-detail--youtube) {
		overflow: auto;
	}

	.sck-detail--youtube.sck-detail--has-media {
		display: flex;
		block-size: auto;
		min-block-size: 100%;
	}

	.sck-detail--youtube .sck-detail__media {
		flex: none;
	}

	.sck-detail--youtube .sck-card__media {
		display: block;
		block-size: auto;
	}

	.sck-detail--youtube .sck-card__media img {
		max-height: none;
	}

	/* Nothing scrolls on its own here; the text takes the room that is left, which keeps the way on at the bottom. */
	.sck-detail--youtube .sck-detail__body {
		flex: 1 0 auto;
	}

	.sck-detail--youtube .sck-detail__scroll {
		flex: 1 0 auto;
		overflow: visible;
	}
}

/* Playlist. */

/* Its layout follows its own width. Only the playlist is a container: inline-size
   containment would collapse a feed placed in a shrink-to-fit context. */
.sck-playlist {
	container-type: inline-size;
}

.sck-playlist__layout {
	display: grid;
	gap: var(--sck-gap);
}

.sck-playlist__player {
	min-width: 0;
}

.sck-playlist__poster {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
}

.sck-playlist__poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--sck-radius);
}

/* A poster without a photo: the icon takes the text color and sits in a frame. */
.sck-playlist__poster--empty {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.5em;
	border: 1px solid currentColor;
	border-radius: var(--sck-radius);
}

.sck-playlist__poster--empty .sck-play {
	position: static;
	color: inherit;
}

.sck-playlist__poster--empty .sck-play .sck-icon {
	width: 3em;
	height: 3em;
	padding: 0;
	background: none;
}

.sck-playlist > .sck-heading {
	margin-block-end: 0.5em;
}

.sck-playlist__entry img {
	display: block;
	flex: 0 0 6em;
	width: 6em;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--sck-radius);
}

.sck-playlist__aside {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sck-playlist__count {
	margin: 0 0 0.5em;
}

/* By default the list sits below the player and scrolls within its own height. */
.socialkit .sck-playlist__list {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	max-height: 24em;
	margin: 0;
	padding: 0.25em;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

.sck-playlist__entry {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 0.75em;
	padding: 0.25em;
}

/* The title stays beside its thumbnail down to 6em of room, which the list at its
   narrowest beside the player (16em, less its scrollbar) still has. */
.sck-playlist__title {
	flex: 1 1 6em;
	min-width: 0;
	overflow-wrap: anywhere;
}

.sck-playlist__entry[aria-current="true"] {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* Inside the entry, so the scrolling list does not clip it, and twice as thick as
   the ring of the current entry, so focus on that entry still shows. */
.socialkit .sck-playlist__entry:focus-visible {
	outline-width: 4px;
	outline-offset: -4px;
}

/* In a wide enough playlist the list moves beside the player, takes the player's
   height and scrolls inside it, never shorter than a few entries. The width is
   counted in the playlist's own em, as the list's is: 45em leaves the player at
   least 28em. With large text that is a wide box (990px at 22px), so the
   threshold is no higher than the layout needs. */
@container (min-width: 45em) {
	.sck-playlist--list-right .sck-playlist__layout {
		grid-template-columns: minmax(0, 2fr) minmax(16em, 1fr);
	}

	.sck-playlist--list-right .sck-playlist__scroll {
		position: relative;
		flex: 1;
		min-height: 12em;
	}

	.sck-playlist--list-right .sck-playlist__list {
		position: absolute;
		inset: 0;
		max-height: none;
	}
}