/* AXING GUI Theme | AK */
/* ===== Theme Tokens ===== */
/* Global variables. */
:root {
	--axing-font-light: "frutigercondLight", "Arial Narrow", "Liberation Sans Narrow", "Helvetica Neue", Arial, Helvetica, sans-serif;
	--axing-font-medium: "frutigercond", "Arial Narrow", "Liberation Sans Narrow", "Helvetica Neue", Arial, Helvetica, sans-serif;
	--axing-font-bold: "frutigercondBold", "Arial Narrow", "Liberation Sans Narrow", "Helvetica Neue", Arial, Helvetica, sans-serif;
	--axing-font-extrabold: "frutigercondExtraBold", "Arial Narrow", "Liberation Sans Narrow", "Helvetica Neue", Arial, Helvetica, sans-serif;

	--default-font-size: 18px;
	--axing-line-height: 1.5;
	--axing-line-height-small: 1.15;
	--default-letter-spacing: 0.02em;
	--spacing-v: 1rem;
	--spacing-h: 1rem;
	/* Fallback fonts are included in case the custom font fails to load, or for characters that are not included in the custom font. */
	--sans-font: "Arial Narrow", "Liberation Sans Narrow", "Helvetica Neue", Arial, Helvetica, sans-serif;
	--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
	--standard-border-radius: 5px;
	--border-width: 1px;
	--axing-green: hsl(178, 62%, 36%);
	--axing-green-light: hsl(178, 62%, 46%);
	--axing-green-dark: hsl(178, 62%, 26%);
	--axing-green-transparent: hsla(178, 62%, 36%, 0.1);
	--axing-viewport: 1100px;
	--axing-shadow: 0 0 1rem hsla(0, 0%, 33%, 0.1);
	--axing-logo-black-i: url("../logo/axing-claim-cropped-black-i.svg");
	--axing-logo-white-i: url("../logo/axing-claim-cropped-white-i.svg");
	--axing-logo-claim: var(--axing-logo-black-i);
	--axing-rate-low-max: 1500;
	--axing-rate-mid-max: 3000;
	--axing-navbar-bg: #f5f7ff;
	--axing-navbar-gradient: linear-gradient(180deg, rgba(245, 247, 255, 1) 0%, rgba(243, 245, 252, 1) 50%, rgba(240, 242, 250, 1) 100%);
}

/* Default (light) theme */
:host(:not([data-theme="dark"])),
:root:not([data-theme="dark"]),
[data-theme="light"] {
	color-scheme: light;

	/* Colors */
	--bg: #fff;
	--accent-bg: #f5f7ff;
	--text: rgb(27, 27, 27);
	--text-light: hsl(0, 0%, 40%);
	--text-disabled: hsl(0, 0%, 60%);
	--border: hsl(0, 0%, 75%);
	--accent: var(--axing-green);
	--accent-hover: var(--axing-green-dark);
	--accent-text: var(--bg);
	--code: #8f1944;
	--preformatted: #444;
	--marked: #ffdd33;
	--disabled: hsl(0, 0%, 95%);
	--axing-border-color-light: rgb(230, 220, 210);
	--button-text-color: #fafafa;
	--axing-red: hsl(0, 80%, 50%);
	/* PHY / MoCA */
	--axing-phyrate-25: hsl(140, 80%, 50%);
	--axing-phyrate-20: hsl(140, 40%, 50%);
	--axing-phyrate-10: hsl(140, 20%, 50%);
	--axing-phyrate-0: hsl(140, 1%, 40%);

	--axing-rate-low-bg: #f7d6d6;
	--axing-rate-mid-bg: #f7f1d2;
	--axing-rate-high-bg: #d7f2d7;

	--axing-moca-25: hsl(146, 80%, 60%);
	--axing-moca-20: hsl(146, 70%, 80%);
	--axing-moca-10: hsl(0, 0%, 79%);
	--axing-moca-0: aliceblue;

	/* Focus */
	--focus-color-border: var(--accent);
	--focus-offset: 0px;
	--focus-color-outline: hsla(178, 62%, 36%, 0.1);
}

