/* #region global · fonts */

@font-face {
	font-family: "DejaVu Sans";
	src: url("/assets/fonts/DejaVuSans.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DejaVu Sans";
	src: url("/assets/fonts/DejaVuSans-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* #endregion global · fonts */

/* #region global · palette and defaults */

:root {
	color-scheme: dark;

	--bg: #1B1B1B;
	--panel: #202020;
	--tile: #25281F;

	--green: #7A8163;
	--green-text: #89916F;
	--green-highlight: #A0A783;
	--green-mid: #656B52;
	--green-dark: #4A4F3D;

	--orange: #AA5C00;
	--orange-highlight: #C06A00;
	--orange-dark: #603600;

	background: var(--bg);
	color: var(--green-text);

	font-family: "DejaVu Sans", "DejaVu Sans Condensed", Verdana, sans-serif;
}

/* #endregion global · palette and defaults */

/* #region global · reset */

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
	margin: 0;
	color: var(--green-text);
}

html {
	background: #151515;
}

/* #endregion global · reset */

/* #region global · page background */

body {
	box-sizing: border-box;
	width: min(100%, 50rem);
	margin: 0 auto;
	padding: 2rem;
	text-align: center;

	background-color: var(--panel);
	background-image:
		conic-gradient(
			var(--tile) 25%,
			var(--panel) 0 50%,
			var(--tile) 0 75%,
			var(--panel) 0
		);
	background-size: 8px 8px;
}

/* #endregion global · page background */

/* #region global · headings */

header,
h1,
h2,
h3,
legend,
.page-title,
.card-title,
.field-title,
.title-row,
.user-info {
	color: var(--green);
}

h1,
h2,
h3,
.page-title,
.card-title,
.field-title {
	margin-top: 1rem;
	margin-bottom: 1rem;

	padding: 0;

	border: 0;
	background: none;
	box-shadow: none;

	color: var(--green);

	text-shadow:
		0 -1px var(--green-highlight),
		1px 1px #363A2C;
}

h1,
.page-title {
	color: #858C6C;
}

h2,
.card-title {
	color: #7D8566;
}

h3,
.field-title {
	color: #737A5E;
}

/* #endregion global · headings */

/* #region global · links and buttons */

a,
button,
.button {
	appearance: none;

	border: 0;
	background: none;
	padding: 0;

	font: inherit;

	color: var(--orange);

	text-shadow:
		1px 1px #3D2300;

	cursor: pointer;
	text-decoration: underline;
}

a:hover,
a:focus-visible,
button:hover,
button:focus-visible,
.button:hover,
.button:focus-visible {
	color: var(--orange-highlight);

	text-shadow:
		1px 1px var(--orange-dark);
}

/* #endregion global · links and buttons */

/* #region global · form controls */

input,
select,
textarea {
	width: 100%;
	padding: 0.5rem;

	border: 1px solid var(--orange);

	background: #191919;

	box-shadow:
		inset 1px 1px #0C0C0C,
		inset -1px -1px #303030;

	font: inherit;
	color: var(--green-text);
}

input:focus,
select:focus,
textarea:focus {
	outline: 1px dotted var(--green);
	outline-offset: 2px;
}

::placeholder {
	color: var(--green-dark);
}

::selection {
	background: var(--green);
	color: #111;
}

/* #endregion global · form controls */

/* #region global · media constraints */

img,
iframe,
canvas {
	max-width: 100%;
}

/* #endregion global · media constraints */

/* #region global · dividers */

hr {
	height: 2px;
	margin: 1rem 0;

	border: 0;
	border-top: 1px solid var(--green-mid);
	border-bottom: 1px solid #111;

	background: none;
}

/* #endregion global · dividers */

/* #region shared · page and row layout */

.page,
.page-shell,
.horizontal-section,
.title-row,
.welcome-top,
.editor,
.editor-actions,
.table-toolbar,
.card-name-row,
.accordion-nav,
.auth-right {
	display: flex;
	gap: 1rem;
}

.page,
.page-shell,
.editor,
.welcome-top {
	flex-direction: column;
}

.page,
.page-shell {
	box-sizing: border-box;
	width: 100%;
	max-width: 50rem;
	margin: 0 auto;
}

.title-row,
.horizontal-section,
.welcome-top,
.table-toolbar,
.card-name-row {
	align-items: center;
	justify-content: center;
}

.title-row,
.horizontal-section,
.welcome-top {
	flex-direction: column;
}

.auth-right,
.accordion-nav,
.editor-actions,
.table-toolbar,
.card-name-row,
.community-widgets {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

/* #endregion shared · page and row layout */

/* #region community · widget alignment */

.community-widgets {
	gap: 1rem;
}

/* #endregion community · widget alignment */

/* #region shared · panel and content spacing */

.card,
.box-green,
.box-orange,
.preview-stage,
.welcome-card,
.accordion-panel {
	box-sizing: border-box;
	margin: 1rem auto;
}

.page-body,
.page-intro,
.stack,
.welcome-stack,
.editor {
	width: 100%;
}

/* #endregion shared · panel and content spacing */

/* #region welcome · preview columns */

.welcome-stack,
.welcome-top,
.welcome-left,
.welcome-right,
.preview-stage {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}

/* #endregion welcome · preview columns */

/* #region shared · grids */

.grid,
.form-grid-tight,
.welcome-stack {
	display: grid;
	gap: 1rem;
}

.grid,
.form-grid-tight {
	grid-template-columns:
		repeat(auto-fit, minmax(14rem, 1fr));
}

/* #endregion shared · grids */

/* #region status · cards */

.status-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.status-grid .card {
	box-sizing: border-box;
	width: 100%;
	overflow-wrap: anywhere;
}

/* #endregion status · cards */

/* #region shared · filter forms */

.filter-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	text-align: left;
}

.filter-grid label,
.case-inline-editor label {
	display: grid;
	gap: 0.35rem;
}

.form-actions {
	display: flex;
	align-items: end;
	gap: 1rem;
}

/* #endregion shared · filter forms */

/* #region moderation · case editors */

.case-inline-editor {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: end;
	text-align: left;
}

.case-inline-editor,
.case-void-confirm {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0;
	padding: 1rem;
	background: var(--panel);
	overflow: auto;
}

.case-form-error {
	color: var(--orange-highlight);
}

.active-case .case-inline-editor {
	grid-template-columns: minmax(0, 1fr) 10rem auto;
}

.case-actions {
	display: flex;
	gap: 0.75rem;
	padding-bottom: 0.5rem;
}

.case-reason {
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* #endregion moderation · case editors */

/* #region global · disclosure controls */

summary {
	width: fit-content;
	list-style: none;
	color: var(--orange);
	text-decoration: underline;
	text-shadow: 1px 1px #3D2300;
	cursor: pointer;
}

summary::-webkit-details-marker {
	display: none;
}

summary:hover,
summary:focus-visible {
	color: var(--orange-highlight);
}

/* #endregion global · disclosure controls */

/* #region moderation · filter summary */

.moderation-filter details > summary {
	margin: 0 auto;
}

/* #endregion moderation · filter summary */

/* #region censorship · word editor */

.censorship-editor {
	display: grid;
	gap: 0.75rem;
}

.censorship-editor details {
	padding: 0.75rem;
	border-top: 1px solid var(--green-mid);
	border-right: 1px solid #111;
	border-bottom: 1px solid #111;
	border-left: 1px solid var(--green-dark);
	background: rgba(27, 27, 27, 0.88);
}

.censorship-editor details > summary {
	margin: 0 auto;
}

.censorship-word {
	padding-bottom: 2.5rem;
}

/* #endregion censorship · word editor */

/* #region shared · remove controls */

.remove-control {
	position: absolute;
	right: 1rem;
	bottom: 0.75rem;
}

.remove-control form {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin-top: 0.5rem;
}

/* #endregion shared · remove controls */

/* #region shared · editor alignment */

.filter-grid,
.case-inline-editor {
	margin-top: 1rem;
}

/* #endregion shared · editor alignment */

/* #region moderation · duration and confirmation */

.case-duration {
	margin-top: 0.5rem;
	color: var(--green-highlight);
}

.case-void-confirm {
	display: flex;
	gap: 1rem;
	align-items: center;
	border: 1px solid var(--orange-dark);
}

/* #endregion moderation · duration and confirmation */

/* #region moderation · case list and entries */

.case-list {
	display: grid;
	gap: 1rem;
	text-align: left;
}

.case-entry {
	position: relative;
	padding: 1rem;
	border-top: 1px solid var(--green-mid);
	border-right: 1px solid #111;
	border-bottom: 1px solid #111;
	border-left: 1px solid var(--green-dark);
	background: rgba(27, 27, 27, 0.88);
}

.case-entry-head,
.case-people {
	display: flex;
	gap: 0.75rem 1.5rem;
	align-items: baseline;
	flex-wrap: wrap;
}

.case-entry-head {
	margin-bottom: 0.75rem;
}

.case-resolution {
	margin-left: auto;
	color: var(--green-highlight);
}

.case-controls {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: grid;
	gap: 0.25rem;
	justify-items: end;
}

.case-people {
	margin-bottom: 0.75rem;
}

.case-date {
	margin-top: 0.75rem;
	color: var(--green-dark);
	font-size: 0.9rem;
}

/* #endregion moderation · case list and entries */

/* #region leveling · XP display */

.xp-value {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.xp-icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	object-fit: contain;
}

/* #endregion leveling · XP display */

/* #region leveling · rank card settings */

.level-card-settings {
	grid-column: 1 / -1;
	padding: 1rem;
	border-top: 1px solid var(--green-mid);
	border-right: 1px solid #111;
	border-bottom: 1px solid #111;
	border-left: 1px solid var(--green-dark);
	background: rgba(27, 27, 27, 0.88);
	text-align: center;
}

.level-card-settings > summary {
	margin: 0 auto;
}

.level-card-preview {
	margin: 1rem auto;
}

.level-card-preview img {
	display: block;
	width: min(100%, 900px);
	height: auto;
	margin: 0 auto;
	border: 1px solid var(--green-dark);
}

.level-leaderboard-card img {
	display: block;
	width: min(100%, 900px);
	height: auto;
	margin: 0 auto;
	border: 1px solid var(--green-dark);
}

.level-card-fields {
	margin-top: 1rem;
}

.leveling-rank-card details > summary {
	margin: 0 auto;
}

.leveling-card-form {
	display: grid;
	gap: 1rem;
	text-align: center;
}

.level-card-fields label.wide {
	grid-column: 1 / -1;
}

.level-card-fields input[type="color"] {
	width: 100%;
	min-height: 3rem;
}

/* #endregion leveling · rank card settings */

/* #region leveling · rewards and administration */

.level-reward-row .filter-grid {
	display: block;
	margin: 0;
	text-align: center;
}

.level-reward-row .form-actions {
	display: block;
}

.leveling-admin > details > summary {
	margin: 0 auto;
}

.leveling-admin > details > .filter-grid,
.leveling-admin h3 {
	margin-top: 1.5rem;
}

.level-reward-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* #endregion leveling · rewards and administration */

/* #region shared · panel surfaces */

.card,
.box-green,
.box-orange,
.preview-stage,
.welcome-card,
.accordion-panel {
	padding: 1rem;

	border: 0;

	background: rgba(27, 27, 27, 0.88);

	box-shadow: none;
}

.box-green {
	border: 1px solid var(--green-dark);
	border-top-color: var(--green-mid);
}

.box-orange {
	border: 1px solid var(--orange-dark);
	border-top-color: var(--orange);
}

/* #endregion shared · panel surfaces */

/* #region welcome · preview stage */

.preview-stage {
	display: grid;
	place-items: center;
	position: relative;
	min-height: 420px;
	overflow: hidden;
}

#welcome-card {
	transform-origin: center;
}

.welcome-card.editor {
	display: block;
	position: relative;
	min-height: 180px;
	padding: 0;
	overflow: hidden;
	background: var(--bg);
	border: 1px solid var(--green-dark);
}

/* #endregion welcome · preview stage */

/* #region welcome · draggable elements */

.welcome-card.editor .draggable {
	position: absolute;
	z-index: 2;
	cursor: grab;
	user-select: none;
	touch-action: none;
}

.welcome-card.editor.resize-mode .draggable {
	cursor: nwse-resize;
}

.welcome-card.editor .draggable.dragging {
	cursor: grabbing;
}

.welcome-card.editor .welcome-avatar {
	width: 84px;
	height: 84px;
	left: 40px;
	top: 140px;
	overflow: hidden;
	background: url('/assets/neoslayer.png') center / cover;
	background-clip: padding-box;
}

.welcome-title,
.welcome-username,
.welcome-footer {
	box-sizing: border-box;
	position: relative;
}

.welcome-card.editor .welcome-title::after,
.welcome-card.editor .welcome-username::after,
.welcome-card.editor .welcome-footer::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-sizing: border-box;
	border: 1px dashed var(--green-dark);
}

/* #endregion welcome · draggable elements */

/* #region welcome · text controls */

[data-accordion-panel="text"] > div {
	display: grid;
	gap: 1rem;
}

[data-accordion-panel="text"] > div > div {
	display: grid;
	grid-template-columns: 1.1fr 0.7fr 0.6fr 0.4fr 0.5fr 0.7fr 0.4fr;
	gap: 0.6rem;
	align-items: end;
}

[data-accordion-panel="text"] .field-title {
	margin-bottom: 0.25rem;
}

[data-accordion-panel="text"] .form-input {
	box-sizing: border-box;
	width: 100%;
}

/* #endregion welcome · text controls */

/* #region shared · colour picker */

.color-picker-tools {
	justify-content: center;
}

.color-picker-tools input[type="color"] {
	flex: 1 1 2.5rem;
	min-width: 2.5rem;
	height: 2rem;
	padding: 0.2rem;
}

.color-dropper-btn {
	flex: 0 0 auto;
	font-size: 0.8rem;
}

/* #endregion shared · colour picker */

/* #region shared · tables */

.table-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
}

