@font-face {
	font-family: "Host Grotesk";
	font-style: normal;
	font-display: block;
	src: local("Host Grotesk"), url(https://cdn.remexre.com/pkg/google-fonts/HostGrotesk-VariableFont_wght.woff2) format("woff2");
}

@font-face {
	font-family: "Host Grotesk";
	font-style: italic;
	font-display: block;
	src: local("Host Grotesk"), url(https://cdn.remexre.com/pkg/google-fonts/HostGrotesk-Italic-VariableFont_wght.woff2) format("woff2");
}

@font-face {
	font-family: "Noto Sans Math";
	font-display: block;
	src: local("Noto Sans Math"), url(https://cdn.remexre.com/pkg/google-fonts/NotoSansMath-Regular.woff2) format("woff2");
}

:root {
	--font-text: "Host Grotesk", sans-serif;
	--font-code: "Iosevka", monospace;
	--font-symbols: "Noto Sans Math", monospace;

	--color-body-bg: #d4d4d8;
	--color-surface: #f4f4f5;
	--color-surface-raised: #e4e4e7;
	--color-text: #09090b;
	--color-text-muted: #71717a;
	--color-shadow: rgba(0, 0, 0, 0.2);
	--color-shadow-active: rgba(0, 0, 0, 0.15);

	--color-accent-info: #3b82f6;
	--color-accent-success: #16a34a;
	--color-accent-warning: #d97706;
	--color-accent-danger: #dc2626;

	--border-width: 2px;
	--border-width-thin: 1.5px;
	--shadow-offset: 2px 2px;

	--space-1: 0.25em;
	--space-2: 0.5em;
	--space-3: 1em;
	--space-4: 2em;
}

[hidden] { display: none !important; }

body {
	background-color: var(--color-body-bg);
	color: var(--color-text);
	font-family: var(--font-text);
	margin: 0;
	padding: var(--space-4) 0 var(--space-3) 0;
}

hr {
	border: 1px solid var(--color-text);
	opacity: 1;
}

code {
	font-family: var(--font-code);
}

pre code {
	white-space: pre;
	display: block;
}

ul {
	list-style-type: "- ";
	padding-left: var(--space-3);
}

ol {
	padding-left: 1.5em;
}

kbd {
	background-color: var(--color-surface-raised);
	border: var(--border-width-thin) solid var(--color-text);
	box-shadow: 1px 1px var(--color-shadow);
	font-family: var(--font-code);
	padding: 0 var(--space-1);
}

.keys {
	display: inline-flex;
	gap: var(--space-2);
}

/* Nav */

.nav {
	background-color: var(--color-surface);
	border-bottom: var(--border-width) solid var(--color-text);
	box-shadow: 0 2px var(--color-shadow);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: var(--space-1) var(--space-2);
	position: fixed;
	top: 0;
	width: calc(100vw - 1em);
	z-index: 1;
}

.nav > *:first-child { margin-right: auto; }
.nav > *:last-child { margin-left: auto; }

.nav h1 {
	font-family: var(--font-code);
	font-size: 1.2em;
	margin: 0;
}

.nav h1 a {
	color: inherit;
	text-decoration: inherit;
}

.nav h1 a:hover { text-decoration: underline; }

.nav button {
	background-color: var(--color-surface);
	border: var(--border-width-thin) solid var(--color-text);
	box-shadow: var(--shadow-offset) var(--color-shadow);
	color: var(--color-text);
	font-family: var(--font-symbols);
	margin: 0 var(--space-1);
	height: 1.5em;
	width: 1.5em;
	padding: 0;
	text-align: center;
	cursor: pointer;
}

.nav button:hover:not(:active):not([disabled]) {
	background-color: var(--color-text);
	color: var(--color-surface);
}

.nav button:active:not([disabled]) {
	box-shadow: 0 0 0 2px var(--color-shadow-active);
}

.nav button[disabled] {
	background-color: var(--color-body-bg);
	border-color: var(--color-text-muted);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* Card */

.card {
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-text);
	box-shadow: var(--shadow-offset) var(--color-shadow);
	margin: var(--space-4) auto 0 auto;
	max-width: 40em;
	overflow-x: auto;
	padding: var(--space-2);
}

.card > header a {
	color: inherit;
	text-decoration: inherit;
}
.card > header a:hover { text-decoration: underline; }

.card .subtitle {
	color: var(--color-text-muted);
}

.card h2, .card h3 { margin: 0; }

.card p { max-width: 40em; }

.card hr {
	margin-left: calc(-1 * var(--space-2));
	margin-right: calc(-1 * var(--space-2));
}

/* Box / blockquote / pre */

.box, blockquote, pre {
	background-color: var(--color-surface-raised);
	border: var(--border-width) solid var(--color-text);
	box-shadow: var(--shadow-offset) var(--color-shadow);
	box-sizing: border-box;
	margin: var(--space-3) auto;
	padding: var(--space-2);
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
}

.box:has(> img), blockquote:has(> img) { padding: 0; }
.box > img, blockquote > img {
	display: block;
	margin: 0;
	width: 100%;
}

/* Tables */

.table {
	border-spacing: 0;
	width: 100%;
}
.table th { text-align: left; }
.table th, .table td {
	padding: 0.2em 2px 0.2em calc(var(--space-2) + 2px);
}
.table th:first-child, .table td:first-child { padding-left: 1px; }
.box > .table td { border-top: 1px solid var(--color-text); }

.table-grid { display: grid; }
.table-grid thead, .table-grid thead > tr,
.table-grid tbody, .table-grid tbody > tr { display: contents; }
.table-grid thead > tr > td, .table-grid tbody > tr > td {
	display: flex;
	align-items: center;
}

/* Buttons */

.btn {
	display: inline-block;
	font-family: var(--font-text);
	font-size: 1em;
	border: var(--border-width-thin) solid var(--color-text);
	box-shadow: var(--shadow-offset) var(--color-shadow);
	padding: var(--space-1) var(--space-2);
	cursor: pointer;
	background-color: var(--color-surface);
	color: var(--color-text);
}
.btn:active:not([disabled]) {
	box-shadow: 0 0 0 2px var(--color-shadow-active);
}
.btn[disabled] {
	background-color: var(--color-body-bg);
	border-color: var(--color-text-muted);
	color: var(--color-text-muted);
	cursor: not-allowed;
	box-shadow: none;
}

.btn-primary {
	background-color: var(--color-text);
	color: var(--color-surface);
}
.btn-primary:hover:not([disabled]) {
	background-color: var(--color-text-muted);
}

.btn-secondary {
	background-color: transparent;
}
.btn-secondary:hover:not([disabled]) {
	background-color: var(--color-surface-raised);
}

.btn-danger {
	background-color: var(--color-accent-danger);
	color: var(--color-surface);
}
.btn-danger:hover:not([disabled]) {
	filter: brightness(0.9);
}

/* Forms */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
	font-family: var(--font-text);
	font-size: 1em;
	background-color: var(--color-surface);
	color: var(--color-text);
	border: var(--border-width-thin) solid var(--color-text);
	box-shadow: var(--shadow-offset) var(--color-shadow);
	padding: var(--space-1) var(--space-2);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--color-shadow-active);
}

input[type="radio"] {
	accent-color: var(--color-text);
	width: 1.1em;
	height: 1.1em;
}

/* Square, with the inputs' border, shadow and focus ring; the tick is a clipped
   square in the text colour. */
input[type="checkbox"] {
	appearance: none;
	flex: none;
	display: inline-grid;
	place-content: center;
	width: 1.1em;
	height: 1.1em;
	margin: 0;
	border: var(--border-width-thin) solid var(--color-text);
	background-color: var(--color-surface);
	box-shadow: var(--shadow-offset) var(--color-shadow);
	cursor: pointer;
}
input[type="checkbox"]::before {
	content: "";
	width: 0.7em;
	height: 0.7em;
	background-color: var(--color-text);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
	visibility: hidden;
}
input[type="checkbox"]:checked::before {
	visibility: visible;
}
input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--color-shadow-active);
}
input[type="checkbox"][disabled] {
	border-color: var(--color-text-muted);
	background-color: var(--color-body-bg);
	box-shadow: none;
	cursor: not-allowed;
}

