/**********************************************************************
 * Variables
 */

:root {
	/* Colors */
	--ctext:#001; /* Main text color; also used to mix colors */
	--cbgmain:white; /* Main background color; also used to mix colors */
	--clink:#0160f2; /* Link text */
	--clinkbg:#0160f2; /* Link background (for buttons) */
	--cprimary:#232c99; /* Main blue (for backgrounds) */
	--chighlight:#26b1ed; /* Highlight blue (for borders) */
	--chighlighttxt:#fffaab; /* Highlight yellow (text bg) */
	--cborder:#939ba6; /* Dark border */
	--cborderbg:#4a6466; /* Used as background (e.g. buttons) */
	--caccent:#d1d8df; /* Light accent border */ 
	--caccentbg:#eef3fa; /* Light accent background */
	--calert:#e87502; /* Alert (border only, darken for use as text) */
	--cerror:#b30002; /* Error (text, border, or BG) */
	--csuccess:#018560; /* Success (text, border, or BG) */

	/* Sizing & spacing */
	--shfwidth:35rem; /* Body (half) width */
	--smenuwidth:4rem; /* Menu width (dynamic) */
	--smxcolwidth:48rem; /* Maximum width of a body column */
	--smxtextwidth:48rem; /* Maximum width of a text element */
	--slgutwidth:max(2vw, calc(50vw - var(--shfwidth) - var(--smenuwidth))); /* Gutter width (left) */
	--srgutwidth:max(2vw, calc(50vw - var(--shfwidth))); /* Gutter width (right) */
	--svspace:1.25rem; /* Vertical spacing */
}

/* Dark mode colors */
@media screen and (prefers-color-scheme:dark) {
	:root {
		--ctext:white;
		--cbgmain:black;
		--clink:#3485fe;
		--cprimary:#191f6b;
		--caccent:#31383b;
		--caccentbg:#051521;
		--chighlighttxt:#5f5a0b;
	}
}

/* Other important things:
	- Mobile breakpoint	 <  660px
	- Desktop breakpoint >= 880px
*/


/**********************************************************************
 * Core styles
 */

html {
	background:var(--caccentbg);
	color:var(--ctext);
	scroll-behavior:smooth;
}
body {
	background:var(--cbgmain);
	font:300 100%/1.4 "Atkinson Hyperlegible Next",sans-serif;
	margin:0;
	padding:0;
}
@media screen and (width >= 660px) {
	body {
		font-size:115%;

		/* Grid */
		display:grid;
		grid-template-areas:'head head' 'menu rib' 'menu bc' 'menu main' 'menu foot';
		grid-template-columns:var(--smenuwidth) auto;
	}
}

/*-----------------------------------------------------------
 * Template widths
 */

:root:has(body.app-full) {
	--shfwidth:50rem;
	--smxcolwidth:none;
}

/*-----------------------------------------------------------
 * Headings
 */

h1,h2,h3,h4,h5,h6 {
	margin:0.88em 0 0.5rem;
	line-height:1.1;
	font-weight:500;
}
h1 {
	margin-top:0;
	font-size:260%;
}
h2 {
	font-size:190%;
}
h3 {
	font-size:162%;
	font-weight:400;
}
h4 {
	font-size:138%;
}
h5 {
	font-size:117%;
	font-weight:400;
}
h6 {
	font-size:100%;	
}
h2+h3, h3+h4, h4+h5 {
	margin-top:0;
}

/*-----------------------------------------------------------
 * Heading groups
 */

hgroup p {
	font-size:117%;
}

/*-----------------------------------------------------------
 * Text / lists
 */

p,address,ul,ol {
	margin:0 0 var(--svspace);
}
ul,ol {
	padding:0 0 0 2rem;
}
li {
	margin:0 0 0.5rem;
}
li ul, li ol {
	margin:0.5rem 0 0;
}

/*-----------------------------------------------------------
 * Links (global)
 */

a {
	color:var(--clink);
}
a:focus {
	outline:2px solid var(--chighlight);
}

