:root {
	--site-teal: #2dd1b5;
	--site-orange: #f47721;
	--site-deep-green: #08715f;
	--site-ink: #46545a;
	--site-border: #dce8e5;
}

html,
body {
	min-height: 100%;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--site-teal);
	color: var(--site-ink);
}

.site-accent {
	height: 7px;
	flex: 0 0 7px;
	background: var(--site-orange);
}

.site-header {
	background: #fff;
	box-shadow: 0 2px 10px rgb(22 66 58 / 9%);
}

.site-nav {
	min-height: 68px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.site-brand {
	color: var(--site-orange);
	font-size: 1.35rem;
	font-weight: 700;
	text-decoration: none;
}

.site-brand:hover {
	color: var(--site-deep-green);
}

.site-nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem;
}

.site-nav-link {
	padding: .7rem .85rem;
	color: #657176;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
	color: var(--site-orange);
}

.site-main {
	flex: 1 0 auto;
	padding-top: clamp(2rem, 8vh, 5.5rem);
	padding-bottom: clamp(2rem, 8vh, 5.5rem);
}

.page-surface {
	width: min(100%, 48rem);
	min-height: 14rem;
	margin-inline: auto;
	padding: clamp(1.5rem, 5vw, 3.5rem);
	background: #fff;
	border: 1px solid rgb(255 255 255 / 75%);
	border-radius: .25rem;
	box-shadow: 0 12px 32px rgb(22 66 58 / 9%);
}

.page-surface h1 {
	margin-bottom: 1.25rem;
	color: var(--site-orange);
	font-size: 2.25rem;
	font-weight: 400;
}

.page-surface h2 {
	color: var(--site-orange);
}

.referral-panel {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--site-border);
}

.referral-copy {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: .75rem;
}

.referral-copy input {
	width: 100%;
	min-width: 0;
	min-height: 2.75rem;
	padding: .6rem .8rem;
	border: 1px solid var(--site-border);
	border-radius: .25rem;
	background: #f7faf9;
	color: var(--site-ink);
}

.referral-copy-button {
	min-height: 2.75rem;
	padding: .6rem 1.25rem;
	border: 0;
	border-radius: .25rem;
	background: var(--site-orange);
	color: #fff;
	font-weight: 600;
}

.referral-copy-button:hover {
	background: #da6416;
}

.referral-copy-status {
	min-height: 1.5em;
	margin-top: .5rem;
	color: var(--site-deep-green);
}

.site-flashes:not(:has(.alert)) {
	display: none;
}

.site-flashes {
	padding-top: 1rem;
}

.site-flashes .alert {
	margin-bottom: 0;
}

.page-surface form table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 .75rem;
}

.page-surface form th {
	width: 10rem;
	padding-right: 1rem;
	text-align: left;
	vertical-align: middle;
	font-weight: 600;
}

.page-surface form td input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]) {
	width: 100%;
	min-height: 2.75rem;
	padding: .6rem .8rem;
	border: 1px solid var(--site-border);
	border-radius: .25rem;
	background: #fff;
	color: var(--site-ink);
}

.page-surface form td input:not([type="submit"]):focus {
	border-color: var(--site-teal);
	outline: 0;
	box-shadow: 0 0 0 .2rem rgb(45 209 181 / 20%);
}

.page-surface form input[type="submit"],
.page-surface form button[type="submit"] {
	width: auto;
	min-width: 11rem;
	min-height: 2.75rem;
	padding: .6rem 1.25rem;
	border: 0;
	border-radius: .25rem;
	background: var(--site-orange);
	color: #fff;
	font-weight: 600;
}

.page-surface form input[type="submit"]:hover,
.page-surface form button[type="submit"]:hover {
	background: #da6416;
}

.page-surface form input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 3rem;
	height: 1.7rem;
	margin: .1rem 0;
	border: 1px solid var(--site-border);
	border-radius: 999px;
	background-color: #d7e1de;
	background-image: radial-gradient(circle, #fff 0 0.58rem, transparent 0.62rem);
	background-position: .18rem 50%;
	background-repeat: no-repeat;
	background-size: 1.25rem 1.25rem;
	transition: background-color .18s ease, background-position .18s ease;
	cursor: pointer;
}

.page-surface form input[type="checkbox"]:checked {
	border-color: var(--site-deep-green);
	background-color: var(--site-deep-green);
	background-position: calc(100% - .18rem) 50%;
}

