/* A social post's card (includes/embeds.php) and, after the reader accepts, the platform's embed in
   its place (assets/csn-embeds.js). Set like a cutting pinned into the page: a paper slip with a
   dark top rule, the platform's name as a small label, the account, the date, the words. No logos,
   no pictures from the platforms. The theme's colours when it has them, else their own; dark mode
   follows the reader's system. Fits 375 px; a video's box is the player's size from the start. */

.csn-post {
	--cp-card: var(--card, #fffdf8);
	--cp-paper: var(--paper-2, #ede6d6);
	--cp-ink: var(--ink, #17191f);
	--cp-ink-2: var(--ink-2, #424753);
	--cp-ink-3: var(--ink-3, #626774);
	--cp-line: var(--line, #ddd4c2);
	--cp-link: var(--acc, var(--blue, #2a5aa6));
	margin: 28px 0;
	padding: 14px 14px 12px;
	max-width: 640px;
	background: var(--cp-card);
	color: var(--cp-ink);
	border: 1px solid var(--cp-line);
	border-top: 3px solid var(--cp-ink);
	border-radius: 4px;
	font: 16px/1.5 var(--body, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
	overflow-wrap: anywhere;
}
@media (prefers-color-scheme: dark) {
	.csn-post {
		--cp-card: var(--card, #22262e);
		--cp-paper: var(--paper-2, #1d2027);
		--cp-ink: var(--ink, #efebe2);
		--cp-ink-2: var(--ink-2, #c9c4b8);
		--cp-ink-3: var(--ink-3, #a29d92);
		--cp-line: var(--line, #353a45);
		--cp-link: var(--acc, var(--blue, #8db0ec));
	}
}
@media (min-width: 560px) { .csn-post { padding: 16px 18px 14px; } }
.csn-post p { margin: 0; }
.csn-post a { color: var(--cp-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* The platform and the date on the first line, the account under them; on a wide card all on one line. */
.csn-post__head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-size: 15px; line-height: 1.35; color: var(--cp-ink-2); }
.csn-post__platform { justify-self: start; font: 700 12px/1 var(--head, var(--body, system-ui, sans-serif)); letter-spacing: .08em; text-transform: uppercase; color: var(--cp-card); background: var(--cp-ink); padding: 4px 6px 3px; border-radius: 2px; }
.csn-post__date { grid-column: 2; grid-row: 1; justify-self: end; color: var(--cp-ink-3); white-space: nowrap; }
.csn-post__who { grid-column: 1 / -1; min-width: 0; }
.csn-post__account { color: var(--cp-ink); font-weight: 700; }
.csn-post__handle { color: var(--cp-ink-3); }
@media (min-width: 560px) {
	.csn-post__head { grid-template-columns: auto 1fr auto; }
	.csn-post__who { grid-column: 2; grid-row: 1; }
	.csn-post__date { grid-column: 3; }
}

/* The words. */
.csn-post__title { font: 700 19px/1.3 var(--head, var(--body, system-ui, sans-serif)); margin: 0 0 12px; text-wrap: pretty; }
.csn-post__text { margin: 0 0 12px; padding: 0 0 0 12px; border-left: 3px solid var(--cp-line); font-size: 17px; line-height: 1.55; }
.csn-post__text p + p { margin-top: .6em; }

/* The embed's place. A video's is the player's own shape from the start. */
.csn-post__slot { position: relative; }
.csn-post__slot--wide, .csn-post__slot--tall { margin: 0 0 12px; background: var(--cp-paper); border: 1px solid var(--cp-line); border-radius: 3px; overflow: hidden; }
.csn-post__slot--wide { aspect-ratio: 16 / 9; }
.csn-post__slot--tall { aspect-ratio: 9 / 16; max-width: 300px; margin-left: auto; margin-right: auto; }
.csn-post__slot iframe { display: block; width: 100%; border: 0; }
.csn-post__slot--wide iframe, .csn-post__slot--tall iframe { position: absolute; inset: 0; height: 100%; }
.csn-post__screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; text-align: center; }
.csn-post__screen-say { font-size: 15px; color: var(--cp-ink-2); }

/* The note, the controls and the link. */
.csn-post__foot { border-top: 1px dashed var(--cp-line); padding-top: 10px; }
.csn-post__note { font-size: 14px; line-height: 1.45; color: var(--cp-ink-2); margin: 0 0 8px; }
.csn-post__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 44px; font-size: 15px; }
.csn-post__link { font-weight: 600; }
.csn-post__load, .csn-post__undo {
	min-height: 44px;
	padding: 8px 14px;
	font: 700 15px/1.2 var(--head, var(--body, system-ui, sans-serif));
	color: var(--cp-ink);
	background: var(--cp-card);
	border: 2px solid var(--cp-ink);
	border-radius: 4px;
	cursor: pointer;
}
.csn-post__undo { min-height: 40px; padding: 6px 12px; font-weight: 600; border-width: 1px; }
.csn-post__load:hover, .csn-post__undo:hover { background: var(--cp-paper); }
.csn-post__load:focus-visible, .csn-post__undo:focus-visible { outline: 3px solid var(--cp-link); outline-offset: 2px; }
.csn-post [hidden] { display: none; }

/* A post (not a video) once loaded: the platform shows the words itself, in the same place. */
.csn-post:not(.csn-post--video):not(.csn-post--facebook).is-on .csn-post__head,
.csn-post:not(.csn-post--video):not(.csn-post--facebook).is-on .csn-post__body { display: none; }
.csn-post--facebook.is-on .csn-post__slot { margin: 0 0 12px; }
.csn-post:focus { outline: none; }
.csn-post:focus-visible { outline: 3px solid var(--cp-link); outline-offset: 2px; }
.csn-post:not(.csn-post--video):not(.is-on) .csn-post__slot { height: 0; overflow: hidden; }
.csn-post__slot > .twitter-tweet { margin: 0 auto !important; }

/* Shown only to editors: a [csn_post] whose id is not in data/posts.json. */
.csn-post-missing { padding: 10px 12px; border: 2px dashed #b0303c; color: #b0303c; font-size: 15px; }