/*-----------------------------------------------------------
 * Horizontal rules
 */

hr {
	border:0.1rem solid var(--caccent);
}

/*-----------------------------------------------------------
 * Images
 */

img {
	max-width:100%;
	height:auto;
}
a img {
	border:none;
}

/*-----------------------------------------------------------
 * Misc formatting
 */

strong {
	font-weight:500;
}
strong strong {
	font-weight:700;
}
mark,
code {
	background:var(--chighlighttxt);
}


/**********************************************************************
 * Header
 */

body>header {
	grid-area:head;
	background:var(--cprimary);
	border-bottom:0.35rem solid var(--chighlight);
	padding:1rem calc(var(--srgutwidth) + 1rem);
	color:white;
	display:flex;
	flex-flow:row wrap;
	align-items:center;
	justify-content:space-between;
	gap:0.5em;
}
body>header a {
	color:inherit;
}

/* Mobile */
@media screen and (width < 660px) {
	body>header {
		padding-left:5em; /* Make room for menu */
		flex-flow:column;
		align-items:flex-start;
	}
}

/*-----------------------------------------------------------
 * Logo
 */

.logo {
	text-decoration:none;
	font-size:120%;
	font-weight:300;
}
@media screen and (width >= 880px) {
	.logo {
		font-size:162%;
	}
}
.logo::before {
	content:url("/assets/uwec_app_styles/uwec-wordmark-13b44e21.svg") 'University of Wisconsin-Eau Claire ';
	display:inline-block;
	vertical-align:middle;
	width:7em;
	height:2em;
	margin:0 0.75em 0 0;
	padding:0 0.5em 0 0;
	border-right:1px solid white;
	overflow:hidden;
}

/*-----------------------------------------------------------
 * User log in/out menu
 */

#user-menu {
	flex:1 0 40%;
	font-weight:400;
}
/* Welcome, name! */
#user-menu>strong {
	font-size:120%;
}
#user-menu ul {
	list-style:none;
	margin:0 -0.5em;
	padding:0;
}
/* Make standalone sign in link larger */
#user-menu ul:only-child {
	font-size:117%;
}
#user-menu li {
	display:inline-block;
	margin:0;
}
#user-menu li+li::before {
	content:'  |  ';
}
#user-menu a {
	display:inline-block;
	padding:0 0.5em;
}
@media screen and (width < 660px) {
	#user-menu strong {
		margin:0 0.5em 0 0;
	}
	#user-menu ul {
		display:inline-block;
	}
}
@media screen and (width >= 660px) {
	#user-menu {
		text-align:right;
	}
}

/*-----------------------------------------------------------
 * Environment notice
 */

#env-ribbon {
	grid-area:rib;
	position:sticky;
	color:white;
	background:var(--cerror);
	text-align:center;
	font-size:90%;
	z-index:21;
	padding:0.25rem 0.5rem;
	margin:0;
	top:0;
}


/**********************************************************************
 * Navigation
 */

/*-----------------------------------------------------------
 * Menu
 */

/* Container */
#menu {
	grid-area:menu;
	background:var(--caccentbg);
	box-sizing:border-box;
	z-index:20;
	width:var(--smenuwidth);
}

/* Button */
#menu button.menu {
	background:none;
	color:transparent;
	display:block;
	border:0.5em solid transparent;
	height:2.5em;
	width:100%;
	padding:0;
	margin:0 auto;
	font-size:138%;
	font-weight:500;
	overflow:hidden;
}
#menu button.menu::before {
	content:' ';
	display:inline-block;
	vertical-align:middle;
	width:2rem;
	height:0.25rem;
	color:var(--ctext);
	background:currentColor;
	box-shadow:0 -0.7rem 0 currentColor, 0 0.7rem 0 currentColor;
}
#menu.expand button.menu {
	color:inherit;
}
#menu.expand button.menu::after {
	content:'\D7';
	float:right;
	font-weight:200;
	line-height:0.6;
	font-size:3rem;
	height:3rem;
}
#menu.expand button.menu::before {
	display:none;
}