.data-table th,
.data-table td {
	border: 1px solid var(--green-dark);

	padding: 0.5rem;

	text-align: left;
}

.data-table th {
	color: var(--green);

	background: #24251F;

	text-shadow:
		1px 1px #35392C;
}

.table-action-link + .table-action-link {
	margin-left: 0.75rem;
}

/* #endregion shared · tables */

/* #region shared · status text */

.user-info,
.status,
.meta,
.muted {
	color: var(--green-text);
}

strong,
b {
	color: var(--green-highlight);
}

/* #endregion shared · status text */

/* #region shared · visibility and auth gate */

.hidden,
body.dashboard-auth-locked .dashboard-auth-protected {
	display: none;
}

.scroller-item.hidden {
	display: none;
}

.dashboard-auth-gate {
	display: none;
}

.dashboard-auth-gate.visible {
	display: block;
}

/* #endregion shared · visibility and auth gate */

/* #region shared · toast */

#toast {
	position: fixed;
	right: 1rem;
	bottom: 1rem;

	display: none;

	padding: 1rem;

	border: 1px solid var(--green-mid);

	background: #1B1B1B;

	color: var(--green-text);

	box-shadow:
		1px 1px #090909;
}

/* #endregion shared · toast */

/* #region webhook · channel and identity */

