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

:root {
	/* Colors */
	--white: #fff;
	--black: #000000;

	--blue: #1a5fa8;
	--blue-transparent: rgb(from var(--blue) r g b / 0.15);
	--purple: #6b3a9e;
	--purple-transparent: rgb(from var(--purple) r g b / 0.15);
	--red: #a8192e;
	--red-transparent: rgb(from var(--red) r g b / 0.15);
	--orange: #b84a0e;
	--orange-transparent: rgb(from var(--orange) r g b / 0.15);

	--color-get: var(--blue);
	--color-post: var(--purple);
	--color-put: var(--orange);
	--color-delete: var(--red);

	--accent: #1d9e75;
	--accent-light: #e1f5ee;
	--accent-dark: #085041;

	--gray-50: #f5f5f3;
	--gray-500: #6b6b68;
	--gray-900: #1a1a18;

	/* Surfaces */
	--bg-primary: var(--white);
	--bg-secondary: var(--gray-50);
	--text-primary: var(--gray-900);
	--text-secondary: var(--gray-500);

	/* Spacing */
	--space-1: 4px;
	--space-2: 6px;
	--space-3: 10px;
	--space-4: 12px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 40px;
	--space-8: 100px;

	/* Border radius */
	--radius-sm: 2px;
	--radius-md: 6px;
	--radius-lg: 12px;
	--radius-xl: 14px;
	--radius-pill: 20px;

	/* Typography */
	--font-body: 'General Sans', sans-serif;
	--font-mono: 'JetBrainsMono Nerd', monospace;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.825rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.75rem;
	--font-size-code: 0.85rem;

	/* Borders */
	--border: 1px solid var(--black);
	--border-muted: 1px solid rgb(from var(--black) r g b / 0.3);
	--border-soft: 1px solid rgb(from var(--black) r g b / 0.75);

	/* Opacity surfaces */
	--surface-black-subtle: rgb(from var(--black) r g b / 0.01);
	--surface-black-hover: rgb(from var(--black) r g b / 0.05);
	--surface-black-muted: rgb(from var(--black) r g b / 0.15);
}

@media (prefers-color-scheme: dark) {
	:root {
		--white: #1c1c1a;
		--black: #f0ede8;

		--blue: #5b9fd6;
		--purple: #a67dd4;
		--red: #d95f72;
		--orange: #e07a45;

		--accent: #2ec48f;
		--accent-light: #04342c;
		--accent-dark: #a8f0d4;

		--gray-50: #252523;
		--gray-500: #9a9892;
		--gray-900: #f0ede8;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	padding: var(--space-7);
	background: var(--bg-secondary);
	color: var(--text-primary);
	line-height: 1.5;
	font-size: var(--font-size-md);
}

main {
	max-width: 1500px;
	margin: 0 auto;
	padding-top: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

button {
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	color: var(--text-primary);
	border: var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-1) var(--space-3);
	background: transparent;
	transition: all 0.3s ease;
	cursor: pointer;
}

button:hover,
button:focus {
	background: var(--surface-black-hover);
}

input {
	font-size: var(--font-size-md);
	font-family: var(--font-body);
	color: var(--text-primary);
	background: var(--bg-primary);
	padding: var(--space-1) var(--space-3);
	border: var(--border);
}

code:has(pre) {
	font-family: var(--font-mono);
	font-size: var(--font-size-code);
	color: var(--text-primary);
	padding: var(--space-1) var(--space-2);
	border: var(--border-muted);
	border-radius: var(--radius-lg);
	display: block;
	background: var(--surface-black-subtle);
}

pre {
	margin: 0;
}

/* Utilities */

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

/* Header */

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-4) var(--space-8);
	background: var(--bg-primary);
	backdrop-filter: blur(10px);
	z-index: 10;
}

.header__brand {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-width: 0;
}

.header__logo {
	height: 36px;
	width: auto;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	object-fit: contain;
}

.header__brand-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;

	h1 {
		margin: 0;
		font-size: var(--font-size-lg);
		color: var(--text-primary);
		white-space: nowrap;
	}
}