/* Hidden part of menu */
#menu-drawer {
	list-style:none;
	padding:0 1.25em;
	font-size:117%;
}
#menu-drawer ul::before {
	content:attr(aria-label);
	display:block;
	font-weight:500;
}
#menu-drawer ul {
	padding:0;
}
#menu-drawer ul li {
	font-size:85%;
	margin:0.25em 0 0 1.25em;
}
#menu-drawer ul li::marker {
	content:'\2013  ';
	color:color-mix(in srgb, var(--ctext) 50%, transparent);
}

/* Mobile */
@media screen and (width < 660px) {
	#menu:not(.expand) {
		position:absolute;
		background-color:var(--cprimary);
		top:0.25em;
	}
	#env-ribbon~#menu:not(.expand) { /* It's not perfect but it's mostly for staging anyway */
		top:2em;
	}
	#menu:not(.expand) button.menu {
		margin:0;
	}
	#menu:not(.expand) button.menu::before {
		color:white;
	}
	#menu.expand {
		position:fixed;
		width:auto;
		bottom:0;
		right:0;
		left:0;
		top:0;
	}
	#menu-drawer {
		font-size:138%;
	}
}

/* Desktop */
@media screen and (width >= 660px) {
	:root:has(#menu.expand) {
		--smenuwidth:20rem;
	}
	#menu button.menu {
		position:sticky;
		top:0;
	}
	#menu-drawer {
		overflow:auto;
		position:sticky;
		top:4rem;
		max-height:calc(100vh - 4rem);
	}
	#menu-drawer::after { /* Spacer for scroll padding */
		content:' ';
		display:block;
		height:7rem;
	}
	#menu:not(.expand) button.menu {
		color:var(--ctext);
		font-size:80%;
		opacity:0.8;
		height:5em;
	}
}


/*-----------------------------------------------------------
 * Breadcrumb
 */

nav.breadcrumb {
	grid-area:bc;
	padding:var(--svspace) var(--srgutwidth) var(--svspace) var(--slgutwidth);
}
nav.breadcrumb ol {
	border-bottom:0.2rem solid var(--cborder);
	list-style:none;
	margin:0;
	padding:0 1rem 1.5rem;
}
nav.breadcrumb li {
	display:inline;
}
nav.breadcrumb li+li::before {
	content:'  \203a  ';
	margin:0 0.25rem;
}
nav.breadcrumb a {
	color:inherit;
}


/**********************************************************************
 * Main
 */

main {
	grid-area:main;
	min-height:40rem;
	padding:1rem var(--srgutwidth) 1rem var(--slgutwidth);
}

/*-----------------------------------------------------------
 * Content header
 */

main>header {
	padding:1rem 1rem 0.5rem;
}
main>header form {
	max-width:var(--smxcolwidth);
}
main>header p {
	max-width:var(--smxtextwidth);
}

/* Header buttons (admin) */
main>header h1:has(+ .button) {
	display:inline-block;
	vertical-align:middle;
	margin-right:1rem;
}

/*-----------------------------------------------------------
 * Content columns
 */

/* Primary */
main>article,
main>section {
	border-top:0.2rem solid var(--caccent);
	padding:1.5rem 1rem;
}

/* Sidebar */
.sidebar {
	border-top:0.2rem solid var(--chighlight);
	padding:1.5rem 1rem 0;
}
.sidebar h2 {
	font-weight:400;
	font-size:120%;
	margin:0 0 0.5rem;
}

/*-----------------------------------------------------------
 * Content footer
 */

main>footer {
	padding:0.5rem 1rem 1rem;
}

/*-----------------------------------------------------------
 * Responsive flexy
 */