/* Dark theme based on prefers-color-scheme. */
/* Allows users to have a dark theme if their system is set to dark mode, even if they haven't explicitly selected the dark theme. */
@media only screen and (prefers-color-scheme: dark) {
	:host(:not([data-theme])),
	:root:not([data-theme]) {
		color-scheme: dark;
		/* Colors */
		--bg: hsl(0, 0%, 5%);
		--accent-bg: hsl(0, 0%, 8%);
		--text: hsl(0, 0%, 50%);
		--text-light: hsl(0, 0%, 40%);
		--text-disabled: hsl(0, 0%, 30%);
		--border: hsl(0, 0%, 20%);
		--accent: var(--axing-green);
		--accent-hover: var(--axing-green-dark);
		--accent-text: var(--bg);
		--code: hsl(341, 42%, 37%);
		--preformatted: #ccc;
		--marked: #ffdd33;
		--disabled: #151515;
		--button-text-color: #eee;
		--axing-red: hsl(0, 80%, 30%);

		/* PHY / MoCA */
		--axing-phyrate-25: hsla(146, 65%, 32%, 0.75);
		--axing-phyrate-20: hsla(146, 45%, 24%, 0.72);
		--axing-phyrate-10: hsla(146, 20%, 20%, 0.7);
		--axing-phyrate-0: hsla(146, 8%, 16%, 0.68);

		--axing-rate-low-bg: hsla(0, 55%, 16%, 0.72);
		--axing-rate-mid-bg: hsla(45, 55%, 16%, 0.72);
		--axing-rate-high-bg: hsla(135, 40%, 16%, 0.72);

		--axing-moca-25: hsla(146, 65%, 30%, 0.75);
		--axing-moca-20: hsla(176, 46%, 24%, 0.78);
		--axing-moca-10: hsla(0, 0%, 24%, 0.72);
		--axing-moca-0: hsla(210, 20%, 18%, 0.72);

		--axing-logo-claim: var(--axing-logo-white-i);
		--axing-green-transparent: hsla(178, 62%, 36%, 0.15);
		--axing-border-color-light: hsl(0, 0%, 15%);
		--axing-navbar-bg: hsl(0, 0%, 9%);
		--axing-navbar-gradient: linear-gradient(180deg, hsl(0, 0%, 12%) 0%, hsl(0, 0%, 10%) 50%, hsl(0, 0%, 8%) 100%);
	}
	/* Add a bit of transparency so light media isn't so glaring in dark mode */
	img,
	video {
		opacity: 0.8;
	}
}

/* Dark theme: */
/* This is separate from the prefers-color-scheme media query to allow users to explicitly set dark mode, even if their system is set to light mode. */
[data-theme="dark"] {
	color-scheme: dark;
	/* Colors */
	--bg: hsl(0, 0%, 5%);
	--accent-bg: hsl(0, 0%, 8%);
	--text: hsl(0, 0%, 50%);
	--text-light: hsl(0, 0%, 40%);
	--text-disabled: hsl(0, 0%, 30%);
	--border: hsl(0, 0%, 20%);
	--accent: var(--axing-green);
	--accent-hover: var(--axing-green-dark);
	--accent-text: var(--bg);
	--code: hsl(341, 42%, 37%);
	--preformatted: #ccc;
	--marked: #ffdd33;
	--disabled: #151515;
	--button-text-color: #eee;
	--axing-red: hsl(0, 80%, 30%);
	--axing-logo-claim: var(--axing-logo-white-i);
	--axing-green-transparent: hsla(178, 62%, 36%, 0.15);
	--axing-border-color-light: hsl(0, 0%, 15%);
	--axing-navbar-bg: hsl(0, 0%, 9%);
	--axing-navbar-gradient: linear-gradient(180deg, hsl(0, 0%, 12%) 0%, hsl(0, 0%, 10%) 50%, hsl(0, 0%, 8%) 100%);

	/* PHY / MoCA */
	--axing-phyrate-25: hsla(146, 65%, 32%, 0.75);
	--axing-phyrate-20: hsla(146, 45%, 24%, 0.72);
	--axing-phyrate-10: hsla(146, 20%, 20%, 0.7);
	--axing-phyrate-0: hsla(146, 8%, 16%, 0.68);

	--axing-rate-low-bg: hsla(0, 55%, 16%, 0.72);
	--axing-rate-mid-bg: hsla(45, 55%, 16%, 0.72);
	--axing-rate-high-bg: hsla(135, 40%, 16%, 0.72);

	--axing-moca-25: hsla(146, 65%, 30%, 0.75);
	--axing-moca-20: hsla(176, 46%, 24%, 0.78);
	--axing-moca-10: hsla(0, 0%, 24%, 0.72);
	--axing-moca-0: hsla(210, 20%, 18%, 0.72);
}

/* ===== Base Reset ===== */
/* Reset box-sizing */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Reset default appearance */
textarea,
select,
input,
progress {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	letter-spacing: var(--default-letter-spacing);
}

html {
	/* Set the font globally */
	font-family: var(--axing-font-medium), var(--sans-font);
	scroll-behavior: smooth;
	font-size: var(--default-font-size);
}

b,
strong {
	font-family: var(--axing-font-bold), var(--sans-font);
	font-weight: 400;
}

.text-extra-bold {
	font-family: var(--axing-font-extrabold), var(--sans-font);
}

/* ===== Layout Foundation ===== */
/* Make the body a nice central block */
body {
	color: var(--text);
	background-color: var(--bg);
	font-size: var(--default-font-size);
	line-height: var(--axing-line-height);
	letter-spacing: var(--default-letter-spacing);
	display: grid;
	grid-template-columns: 1fr min(var(--axing-viewport), 92%) 1fr;
	grid-template-rows: auto auto 1fr auto;
	min-height: 100vh;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body > * {
	grid-column: 2;
}

/* Make the header bg full width, but the content inline with body */
body > header {
	background-color: var(--accent-bg);
	border-bottom: var(--border-width) solid var(--axing-border-color-light);
	text-align: center;
	padding: 0 0.5rem 1rem 0.5rem;
	grid-column: 1 / -1;
}

#top-header:empty {
	display: none;
}

nav#navbar {
	background-color: var(--axing-navbar-bg);
	background-image: var(--axing-navbar-gradient);
	grid-column: 1 / -1;
	padding: 0;
	border-bottom: var(--border-width) solid var(--axing-border-color-light);
	transition: box-shadow 150ms ease;
	/* box-shadow: var(--axing-shadow); */
	box-shadow:
		0 1px 0 rgba(20, 30, 60, 0.06),
		0 8px 24px rgba(20, 30, 60, 0.06);
	justify-items: flex-start;
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--axing-navbar-height);
}