.header__description {
	margin: 0;
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.header__nav {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-shrink: 0;
}

.header__links {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-right: var(--space-3);
	border-right: var(--border-muted);
}

.header__link {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	text-decoration: none;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	transition:
		color 0.2s,
		background 0.2s;

	&:hover {
		color: var(--text-primary);
		background: var(--surface-black-hover);
	}
}

.header__version {
	font-size: var(--font-size-xs);
	font-family: var(--font-mono);
	color: var(--accent);
	background: rgb(from var(--accent) r g b / 0.1);
	border: 1px solid rgb(from var(--accent) r g b / 0.3);
	border-radius: var(--radius-pill);
	padding: 2px var(--space-3);
	white-space: nowrap;
}

/* Alert */

.alert {
	display: block;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	border: 2px solid var(--black);
	color: var(--text-primary);
	background: var(--surface-black-muted);
}

.alert--danger {
	color: var(--red);
	border-color: var(--red);
	background: rgb(from var(--red) r g b / 0.1);
}

/* Tag */

.tag {
	font-size: var(--font-size-sm);
	font-weight: 400;
	padding: 3px var(--space-3);
	border: var(--border-soft);
	color: var(--text);
	border-radius: var(--radius-pill);
	display: flex;
	gap: var(--space-2);
	align-items: center;
}

/* Category */

.category {
	border-radius: var(--radius-md);
	padding: var(--space-5);
	background: var(--bg-primary);
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

	.category__title {
		color: var(--text-primary);
		text-transform: capitalize;
		padding-bottom: var(--space-2);
	}
}

/* Auth */

.auth {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--space-2);

	.auth__title {
		width: 100%;
		text-align: right;
		text-transform: uppercase;
		font-size: var(--font-size-md);
		color: var(--text-secondary);
		letter-spacing: 0.25px;
	}

	.auth__form {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		position: relative;
	}

	.auth__error {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		translate: 0 calc(100% + var(--space-2));

		&:empty {
			display: none;
		}
	}
}

/* Endpoint */

.endpoint {
	border: var(--border);
	background: var(--bg-primary);

	&:first-of-type {
		border-radius: var(--radius-md) var(--radius-md) 0 0;
	}
	&:last-child {
		border-radius: 0 0 var(--radius-md) var(--radius-md);
	}
	&:not(:last-child) {
		border-bottom: 0;
	}

	.endpoint__header {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		padding: var(--space-3);
		background: var(--surface-black-muted);
		cursor: pointer;

		&::before {
			content: '▶';
			display: inline-block;
			transition: rotate 0.3s ease;
			color: var(--text-primary);
		}

		h3 {
			font-size: var(--font-size-md);
			color: var(--text-primary);
			text-transform: capitalize;
		}
	}

	&.endpoint--GET .endpoint__header {
		background: var(--blue-transparent);
	}
	&.endpoint--POST .endpoint__header {
		background: var(--purple-transparent);
	}
	&.endpoint--PUT .endpoint__header {
		background: var(--orange-transparent);
	}
	&.endpoint--DELETE .endpoint__header {
		background: var(--red-transparent);
	}

	&[open] .endpoint__header::before {
		rotate: 90deg;
	}

	.endpoint__content {
		padding: var(--space-3);
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3) var(--space-5);
	}

	.endpoint__content > * {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		align-items: flex-start;
	}

	.endpoint__description {
		min-width: 100%;
		padding-right: 25%;
		color: var(--text-primary);
	}

	.endpoint__uri-parameters-container {
		width: 100%;
	}

	.endpoint__query-parameters-container {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		align-items: flex-end;

		h4 {
			width: 100%;
			display: block;
			color: var(--text-primary);
		}
	}

	.endpoint__body-value {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.endpoint_body-value__title {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		color: var(--text-primary);
	}

	.endpoint__schemas {
		border-left: var(--border-muted);
		padding-left: var(--space-5);

		& > * {
			width: 100%;
		}
	}

	.endpoint__body {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
	}

	.endpoint__body__title {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		color: var(--text-primary);
	}

	.endpoint__body__schema {
		padding: var(--space-5) var(--space-6);
	}

	.endpoint__body__schema--multipart {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 0;

		.endpoint__body__element {
			border: 1px solid var(--black);
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			column-gap: var(--space-2);
			padding: var(--space-1) var(--space-2);

			&:first-of-type {
				border-radius: var(--radius-md) var(--radius-md) 0 0;
			}
			&:last-child {
				border-radius: 0 0 var(--radius-md) var(--radius-md);
			}
			&:not(:last-child) {
				border-bottom: 0;
			}

			span:last-of-type {
				min-width: 100%;
				color: var(--text-secondary);
				font-size: var(--font-size-sm);
			}
		}
	}

	.endpoint__responses {
		display: flex;
		flex-direction: column;
	}
}