@media screen and (width >= 880px) {
	main {
		display:flex;
		align-content:start;
		flex-flow:row wrap;
		gap:0 3.5rem;
	}
	main>.flash {
		flex:100%;
		order:-3;
	}
	main>header {
		flex:100%;
		order:-2;
	}
	main>article,
	main>section {
		box-sizing:border-box;
		flex:1 0 60%;
		max-width:var(--smxcolwidth);
	}
	main>footer {
		flex:100%;
	}
	.sidebar {
		box-sizing:border-box;
		min-width:15rem;
		flex:0 1 27%;
	}
	.sidebar+* { /* This will force sidebar to the right of the first container */
		order:-1;
	}

	/* Sticky TOC */
	.sidebar.sticky {
		position:sticky;
		max-height:calc(100vh - 2rem);
		overflow:auto;
		top:1rem;
	}
	/* Gradient to signal content scrolls */
	.sidebar.sticky::after {
		content:' ';
		display:block;
		position:sticky;
		background-image:linear-gradient(to top, var(--cbgmain), rgba(255,255,255,0));
		height:1.5rem;
		bottom:0;
		right:0;
		left:0;
	}
}

/*-----------------------------------------------------------
 * Target highlighting
 */

main :target {
	animation:0.25s ease-in-out 0.5s 4 alternate highlight;
}
@keyframes highlight {
	from {
		background-color:transparent;
	}
	to {
		background-color:var(--chighlighttxt);
	}
}


/**********************************************************************
 * Footer
 */

body>footer {
	grid-area:foot;
	padding:2rem calc(var(--srgutwidth) + 1rem) 2rem calc(var(--slgutwidth) + 1rem);
	background:var(--caccentbg);
}
body>footer address {
	font-weight:500;
	font-style:normal;
	margin:0 0 0.5rem;
}
body>footer ul {
	list-style:none;
	margin-top:2rem;
	padding:0;
}
body>footer li {
	display:inline;
}
body>footer li+li::before {
	content:'  |  ';
	margin:0 0.25rem;
}


/**********************************************************************
 * Content blocks
 */

/*-----------------------------------------------------------
 * Article/section base styles
 */

:is(article,section) h2:first-child {
	margin-top:0;
}
:is(article,section)>hr {
	margin:1.5rem -1rem;
}
article p {
	max-width:var(--smxtextwidth);
}

/* List outlines */
article ol ol:not([type]) {
	list-style-type:lower-alpha;
}
article ol ol ol:not([type]) {
	list-style-type:lower-roman;
}
article ol ol ol ol:not([type]) {
	list-style-type:decimal;
}
article ol ol ol ol ol:not([type]) {
	list-style-type:upper-alpha;
}
article ol ol ol ol ol ol:not([type]) {
	list-style-type:upper-roman;
}

/*-----------------------------------------------------------
 * Generic grid
 */

@media screen and (width >= 880px) {
	.grid {
		display:flex;
		flex-flow:row wrap;
		gap:1.5rem;
	}
	.grid>* {
		flex:100%;
	}
	.half {
		flex:1 0 40%;
	}
	.third {
		flex:1 0 29%;
	}
	.quarter {
		flex:1 0 20%;
	}
}

/*-----------------------------------------------------------
 * Links list
 */

.links {
	padding:0 0 0 1.25rem;
}
.links li::marker {
	content:'\2013  ';
	color:color-mix(in srgb, var(--ctext) 50%, transparent);
}
.links .h3 {
	margin-left:1.5rem;
}
.links .h4 {
	margin-left:3rem;
}
.links .h5 {
	margin-left:4.5rem;
}
.links .h6 {
	margin-left:6rem;
}


/**********************************************************************
 * Specialty links
 */

/*-----------------------------------------------------------
 * Skip links
 */

a.skip {
	position:fixed;
	padding:0.25rem 0.5rem;
	background:var(--clinkbg);
	color:white;
	z-index:22;
	left:5em;
	top:0;
}
a.skip:not(:focus):not(:active) {
	clip-path:inset(50%);
}

/*-----------------------------------------------------------
 * External links (add icon w/ alt text)
 */