.webhook-editor {
	text-align: left;
}

.webhook-channel-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: end;
}

.webhook-identity-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.webhook-identity-fields[hidden] {
	display: none;
}

.webhook-identity-form {
	display: grid;
	gap: 0.75rem;
}

/* #endregion webhook · channel and identity */

/* #region webhook · headings and actions */

.webhook-section-heading,
.webhook-publish-actions {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.webhook-section-heading h2,
.webhook-section-heading h3,
.webhook-section-heading p {
	margin-top: 0;
}

.webhook-message-actions {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	margin: 0.35rem 0;
}

/* #endregion webhook · headings and actions */

/* #region webhook · message editor */

.webhook-message-form {
	display: grid;
	gap: 1rem;
}

.webhook-format-help {
	margin-bottom: 1rem;
}

.webhook-format-help p {
	line-height: 1.5;
}

/* #endregion webhook · message editor */

/* #region webhook · editing modes */

.webhook-mode-panels {
	display: grid;
	gap: 0.5rem;
}

.webhook-mode-panels details {
	padding: clamp(0.8rem, 2vw, 1.25rem);
	text-align: left;
}

.webhook-mode-content {
	display: grid;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.webhook-mode-panels textarea {
	margin-top: 0.75rem;
	min-height: 10rem;
}

.webhook-message-form .checkbox-line {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 0.5rem;
	width: auto;
}

.webhook-message-form .checkbox-line input[type="checkbox"] {
	width: auto;
	margin: 0;
}

/* #endregion webhook · editing modes */

/* #region webhook · mobile layout */

@media (max-width: 700px) {
	.webhook-channel-form,
	.webhook-identity-fields {
		grid-template-columns: 1fr;
	}
}

/* #endregion webhook · mobile layout */

/* #region global · mobile layout */

@media (max-width: 48rem) {
	.status-grid {
		grid-template-columns: 1fr;
	}

	.filter-grid,
	.case-inline-editor,
	.active-case .case-inline-editor,
	.webhook-channel-form,
	.webhook-identity-fields {
		grid-template-columns: 1fr;
	}

	[data-accordion-panel="text"] > div > div {
		grid-template-columns: 1fr 1fr;
	}

	body {
		padding: 1rem;
	}

	.horizontal-section,
	.title-row,
	.welcome-top,
	.table-toolbar,
	.card-name-row {
		align-items: stretch;
		flex-direction: column;
	}
}

/* #endregion global · mobile layout */

/* #region glass theme · palette and page */

html:has(.glass-page) {
	background: #000;
}

.glass-page {
	
	--glass-accent: #47803b;
	--glass-accent-hot: #a6b890;
	--glass-accent-rgb: 71, 128, 59;
	--glass-ink: #d6d5bc;
	--glass-muted: #779c66;
	--glass-radius: 10px;
	--glass-radius-tight: 6px;

	width: 100%;
	min-height: 100vh;
	max-width: none;
	margin: 0;
	padding: clamp(1rem, 4vw, 3rem) clamp(0.75rem, 3vw, 2rem);

	color: var(--glass-ink);

	background-color: #000;
	background-image: none;
}

/* #endregion glass theme · palette and page */

/* #region glass theme · stage surface */

.glass-page .glass-stage {
	position: relative;

	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 2vw, 1.25rem);

	width: min(100%, 56rem);
	margin: 0 auto;
	padding: clamp(0.75rem, 2.5vw, 1.5rem);

	border-radius: var(--glass-radius);

	background-image:
		radial-gradient(
			125% 125% at 100% 100%,
			rgba(var(--glass-accent-rgb), 0.16),
			rgba(var(--glass-accent-rgb), 0.056) 45%,
			transparent 72%
		),
		linear-gradient(
			180deg,
			rgba(34, 34, 34, 0.78) 0%,
			rgba(12, 12, 12, 0.84) 58%,
			rgba(0, 0, 0, 0.9) 100%
		);

	box-shadow:
		0 6px 14px rgba(0, 0, 0, 0.82),
		inset 0 0 0 2px rgba(0, 0, 0, 0.92);

	backdrop-filter: blur(8px);
}

/* #endregion glass theme · stage surface */

/* #region glass theme · cell surfaces */

.glass-page .glass-cell {
	position: relative;

	padding: clamp(1rem, 3vw, 1.75rem);

	border-radius: var(--glass-radius);

	text-align: center;

	background-image:
		radial-gradient(
			125% 125% at 100% 100%,
			rgba(var(--glass-accent-rgb), 0.09),
			rgba(var(--glass-accent-rgb), 0.032) 45%,
			transparent 72%
		),
		linear-gradient(
			180deg,
			rgba(34, 34, 34, 0.72) 0%,
			rgba(12, 12, 12, 0.78) 58%,
			rgba(0, 0, 0, 0.84) 100%
		);

	box-shadow:
		0 4px 10px rgba(0, 0, 0, 0.82),
		inset 0 0 0 2px rgba(0, 0, 0, 0.92);

	backdrop-filter: blur(4px);
}

/* #endregion glass theme · cell surfaces */

/* #region glass theme · edge lighting */

.glass-page .glass-stage::before,
.glass-page .glass-cell::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: 2;

	border: 1px solid transparent;
	border-radius: inherit;

	-webkit-mask:
		linear-gradient(#000 0 0) padding-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) padding-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;

	pointer-events: none;
}

.glass-page .glass-stage::before {
	background:
		linear-gradient(
			180deg,
			rgb(199, 199, 199) 0%,
			rgb(186, 186, 186) 34%,
			rgb(168, 168, 168) 85%,
			rgba(168, 168, 168, 0) 100%
		)
		border-box;
}

.glass-page .glass-cell::before {
	background:
		linear-gradient(
			180deg,
			rgb(190, 190, 190) 0%,
			rgb(174, 174, 174) 34%,
			rgb(154, 154, 154) 85%,
			rgba(154, 154, 154, 0) 100%
		)
		border-box;
}

/* #endregion glass theme · edge lighting */

/* #region glass theme · inset surfaces */

.glass-page .glass-well {
	border: 0;
	border-radius: var(--glass-radius-tight);

	background-color: #01070a;
	background-image: linear-gradient(180deg, #01070a 0%, #063b06 100%);

	box-shadow:
		inset 0 0 0 2px rgba(0, 0, 0, 0.9),
		inset 0 2px 0 rgba(0, 0, 0, 0.42),
		inset 0 -2px 0 rgba(255, 255, 255, 0.13);
}

/* #endregion glass theme · inset surfaces */

/* #region glass theme · headings and links */

.glass-page h1,
.glass-page h2,
.glass-page h3,
.glass-page .page-title,
.glass-page .card-title,
.glass-page .field-title {
	color: var(--glass-accent-hot);

	text-shadow:
		0 0 14px rgba(var(--glass-accent-rgb), 0.4),
		0 1px 0 rgba(0, 0, 0, 0.9);
}

.glass-page a,
.glass-page button,
.glass-page .button {
	color: var(--glass-accent);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
}

.glass-page a:hover,
.glass-page a:focus-visible,
.glass-page button:hover,
.glass-page button:focus-visible,
.glass-page .button:hover,
.glass-page .button:focus-visible {
	color: var(--glass-accent-hot);
	text-shadow: 0 0 10px rgba(var(--glass-accent-rgb), 0.55);
}

/* #endregion glass theme · headings and links */

/* #region glass theme · form controls */

.glass-page textarea,
.glass-page input,
.glass-page select {
	border: 1px solid rgba(var(--glass-accent-rgb), 0.45);
	border-radius: var(--glass-radius-tight);

	background-color: rgba(0, 0, 0, 0.55);

	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.8),
		inset 0 -1px 0 rgba(255, 255, 255, 0.06);

	color: var(--glass-ink);
}

.glass-page select {
	appearance: none;
	padding-right: 2.25rem;

	background-image:
		linear-gradient(45deg, transparent 50%, var(--glass-muted) 50%),
		linear-gradient(135deg, var(--glass-muted) 50%, transparent 50%);
	background-position:
		calc(100% - 0.9rem) calc(50% - 0.1rem),
		calc(100% - 0.62rem) calc(50% - 0.1rem);
	background-repeat: no-repeat;
	background-size: 0.3rem 0.3rem;
}

.glass-page select option {
	background: #111;
	color: var(--glass-ink);
}

.glass-page input:focus,
.glass-page select:focus,
.glass-page textarea:focus {
	outline-color: var(--glass-accent);
}

/* #endregion glass theme · form controls */

/* #region glass theme · selection and muted text */

.glass-page ::selection {
	background: var(--glass-accent);
	color: #05080a;
}

.glass-page .muted,
.glass-page .user-info {
	color: var(--glass-muted);
}

/* #endregion glass theme · selection and muted text */

/* #region shared · session controls */

.auth-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 0.2rem;

	text-align: right;
}