/* Alerts */

.alert {
	--alert-accent: var(--color-text);
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-text);
	box-shadow: var(--shadow-offset) var(--color-shadow), inset var(--space-1) 0 0 0 var(--alert-accent);
	margin: var(--space-4) auto 0 auto;
	max-width: 40em;
	overflow-x: auto;
	padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) + var(--space-1));
}

.alert-info { --alert-accent: var(--color-accent-info); }
.alert-success { --alert-accent: var(--color-accent-success); }
.alert-warning { --alert-accent: var(--color-accent-warning); }
.alert-danger { --alert-accent: var(--color-accent-danger); }

/* Dots */

.dot {
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	margin-right: 0.4em;
	background-color: var(--color-text-muted);
	vertical-align: 0.15em;
}
.dot.info { background-color: var(--color-accent-info); }
.dot.success { background-color: var(--color-accent-success); }
.dot.warning { background-color: var(--color-accent-warning); }
.dot.danger { background-color: var(--color-accent-danger); }

/* Loom */

.loom {
	align-items: start;
	display: grid;
	gap: var(--space-3);
	grid-template-columns: minmax(12em, 18em) minmax(0, 1fr) minmax(16em, 22em);
	padding: var(--space-4) var(--space-3) 0 var(--space-3);
}

.col {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}