@media screen {
	a[target="_blank"]::after{
		content:'  (this link opens in a new window)';
		vertical-align:middle;
		display:inline-block;
		overflow:hidden;
		text-indent:1rem;
		opacity:0.75;
		margin:0 0 0 0.1rem;
		height:0.9rem;
		width:1rem;
		background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cstyle%3Epolyline%7Bfill:none;stroke:%230160f2;stroke-width:8;stroke-linejoin:round%7D%3C/style%3E%3Cpolyline points='65,15 15,15 15,85 85,85 85,35' /%3E%3Cpolyline points='70,5 95,5 95,30' /%3E%3Cpolyline points='95,5 55,45' /%3E%3C/svg%3E");
		background-size:100% 100%;
	}
	a.button[target="_blank"]::after {
		filter:brightness(0) invert(1);
		margin:0 -0.25em 0 0.25em;
	}
}

/*-----------------------------------------------------------
 * Back to Contents
 */

.back-toc a::before {
	content:'\25b2';
	display:inline-block;
	margin-right:0.2rem;
}
@media screen and (width < 880px) {
	.back-toc {
		background:var(--cbgmain);
		border-top:0.1rem solid var(--caccent);
		opacity:0.98;
		padding:0.5rem 0 1rem;
		position:sticky;
		bottom:0;
	}
}
@media screen and (width >= 880px) {
	/* Visually hide it */
	.back-toc a:not(:focus):not(:active) {
		position:absolute;
		clip-path:inset(50%);
	}
}

/*-----------------------------------------------------------
 * Help links
 */

a.help {
	font-size:90%;
	font-weight:400;
	color:transparent;
	display:inline-block;
}
a.help::before {
	content:'?  ';
	display:inline-block;
	box-sizing:border-box;
	margin:0 0.25rem 0 0;
	border:0.1rem solid currentColor;
	border-radius:100%;
	width:1.25em;
	height:1.25em;
	text-align:center;
	font-weight:500;
	font-size:117%;
	line-height:1.1em;
	color:var(--clink);
}
a.help:hover,
a.help:active,
a.help:focus {
	color:var(--clink);
}


/**********************************************************************
 * Admin management
 */

.manage {
	max-width:none;
	display:grid;
	grid-template-areas:
		'aa aa ss ss ss ss'
		'l1 l2 l3 l4 l5 l6'
		'ft ft ft ft ft ft';
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
	gap:1rem 1.5rem;
}
.manage nav {
	grid-area:aa;
}
.manage search {
	grid-area:ss;
	margin:0;
}
.manage>turbo-frame,
.manage>table,
.manage>section {
	grid-area:l1 / l1 / l1 / l6;
}
.manage>footer {
	grid-area:ft;
}

/* Search area fixes */
.manage search input[type="search"] {
	width:auto;
}

/* No search present */
.manage nav:has(+ :not(search)) {
	grid-area:aa / aa / aa / ss;
}

/* Columns */
.manage>.half {
	grid-area:l1 / l1 / l1 / l3;
}
.manage>.half+.half {
	grid-area:l4 / l4 / l4 / l6;
}

/* Header buttons (admin) */
.manage h2:has(+ .button) {
	display:inline-block;
	vertical-align:middle;
	margin-right:1rem;
}

/*-----------------------------------------------------------
 * Pagy pagination
 */
.pagy {
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
	gap:0.25rem;
}
.pagy a {
	padding:0.5rem;
	min-width:1.5rem;
	text-align:center;
	font-weight:400;
}

/* Dead links */
.pagy a:not([href]) {
	color:inherit;
	opacity:0.8;
}

/* Current link */
.pagy a.current {
	font-weight:500;
}

/* Next / previous links */
.pagy a[aria-label="Previous"],
.pagy a[aria-label="Next"] {
	white-space:nowrap;
	overflow:hidden;
	width:1.5rem;
}
.pagy a[aria-label="Previous"]::before,
.pagy a[aria-label="Next"]::before {
	display:inline-block;
	font-size:138%;
	width:1.5rem;
	margin-right:0.5rem;
	text-align:center;
	line-height:0;
}
.pagy a[aria-label="Previous"]::before {
	content:'\2039';
}
.pagy a[aria-label="Next"]::before {
	content:'\203A';
}

