/* For styles shared among all stylesheets */

/**********************************************************************
 * 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:60rem; /* Half of max body width */
	--smenuwidth:16rem; /* Menu width (dynamic) */
	--smxcolwidth:none; /* Maximum width of a body column */
	--smxtextwidth:50rem; /* Maximum width of a text element */
	--slpadtext:2.5rem; /* Standard padding for aligning text along left margin */
	--sgutwidth:max(var(--slpadtext), calc(50vw - var(--shfwidth))); /* Gutter width */
	--svspace:1.25rem; /* Vertical spacing */

	/* enable light-dark() function */
	color-scheme:light dark;
}

/* 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
	- Large desktop b.p. >= 1200px
*/


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

html {
	background:var(--cbgmain);
	color:var(--ctext);
	scroll-behavior:smooth;
	scrollbar-gutter:stable;
}
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:110%;
	}
}

/* body grid */
body{
	display:grid;
	grid-template-rows:
		auto
		auto
		auto
		1fr
		auto;
	grid-template-areas:
		"header"
		"env"
		"breadcrumb"
		"main"
		"footer";
	@media screen and (width >= 660px){
		grid-template-columns:auto minmax(16rem, max-content) minmax(auto, 50rem) auto;
		grid-template-areas:
			"header header header header"
			". menu env ."
			". menu breadcrumb ."
			". menu main ."
			". menu footer .";
		&>header{
			&:before{
				grid-area:1/2/2/3;
			}
			&>button{
				grid-area:1/2/2/3;
			}
		}
	}
	&>header{
		grid-area:header;
	}
	&>#env-ribbon{
		grid-area:env;
	}
	&>.breadcrumb{
		grid-area:breadcrumb;
	}
	&>#menu{
		grid-area:menu;
	}
	&>main{
		grid-area:main;
	}
	&>footer{
		grid-area:footer;
	}

}

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

h1,h2,h3,h4,h5,h6 {
	margin:0.88em 0 0.5rem;
	line-height:1.1;
	font-weight:500;
}

/* Note: harmonic factor for heading sizes: 1.16 */
h1 {
	margin-top:0;
	font-size:210%;
	font-weight:400;
}
h2+h3, h3+h4, h4+h5 {
	margin-top:0;
}
h2 {
	font-size:180%;
}
h3 {
	font-size:156%;
	font-weight:400;
}
h4 {
	font-size:135%;
}
h5 {
	font-size:116%;
	font-weight:400;
}
h6 {
	font-size:100%;
}

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

hgroup p {
	font-size:110%;
}

/*-----------------------------------------------------------
 * 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);
}


body>header {
	position:sticky;
	top:0;
	background:var(--cprimary);
	border-bottom:0.2rem solid var(--chighlight);
	padding:0;
	color:white;
	display:grid;
	align-items:center;
	grid-template-columns:subgrid;
	font-size:130%;
	z-index:21;

	/* hamburger */
	&>button {
		grid-area:1/2/2/3;
		width:3.75rem;
		background-color:var(--cprimary);
		color:transparent;
		display:block;
		line-height:11px;
		padding:1rem;
		margin:0;
		font-size:1px;

		@media screen and (width >= 660px){
			display:none;
		}

		&::before{
			content:' ';
			display:inline-block;
			vertical-align:bottom;
			width:100%;
			height:0.25rem;
			color:white;
			background:currentColor;
			box-shadow:0 -0.7rem 0 currentColor, 0 0.7rem 0 currentColor;
		}
	}

	/* app title */
	&>a{
		grid-area:1/3/2/4;
		margin-left:4rem;
		color:inherit;
		text-decoration:none;

		@media screen and (width >= 660px){
			margin-left:2rem;
		}

		&:hover,&:focus{
			text-decoration:underline;
		}
	}

	/* uwec logo */
	@media screen and (width >= 660px){
		&:before{
			content:"";
			grid-area:1/2/2/3;
			background:url("/assets/uwec_app_styles/uwec-wordmark-13b44e21.svg");
			background-size:contain;
			background-position:center;
			background-repeat:no-repeat;
			height:4rem;
			margin-top:.5rem;
		}
	}
}