.page-surface form input[type="checkbox"]:focus-visible {
	outline: 3px solid rgb(45 209 181 / 35%);
	outline-offset: 2px;
}

.user-tree-wrapper {
	margin-top: 1.5rem;
}

.user-tree-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 1.25rem 0 1.5rem;
}

.user-tree-toggle {
	padding: .55rem .9rem;
	border: 1px solid var(--site-deep-green);
	border-radius: .4rem;
	background: var(--site-deep-green);
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity .16s ease, transform .16s ease;
}

.user-tree-toggle.secondary {
	background: transparent;
	color: var(--site-deep-green);
}

.user-tree-toggle:hover:not(:disabled),
.user-tree-toggle:focus-visible:not(:disabled) {
	transform: translateY(-1px);
}

.user-tree-toggle:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.user-tree-root,
.user-tree-children {
	list-style: none;
	margin: 0;
	padding-left: 1.4rem;
}

.user-tree-root {
	padding-left: 0;
}

.user-tree-item {
	position: relative;
	margin-top: .75rem;
}

.user-tree-item::before {
	content: "";
	position: absolute;
	left: .7rem;
	top: 1.1rem;
	bottom: -.55rem;
	width: 1px;
	background: #d8eae4;
}

.user-tree-item:last-child::before {
	bottom: .8rem;
}

.user-tree-children {
	margin-top: .7rem;
	padding-left: 1.25rem;
	border-left: 1px solid #d8eae4;
}

.user-tree-node {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .1rem 0;
	cursor: pointer;
}

.user-tree-node:focus-visible {
	outline: 2px solid var(--site-deep-green);
	outline-offset: 4px;
	border-radius: .5rem;
}

.user-tree-toggle-btn,
.user-tree-spacer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--site-border);
	border-radius: .35rem;
	background: #fff;
	color: var(--site-deep-green);
	font-size: .85rem;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
}

.user-tree-toggle-btn:hover,
.user-tree-toggle-btn:focus-visible {
	border-color: var(--site-deep-green);
	box-shadow: 0 0 0 .18rem rgb(8 113 95 / 10%);
	outline: none;
}

.user-tree-spacer {
	visibility: hidden;
}

.user-tree-name {
	display: inline-block;
	padding: .45rem .85rem;
	border: 1px solid var(--site-border);
	border-radius: 999px;
	background: #effaf6;
	color: var(--site-deep-green);
	font-size: .96rem;
	font-weight: 700;
	cursor: default;
}

.user-tree-count {
	padding: .22rem .5rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--site-border);
	color: var(--site-ink);
	font-size: .72rem;
	font-weight: 700;
}

.user-tree-tooltip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + .85rem);
	transform: translateX(-50%);
	min-width: 14rem;
	max-width: min(18rem, 68vw);
	padding: .7rem .8rem;
	border-radius: .5rem;
	background: #10353d;
	color: #edf8f7;
	font-size: .76rem;
	line-height: 1.6;
	box-shadow: 0 12px 24px rgb(16 53 61 / 25%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .16s ease, visibility .16s ease;
	z-index: 20;
}

.user-tree-tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	border-width: .5rem .45rem 0;
	border-style: solid;
	border-color: #10353d transparent transparent;
}

.user-tree-node:hover .user-tree-tooltip,
.user-tree-node:focus-within .user-tree-tooltip {
	opacity: 1;
	visibility: visible;
}

.user-tree-tooltip-title {
	margin-bottom: .2rem;
	font-size: .84rem;
	font-weight: 700;
	color: #fff;
}

.user-tree-item.is-collapsed > .user-tree-children {
	display: none;
}

.user-tree-item.is-collapsed > .user-tree-node .tree-toggle-icon {
	transform: rotate(-90deg);
}

.user-tree-children[hidden] {
	display: none;
}

.site-footer {
	padding: 1.25rem 0;
	background: var(--site-deep-green);
	color: #c5f5e9;
	font-size: .9rem;
}

@media (max-width: 575.98px) {
	.site-nav {
		align-items: flex-start;
		flex-direction: column;
		gap: .25rem;
		padding-top: .75rem;
		padding-bottom: .75rem;
	}

	.site-nav-links {
		width: 100%;
	}

	.site-nav-link {
		padding: .5rem .65rem;
	}

	.referral-copy {
		grid-template-columns: minmax(0, 1fr);
	}

	.page-surface form th,
	.page-surface form td {
		display: block;
		width: 100%;
	}

	.page-surface form th {
		padding: 0 0 .4rem;
	}
}