nav#navbar.menu-open {
	box-shadow: none;
}

nav#navbar .nav-inner {
	width: min(var(--axing-viewport), 92%);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "left right";
	align-items: center;
	align-content: center;
	row-gap: 0;
	padding: 0.875rem 0 0.75rem 0;
}

nav#navbar.menu-open .nav-inner {
	grid-template-areas:
		"left right"
		"center center";
	row-gap: 0.5rem;
}

nav#navbar .nav-left {
	grid-area: left;
	align-self: center;
	justify-self: start;
}

nav#navbar .nav-center {
	grid-area: center;
	align-self: center;
	width: 100%;
	display: none;
}

nav#navbar.menu-open .nav-center {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	width: 100%;
	max-height: calc(100dvh - 4em);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 0;
	padding-bottom: 1rem;
	background-color: var(--axing-navbar-bg);
	border-bottom: var(--border-width) solid var(--axing-border-color-light);
	box-shadow: 0 8px 8px -8px hsla(0, 0%, 33%, 0.1);
}

nav#navbar.menu-open .nav-center #nav-list {
	width: 100%;
}

nav#navbar.menu-open .nav-center #nav-list li {
	width: 100%;
}

nav#navbar .nav-center .theme-toggle {
	display: flex;
	margin: 0.5rem auto 0;
}

nav#navbar .nav-right {
	grid-area: right;
	align-self: center;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 1rem;
}

button.nav-menu-toggle {
	align-self: center;
	box-sizing: border-box;
	height: 1.75rem;
	width: 2.25rem;
	min-width: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
	border: 1px solid var(--border);
	border-radius: var(--standard-border-radius);
	background: transparent;
	cursor: pointer;
	color: var(--axing-green);
}

button.nav-menu-toggle .nav-menu-toggle-icon {
	width: 1rem;
	height: 0.75rem;
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
}

button.nav-menu-toggle .nav-menu-toggle-icon .bar {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background-color: currentColor;
}

nav#navbar button.nav-menu-toggle:enabled:hover {
	background-color: var(--axing-green-transparent);
	border-color: var(--accent);
}

#nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--axing-font-medium), var(--sans-font);
	font-size: var(--default-font-size);
	font-weight: 400;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#nav-list li {
	margin: 0;
	padding: 0.5rem 0.75rem;
	width: 12rem;
	text-align: center;
	/* background-color: var(--axing-green-transparent); */
}

#nav-list li.active {
	background-color: var(--axing-green-transparent);
}

#nav-list li:has(a:hover) {
	background-color: var(--axing-green-transparent);
}

#nav-list a {
	text-decoration: none;
	/* text-transform: uppercase; */
	text-align: center;
	font-family: var(--axing-font-bold), var(--sans-font);
	letter-spacing: 0.01em;
}

#nav-list a.active,
#nav-list a[aria-current="page"] {
	font-weight: 700;
}

#nav-list a:hover {
	text-decoration: underline;
}

body > header > *:only-child {
	margin-block-start: 1rem;
}

body > header h1 {
	max-width: 1200px;
	margin: 1rem auto;
}

body > header p {
	max-width: 40rem;
	margin: 1rem auto;
}

header h1 {
	color: var(--axing-green);
	font-size: 1.75rem;
}

/* Add a little padding to ensure spacing is correct between content and header nav */
main {
	grid-row: 3;
	padding-top: 1rem;
	min-height: 0;
	min-width: 0;
}

body > footer {
	grid-row: 4;
	align-self: end;
	margin-top: 2rem;
	padding: 1rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	row-gap: 1rem;
	column-gap: 2rem;
	color: var(--text-light);
	font-size: 0.9rem;
	font-family: var(--axing-font-light), var(--sans-font);
	text-align: center;
	border-top: var(--border-width) solid var(--axing-border-color-light);
	background-color: var(--accent-bg);
	grid-column: 1 / -1;
}

body > footer > * {
	min-width: 0;
	overflow-wrap: anywhere;
}

.bordered {
	border: var(--border-width) solid var(--border);
	border-radius: var(--standard-border-radius);
}

/* ===== Typography ===== */
/* Format headers */
h1 {
	font-size: 1.5rem;
}

h2 {
	font-size: 1.375rem;
	margin-top: 1rem;
}

h3 {
	font-size: 1.25rem;
	margin-top: 1rem;
}

h4 {
	font-size: 1.125rem;
}

h5 {
	font-size: 1rem;
}

h6 {
	font-size: 1rem;
}

h1,
h2,
h3 {
	font-family: var(--axing-font-bold), var(--sans-font);
	color: var(--axing-green);
}

h4,
h5,
h6 {
	font-family: var(--axing-font-medium), var(--sans-font);
	color: var(--axing-green);
}

article h1:first-child,
section h1:first-child {
	margin-top: 0;
}

p {
	margin: 1rem 0;
}

/* Prevent long strings from overflowing container */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

h1,
h2,
h3 {
	line-height: var(--axing-line-height);
	letter-spacing: normal;
}

