/* entry-content.css — the styles for a post's BODY.
 *
 * Generated from the <style> of the old astro site's entry.astro (and the bits
 * of global.css/preflight.css that content relies on). Every rule is written
 * twice: once under .e-content, for posts rendered straight into the page, and
 * once under :host, for posts rendered in a shadow root that links this file.
 * Custom properties (--padding-inline, --mynt, --space-*, ...) come from
 * site.css on :root / article.h-entry and inherit into the shadow root.
 */

@keyframes hue-cycle {
	0% { filter: hue-rotate(1deg); }
	50% { filter: hue-rotate(179deg); }
	100% { filter: hue-rotate(359deg); }
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* the root: typography and variables every post body inherits */

:host,
.e-content {
	--escape-inline: calc(-1 * var(--padding-inline, 0.75em));
	--full-width: calc(100% + var(--padding-inline, 0.75em) * 2);
	--quote-left-border-line: var(--mynt);
	--quote-fill: oklch(from var(--mynt) l c h / 0.1);
	--quote-family: var(--entry-family);
	--quote-line: oklch(from var(--mynt) 0.2 c h);
	line-height: 1.3;
	font-weight: 380;
	letter-spacing: -0.1px;
}

/* base element styles (global.css / preflight.css) — repeated here so a
 * shadow root, which the page's global styles can't reach, gets them too */

:host *,
:host *::before,
:host *::after,
.e-content *,
.e-content *::before,
.e-content *::after {
	box-sizing: inherit;
}

:host a,
.e-content a {
	text-decoration-skip-ink: auto;
	color: var(--link-line);
}

:host code,
:host kbd,
:host samp,
.e-content code,
.e-content kbd,
.e-content samp {
	font-family: var(--mono-family);
	font-size: 1em;
}

:host b,
:host strong,
.e-content b,
.e-content strong {
	font-weight: bolder;
}

:host small,
.e-content small {
	font-size: 80%;
}

:host sub,
:host sup,
.e-content sub,
.e-content sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

:host sub,
.e-content sub {
	bottom: -0.25em;
}

:host sup,
.e-content sup {
	top: -0.5em;
}

:host img,
:host video,
.e-content img,
.e-content video {
	height: auto;
	max-width: 100%;
}

:host iframe,
.e-content iframe {
	border: 0;
}

:host abbr[title],
.e-content abbr[title] {
	text-decoration: underline dotted;
}

:host [hidden],
.e-content [hidden] {
	display: none !important;
}

:host hr,
.e-content hr {
	position: relative;
	height: 2rem;
	border: 0;
	overflow: visible;
	&::after {
		content: "🥀";
		display: block;
		position: absolute;
		z-index: 2;
		top: 30%;
		left: 50%;
		box-shadow: 0 0 10px 15px white;
		background: white;
	}
	&.ok::after {
		content: "🆗";
	}
	&.hehe::after {
		content: "😋";
	}
	&.coolcoolcool::after {
		content: "🆒 🆒 🆒";
		margin-left: -1.25em;
	}
	&::before {
		content: "";
		width: 100%;
		height: 4px;
		background: black;
		position: absolute;
		left: 0;
		top: 50%;
	}
	&.none {
		border-bottom: 2px dashed;
		background: none;
		outline: none;
		margin: 1em 0;
		height: 0;
		&::before {
			display: none;
		}
		&::after {
			display: none;
		}
	}
}

:host .spin,
.e-content .spin {
	animation: spin 4s linear infinite;
}

/* entry.astro: .e-content */

:host pre,
.e-content pre {
	white-space: pre;
}

:host pre,
:host code,
.e-content pre,
.e-content code {
	font-size: 15px;
}

:host h1,
:host h2,
:host h3,
:host h4,
:host h5,
:host h6,
.e-content h1,
.e-content h2,
.e-content h3,
.e-content h4,
.e-content h5,
.e-content h6 {
	font-weight: 450;
	line-height: 1.2;
}

:host h1,
.e-content h1 {
	font-size: var(--font-size-2);
	margin-bottom: var(--space-2);
}

:host h1:not(:first-child),
.e-content h1:not(:first-child) {
	margin-top: var(--space-5);
}

:host h2,
.e-content h2 {
	font-size: var(--font-size-3);
	margin-bottom: var(--space-3);
}

:host h2:not(:first-child),
.e-content h2:not(:first-child) {
	margin-top: var(--space-6);
}

:host h3,
.e-content h3 {
	font-size: var(--font-size-4);
	margin-bottom: var(--space-3);
}

:host h3:not(:first-child),
.e-content h3:not(:first-child) {
	margin-top: var(--space-5);
}

:host h4,
.e-content h4 {
	font-size: var(--font-size-5);
	margin-bottom: var(--space-2);
}

:host h4:not(:first-child),
.e-content h4:not(:first-child) {
	margin-top: var(--space-5);
}

:host h5,
.e-content h5 {
	font-size: 1.125em;
	margin-bottom: var(--space-1);
}

:host h5:not(:first-child),
.e-content h5:not(:first-child) {
	margin-top: var(--space-5);
}

:host h6,
.e-content h6 {
	font-size: 1.1rem;
	margin-bottom: var(--space-2);
}

:host h6:not(:first-child),
.e-content h6:not(:first-child) {
	margin-top: var(--space-5);
}

:host ul,
:host ol,
.e-content ul,
.e-content ol {
	padding-left: 1rem;
	margin-bottom: 4px;
}

:host ol,
.e-content ol {
	list-style-type: decimal;
}

:host ol ol,
.e-content ol ol {
	list-style-type: lower-alpha;
}

:host ol ol ol,
.e-content ol ol ol {
	list-style-type: lower-roman;
}

:host ol ol ol ol,
.e-content ol ol ol ol {
	list-style-type: lower-greek;
}

:host ol ol ol ol ol,
.e-content ol ol ol ol ol {
	list-style-type: decimal;
}

:host ul,
.e-content ul {
	list-style: initial;
}

:host ul ::marker,
.e-content ul ::marker {
	padding-right: 1ch;
}

:host p,
.e-content p {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

:host li,
.e-content li {
	padding: 0;
}

:host li ul,
.e-content li ul {
	position: relative;
	background: var(--li-1);
}

:host li li ul,
.e-content li li ul {
	background: var(--li-3);
}

:host li li li ul,
.e-content li li li ul {
	background: var(--li-4);
}

:host li li li li ul,
.e-content li li li li ul {
	background: var(--li-5);
}

:host li li li li li ul,
.e-content li li li li li ul {
	background: var(--li-6);
}

/* chat */

:host .chat,
.e-content .chat {
	display: flex;
	flex-direction: column;
	font-family: system-ui, sans-serif;
	margin-block: 2rem;
	max-width: 80%;
	margin-inline: auto;
}

:host .chat * + *,
.e-content .chat * + * {
	margin-top: 1em;
}

:host chat-message,
.e-content chat-message {
	border-radius: 0.5em;
	display: block;
	max-width: 75%;
	width: auto;
	color: var(--line);
	position: relative;
	background: linear-gradient(to bottom, var(--fill-top), var(--fill-bottom));
	padding: 0.5em;
}

:host chat-message:not([name="chee"]),
.e-content chat-message:not([name="chee"]) {
	--fill-top: #f0e7e7;
	--fill-bottom: #e7e0e0;
	--line: black;
	border-bottom-left-radius: 0;
}

:host chat-message[name="chee"],
.e-content chat-message[name="chee"] {
	--fill-top: #555ff6;
	--fill-bottom: #5536f0;
	--line: white;
	align-self: end;
	border-bottom-right-radius: 0;
}

:host chat-message::after,
.e-content chat-message::after {
	content: "";
	display: block;
	position: absolute;
	box-sizing: border-box;
	height: 0;
	width: 0;
	border: 8px solid transparent;
}

:host chat-message:not([name="chee"])::after,
.e-content chat-message:not([name="chee"])::after {
	bottom: 0;
	left: -4px;
	border-right-color: var(--fill-bottom);
	border-left: 0;
	border-bottom: 0;
}

:host chat-message[name="chee"]::after,
.e-content chat-message[name="chee"]::after {
	bottom: 0;
	right: -4px;
	border-left-color: var(--fill-bottom);
	border-right: 0;
	border-bottom: 0;
}

:host chat-message > blockquote,
.e-content chat-message > blockquote {
	background: 0;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--line);
	font-family: system-ui, sans-serif;
}

:host chat-message > blockquote > p,
.e-content chat-message > blockquote > p {
	margin: 0;
}

/* coloured blocks (:::pink etc) */

:host .computer,
.e-content .computer {
	--fill: #000;
	--line: #3f9;
}

:host .computer code,
.e-content .computer code {
	color: white;
	background: black;
}

:host .danger,
.e-content .danger {
	--fill: #cc0305;
	--line: white;
}

:host .pink,
.e-content .pink {
	--fill: #ffbdc7;
	--line: black;
}

:host .green,
.e-content .green {
	--fill: #acffdc;
	--line: black;
}

:host .black,
.e-content .black {
	--fill: black;
	--line: white;
}

:host .yellow,
.e-content .yellow {
	--fill: #fffdc7;
	--line: black;
}

:host .aqua,
.e-content .aqua {
	--fill: #e7fff4;
	--line: black;
}

:host .orange,
.e-content .orange {
	--fill: #ffcd97;
	--line: black;
}

:host .blue,
.e-content .blue {
	--fill: #6b8df7;
	--line: black;
}

:host .lb,
.e-content .lb {
	--fill: #a4e0ff;
	--line: black;
}

:host .purple,
.e-content .purple {
	--fill: #ac80f7;
	--line: black;
}

:host :is(.danger, .pink, .green, .black, .yellow, .aqua, .orange, .blue, .purple, .computer),
.e-content :is(.danger, .pink, .green, .black, .yellow, .aqua, .orange, .blue, .purple, .computer) {
	background: var(--fill);
	color: var(--line);
	border-block: 2px solid color-mix(in srgb, var(--fill) 95%, var(--line));
	width: var(--full-width);
	margin: 1em var(--escape-inline);
	padding: 0.5em var(--padding-inline);
}

/* figures */

:host figure,
.e-content figure {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin: 0;
}

:host figcaption,
.e-content figcaption {
	text-align: center;
	margin: 2px auto;
	padding: 0.5ch 1ex;
	font-size: 0.8em;
	border: 1px solid;
	max-width: 70ex;
}

/* full-width media */

:host > figure,
:host > video,
:host > p > img,
.e-content > figure,
.e-content > video,
.e-content > p > img {
	margin-left: var(--escape-inline);
	margin-right: var(--escape-inline);
	min-width: var(--full-width);
	display: flex;
}

/* in-columns */

:host in-columns p:only-child,
:host in-columns:not(:has(p:only-child)),
.e-content in-columns p:only-child,
.e-content in-columns:not(:has(p:only-child)) {
	display: grid;
	grid-auto-flow: column;
	width: 100%;
	margin-inline: var(--escape-inline);
	min-width: var(--full-width);
}

:host in-columns > p,
.e-content in-columns > p {
	margin: 0;
}

:host in-columns p:only-child img,
:host in-columns:not(:has(p:only-child)) img,
.e-content in-columns p:only-child img,
.e-content in-columns:not(:has(p:only-child)) img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

:host in-columns > figure > p,
.e-content in-columns > figure > p {
	height: 100%;
}

/* inline images (:icon:) */

:host .i,
.e-content .i {
	display: inline-block;
	vertical-align: middle;
}

:host .i img,
.e-content .i img {
	image-rendering: pixelated;
}

/* utilities */

:host .center,
.e-content .center {
	text-align: center;
}

:host .big,
.e-content .big {
	font-size: 3em;
}

:host .soft,
.e-content .soft {
	color: var(--shaded-line);
}

:host .hue-cycle,
.e-content .hue-cycle {
	animation: hue-cycle 4s linear infinite;
}

/* tables */

:host table,
.e-content table {
	border-collapse: collapse;
	border: 1px solid;
	border-left: 0;
	border-right: 0;
	margin-left: -1px;
	margin-right: -1px;
}

:host td,
.e-content td {
	border: 1px solid;
}

/* blockquote */

:host blockquote,
.e-content blockquote {
	box-sizing: border-box;
	color: var(--quote-line);
	font-family: var(--quote-family);
	line-height: 1.2;
	margin-block: 0.75rem;
	margin-inline: 0;
	padding: 0.25em 1.5em 0.125em 0.75em;
	position: relative;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
	border-top-right-radius: 1em;
	border-bottom-right-radius: 1em;
	border-left: 0.24em solid var(--quote-left-border-line);
	background: var(--quote-fill);
}

:host blockquote a,
.e-content blockquote a {
	color: black;
	text-decoration: underline;
}

:host blockquote > p,
.e-content blockquote > p {
	margin: 0.5em;
	padding: 0;
}

/* media margin collapse */

:host p:has(:is(:only-child):is(p > figure, p > canvas, p > video, p > object, p > iframe, p > picture, p > in-columns, p > photo-gallery, p > svg, p > img)),
.e-content p:has(:is(:only-child):is(p > figure, p > canvas, p > video, p > object, p > iframe, p > picture, p > in-columns, p > photo-gallery, p > svg, p > img)) {
	margin-top: 0;
	margin-bottom: 0;
}

/* pre code */

:host pre code,
.e-content pre code {
	white-space: pre-wrap;
}

/* full-width class */

:host .full-width,
.e-content .full-width {
	margin-inline: var(--escape-inline);
	min-width: var(--full-width);
}