/* Response */

.response {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: var(--border);
	background: var(--bg-primary);

	&:first-of-type {
		border-radius: var(--radius-md) var(--radius-md) 0 0;
	}
	&:last-child {
		border-radius: 0 0 var(--radius-md) var(--radius-md);
	}
	&:not(:last-child) {
		border-bottom: 0;
	}

	.response__summary {
		display: flex;
		gap: var(--space-2);
		align-items: center;
		cursor: pointer;
		padding: var(--space-3);
		color: var(--text-primary);

		&::before {
			content: '▶';
			display: inline-block;
			transition: rotate 0.3s ease;
		}
	}

	&[open] .response__summary::before {
		rotate: 90deg;
	}

	.response__title {
		display: flex;
		gap: var(--space-2);
		align-items: center;
		color: var(--text-primary);
	}

	.response__code {
		margin: 0 auto var(--space-3);
		width: calc(100% - var(--space-5));
		padding: var(--space-5) var(--space-6);
	}
}

/* Form control */

.form-control {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);

	.form-control__label {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		color: var(--text-primary);
		text-transform: capitalize;
	}

	textarea {
		height: 100px;
		font-family: var(--font-body);
		font-size: var(--font-size-md);
		color: var(--text-primary);
		background: var(--bg-primary);
		border: var(--border-soft);
	}

	.form-control__input {
		font-family: var(--font-body);
		font-size: var(--font-size-md);
		color: var(--text-primary);
		border: var(--border-soft);
		border-radius: var(--radius-sm);
		padding: var(--space-1) var(--space-3);
		width: 100%;
		background: var(--bg-primary);
	}
}

.container {
	width: 100%;
	max-width: 520px;
}

.form-control--file {
	.form-control__zone {
		border: 1.5px dashed var(--black);
		border-radius: var(--radius-lg);
		padding: var(--space-5) var(--space-4);
		cursor: pointer;
		transition:
			border-color 0.2s,
			background 0.2s;
		position: relative;
		overflow: hidden;
		display: flex;
		gap: var(--space-4);

		p {
			margin: 0;
		}

		&.over,
		&:hover {
			border-color: var(--accent);
			background: var(--accent-light);
		}

		.form-control__zone__icon {
			width: 48px;
			height: 48px;
			background: var(--bg-primary);
			border-radius: 50%;
			border: 0.5px solid var(--black);
			display: flex;
			align-items: center;
			justify-content: center;
			padding: var(--space-4);
			stroke: var(--black);
			stroke-width: 1.5;
			fill: none;
		}

		.form-control__help {
			font-size: var(--font-size-sm);
			color: var(--text-secondary);
			line-height: 1.6;
			margin-bottom: var(--space-2);
			display: block;
		}

		.form-control__button {
			text-decoration: underline;
			cursor: pointer;
			background: transparent;
			border: 0;
			font-size: inherit;
			padding: 0;
		}
	}

	.form-control__input {
		display: none;
	}
}