/* ===== Interactive Elements ===== */
/* Format links & buttons */
a,
a:visited {
	color: var(--accent);
}

a:hover {
	text-decoration: none;
}

*:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

button,
.button,
a.button,
/* extra specificity to override a */
input[type="submit"],
input[type="reset"],
input[type="button"] {
	border: var(--border-width) solid var(--accent);
	background-color: var(--accent);
	color: var(--button-text-color);
	padding: 0.5em 1em;
	text-decoration: none;
	line-height: var(--axing-line-height-small);
	letter-spacing: var(--default-letter-spacing);
}

button.outline,
.button.outline,
a.button.outline,
input[type="submit"].outline,
input[type="reset"].outline,
input[type="button"].outline {
	border-color: var(--accent);
	background-color: transparent;
	color: var(--accent);
}

button.outline:hover,
.button.outline:hover,
a.button.outline:hover,
input[type="submit"].outline:hover,
input[type="reset"].outline:hover,
input[type="button"].outline:hover {
	border-color: var(--accent-hover);
	background-color: transparent;
	color: var(--accent-hover);
}

.button[aria-disabled="true"],
input:disabled,
textarea:disabled,
select:disabled,
button[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

input[type="text"]:disabled,
textarea:disabled,
select:disabled {
	cursor: not-allowed;
	background-color: var(--disabled);
}

input[type="range"] {
	padding: 0;
}

/* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */
abbr[title] {
	cursor: help;
	text-decoration-line: underline;
	text-decoration-style: dotted;
}

button:enabled:not(.outline):hover,
.button:not([aria-disabled="true"]):not(.outline):hover,
input[type="submit"]:enabled:not(.outline):hover,
input[type="reset"]:enabled:not(.outline):hover,
input[type="button"]:enabled:not(.outline):hover {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
	cursor: pointer;
}

button.outline:enabled:hover,
.button.outline:not([aria-disabled="true"]):hover,
a.button.outline:hover,
input[type="submit"].outline:enabled:hover,
input[type="reset"].outline:enabled:hover,
input[type="button"].outline:enabled:hover {
	border-color: var(--accent-hover);
	background-color: var(--axing-green-transparent);
	color: var(--accent-hover);
	cursor: pointer;
}

.button:focus-visible,
button:focus-visible:where(:enabled),
input:enabled:focus-visible:where([type="submit"], [type="reset"], [type="button"]) {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

/* Format navigation */
header nav {
	font-size: 1rem;
	line-height: var(--axing-line-height);
	padding: 1rem 0 0 0;
}

/* Use flexbox to allow items to wrap, as needed */
header nav ul,
header nav ol {
	align-content: space-around;
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/* List items are inline elements, make them behave more like blocks */
header nav ul li,
header nav ol li {
	display: inline-block;
}

header nav a,
header nav a:visited {
	margin: 0 0.5rem 1rem 0.5rem;
	border: none;
	border-radius: 0;
	color: var(--text);
	display: inline-block;
	padding: 0;
	text-decoration: underline;
	line-height: var(--axing-line-height);
}

header nav a:hover,
header nav a.current,
header nav a[aria-current="page"],
header nav a[aria-current="true"] {
	background: var(--bg);
	border-color: var(--accent);
	color: var(--accent);
	cursor: pointer;
}

header nav a.current {
	background: none;
}

/* ===== Content Containers ===== */
/* Consolidate box styling */
aside,
details,
pre,
progress {
	background-color: var(--accent-bg);
	border: var(--border-width) solid var(--border);
	border-radius: var(--standard-border-radius);
	margin-bottom: 1rem;
}

aside {
	font-size: 1rem;
	width: 100%;
	padding: 0 15px;
	margin-inline-start: 0;
	float: none;
}

article,
fieldset,
dialog {
	border: var(--border-width) solid var(--border);
	padding: 1rem;
	border-radius: var(--standard-border-radius);
	margin-bottom: 1rem;
	max-width: 100%;
	min-width: 0;
}

fieldset {
	margin: 1rem 0;
}

fieldset + fieldset {
	margin-top: 2rem;
}

.button-group-actions {
	margin-top: 2rem;
}

fieldset > legend {
	font-family: var(--axing-font-bold), var(--sans-font);
	font-weight: 600;
}
article h2:first-child,
section h2:first-child,
article h3:first-child,
section h3:first-child {
	margin-top: 1rem;
}

fieldset p:first-of-type {
	margin: 0;
	margin-bottom: 1rem;
}
section {
	border-top: var(--border-width) solid var(--border);
	border-bottom: var(--border-width) solid var(--border);
	padding: 2rem 1rem;
	margin: 3rem 0;
}

/* Don't double separators when chaining sections */
section + section,
section:first-child {
	border-top: 0;
	padding-top: 0;
}

section + section {
	margin-top: 0;
}

section:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

details {
	padding: 0.7rem 1rem;
}

summary {
	cursor: pointer;
	font-weight: bold;
	padding: 0.7rem 1rem;
	margin: -0.7rem -1rem;
	word-break: break-word;
}

details[open] > summary + * {
	margin-top: 0;
}

details[open] > summary {
	margin-bottom: 0.5rem;
}

details[open] > :last-child {
	margin-bottom: 0;
}

details h2:first-of-type {
	margin-top: 0;
}

/* ===== Tables & Forms ===== */
/* Format tables */
table {
	border-collapse: separate;
	border-spacing: 0;
	margin: 1rem 0;
	border: var(--border-width) solid var(--axing-border-color-light);
	border-radius: var(--standard-border-radius);
	overflow: hidden;
}

.security-table {
	table-layout: fixed;
	width: max-content;
	min-width: max-content;
	margin: 0;
}

figure > table {
	width: 100%;
	margin: 1rem 0;
}

td,
th {
	border-right: var(--border-width) solid var(--axing-border-color-light);
	border-bottom: var(--border-width) solid var(--axing-border-color-light);
	padding: 0.5rem;
}

td {
	text-align: center;
}

table tr > :last-child {
	border-right: 0;
}

/* table tr:last-child > * {
	border-bottom: 0;
} */

th {
	background-color: var(--axing-navbar-bg);
	font-family: var(--axing-font-bold), var(--sans-font);
	font-weight: bold;
	text-align: start;
}

table caption {
	font-weight: bold;
	margin-bottom: 0.5rem;
}

/* Format forms */
textarea,
select,
input,
button,
.button {
	font-size: inherit;
	font-family: inherit;
	padding: 0.5em;
	margin-bottom: 0;
	border-radius: var(--standard-border-radius);
	box-shadow: none;
	max-width: 100%;
	display: inline-block;
	letter-spacing: var(--default-letter-spacing);
}

textarea,
select,
input {
	color: var(--text);
	background-color: var(--bg);
	border: var(--border-width) solid var(--border);
}

label {
	display: block;
}

textarea:not([cols]) {
	width: 100%;
}

/* Add arrow to drop-down */
select:not([multiple]) {
	background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%), linear-gradient(135deg, var(--text) 51%, transparent 49%);
	background-position: calc(100% - 15px), calc(100% - 10px);
	background-size:
		5px 5px,
		5px 5px;
	background-repeat: no-repeat;
	padding-inline-end: 25px;
}

*[dir="rtl"] select:not([multiple]) {
	background-position: 10px, 15px;
}

/* checkbox and radio button style */
input[type="checkbox"],
input[type="radio"] {
	vertical-align: middle;
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
	display: inline-block;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: var(--bg);
	border: var(--border-width) solid var(--border);
	cursor: pointer;
	margin: 0;
	line-height: var(--axing-line-height-small);
}

select {
	line-height: var(--axing-line-height-small);
}

input[type="text"],
input[type="password"] {
	line-height: var(--axing-line-height-small);
}

input[type="text"]::placeholder {
	color: var(--text-light);
}

input[type="checkbox"] + label,
input[type="radio"] + label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	vertical-align: middle;
}

label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

label:has(+ input[type="checkbox"]),
label:has(+ input[type="radio"]) {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-right: 0.5rem;
}

label + input[type="checkbox"],
label + input[type="radio"] {
	vertical-align: middle;
}

input[type="radio"] {
	border-radius: 100%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background-color: var(--accent);
	border-color: var(--accent);
}

input[type="radio"]:checked {
	background-color: var(--bg);
	border: 2px solid var(--accent);
}

input[type="checkbox"]:checked::after {
	/* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
	content: " ";
	width: 0.375rem;
	height: 0.75rem;
	border-radius: 0;
	position: absolute;
	top: 0.15em;
	left: 0.43em;
	background-color: transparent;
	border-right: solid var(--bg) 3px;
	border-bottom: solid var(--bg) 3px;
	transform: rotate(45deg);
}

input[type="radio"]:checked::after {
	/* creates a colored circle for the checked radio button  */
	content: " ";
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--accent);
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
	border-color: var(--accent);
	outline: 2px solid hsla(178, 62%, 36%, 0.5);
	outline-offset: 2px;
}

