/* VARIABLES */

html {
	--accent: var(--madoromi-sora);
	--visited: var(--madoromi-fuji);
	--background: linear-gradient(in oklab, #fff, var(--madoromi-kami) 100%);
	--text: #000;
	--code-bg: #132227ee; /* natsu-yoru --madoromi-kami: #132227; */
}
html.dark {
	--background: linear-gradient(in oklab, #000, var(--madoromi-kami) 100%);
	--text: #fff;
	--code-bg: #fff1;
}

html.light .toggle-lights::after {
	content: " (current: light)";
}
html.dark .toggle-lights::after {
	content: " (current: dark)";
}
html.system .toggle-lights::after {
	content: " (current: system)";
}

/* BASE ELEMENTS */
html {
	width: 100%;
	background: var(--background);
	background-attachment: fixed;
	color: var(--text);
}

body {
	max-width: 720px;
	margin: auto;
	padding: 1em 1em;
	font-family: "Libertinus Serif", serif;
}

footer {
	margin-top: 1em;
}

img,
video,
iframe {
	max-width: 100%;
	border-radius: 0.5em;
}

figcaption {
	text-align: center;
	font-style: italic;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	display: flex;
	gap: 0.5em;
	font-family: "Libertinus Serif", serif;
	font-weight: bold;
	margin: 0.5em, 0;
	font-variant: small-caps;
	text-transform: lowercase;
}

code {
	font-family: "CommitMono", monospace;
	font-size: 0.8em;
	background-color: var(--code-bg);
	border-radius: 0.25em;
	padding: 0.125em 0.5em;
	color: #fff;
}
:not(pre):has(code) code {
	background-color: transparent;
	color: var(--text);
	padding: 0;
}

pre code {
	padding: 1em;
	max-width: 100%;
	display: inline-block;
	overflow: scroll;
	border-radius: 1em;
}
pre {
	display: flex;
	justify-content: center;
}

/* TYPST */

section[role="doc-endnotes"] ol {
	padding-left: 0;
}

section[role="doc-endnotes"] sup {
	padding-right: 1em;
}

section[role="doc-bibliography"] li {
	margin-bottom: 1em;
}

a:visited {
	color: var(--visited);
}
a {
	color: var(--accent);
}

math {
	font-family: "Libertinus Math", math;
}
math[display="block"] {
	margin: 1.5em;
	font-size: 1.125em;
}
math:not([display="block"]) {
	white-space: nowrap;
}

aside.callout {
	background-color: color-mix(in oklab, var(--madoromi-nijimi0), #0000);
	padding: 1em;
	border-radius: 1em;
}

/* CLASSES */

.columns {
	display: grid;
	grid-template-columns: 50% 50%;
	align-items: center;
	padding: 0 2em;
}

details.finished ::marker {
	content: "⏹ ";
}
details.queue ::marker {
	content: "⏭ ";
}

.post-navigation {
	margin-top: 1em;
}

.recent-posts h4 {
	margin-bottom: 0;
}

.youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.carousel-wrap {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
}

.carousel-wrap button {
	border: none;
	font-size: 2em;
	background: none;
	cursor: pointer;
	color: var(--text);
}

.carousel {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	gap: 1em;
	padding: 0;
	margin: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-marker-group: after;
}

.carousel li {
	flex: 0 0 100%;
	list-style: none;
	scroll-snap-align: center;
}

.carousel li img {
	width: 100%;
}

/* Progressive enhancement: dots where supported. */
.carousel::scroll-marker-group {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	justify-content: center;
	gap: 0.5em;
	margin: 0.5em 0em;
}

.carousel li::scroll-marker {
	content: "";
	width: 0.6em;
	height: 0.6em;
	border: 1px solid var(--accent);
	border-radius: 50%;
}

.carousel li::scroll-marker:target-current {
	background: var(--accent);
}

.index {
	display: grid;
	grid-template-areas: "time name description";
	gap: 1em;
	grid-template-columns: max-content 1fr 1fr;
}

.bsky-comments ul {
	padding-left: 0.5rem;
	border-left: 1px solid;
}

.bsky-comments li {
	margin: 0.75rem 0;
}

.bsky-comments li::marker {
	content: none;
}

.bsky-comments p {
	margin: 0;
}

.bsky-comments .reply-row {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.bsky-comments .reply-avatar {
	width: 2.5rem;
	height: 2.5rem;
}

.header h1 p {
	margin: 0;
}

.dark .portal {
	background: linear-gradient(var(--madoromi-nijimi0), var(--madoromi-nijimi2));
	background-attachment: fixed;
}

.portal {
	border-radius: 0.5em;
	background: linear-gradient(var(--madoromi-kami), var(--madoromi-chitsu));
	padding: 1em;
	margin: 0.5em;
	background-attachment: fixed;
}

.portal h3 {
    margin: 0;
}

summary {
	background: color-mix(in oklab, black, transparent 90%);
	border-radius: 0.25em;
	padding: 0.25em 0.5em;
}

details[open] {
	background: color-mix(in oklab, black, transparent 95%);
	border-radius: 0.5em;
}
details {
    margin-top: 1em;
    display: flex;
    flex-direction: column;
}
/* SIZE DEPENDENT */

@media (width >= 40em) {
	nav.post-navigation {
		display: flex;
		justify-content: space-between;
	}
	nav.post-navigation * {
		flex: 1;
	}
	nav.post-navigation .previous {
		text-align: left;
	}
	nav.post-navigation .next {
		text-align: right;
	}
	nav.post-navigation div {
		text-align: center;
	}

	nav.recent-posts {
		display: flex;
	}
	nav.recent-posts section {
		flex: 1;
	}
	nav.recent-posts h4 {
		margin-top: 0;
		margin-bottom: 1em;
	}
}