@import url("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.min.css") layer(theme);
@import url("/main.css") layer(main);

#hero {
	text-align: center;
	h1 {
		font-size: 2.5rem;
		line-height: 1.2;
		color: #ffffff;
		margin-block-end: 0.5rem;
	}
	p {
		font-size: 1rem;
		line-height: 1.6;
		margin-block-end: 2rem;
	}
}

#endpoint {
	article:not(:last-child) {
		margin-block-end: 1rem;
	}
}

.hero-links {
	display: flex;
	gap: 1rem;
	justify-content: center;
}

.button {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	border-radius: 1rem;
	color: #ffffff;
	background-color: #374151;
	border: 1px solid #374151;
	padding: 0.75rem 1.5rem;
	font-size: 0.9rem;
	transition: background-color 0.2s ease-in-out;
}
.button:hover {
	background-color: #4b5563;
	text-decoration: none;
}
.button:first-of-type {
	background-color: #0172ad;
	box-shadow: #0172ad 0px 0px 20px -4px;
}
.button:first-of-type:hover {
	background-color: #0284c7;
}
.button.outline {
	background: transparent;
	border-color: #374151;
	color: #92a1c3;
}
.button.outline:hover {
	background: #1f2937;
	color: #ffffff;
}

.field-card {
	background: linear-gradient(#1f2937, #111827);
	border-radius: 1rem;
	border: 1px solid #374151;
	padding: 1.5rem 2rem;
}

.field-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 0.75rem;
	flex-wrap: wrap;
}

.field-name {
	font-size: 1.1rem;
	font-weight: 700;
	color: #e2e8f0;
	background: transparent;
	padding: 0;
}

.field-tag {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.15em 0.6em;
	border-radius: 999px;
}
.field-tag.required {
	background: #dc2626;
	color: #ffffff;
}
.field-tag.header {
	background: #2563eb;
	color: #ffffff;
}

.ep-heading {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 0.5rem;
}

.http-method {
	font-family: "Atkinson Hyperlegible Mono", monospace;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.25em 0.6em;
	border-radius: 6px;
	text-transform: uppercase;
}
.http-method.get {
	background: #065f46;
	color: #6ee7b7;
}

pre {
	background: #0d1117;
	border: 1px solid #30363d;
	border-radius: 8px;
	padding: 1rem;
	overflow-x: auto;
	line-height: 1.5;
	font-size: 0.8rem;
	margin: 0;
}
pre code {
	background: transparent;
	padding: 0;
	font-size: inherit;
	color: #e2e8f0;
}

.code-block {
	position: relative;
	margin-block: 1rem;
}
.code-block.response pre {
	border-color: #065f46;
}
.code-block.response pre::before {
	content: "Response";
	display: block;
	font-family: "Atkinson Hyperlegible", sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6ee7b7;
	margin-block-end: 0.5rem;
}

.copy-btn {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	font-family: "Atkinson Hyperlegible", sans-serif;
	font-size: 0.7rem;
	padding: 0.3rem 0.6rem;
	border-radius: 6px;
	border: 1px solid #30363d;
	background: #21262d;
	color: #8b949e;
	cursor: pointer;
	transition: all 0.15s ease;
	opacity: 0;
	z-index: 1;
}
.code-block:hover .copy-btn {
	opacity: 1;
}
.copy-btn:hover {
	background: #30363d;
	color: #e2e8f0;
}
.copy-btn.copied {
	background: #065f46;
	color: #6ee7b7;
	border-color: #065f46;
}

.hl-prompt {
	color: #6e7681;
}
.hl-string {
	color: #aad94c;
}
.hl-key {
	color: #59c2ff;
}
.hl-str {
	color: #aad94c;
}
.hl-number {
	color: #ffb454;
}
.hl-continue {
	color: #6e7681;
}

#ep-transactions h3 {
	margin-block-start: 2rem;
}

.table-wrap {
	overflow-x: auto;
	margin-block: 1rem;
}

table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.8rem;
	line-height: 1.5;
}

thead th {
	background: #1f2937;
	color: #92a1c3;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: left;
	padding: 0.75rem 1rem;
	border-bottom: 2px solid #374151;
}
thead th:first-child {
	border-radius: 8px 0 0 0;
}
thead th:last-child {
	border-radius: 0 8px 0 0;
}

tbody td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #1f2937;
	vertical-align: top;
}
tbody tr {
	background: #111827;
}
tbody tr:nth-child(even) {
	background: #0d1117;
}
tbody tr:hover {
	background: #1f2937;
}

.param-name, .field-name {
	font-size: 0.8rem;
	font-weight: 700;
	color: #59c2ff;
	background: transparent;
	padding: 0;
	white-space: nowrap;
}

.tag {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.15em 0.5em;
	border-radius: 999px;
}
.tag.no {
	background: #1f2937;
	color: #8b949e;
	border: 1px solid #30363d;
}
.tag.yes {
	background: #1a2e1a;
	color: #6ee7b7;
	border: 1px solid #065f46;
}

.status {
	font-family: "Atkinson Hyperlegible Mono", monospace;
	font-weight: 700;
	font-size: 0.85rem;
	padding: 0.15em 0.5em;
	border-radius: 6px;
}
.status.ok {
	background: #065f46;
	color: #6ee7b7;
}
.status.auth {
	background: #5c3d1a;
	color: #fbbf24;
}
.status.err {
	background: #5c1a1a;
	color: #f87171;
}

.source-card:not(.upcoming):not(:first-child) {
	margin-block-end: 1rem;
}

.source-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-end: 0.5rem;
	h3, h4 {
		margin: 0;
	}
}

.flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: auto;
	background: #1f2937;
	border: 1px solid #374151;
	border-radius: 8px;
	font-size: 0.8rem;
	font-weight: 700;
	color: #e2e8f0;
	flex-shrink: 0;
}

.source-card ul {
	padding-inline-start: 1.5rem;
	li {
		list-style: disc;
		padding-block-end: 0.25rem;
		color: #92a1c3;
	}
}

.source-card.upcoming {
	opacity: 0.7;
}

.upcoming-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-block-start: 1rem;
}

details {
	background: linear-gradient(#1f2937, #111827);
	border: 1px solid #374151;
	border-radius: 1rem;
	padding: 0.75rem 1.25rem;
	margin-block: 0.5rem;
}
details summary {
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
	padding: 0.25rem 0;
}
details summary::-webkit-details-marker {
	color: #01aaff;
}
details[open] summary {
	margin-block-end: 0.75rem;
}
details p {
	margin: 0;
}

@media (min-width: 1296px) {
	body {
		max-width: 1000px;
		margin-inline: auto;
	}

	body > header {
		nav {
			a[href="/"] {
				flex: 0 0 auto;
			}
			a[href="/"]:not(:has(svg)) {
				flex: 1 0 auto;
				display: unset;
			}
		}
	}

	.upcoming-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 720px) {
	#ep-transactions > article {
		padding: 1.5rem 2.5rem;
	}
}