/* Makes input fields wider on smaller screens */
textarea,
select,
input {
	width: 100%;
}

/* Set a height for color input */
input[type="color"] {
	height: 2.5rem;
	padding: 0.2rem;
}

/* Style file input selector like buttons */
.file-input-container {
	max-width: 100%;
	width: 32rem;
	margin: 1rem 0;
}

input[type="file"] {
	font-size: inherit;
	font-family: inherit;
	color: var(--text);
	padding: 0;
	border: var(--border-width) solid var(--accent);
	min-width: 10rem;
	width: 100%;
	max-width: 100%;
	display: block;
	box-sizing: border-box;
}

input[type="file"]:hover {
	border-color: var(--accent-hover);
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
	border: none;
	background-color: var(--accent);
	color: var(--accent-text);
	padding: 0.5em 1em;
	line-height: var(--axing-line-height-small);
	border-radius: var(--standard-border-radius);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-left: -1px;
	margin-right: 0.5rem;
	cursor: pointer;
}

input[type="file"]:enabled:hover::file-selector-button,
input[type="file"]:enabled:hover::-webkit-file-upload-button {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
}

input[type="file"]:disabled::file-selector-button,
input[type="file"]:disabled::-webkit-file-upload-button {
	cursor: not-allowed;
	background-color: var(--disabled);
	border-color: var(--disabled);
	color: var(--text-light);
}

/* ===== Media, Code & Misc ===== */
/* Misc body elements */
hr {
	border: none;
	height: var(--border-width);
	background: var(--border);
	margin: 1rem auto;
}