/*-----------------------------------------------------------
 * Tree view
 */

.tree ul {
	border-left:0.1rem solid var(--caccent);
	padding:0 0 0 2.5rem;
	margin-left:1rem;
}
.tree li {
	padding:0.75rem 0 0;
}
.tree li::marker {
	content:'\2014\2014  ';
	color:var(--caccent);
}

/*-----------------------------------------------------------
 * Tables
 */

table {
	border-collapse:collapse;
	margin:0.5rem 0 1rem;
	width:100%;
}
caption { /* Based off H3 */
	margin:0.5rem 0;
	line-height:1.1;
	font-weight:400;
	font-size:162%;
	text-align:left
}
thead {
	background:var(--cprimary);
	color:white;
}
thead a {
	color:inherit;
}
th, td {
	padding:0.5rem 0.75rem;
}
tbody tr:nth-child(even) {
	background:color-mix(in srgb, var(--caccentbg) 70%, var(--cbgmain));
}
td.num { /* Numeric data */
	text-align:right;
}

/*-----------------------------------------------------------
 * Buttons
 */

form.button_to {
	display:inline-block;
}


/**********************************************************************
 * Search
 */

/*-----------------------------------------------------------
 * Form
 */

search {
	margin:0 0 1rem;
}
search form {
	display:flex;
	align-items:center;
	gap:0.5rem;
}
search label:not(:first-child) {
	margin-left:0.5rem;
}
search select {
	font-size:117%;
	min-width:6rem;
}
search input[type="search"] {
	font-size:117%;
	flex:1;
}
@media screen and (width < 660px) {
	search form {
		flex-flow:row wrap;
	}
	search label {
		flex:100%;
	}
}


/*-----------------------------------------------------------
 * Results
 */

.results {
	border-top:0.2rem solid var(--chighlight);
}
.results :is(ol,ul):not(ol ol, ol ul, ul ol, ul ul) {
	list-style:none;
	margin:0 -1rem var(--svspace);
	padding:0;
}
.results li:not(li li) {
	border-top:0.2rem solid var(--caccent);
	padding:var(--svspace) 1rem;
}
.results :is(ol,ul) li>a:first-child {
	font-weight:500;
}
.results li p:last-child {
	margin:0;
}


/**********************************************************************
 * Dialogs
 */

dialog {
	box-sizing:border-box;
	border:0.2rem solid var(--cborder);
	width:min(50rem, 90%);
	padding:min(4vw, 2rem);
}
dialog header {
	border-bottom:0.2rem solid var(--caccent);
	margin:0 0 1rem;
}
dialog h2:first-child {
	margin-top:0;
}
dialog button.close {
	background:transparent;
	color:inherit;
	position:absolute;
	overflow:hidden;
	height:3rem;
	width:3rem;
	padding:0;
	margin:0;
	right:1rem;
	top:1rem;
}
dialog button.close::before {
	content:'\D7';
	display:block;
	font-weight:200;
	font-size:3rem;
	height:3rem;
}


/**********************************************************************
 * Flash messages
 */

.flash {
	margin:0 auto var(--svspace);
	background:color-mix(in srgb, var(--chighlight) 10%, var(--cbgmain));
	padding:1rem 1.5rem;
	border:0.1rem solid var(--chighlight);
	color:color-mix(in srgb, var(--chighlight) 65%, var(--ctext));
	font-weight:400;
}
.flash p:last-child {
	margin:0;
}