.previews {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);

	.preview {
		display: flex;
		align-items: flex-start;
		gap: var(--space-4);
		background: var(--bg-primary);
		border: 0.5px solid var(--black);
		border-radius: var(--radius-md);
		padding: var(--space-3) 14px;
		animation: slide-in 0.25s ease;
	}

	.preview__thumb {
		aspect-ratio: 1 / 1;
		height: 60px;
		border-radius: 7px;
		overflow: hidden;
		flex-shrink: 0;
		background: var(--bg-secondary);
		border: 0.5px solid var(--black);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 10px;
		color: var(--text-secondary);
		font-weight: 500;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.preview__info {
		flex: 1;
		min-width: 0;
		display: flex;
		gap: var(--space-2);
		flex-wrap: wrap;
		padding-right: var(--space-6);
	}

	.preview__description {
		flex: 1;
	}

	.preview__name {
		font-size: var(--font-size-sm);
		font-weight: 500;
		color: var(--text-primary);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.preview__meta {
		font-size: 10px;
		color: var(--text-secondary);
		margin-top: var(--space-1);
	}

	.preview__status {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		width: 100%;
	}

	.preview__status__bar {
		flex: 1;
		height: 3px;
		background: var(--bg-secondary);
		border-radius: 99px;
		overflow: hidden;
	}

	.preview__status__fill {
		height: 100%;
		background: var(--accent);
		border-radius: 99px;
		transition: width 0.4s ease;
	}

	.preview__status__pct {
		font-size: 10px;
		color: var(--text-secondary);
		min-width: 28px;
		text-align: right;
		margin: 0;
	}

	.preview__delete {
		background: none;
		border: none;
		cursor: pointer;
		padding: var(--space-1);
		border-radius: var(--radius-md);
		color: var(--text-secondary);
		transition: background 0.15s;
		flex-shrink: 0;

		&:hover {
			background: var(--bg-secondary);
		}

		svg {
			width: 14px;
			height: 14px;
			stroke: currentColor;
			fill: none;
			stroke-width: 2;
		}
	}

	.preview__done {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
	}

	.preview__done__svg {
		width: 18px;
		height: 18px;
		padding: var(--space-1);
		stroke: var(--white);
		fill: none;
		stroke-width: 2.5;
		border-radius: 50%;
		background: var(--accent);
		flex-shrink: 0;
	}

	.preview__done__text {
		font-size: 10px;
		color: var(--accent);
		margin: 0;
	}
}

.actions {
	margin-top: 1rem;
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

@keyframes slide-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* pretty-print-json theme override */

.json-container {
	font-family: var(--font-mono);
	background-color: var(--bg-secondary);
	color: var(--text-primary);
}

.json-key {
	color: var(--red);
}
.json-string {
	color: var(--accent-dark);
}
.json-number {
	color: var(--blue);
}
.json-boolean {
	color: var(--accent);
}
.json-null {
	color: var(--text-secondary);
}
.json-mark {
	color: var(--text-primary);
}

a.json-link {
	color: var(--purple);
}
a.json-link:visited {
	color: var(--text-secondary);
}
a.json-link:hover {
	color: var(--blue);
}
a.json-link:active {
	color: var(--text-secondary);
}

ol.json-lines > li::marker {
	color: var(--text-secondary);
}
ol.json-lines > li:nth-child(odd) {
	background-color: var(--bg-secondary);
}
ol.json-lines > li:nth-child(even) {
	background-color: var(--bg-primary);
}
ol.json-lines > li:hover {
	background-color: rgb(from var(--accent) r g b / 0.08);
}

@media (prefers-color-scheme: dark) {
	.json-container {
		background-color: var(--bg-secondary);
	}

	.json-key {
		color: var(--red);
	}
	.json-string {
		color: var(--accent-dark);
	}
	.json-number {
		color: var(--blue);
	}
	.json-boolean {
		color: var(--accent);
	}
	.json-null {
		color: var(--text-secondary);
	}
	.json-mark {
		color: var(--text-primary);
	}

	a.json-link {
		color: var(--purple);
	}
	a.json-link:visited {
		color: var(--text-secondary);
	}
	a.json-link:hover {
		color: var(--blue);
	}
	a.json-link:active {
		color: var(--text-secondary);
	}

	ol.json-lines > li::marker {
		color: var(--text-secondary);
	}
	ol.json-lines > li:nth-child(odd) {
		background-color: var(--bg-secondary);
	}
	ol.json-lines > li:nth-child(even) {
		background-color: var(--bg-primary);
	}
	ol.json-lines > li:hover {
		background-color: rgb(from var(--accent) r g b / 0.08);
	}
}