mark {
	padding: 2px 5px;
	border-radius: var(--standard-border-radius);
	background-color: var(--marked);
	color: black;
}

mark a {
	color: var(--accent);
}

img,
video {
	max-width: 100%;
	height: auto;
	border-radius: var(--standard-border-radius);
}

figure {
	margin: 0;
	display: block;
	overflow-x: auto;
}

figure > img,
figure > picture > img {
	display: block;
	margin-inline: auto;
}

figcaption {
	position: sticky;
	left: 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--text-light);
	margin-block: 1rem;
}

blockquote {
	margin-inline-start: 2rem;
	margin-inline-end: 0;
	margin-block: 2rem;
	padding: 0.4rem 0.8rem;
	border-inline-start: 0.35rem solid var(--accent);
	color: var(--text-light);
	font-style: italic;
}

cite {
	font-size: 0.9rem;
	color: var(--text-light);
	font-style: normal;
}

/* Use mono font for code elements */
code,
pre,
pre span,
kbd,
samp {
	font-family: var(--mono-font);
	color: var(--code);
}

kbd {
	color: var(--preformatted);
	border: var(--border-width) solid var(--preformatted);
	border-bottom: 3px solid var(--preformatted);
	border-radius: var(--standard-border-radius);
	padding: 0.1rem 0.4rem;
}

pre {
	padding: 1rem 1.4rem;
	max-width: 100%;
	overflow: auto;
	color: var(--preformatted);
}

/* Fix embedded code within pre */
pre code {
	color: var(--preformatted);
	background: none;
	margin: 0;
	padding: 0;
}

/* Progress bars */
/* Declarations are repeated because you */
/* cannot combine vendor-specific selectors */
progress {
	width: 100%;
}

progress:indeterminate {
	background-color: var(--accent-bg);
}

progress::-webkit-progress-bar {
	border-radius: var(--standard-border-radius);
	background-color: var(--accent-bg);
}

progress::-webkit-progress-value {
	border-radius: var(--standard-border-radius);
	background-color: var(--accent);
}

progress::-moz-progress-bar {
	border-radius: var(--standard-border-radius);
	background-color: var(--accent);
	transition-property: width;
	transition-duration: 0.3s;
}

progress:indeterminate::-moz-progress-bar {
	background-color: var(--accent-bg);
}

#reboot-message-container {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

#reboot-message-container .reboot-card {
	background: var(--bg);
	border: var(--border-width) solid var(--border);
	border-radius: var(--standard-border-radius);
	padding: 1.25rem 1.5rem;
	width: min(90vw, 420px);
	text-align: center;
}

#reboot-message-container.is-hidden {
	display: none;
}

.is-hidden {
	display: none;
}

#reboot-message-container .reboot-msg {
	margin: 0 0 0.75rem;
	font-weight: 700;
}

#reboot-message-container .reboot-timer {
	margin: 0.5rem 0 0;
	color: var(--text-muted);
}

dialog {
	background-color: var(--bg);
	max-width: calc(100vw - 2rem);
	margin: auto;
}

dialog::backdrop {
	background-color: var(--bg);
	opacity: 0.8;
}

dialog h2:first-of-type {
	margin-top: 0;
}

@media only screen and (min-width: 721px) {
	header nav a {
		border: var(--border-width) solid var(--border);
		border-radius: var(--standard-border-radius);
		padding: 0.1rem 1rem;
		text-decoration: none;
	}

	header nav a.current {
		background: var(--bg);
	}

	aside {
		width: 30%;
		float: right;
		margin-inline-start: 15px;
	}

	*[dir="rtl"] aside {
		float: left;
	}

	textarea,
	select,
	input {
		width: auto;
	}

	dialog {
		max-width: 40rem;
	}
}

/* ===== Utility Styles ===== */
/* Superscript & Subscript */
/* Prevent scripts from affecting line-height. */
sup,
sub {
	vertical-align: baseline;
	position: relative;
}

sup {
	top: -0.4em;
}

sub {
	top: 0.3em;
}

/* Classes for notices */
.notice {
	background: var(--accent-bg);
	border: var(--border-width) solid var(--border);
	border-radius: var(--standard-border-radius);
	padding: 1.5rem;
	margin: 2rem 0;
}

div.notice p:first-of-type {
	margin-top: 0;
}

div.notice p:last-of-type {
	margin-bottom: 0;
}

/* ===== Print ===== */
/* Print */
@media print {
	@page {
		margin: 1cm;
	}

	body {
		display: block;
	}

	body > header {
		background-color: unset;
	}

	body > header nav,
	body > footer {
		display: none;
	}

	article {
		border: none;
		padding: 0;
	}

	a[href^="http"]::after {
		content: " <" attr(href) ">";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	a {
		text-decoration: none;
	}

	p {
		widows: 3;
		orphans: 3;
	}

	hr {
		border-top: var(--border-width) solid var(--border);
	}

	mark {
		border: var(--border-width) solid var(--border);
	}

	figure {
		break-inside: avoid;
	}

	pre code {
		white-space: pre-wrap;
	}
}

/* ===== Page Components ===== */
#axing-logo-claim {
	background-image: var(--axing-logo-claim);
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	background-position: center;
	height: 2.5rem;
	aspect-ratio: 426 / 74;
	width: auto;
	display: block;
}

