/* Copyright 2025 Shota FUJI <pockawoooh@gmail.com>
 * SPDX-License-Identifier: MIT
 */

@font-face {
	font-family: "Inter";
	src:
		local("InterVariable"),
		local("Inter var"),
		local("Inter");
}

:root {
	--font-content: Helvetica, sans-serif;
	--font-ui: Inter, system-ui, sans-serif;
	--font-mono: ui-monospace, monospace;

	--font-md: 1rem;
	--font-sm: calc(var(--font-md) * 0.9);
	--font-xs: calc(var(--font-md) * 0.7);
	--font-lg: calc(var(--font-md) * 1.2);
	--font-xl: calc(var(--font-md) * 1.5);

	--font-regular: 400;
	--font-thick: 600;
	--font-chonk: 800;
	--font-thin: 300;

	--color-bg: var(--uchu-yang);
	--color-bg-hover: var(--uchu-yin-1);
	--color-fg: var(--uchu-yin-9);
	--color-fg-weak: var(--uchu-yin-7);
	--color-fg-subtle: var(--uchu-yin-5);
	--color-link: var(--uchu-blue-8);
	--color-decoration: var(--uchu-blue-6);
	--color-shadow: oklch(var(--uchu-yin-raw) / 5%);
	--color-border-subtle: oklch(var(--uchu-yin-3-raw) / 20%);
	--color-border-normal: oklch(var(--uchu-yin-3-raw) / 50%);
	--color-border-strong: oklch(var(--uchu-yin-3-raw) / 80%);
	--color-backdrop: oklch(var(--uchu-yang-raw) / 90%);

	/* Plastic ratio */
	--space-scale: 1.324717957;
	--space-md: 8px;
	--space-sm: calc(var(--space-md) / var(--space-scale));
	--space-xs: calc(var(--space-sm) / var(--space-scale));
	--space-xxs: calc(var(--space-xs) / var(--space-scale));
	--space-lg: calc(var(--space-md) * var(--space-scale));
	--space-xl: calc(var(--space-lg) * var(--space-scale));
	--space-xxl: calc(var(--space-xl) * var(--space-scale));
	--space-xxxl: calc(var(--space-xxl) * var(--space-scale));

	--radii-sm: 3px;
	--radii-md: 6px;
}
:root[data-theme-color="purple"] {
	--color-link: var(--uchu-purple-8);
	--color-decoration: var(--uchu-purple-6);
}
:root[data-theme-color="pink"] {
	--color-link: var(--uchu-pink-9);
	--color-decoration: var(--uchu-pink-6);
}
:root[data-theme-color="red"] {
	--color-link: var(--uchu-red-8);
	--color-decoration: var(--uchu-red-6);
}
:root[data-theme-color="orange"] {
	--color-link: var(--uchu-orange-9);
	--color-decoration: var(--uchu-orange-6);
}
:root[data-theme-color="yellow"] {
	--color-link: var(--uchu-yellow-9);
	--color-decoration: var(--uchu-yellow-6);
}
:root[data-theme-color="green"] {
	--color-link: var(--uchu-green-9);
	--color-decoration: var(--uchu-green-6);
}
:root[data-theme-color="gray"] {
	--color-link: var(--uchu-yin-7);
	--color-decoration: var(--uchu-gray-6);
}
@supports (color: color-mix(in oklab, var(--uchu-pink-6) 50%, var(--color-fg) 40%)) {
	:root[data-theme-color="pink"] {
		--color-link: color-mix(in oklab, var(--uchu-pink-6) 60%, var(--color-fg) 40%);
	}
	:root[data-theme-color="yellow"] {
		--color-link: color-mix(in oklab, var(--uchu-yellow-5) 45%, var(--color-fg) 55%);
	}
}