#user-menu {
	ul {
		list-style:none;
		margin:0 -0.5em;
		padding:0;
	}
	li {
		display:inline-block;
		margin:0;
	}
	li+li::before {
		content:'  |  ';
	}
	a {
		padding:0 0.5em;
	}
}


#env-ribbon {
	color:white;
	background:var(--cerror);
	text-align:center;
	font-size:90%;
	z-index:19;
	padding:0.25rem 0.5rem;
	margin:0;
}


#menu {
	display:block;
	background:var(--caccentbg);
	z-index:20;
	position:fixed;
	transition:left .2s ease;
	padding-top:4.5rem;
	min-height:100vh;
	box-shadow:8px 0 4px rgba(0,0,0,0.1);

	left:-100%;
	&.expand{
		left:0;
	}

	@media screen and (width >= 660px){
		position:relative;
		left:0;
		padding-top:0;
		box-shadow:none;
	}

	&>ul{
		padding:0 1rem 4px 1rem;
		list-style:none;
		ul {
			padding:0;
			margin:0;
			list-style:none;
			&::before {
				content:attr(aria-label);
				display:block;
			}
		}
		li {
			margin:0;
		}
		li li {
			margin:0 0 0 1em;
		}
		form{
			display:block;
		}
		a,button {
			display:block;
			padding:0.5rem;
			text-decoration:none;
			color:color-mix(in srgb, var(--ctext) 90%, transparent);
			background:var(--caccentbg);
			-webkit-user-drag:none;
			font:inherit;
			line-height:1;
			border-radius:8px;

			/* reset button styles */
			margin:0;
			text-align:left;
			outline:none;

			&:hover,&.active{
				background-color:rgba(0,0,0,0.05);
			}
			&:is([data-icon]):before{
				content:attr(data-icon) / "";
				font-family: 'Material Symbols Outlined';
				color:color-mix(in srgb, var(--ctext) 90%, transparent);
				display:inline-block;
				margin-right:.5rem;
				font-size:110%;
				vertical-align:bottom;
			}
		}
		button{
			width:100%;
		}
	}
}

@media screen and (width < 660px) {
	#menu:not(.expand)>button::before {
		color:white;
	}
	#menu.expand {
		left:0;
	}
}

@media screen and (width >= 660px) {
	#menu>button {
		display:none;
	}
	#menu>ul {
		overflow:auto;
		display:block;
		padding-top:1rem;
		position:sticky;
		max-height:calc(100vh - 4rem);
	}
	#menu.expand>button {
		position:sticky;
		top:0;
	}
}

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

nav.breadcrumb {
	margin:1rem 1rem 0 1rem;
	padding:1rem;
	color:color-mix(in srgb, var(--ctext) 90%, transparent);
	font-size:90%;
	border-bottom:0.2rem solid var(--caccent);

	ol{
		list-style:none;
		margin:0;
		padding:0;
	}
	li{
		display:inline;
	}
	li+li::before{
		content:'  \203a  ';
		margin:0 0.25rem;
		color:color-mix(in srgb, var(--ctext) 50%, transparent);
	}
	a{
		color:inherit;
	}
}


/*-----------------------------------------------------------
 * Tabs
 */

nav.tabs {
	margin-left:-0.5rem;
}
nav.tabs ul,
nav.tabs ol {
	list-style:none;
	padding:0;
	display:flex;
	flex-flow:row wrap;
	gap:0.2em;
}
nav.tabs a {
	display:block;
	text-decoration:none;
	padding:0.5rem;
}
nav.tabs li[aria-current] a {
	text-decoration:underline 0.2em;
	text-underline-offset:0.5em;
	font-weight:400;
}