.auth-right .user-info,
.auth-right #user-status {
	font-size: 0.85em;
	line-height: 1.3;
}

/* #endregion shared · session controls */

/* #region shared · page header */

.page-head {
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 2vw, 1.1rem);

	text-align: left;
}

.page-head-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.page-head .page-title,
.page-head h1 {
	margin: 0;
}

.page-head .scroller {
	max-width: none;
}

@media (max-width: 40rem) {
	.page-head-top {
		flex-direction: column;
		text-align: center;
	}
}

/* #endregion shared · page header */

/* #region shared · inner rim lighting */

.ring-light,
.scroller {
	position: relative;
}

.ring-light::after,
.scroller::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;

	border-radius: inherit;

	box-shadow:
		inset 0 0 0 2px rgba(0, 0, 0, 0.9),
		inset 0 0 0 3px rgba(var(--glass-accent-rgb, 71, 128, 59), 0.6),
		inset 0 0 6px rgba(var(--glass-accent-rgb, 71, 128, 59), 0.34),
		inset 0 0 15px rgba(var(--glass-accent-rgb, 71, 128, 59), 0.18),
		inset 0 0 32px rgba(var(--glass-accent-rgb, 71, 128, 59), 0.1);

	pointer-events: none;
}

/* #endregion shared · inner rim lighting */