header .header-inner {
	display: flex;
	row-gap: 1rem;
	column-gap: 4rem;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width: min(var(--axing-viewport), 96%);
	margin: 0 auto;
}

header #device-name {
	font-size: 1.75rem;
	color: var(--axing-green);
	font-family: var(--axing-font-bold), var(--sans-font);
}

@media screen and (min-width: 992px) {
	h2 {
		font-size: 1.5rem;
	}

	h4 {
		font-size: 1rem;
	}
	header .header-inner .logo-wrapper {
		justify-self: start;
	}

	header .header-inner #device-name {
		justify-self: center;
	}
}

article.page-container {
	border: none;
	padding: var(--spacing-v) 0;
}

header h1 {
	margin: var(--spacing-v) 0;
}

header + p.page-note,
h1 + p.page-note {
	margin: var(--spacing-v) 0 var(--spacing-v) 0;
	color: var(--text-light);
	max-width: 70rem;
}

article > section {
	border: none;
	margin: 1rem 0;
	padding: 1rem 0;
}

.kv-list {
	margin: 0.5rem 0;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 1.5rem;
	row-gap: 0.375rem;
}

.kv-list .kv-row {
	display: contents;
}

.kv-list dt {
	font-weight: 400;
}

.kv-list dd {
	margin-left: 2rem;
}

dd#type-model {
	font-family: var(--axing-font-bold), var(--sans-font);
	color: var(--axing-green);
}

.version-info {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 1rem;
	row-gap: 0.25rem;
	margin: 0 0 1rem 0;
}

.version-info dt,
.version-info dd {
	margin: 0;
}

.note-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem 1rem;
	margin: 0 0 1rem 0;
	line-height: var(--axing-line-height);
}

.grid-phyrate-description dd {
	color: var(--text-light);
}

dl.note-grid dt {
	font-weight: 400;
	margin: 0;
	color: inherit;
}

dl.note-grid dd {
	margin: 0 0 0 2rem;
	color: var(--text-light);
}

/* PHY / MoCA Styles */
.legend-grid-phyrate {
	margin: 1rem 0;
	display: grid;
	grid-template-columns: 6rem;
	gap: 0;
	width: 100%;
}

.legend-grid-phyrate .legend-phyrate-cell {
	width: 6rem;
	min-width: 6rem;
	padding: 0.25rem 0.25rem;
	justify-content: center;
	align-content: center;
	font-weight: bolder;
	text-align: center;
}

#table-phy-rate {
	margin: 0;
}

#table-phy-rate .demo-table-row {
	display: none;
}

#table-phy-rate.demo-visible .demo-table-row {
	display: table-row;
}

.demo-table-row td {
	padding: 0.25rem 0.5rem;
}

.phyrate-cell {
	min-width: 3rem;
	text-align: center;
	background-color: var(--accent-bg);
}

.phyrate-25 {
	background-color: var(--axing-moca-25) !important;
}

.phyrate-20 {
	background-color: var(--axing-moca-20) !important;
}

.phyrate-10 {
	background-color: var(--axing-moca-10) !important;
}

.phyrate-gcd {
	background-color: var(--axing-moca-0) !important;
}

.rate-low {
	background-color: var(--axing-rate-low-bg) !important;
}

.rate-mid {
	background-color: var(--axing-rate-mid-bg) !important;
}

.rate-high {
	background-color: var(--axing-rate-high-bg) !important;
}

.red-label {
	color: var(--axing-red);
}

table#table-phy-rate {
	border-collapse: collapse;
}

table#table-phy-rate td,
table#table-phy-rate th {
	border: 1px solid var(--accent-bg);
}

table#table-phy-rate tr:first-child td,
table#table-phy-rate td:first-child {
	font-weight: bold;
	font-family: var(--axing-font-bold), var(--sans-font);
}

@media screen and (min-width: 420px) {
	.legend-grid-phyrate {
		grid-template-columns: repeat(4, 6rem);
		width: max-content;
	}
}

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

.band-table {
	table-layout: auto;
	width: 100%;
	min-width: max-content;
	margin-bottom: 0;
}
.band-table th,
.band-table td {
	white-space: nowrap;
}

.band-table td {
	text-align: center;
}

.band-table th,
.band-table td,
.security-table th,
.security-table td {
	border-left: 0;
	border-right: 0;
	border-top: 0;
	border-bottom: var(--border-width) solid var(--axing-border-color-light);
}

.band-table input[type="text"] {
	min-width: 10rem;
	max-width: none;
}

.band-table th:nth-child(4),
.band-table td:nth-child(4) {
	width: 9rem;
	min-width: 9rem;
}

.band-table input[name="scanOffset"] {
	width: 8rem;
	min-width: 8rem;
}

.panel-actions {
	margin-top: 1.5rem;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 1rem;
	row-gap: 1rem;
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem 1rem;
	align-items: center;
}

.form-grid input[type="text"] {
	justify-self: start;
}

.password-grid input.password-input {
	margin-left: 0;
}

.ip-grid {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.phy-options {
	display: flex;
	column-gap: 2rem;
	row-gap: 1rem;
	flex-wrap: wrap;
}

.ip-grid .radio-grid,
.ip-grid .ip-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem 1rem;
	align-items: center;
}