@media (prefers-contrast: more) {
	:root {
		--color-fg: var(--uchu-yin);
		--color-fg-weak: var(--uchu-yin-9);
		--color-fg-subtle: var(--uchu-yin-8);
		--color-link: var(--uchu-blue-9);
	}
	:root[data-theme-color="purple"] {
		--color-link: var(--uchu-purple-9);
	}
	:root[data-theme-color="red"] {
		--color-link: var(--uchu-red-9);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: var(--uchu-yin-9);
		--color-bg-hover: var(--uchu-yin-8);
		--color-fg: var(--uchu-yang);
		--color-fg-weak: var(--uchu-yin-1);
		--color-fg-subtle: var(--uchu-yin-3);
		--color-link: var(--uchu-blue-2);
		--color-decoration: var(--uchu-blue-4);
		--color-backdrop: oklch(var(--uchu-yin-9-raw) / 90%);
	}
	:root[data-theme-color="purple"] {
		--color-link: var(--uchu-purple-2);
		--color-decoration: var(--uchu-purple-4);
	}
	:root[data-theme-color="pink"] {
		--color-link: var(--uchu-pink-3);
		--color-decoration: var(--uchu-pink-4);
	}
	:root[data-theme-color="red"] {
		--color-link: var(--uchu-red-2);
		--color-decoration: var(--uchu-red-4);
	}
	:root[data-theme-color="orange"] {
		--color-link: var(--uchu-orange-2);
		--color-decoration: var(--uchu-orange-4);
	}
	:root[data-theme-color="yellow"] {
		--color-link: var(--uchu-yellow-2);
		--color-decoration: var(--uchu-yellow-4);
	}
	:root[data-theme-color="green"] {
		--color-link: var(--uchu-green-2);
		--color-decoration: var(--uchu-green-4);
	}
	:root[data-theme-color="gray"] {
		--color-link: var(--uchu-gray-2);
		--color-decoration: var(--uchu-gray-4);
	}
}

@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
	:root {
		--color-bg: var(--uchu-yin);
		--color-fg-subtle: var(--uchu-yin-2);
		--color-link: var(--uchu-blue-1);
	}
	:root[data-theme-color="purple"] {
		--color-link: var(--uchu-purple-1);
	}
	:root[data-theme-color="pink"] {
		--color-link: var(--uchu-pink-1);
	}
	:root[data-theme-color="red"] {
		--color-link: var(--uchu-red-1);
	}
	:root[data-theme-color="orange"] {
		--color-link: var(--uchu-orange-1);
	}
	:root[data-theme-color="yellow"] {
		--color-link: var(--uchu-yellow-1);
	}
	:root[data-theme-color="green"] {
		--color-link: var(--uchu-green-1);
	}
	:root[data-theme-color="gray"] {
		--color-link: var(--uchu-gray-1);
	}
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	font-family: var(--font-content);
	font-size: var(--font-md);
	font-weight: var(--font-regular);
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: min-content minmax(0, 1fr) min-content min-content;
	grid-template-areas:
		"header"
		"main"
		"aside"
		"footer";
	align-content: start;
	gap: var(--space-lg) 0;
	padding: 0;
	margin: 0;
	width: 100vw;
	min-height: 100dvh;
	tab-size: 4;

	background-color: var(--color-bg);
	color: var(--color-fg);
	overflow-x: hidden;
	overflow-y: auto;
}

:where(button) {
	font: inherit;
	font-family: var(--font-ui);
	border: 1px solid var(--color-link);
	padding: 0.125em 0.5em;

	background: var(--color-bg);
	background: linear-gradient(to bottom, var(--color-bg), hsl(from var(--color-link) h s l / 3%));
	border-radius: var(--radii-sm);
	box-shadow: none;
	color: var(--color-link);
	outline: none;
}
:where(button:hover:not(:active), button:focus-visible) {
	background: var(--color-link);
	color: var(--color-bg);
}
:where(button:focus-visible) {
	outline: 1px solid var(--color-fg);
}
@supports (color: hsl(from var(--color-link) h s l / 50%)) {
	:where(button:focus-visible) {
		box-shadow: 0 0 0 3px hsl(from var(--color-link) h s l / 50%);
		outline: none;
	}
}