/* #region navigation · scroller track */

.scroller {
	display: block;

	width: 100%;
	max-width: 1100px;
	height: 54px;
	margin: 0 auto;

	border-radius: var(--glass-radius-tight, 6px);

	background-color: #01070a;
	background-image: none;

	overflow: hidden;
}

/* #endregion navigation · scroller track */

/* #region navigation · portal buttons */

.scroller .scroller-item {
	position: absolute;
	left: 0;
	top: 10px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 150px;
	height: 34px;
	padding: 0 8px;

	border-radius: 4px;

	background-color: color-mix(in srgb, var(--glass-accent) 16%, #000);
	background-image:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--glass-accent) 55%, #000) 0%,
			color-mix(in srgb, var(--glass-accent) 34%, #000) 58%,
			color-mix(in srgb, var(--glass-accent) 8%, #000) 100%
		);

	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--glass-ink) 72%, transparent),
		inset 0 0 0 1px color-mix(in srgb, var(--glass-muted) 30%, transparent),
		0 0 0 1px rgba(0, 0, 0, 0.5),
		0 3px 8px rgba(0, 0, 0, 0.5);

	backdrop-filter: blur(3px);

	text-decoration: none;

	animation: fellaWalk 20s linear infinite;
}

/* #endregion navigation · portal buttons */