.field-desc {
	color: var(--text-light);
}

.ip-grid .radio-grid .field-desc {
	margin-left: 2rem;
}

.grid-general-settings {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem 1rem;
	align-items: center;
	max-width: 100%;
}

@media screen and (min-width: 576px) {
	.note-grid {
		grid-template-columns: 12rem minmax(0, 46rem);
	}

	dl.note-grid dd {
		margin-left: 0;
	}

	.kv-list {
		grid-template-columns: max-content 1fr;
	}

	.kv-list dd {
		margin-left: 0;
	}

	dl dd {
		margin-left: 0;
	}

	.panel-actions {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: max-content;
	}

	input.field-ip,
	.panel-actions input[type="button"],
	.panel-actions input[type="submit"],
	.panel-actions input[type="reset"],
	.panel-actions button {
		width: auto;
	}

	.password-grid {
		grid-template-columns: 9rem 1fr;
	}
}

@media screen and (min-width: 800px) {
	header .header-inner {
		justify-content: flex-start;
	}

	.ip-grid .radio-grid {
		grid-template-columns: 10rem 1fr;
	}

	.ip-grid .ip-fields {
		grid-template-columns: 10rem 9rem 1fr;
	}

	.grid-general-settings {
		grid-template-columns: 12rem 9rem 1fr;
	}

	.ip-grid .radio-grid .field-desc {
		margin-left: 0;
	}
}

@media screen and (min-width: 992px) {
	nav#navbar .nav-inner {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "left center right";
		padding: 0;
		min-height: 64px;
	}

	nav#navbar .nav-center {
		align-self: center;
		display: grid;
		grid-template-columns: 0.5fr auto 1fr;
		align-items: center;
		gap: 0rem;
		position: static;
		left: auto;
		right: auto;
		top: auto;
		max-height: none;
		overflow: visible;
		padding: 0;
		background-color: transparent;
		border-bottom: none;
		box-shadow: none;
		width: 100%;
		min-width: 0;
	}

	nav#navbar .nav-center .theme-toggle {
		grid-column: 3;
		justify-self: end;
		margin: 0;
	}

	nav#navbar .nav-left,
	nav#navbar .nav-right {
		align-self: center;
	}

	button.nav-menu-toggle {
		display: none;
	}

	#nav-list {
		grid-column: 2;
		justify-self: center;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 0;
		justify-content: center;
		align-items: center;
		align-content: center;
		margin: 0;
	}

	#nav-list li {
		margin: 0;
		width: auto;
		text-align: left;
	}
	#nav-list li.active {
		border-radius: var(--standard-border-radius);
	}
}

/* ===== Theme Toggle ===== */
button.theme-toggle {
	align-self: center;
	box-sizing: border-box;
	width: 4rem;
	height: 1.75rem;
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	color: var(--text-light);
	justify-content: center;
}

button.theme-toggle:enabled:hover {
	background-color: var(--axing-green-transparent);
	border-color: var(--accent);
}

button.theme-toggle .theme-icon {
	width: 18px;
	height: 18px;
	display: inline-block;
	background-color: currentColor;
	transition:
		color 0.2s ease,
		opacity 0.2s ease;
}

button.theme-toggle .icon-sun,
button.theme-toggle .icon-moon {
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	transition:
		color 0.2s ease,
		opacity 0.2s ease;
}

button.theme-toggle .icon-sun {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239592' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v3'/%3E%3Cpath d='M12 18.5v3'/%3E%3Cpath d='M2.5 12h3'/%3E%3Cpath d='M18.5 12h3'/%3E%3Cpath d='M5.4 5.4l2.1 2.1'/%3E%3Cpath d='M16.5 16.5l2.1 2.1'/%3E%3Cpath d='M18.6 5.4l-2.1 2.1'/%3E%3Cpath d='M7.5 16.5l-2.1 2.1'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239592' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v3'/%3E%3Cpath d='M12 18.5v3'/%3E%3Cpath d='M2.5 12h3'/%3E%3Cpath d='M18.5 12h3'/%3E%3Cpath d='M5.4 5.4l2.1 2.1'/%3E%3Cpath d='M16.5 16.5l2.1 2.1'/%3E%3Cpath d='M18.6 5.4l-2.1 2.1'/%3E%3Cpath d='M7.5 16.5l-2.1 2.1'/%3E%3C/svg%3E");
}

button.theme-toggle .icon-moon {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.5 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 11 10.5z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.5 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 11 10.5z'/%3E%3C/svg%3E");
}

html[data-theme="light"] button.theme-toggle .icon-sun,
html[data-theme="dark"] button.theme-toggle .icon-moon {
	color: var(--accent);
	opacity: 1;
}

html[data-theme="light"] button.theme-toggle .icon-moon,
html[data-theme="dark"] button.theme-toggle .icon-sun {
	color: var(--text-light);
}

html[data-theme="dark"] button.theme-toggle .icon-sun:hover,
html[data-theme="light"] button.theme-toggle .icon-moon:hover {
	color: var(--accent);
}

html[data-theme="dark"] button.theme-toggle .icon-moon:hover,
html[data-theme="light"] button.theme-toggle .icon-sun:hover {
	color: var(--accent-hover);
}