:where(select) {
	font-size: var(--font-md);
	margin: 0;
	padding: var(--space-xxs) calc(0.25em + var(--space-xs));
	border: 1px solid var(--color-border-strong);

	background: var(--color-bg);
	border-radius: var(--radii-sm);
	color: var(--color-fg);
}
:where(select:hover) {
	background-color: var(--color-bg-hover);
}

:where(a) {
	color: var(--color-link);
	text-decoration: none;
}
@media (any-hover) {
	:where(a:hover) {
		text-decoration: underline;
	}
}

.passthru {
	display: contents;
}

.header {
	grid-area: header;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-lg) var(--space-lg);
}

@media (min-height: 30rem) {
	.header {
		gap: var(--space-lg);
	}
}

.main, .aside, .footer {
	width: 100%;
	max-width: 60rem;
	margin: 0 auto;
	padding: var(--space-lg);
}

.main {
	grid-area: main;
	font-size: var(--font-md);

	overflow-x: auto;
}

.aside {
	grid-area: aside;
	font-size: var(--font-sm);
}

.footer {
	grid-area: footer;
	align-self: end;
	font-size: var(--font-xs);
	border-block-start: 1px solid var(--color-border-subtle);
	margin: 0;
	margin-block-start: var(--space-xxxl);
	padding-block-end: var(--space-xxxl);
	max-width: unset;
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content max-content;
	grid-template-areas:
		"links links links"
		". preferences poweredby";
	align-items: center;
	gap: 1em 1em;

	background-color: var(--color-bg);
	overflow-x: auto;
	text-align: end;
	z-index: 15;
}

.footer--links {
	grid-area: links;
	padding: 0;
	padding-inline-start: 1em;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 2em;
}

.footer--preferences {
	grid-area: preferences;
}

.footer--poweredby {
	grid-area: poweredby;
	margin: 0;
}

@keyframes slidein {
	from {
		transform: translateY(7px);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes fadein {
	from {
		opacity: 0%;
	}

	to {
		opacity: 100%;
	}
}

.preferences {
	font-family: var(--font-content);
	font-size: var(--font-md);
	font-weight: var(--font-regular);
	padding: var(--space-lg) var(--space-xl);
	border: 1px solid var(--color-border-normal);
	gap: 1.5em;

	background-color: var(--color-bg);
	border-radius: var(--radii-md);
	color: var(--color-fg);
	text-align: start;

	animation: 120ms 40ms both ease-out fadein, 120ms 20ms both ease-out slidein;
}
.preferences:open {
	display: flex;
	flex-direction: column;
}

.preferences::backdrop {
	background-color: var(--color-backdrop);

	animation: 120ms 0s both ease-out fadein;
}

.preferences > button {
	align-self: end;
}

.preferences--field {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: var(--space-sm);
}

.preferences--field > label {
	font-size: var(--font-sm);
	font-weight: var(--font-chonk);
}

.preferences--field > p {
	font-size: var(--font-sm);
	margin: 0;
}

.breadcrumbs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5ch;
	padding: 0;
	margin: 0;
	font-size: var(--font-sm);
}
.breadcrumbs > li {
	display: inline-flex;
}
.breadcrumbs > li + li::before {
	content: "/";
	margin-inline-end: 0.5ch;
}
.breadcrumbs a[aria-current="page"] {
	color: var(--color-fg);
}

.header-title {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs) var(--space-md);
}
.header-title--name {
	font-weight: var(--font-thick);
	font-size: var(--font-md);
}
.header-title--description {
	font-weight: var(--font-regular);
	font-size: var(--font-sm);
	margin: 0;

	color: var(--color-fg-weak);
}

@media (min-width: 40rem) {
	.header-title {
		flex-direction: row;
		align-items: center;
	}

	.header-title--description::before {
		content: "—";
		margin-inline-end: var(--space-md);

		color: var(--color-fg-subtle);
	}
}