/* Ordered */
nav.tabs ol {
	counter-reset:tabs;
}
nav.tabs ol li {
	counter-increment:tabs;
}
nav.tabs ol a::before {
	content:counter(tabs) '  ';
}


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

main {
	padding:2rem;
}

/* 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;
}

/*-----------------------------------------------------------
 * 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 {
	padding:2rem;
	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;
}


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

h2:first-child {
	margin-top:0;
}
hr {
	margin:1.5rem -1rem;
}

/* Nested list default types */
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;
	list-style-type:'\2013  ';
}
.links li::marker {
	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 to Content 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) {
	.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);
}


/**********************************************************************
 * 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
 */

/* TODO what is this? maybe it should be a component?
.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));
}


/*-----------------------------------------------------------
 * 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 {
	max-width:none;
	margin:0;
}
ol.fields>li:not(.half,.third,.quarter) {
	flex:100%;
}


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

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


/*-----------------------------------------------------------
 * 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 0;
	max-width:var(--smxtextwidth);
	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
 */

/* TODO make this a component
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;
	line-height:1.3;
	display:block;
	width:100%;
	padding:0.5rem;
}
textarea {
	min-height:3rem;
	line-height:inherit;
	&.autogrow{
		field-sizing:content;
		resize:none;
	}
}

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.375em 1.125em;
	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:hover,
.button:hover {
	outline:1px solid var(--chighlight);
}
button:focus,
.button:focus {
	outline:2px solid var(--chighlight);
}

/* 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;
}

/* Delete button (intentionally not allowed on a link) */
button.delete {
	background-color:var(--cerror);
	--chighlight:color-mix(in srgb, var(--cerror) 55%, white);
}

/* Alternate button */
.button.alt,
button.alt {
	background-color:var(--cprimary);
}

/*-----------------------------------------------------------
 * 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;
}


/*-----------------------------------------------------------
 * 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;
}

/*-----------------------------------------------------------
 * 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;
}
.pagy a:not([href]) {
	color:inherit;
	opacity:0.8;
}
.pagy a.current {
	font-weight:500;
}
.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';
}

/*-----------------------------------------------------------
 * 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;
}
th[scope="row"] {
	text-align:left;
	font-weight:400;
}
tbody tr:nth-child(even) {
	background:color-mix(in srgb, var(--caccentbg) 70%, var(--cbgmain));
}
td.num { /* Numeric data */
	text-align:right;
}
td.action { /* Action cell */
	text-align:center;
	padding:0.5rem 0.25rem;
}
td.action:last-child {
	padding-right:0;
}
td.action button,
td.action .button {
	font-size:100%;
	margin:0;
}

/* Sort arrows */
th[aria-sort="ascending"]::after {
	content:'  \21D1';
}
th[aria-sort="descending"]::after {
	content:'  \21D3';
}

/* Things inside cells (should be avoided, but...) */
td :is(p,ul,ol,li: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;
}

/**********************************************************************
 * Miscellaneous
 */

/* button_to rails helper */
form.button_to {
	display:inline-block;
}

/*-----------------------------------------------------------
 * Screen-reader only [USE SPARINGLY]
 */
.sr-only {
	position:fixed;
	right:110%;
}

/*-----------------------------------------------------------
 * TinyMCE dialogue / width-breaking fix
 */
body>.tox-silver-sink {
	position:absolute !important;
}

/* "cols" layout container */
.cols{
	display:flex;
	&>*{
		flex:1;
	}
}

/* "full_width" body class */
body.full_width{
	@media screen and (width >= 660px){
		grid-template-columns:minmax(16rem, auto) 1fr;
		grid-template-areas:
			"header header"
			"menu env"
			"menu breadcrumb"
			"menu main"
			"menu footer";
		&>header{
			&:before{
				grid-area:1/1/2/2;
			}
			&>button{
				grid-area:1/1/2/2;
			}
		}
	}
}


/* print */
@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%;
	}
}