.flash.alert {
	background:color-mix(in srgb, var(--calert) 7%, var(--cbgmain));
	border-color:var(--calert);
	color:color-mix(in srgb, var(--calert) 70%, var(--ctext));
}
.flash.error {
	background:color-mix(in srgb, var(--cerror) 7%, var(--cbgmain));
	border-color:var(--cerror);
	color:color-mix(in srgb, var(--cerror) 70%, var(--ctext));
}
.flash.success {
	background:color-mix(in srgb, var(--csuccess) 7%, var(--cbgmain));
	border-color:var(--csuccess);
	color:color-mix(in srgb, var(--csuccess) 80%, var(--ctext));
}


/**********************************************************************
 * Forms
 */

main>form {
	border-top:0.2rem solid var(--caccent);
	padding:var(--svspace) 1rem;
}
@media screen and (width >= 880px) {
	main>form {
		flex:1 0 60%;
	}
}

/* Reduce redundant borders */
main>form:has(input[type="hidden"]+fieldset) {
	border-top:none;
	padding-top:0;
}


/*-----------------------------------------------------------
 * Fieldset
 */

fieldset {
	border:none;
	border-top:0.1rem solid var(--chighlight);
	margin:0 -1rem 1.5rem;
	padding:1rem;
}
legend {
	font-size:138%;
	font-weight:400;
	padding:0 0.25rem;
	margin-left:-0.25rem;
}

/*-----------------------------------------------------------
 * Field layout
 */

ol.fields {
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	gap:1.5rem;
	list-style:none;
	margin:0;
	padding:0;
}
ol.fields>li {
	flex:100%;
	margin:0;
}

/*-----------------------------------------------------------
 * Labels
 */

label {
	font-weight:400;
}
ol.fields label:first-child {
	display:inline-block;
	margin:0 0 0.25rem;
}

/*-----------------------------------------------------------
 * Columns (responsive)
 */

@media screen and (width >= 880px) {
	ol.fields>li.half {
		flex:1 0 40%;
	}
	ol.fields>li.third {
		flex:1 0 30%;
	}
}

/*-----------------------------------------------------------
 * Required
 */

ol.fields li.req label::after {
	content:'*Required';
	font-size:90%;
	color:var(--cerror);
	margin:0 0 0 0.5rem;
}

/*-----------------------------------------------------------
 * Field notes
 */

ol.fields small {
	display:block;
	padding:0.25rem 0.25rem 0;
	font-size:90%;
}

/* Error message */
ol.fields small.error {
	background:color-mix(in srgb, var(--cerror) 7%, var(--cbgmain));
	border:1px solid var(--cerror);
	color:var(--cerror);
}
ol.fields small.error:first-of-type {
	border-top:none;
}


/*-----------------------------------------------------------
 * Embedded fieldsets (e.g. for checkbox / radio sets)
 */

ol.fields fieldset {
	border:none;
	margin:0;
	padding:0;
}
ol.fields legend {
	font-weight:400;
	font-size:100%;
	margin:0 0 0.25rem;
	padding:0;
}

/*-----------------------------------------------------------
 * Checkbox set
 */

ul.checks {
	list-style:none;
	margin:0.75rem 0 0;
	padding:0;
	columns:12rem;
	gap:1.5rem;
}
ul.checks li {
	break-inside:avoid;
}
ul.checks small { /* Extra notes or tips */
	font-size:90%;
	display:block;
}
ul.checks.wide { /* Wider columns */
	columns:24rem;
}

/*-----------------------------------------------------------
 * Sticky buttons
 */

footer.buttons {
	position:sticky;
	z-index:2;
	bottom:0;
	background:var(--cbgmain);
	border-top:0.1rem solid var(--caccent);
	opacity:0.98;
	margin:1.5rem -1rem 0;
	padding:0.75rem;
	display:flex;
	justify-content:center;
	gap:1rem;
}

/*-----------------------------------------------------------
 * Field inputs
 */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="number"],
select,
textarea {
	box-sizing:border-box;
	border:0.1rem solid var(--cborder);
	background-color:var(--cbgmain);
	color:var(--ctext);
	font:inherit;
	display:block;
	width:100%;
	padding:0.5rem;
}
textarea {
	min-height:3rem;
}