.repo-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: center;
	margin: calc(-1 * var(--space-lg));
	margin-block-start: 0;
	border-block-start: 1px solid var(--color-border-subtle);
	font-family: var(--font-ui);
}
.repo-nav > a {
	display: inline-flex;
	padding: var(--space-md) var(--space-lg);
	line-height: 1;
	font-size: var(--font-sm);

	color: var(--color-fg-weak);
	text-decoration: none;
}

@media (pointer: fine) {
	.repo-nav > a {
		padding: var(--space-sm) var(--space-lg);
	}
}

@media (any-hover: hover) {
	.repo-nav > a:hover {
		background-color: var(--color-bg-hover);
	}
}

.commit-summary {
	padding: 0;
	margin: var(--space-xl) 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}
.commit-summary + .commit-summary {
	margin: calc(var(--space-xxl) * var(--space-scale)) 0;
}

.commit-summary--hash {
	display: inline-flex;
	align-self: flex-start;
	font-family: var(--font-mono);
}

.commit-summary--message {
	margin: 0;
	margin-block-end: var(--space-xxs);
	padding: 0;
	font-size: var(--font-md);
	line-height: 1.2;
	height: calc(1.2 * var(--font-md));
	width: 100%;
	white-space: pre;

	overflow: hidden;
	text-overflow: ellipsis;
}

.commit-summary--committer, .commit-summary--author {
	font-size: var(--font-xs);

	color: var(--color-fg-weak);
}

.object-hash {
	font-family: var(--font-mono);
}

.metadata {
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.metadata--key {
	padding: 0;
	margin: 0;
	margin-block-end: var(--space-xxs);
	font-size: var(--font-xs);
	font-weight: var(--font-thick);
	font-family: var(--font-ui);

	color: var(--color-fg-weak);
}

.metadata--value {
	padding: 0;
	margin: 0;
	font-size: var(--font-md);
	margin-block-end: var(--space-xl);

	overflow-x: auto;
}

/* Sticky header and aside */
@media (min-height: 50rem) {
	.header {
		position: sticky;
		top: 0;

		background-color: var(--color-bg);
		box-shadow: 0 0 3px var(--color-shadow);
		border-block-end: 1px solid var(--color-border-subtle);
		z-index: 10;
	}

	.aside {
		--_top: 8rem;
	}
}

/* 2-column layout */
@media (min-width: 80rem) {
	body {
		grid-template-columns: 60rem minmax(0, 1fr);
		grid-template-areas:
			"header header"
			"main aside"
			"footer footer";
	}

	body:where(:not(:has(.aside))) {
		grid-template-areas:
			"header header"
			"main main"
			"footer footer";
	}

	.aside-contents {
		position: sticky;
		top: var(--_top, var(--space-lg));
	}
}

/* 3-column layout */
@media (min-width: 100rem) {
	body {
		grid-template-columns: minmax(0, 40rem) minmax(60rem, 1fr) minmax(0, 40rem);
		grid-template-rows: minmax(0, 1fr) min-content;
		grid-template-areas:
			"header main aside"
			"footer main aside";
		gap: 0 var(--space-xxl);
	}

	.header {
		position: sticky;
		top: 0;
		border-block-end: none;
		border-inline-end: 1px solid var(--color-border-subtle);
		align-self: stretch;
		max-height: 100dvh;

		box-shadow: 1px 0px 3px var(--color-shadow) inset;
	}

	.footer {
		position: sticky;
		bottom: 0;
		margin: 0;
		border-inline-end: 1px solid var(--color-border-subtle);
	}

	.footer--links {
		justify-self: end;
	}

	.breadcrumbs {
		justify-content: end;
	}

	.header-title {
		flex-direction: column;
		align-items: end;
	}
	.header-title--description::before {
		display: none;
	}

	.repo-nav {
		padding-block-start: var(--space-xs);
		justify-content: end;
	}
	.repo-nav > a {
		border-radius: var(--radii-sm);
	}

	.aside {
		--_top: var(--space-xxxl);
	}

	.header, .main, .aside {
		padding-block-start: var(--space-xxxl);
	}
}