/* #region navigation · portal states */

.scroller .scroller-item.hidden {
	display: none;
}

.scroller .scroller-item:hover,
.scroller .scroller-item:focus-visible {
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--glass-ink) 92%, transparent),
		inset 0 0 0 1px rgba(var(--glass-accent-rgb, 71, 128, 59), 0.45),
		0 0 0 1px rgba(var(--glass-accent-rgb, 71, 128, 59), 0.95),
		0 0 12px rgba(var(--glass-accent-rgb, 71, 128, 59), 0.5);
}

.scroller .scroller-item:active {
	background-image:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--glass-accent) 10%, #000) 0%,
			color-mix(in srgb, var(--glass-accent) 38%, #000) 30%,
			color-mix(in srgb, var(--glass-accent) 7%, #000) 100%
		);

	box-shadow:
		inset 0 1px 3px rgba(0, 0, 0, 0.55),
		inset 0 0 0 1px color-mix(in srgb, var(--glass-accent) 45%, transparent),
		0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* #endregion navigation · portal states */

/* #region navigation · copies and timing */

.scroller .portal-copy {
	animation-name: fellaWalkWrap;
}

.scroller .fella-cdn { animation-delay: 0s; }
.scroller .fella-steinkauz { animation-delay: -5s; }
.scroller .fella-observatory { animation-delay: -10s; }
.scroller .fella-home { animation-delay: -15s; }

/* #endregion navigation · copies and timing */

/* #region navigation · labels */

.scroller span {
	color: var(--glass-accent-hot, #a6b890);
	font-size: 1.05em;
	font-weight: bold;
	line-height: 1;
	text-shadow: 0 0 6px #000, 0 0 10px rgba(var(--glass-accent-rgb, 71, 128, 59), 0.7);

	white-space: nowrap;
	pointer-events: none;
}

/* #endregion navigation · labels */

/* #region navigation · motion */

@keyframes fellaWalk {
	from { left: 0; }
	to { left: 100%; }
}

@keyframes fellaWalkWrap {
	from { left: -100%; }
	to { left: 0; }
}

/* #endregion navigation · motion */