input:focus,
select:focus,
textarea:focus {
	outline:2px solid var(--chighlight);
}

/* Fields with errors */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
	border-color:var(--cerror);
}

/* Kill Safari styles on search inputs */
input[type="search"] {
	-webkit-appearance:none;
}
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance:none;
}

/*-----------------------------------------------------------
 * Buttons
 */

.button,
button {
	display:inline-block;
	margin:0.25rem 0;
	padding:0.5rem 1.5rem;
	border:none;
	text-align:center;
	font-size:117%;
	background:var(--clinkbg);
	color:white;
	cursor:pointer;
	line-height:2rem;
	text-decoration:none;
	vertical-align:middle;
}
.button::-moz-focus-inner,
button::-moz-focus-inner {
	border:none;
	padding:0;
}

button:focus,
.button:focus {
	outline:2px solid var(--chighlight);
}
button:hover,
.button:hover {
	opacity:0.9;
}

/* Back/cancel */
.button.back,
.button.cancel,
button.back,
button.cancel {
	background-color:var(--cborderbg);
}
.button.back::before,
button.back::before {
	content:'\2039  ';
	font-size:138%;
	line-height:0;
}

/* Other colors */
button.delete { /* This is intentionally not allowed on a link */
	background-color:var(--cerror);
}
.button.alt,
button.alt {
	background-color:var(--cprimary);
}

/* Other sizes */
.button.lg,
button.lg {
	font-size:138%;
	padding:1rem 2rem;
}

/*-----------------------------------------------------------
 * Errors
 */

.field_with_errors {
	display:inline;
}
.field_with_errors select,
.field_with_errors input,
.field_with_errors textarea {
	outline:0.1rem solid var(--cerror);
}

.errors {
	background:color-mix(in srgb, var(--cerror) 10%, white);
	border:0.1rem solid var(--cerror);
	color:var(--cerror);
	padding:1rem 1.5rem;
	margin:0 0 var(--svspace);
}
.errors p,
.errors ul {
	margin:0 0 0.5rem;
}


/**********************************************************************
 * Print (global)
 */

@media print {
	html,
	body {
		background:none;
	}
	body>header,
	#menu,
	body>footer,
	.sidebar,
	.back-toc {
		display:none;
	}
	main {
		display:block;
		min-height:none;
		padding:0;
	}
	a {
		color:inherit;
	}
	main a::after {
		content:' (' attr(href) ')';
		font-size:90%;
	}
}


/**********************************************************************
 * Miscellaneous components
 */

/*-----------------------------------------------------------
 * Accordions
 */

details {
	margin:0 0 0.5rem;
}
summary {
	list-style:none;
	border-top:1px solid var(--chighlight);
	padding:0.75rem 0.25rem 0.25rem;
	display:flex;
	gap:0.5rem;
	cursor:pointer;
}
summary>* {
	margin:0;
}
summary::before {
	content:'+';
	font-size:138%;
	font-weight:500;
	line-height:1.1;
}
details[open] summary::before {
	content:'\2013';
}

/*-----------------------------------------------------------
 * Definition lists
 */

dl {
	display:grid;
	grid-template-columns:auto 1fr;
	gap:0.5rem 1.5rem;
	margin:1rem 0 var(--svspace);
}
dt {
	font-weight:500;
}
dd {
	margin:0;
	padding:0;
}
dd :last-child {
	margin-bottom:0;
}

/*-----------------------------------------------------------
 * Tiles grid
 */

.tiles {
	display:grid;
	gap:var(--svspace);
	grid-template-columns:repeat(auto-fill, minmax(21rem,1fr));
	list-style:none;
	padding:0;
}

/*-----------------------------------------------------------
 * Screen-reader only [USE SPARINGLY]
 */

.sr-only {
	position:fixed;
	right:110%;
}


/*-----------------------------------------------------------
 * TinyMCE dialogue / width-breaking fix
 */

body>.tox-silver-sink {
	position:absolute !important;
}