.loom .card, .loom .alert {
	margin: 0;
	max-width: none;
}

.loom .alert { margin-top: var(--space-3); }

.loom h3 { margin: var(--space-3) 0 0 0; }

.nav-right {
	align-items: center;
	display: flex;
}

.status { padding: var(--space-1); }

.status .dot {
	height: 0.8em;
	margin: 0;
	vertical-align: middle;
	width: 0.8em;
}

.btn-row {
	align-items: center;
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.fields {
	align-items: center;
	display: grid;
	gap: var(--space-2) var(--space-3);
	grid-template-columns: auto minmax(0, 1fr);
	margin-top: var(--space-2);
}

.fields input[type="number"], .fields input[type="text"], .fields select {
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
}

.fields input[type="checkbox"] { justify-self: start; }

/* Tree */

.tree { max-height: 70vh; overflow: auto; }

.tree ul {
	list-style: none;
	margin: 0;
	padding-left: var(--space-3);
}

.tree > ul { padding-left: 0; }

.tree li > ul { border-left: var(--border-width-thin) solid var(--color-text-muted); }

.seg {
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	display: block;
	font-family: var(--font-code);
	font-size: 0.85em;
	max-width: 100%;
	overflow: hidden;
	padding: 0.1em var(--space-1);
	text-align: left;
	text-overflow: ellipsis;
	white-space: pre;
}

.seg:hover { background-color: var(--color-surface-raised); }
.seg.shown { font-weight: bold; }
.seg.sel { background-color: var(--color-text); color: var(--color-surface); }

/* Text */

.doc {
	cursor: text;
	font-family: var(--font-code);
	line-height: 1.8;
	min-height: 8em;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.tok {
	background-color: color-mix(in srgb, var(--color-accent-warning) calc(var(--s, 0) * 70%), transparent);
	cursor: pointer;
}

/* Where typing goes: right after the selected token. */

.draft { caret-color: var(--color-text); outline: none; }

.draft:empty {
	display: inline-block;
	min-height: 1em;
	min-width: 0.15em;
	vertical-align: top;
}

.draft:empty::before { color: var(--color-text-muted); content: attr(data-hint); }
.draft.invalid { text-decoration: underline wavy var(--color-accent-danger); }

.tok:hover { outline: 1px solid var(--color-text-muted); }
.tok.sel { outline: var(--border-width-thin) solid var(--color-text); }
.tok.fork { border-bottom: 2px dotted var(--color-accent-info); }
.tok.human { font-style: italic; }
.tok.special { color: var(--color-accent-info); font-weight: bold; }
.tok.eot { color: var(--color-text-muted); }

/* Token inspector */

.dist {
	display: flex;
	flex-direction: column;
	margin-top: var(--space-2);
}

.dist-row {
	background: linear-gradient(to right, var(--color-surface-raised) calc(var(--p, 0) * 100%), transparent 0);
	border: none;
	border-bottom: 1px solid var(--color-surface-raised);
	color: inherit;
	cursor: pointer;
	display: flex;
	font-family: var(--font-code);
	justify-content: space-between;
	padding: 0.1em var(--space-1);
	text-align: left;
}

.dist-row code { overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.dist-row:hover { outline: 1px solid var(--color-text); }
.dist-row.cur { font-weight: bold; }

@media (max-width: 60em) {
	.loom { grid-template-columns: minmax(0, 1fr); }
}