:root {
    --font-slab: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
    --font-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

    --font-heading: var(--font-slab);
    --font-body: var(--font-humanist);

    --u-spaced-margin: 1em;

    --gap: 1em;
    --tab-active-label-background: rgba(0, 0, 0, 0.03);
    --tab-active-content-background: rgba(0, 0, 0, 0.03);
    --tab-background: none;
}
* {
    padding: 0;
}
body {
    font-family: var(--font-body);
}
h1, h2, h3 {
    text-wrap: balanced;
    font-family: var(--font-heading);
}
input[type=text], select {
    background: white;
    border: 1px solid #8e8e8e;
    padding: 2px;
}
dialog {
    max-width: 30em;
    margin: auto;
    padding: 1em;
}

.Constrained {
    display: grid;
    grid-template-columns: 1fr 80em 1fr;
}
.Constrained>* {
    grid-column: 2;
}
.Constrained>.Unconstrained {
    grid-column: 1/-1;
}
@media (max-width: 80em) {
    .Constrained {
        display: grid;
        grid-template-columns: 10px 1fr 10px;
    }
}

.Navbar {
    display: flex;
    gap: 1em;
    list-style: none;
    margin: 0;
    margin-top: var(--u-spaced-margin);
}
.Navbar-PushRight {
    margin-left: auto;
}

.Table {
	border-collapse: collapse;
	width: 100%;
	--tableCellPadding: 0.3em 1em;
}
.Table>*>tr>* {
	vertical-align: top;
	text-align: left;
}
.Table>*>tr>* {
    padding: var(--tableCellPadding);
}
.Table>*>tr>*:first-child {
    padding-left: 0;
}
.Table>*>tr>*:last-child {
    padding-right: 0;
}
.Table-ruled>tbody>tr>* {
    border-top: 1px solid #eaeaea;
}
.Table-hover>*>tr:hover,
.Table-hover>*>tr:focus-within {
}

.Table-fitContent {
    width: auto;
}


.Button {
	display: inline-block;
	cursor: pointer;
	border: 0;
	border-radius: 3px;
	padding: 0.2em 1em;
	font-size: 1.2rem;
	line-height: 1.3;
}
.Button-none {
    border: 0;
	background: none;
	text-decoration: underline;
	cursor: pointer;
	color: inherit;
}


.Alert {
    padding: 1em;
    background-color:  #9AB87A;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}


.u-Spaced>* + * {
	margin-top: var(--u-spaced-margin);
}
.u-Spaced>* + h1 {
	margin-top: calc(var(--u-spaced-margin) * 2);
}
.u-Spaced>* + .u-Spaced-Before2 {
	margin-top: calc(var(--u-spaced-margin) * 2);
}
.u-Spaced>* + .u-Spaced-Before3 {
	margin-top: calc(var(--u-spaced-margin) * 3);
}
.u-Spaced>*[hidden] + * {
	margin-top: 0;
}
.u-Spaced-xl {
    --u-spaced-margin: 2.5em;
}
.u-Spaced-s {
    --u-spaced-margin: 0.5em;
}
.u-Flex {
    display: flex;
    gap: var(--gap);
}
.u-Flex-justifySpaceBetween {
    justify-content: space-between;
}
.u-Flex-justifySpaceAround {
    justify-content: space-around;
}
.u-Flex-alignBaseline {
    align-items: first baseline;
}
.u-Flex-wrap {
    flex-wrap: wrap;
}

.Tabs {
    display: flex;
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 1px;
    background: var(--tab-background);
}
.Tabs-Tab {
    display: contents;
}
.Tabs-Tab[open]::details-content {
    display: contents;
}
.Tabs-Tab[open] > * {
    background: var(--tab-active-background);
}
.Tabs-TabLabel {
    grid-row: 1;
    padding: 0.5em 0.5em 0 0.5em;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: bold;
}
.Tabs-Tab[open] > .Tabs-TabLabel {
    background: var(--tab-active-label-background);
}
.Tabs-Tab[open] > .Tabs-TabContent {
    background: var(--tab-active-content-background);
}
.Tabs-TabLabel::marker {
    display: none;
    content: "";
}
.Tabs-TabContent {
    padding: 0.5em;
    width: 100%;
    grid-row: 2;
    grid-column: 1/-1;

}
.SystemNav {
    display: flex;
    gap: 0.5em 1em;
    flex-wrap: wrap;
    align-items: first baseline;
    margin-bottom: 5em;
}
.SystemNav * {
    order: 1;
    width: 100%;
    margin: 0;
    line-height: 1;
}
.SystemNav a {
    order: 1;
    width: auto;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: inherit;
    text-decoration: none;
}
.BlockBg {
    background: rgba(0, 0, 0, 0.03);
    padding: 1em;
    border-radius: 1em;
}