@charset "UTF-8";
/*! Modern CSS Reset | Based on Andy Bell (piccalil.li) + Kevin Powell */
/**
 * Fonts
 */
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@200;600&display=swap");
/**
  * Colours
  */
/* https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program/technical-specifications/official-symbols/colour-values.html */
/* 180deg from primary*/
/* Greys */
/**
  * Spacing
  */
/** Border radius
  */
/* 2px */
/* 1px */
/* 2px */
/* 4px */
/* 8px */
/* 12px */
/** Z-index
  */
/* Font sizes
  */
/**
  * Breakpoints
  * https://primer.style/css/support/breakpoints
  */
/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding */
* {
  margin: 0;
  padding: 0;
}

/* Core document */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

/* Body */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/* Readable text */
p,
li,
figcaption {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* Media */
img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
}

/* Keep SVGs out of the shared media max-width rule so icons and inline artwork
   retain their intrinsic sizing unless a component opts into responsive scaling. */
svg {
  display: block;
}

/* Form elements inherit font */
input,
button,
textarea,
select {
  font: inherit;
}

/* Typography */
b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: help;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Hidden attribute */
[hidden] {
  display: none !important;
}

:root {
  --white: #fff;
  --black: #222;
  --primary: #005b99;
  --primaryDark: rgb(0, 30.3333333333, 51);
  --secondary: #993d00;
  --secondaryDark: rgb(51, 20.3333333333, 0);
  --green: #036803;
  --successDark: rgb(0.1401869159, 4.8598130841, 0.1401869159);
  --info: #03607d;
  --infoDark: rgb(0.609375, 19.5, 25.390625);
  --red: #b60202;
  --dangerDark: rgb(81.1086956522, 0.8913043478, 0.8913043478);
  --warn: #695802;
  --warningDark: rgb(4.9065420561, 4.1121495327, 0.0934579439);
  --pink: #e83e8c;
  --silver: #ebebef;
  --grey900: #363640;
  --grey800: #4a4a4e;
  --grey700: #5e5e62;
  --grey600: #727276;
  --grey500: #868690;
  --grey400: #9b9b9f;
  --grey300: #afafb3;
  --grey200: #c3c3c7;
  --grey100: #d7d7db;
  --primaryActive: rgb(0, 54.6, 91.8);
  --primaryVisited: rgb(0, 115.2666666667, 193.8);
  --bodyBg: #fff;
  --headerBg: #ebebef;
  --npBg: #fff;
  --npTxt: #005b99;
  --sectionAltBg: #ebebef;
  --semanticContrast: #fff;
  --focusShadow: rgba(0, 91, 153, 0.5);
  --errorShadow: rgba(182, 2, 2, 0.5);
  --secondaryFocusShadow: rgba(112.2, 44.7333333333, 0, 0.5);
  --greyFocusShadow: rgba(74, 74, 78, 0.5);
  --grey900FocusShadow: rgba(54, 54, 64, 0.5);
  --grey700FocusShadow: rgba(94, 94, 98, 0.5);
  --infoFocusShadow: rgba(3, 96, 125, 0.5);
  --greenFocusShadow: rgba(3, 104, 3, 0.5);
  --redFocusShadow: rgba(182, 2, 2, 0.5);
  --warnFocusShadow: rgba(105, 88, 2, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root {
    --white: #222;
    --black: #fff;
    --primary: #4cb5fa;
    --primaryDark: rgb(6.0869565217, 133.9130434783, 217.9130434783);
    --secondary: #fa924c;
    --secondaryDark: rgb(217.9130434783, 91.3043478261, 6.0869565217);
    --green: #09c809;
    --successDark: rgb(4.6076555024, 102.3923444976, 4.6076555024);
    --info: #0bbaef;
    --infoDark: rgb(6.512, 110.112, 141.488);
    --red: #f49090;
    --dangerDark: rgb(234.8032786885, 51.1967213115, 51.1967213115);
    --warn: #f9d615;
    --warningDark: rgb(163.8, 139.3, 4.2);
    --pink: #f28cbc;
    --silver: #363640;
    --grey900: #ebebef;
    --grey800: #d7d7db;
    --grey700: #c3c3c7;
    --grey600: #afafb3;
    --grey500: #9b9b9f;
    --grey400: #868690;
    --grey300: #727276;
    --grey200: #5e5e62;
    --grey100: #4a4a4e;
    --primaryActive: rgb(16.4630434783, 156.3869565217, 248.3369565217);
    --primaryVisited: rgb(115.6913043478, 197.4086956522, 251.1086956522);
    --bodyBg: #000;
    --headerBg: #222;
    --npBg: #000;
    --npTxt: #4cb5fa;
    --sectionAltBg: #222;
    --semanticContrast: #222;
    --focusShadow: rgba(76, 181, 250, 0.5);
    --errorShadow: rgba(244, 144, 144, 0.5);
    --secondaryFocusShadow: rgba(248.8913043478, 121.8304347826, 36.3086956522, 0.5);
    --greyFocusShadow: rgba(215, 215, 219, 0.5);
    --grey900FocusShadow: rgba(235, 235, 239, 0.5);
    --grey700FocusShadow: rgba(195, 195, 199, 0.5);
    --infoFocusShadow: rgba(11, 186, 239, 0.5);
    --greenFocusShadow: rgba(9, 200, 9, 0.5);
    --redFocusShadow: rgba(244, 144, 144, 0.5);
    --warnFocusShadow: rgba(249, 214, 21, 0.5);
  }
}
html[data-mode=dark],
body.theme--dark {
  --white: #222;
  --black: #fff;
  --primary: #4cb5fa;
  --primaryDark: rgb(6.0869565217, 133.9130434783, 217.9130434783);
  --secondary: #fa924c;
  --secondaryDark: rgb(217.9130434783, 91.3043478261, 6.0869565217);
  --green: #09c809;
  --successDark: rgb(4.6076555024, 102.3923444976, 4.6076555024);
  --info: #0bbaef;
  --infoDark: rgb(6.512, 110.112, 141.488);
  --red: #f49090;
  --dangerDark: rgb(234.8032786885, 51.1967213115, 51.1967213115);
  --warn: #f9d615;
  --warningDark: rgb(163.8, 139.3, 4.2);
  --pink: #f28cbc;
  --silver: #363640;
  --grey900: #ebebef;
  --grey800: #d7d7db;
  --grey700: #c3c3c7;
  --grey600: #afafb3;
  --grey500: #9b9b9f;
  --grey400: #868690;
  --grey300: #727276;
  --grey200: #5e5e62;
  --grey100: #4a4a4e;
  --primaryActive: rgb(16.4630434783, 156.3869565217, 248.3369565217);
  --primaryVisited: rgb(115.6913043478, 197.4086956522, 251.1086956522);
  --bodyBg: #000;
  --headerBg: #222;
  --npBg: #000;
  --npTxt: #4cb5fa;
  --sectionAltBg: #222;
  --semanticContrast: #222;
  --focusShadow: rgba(76, 181, 250, 0.5);
  --errorShadow: rgba(244, 144, 144, 0.5);
  --secondaryFocusShadow: rgba(248.8913043478, 121.8304347826, 36.3086956522, 0.5);
  --greyFocusShadow: rgba(215, 215, 219, 0.5);
  --grey900FocusShadow: rgba(235, 235, 239, 0.5);
  --grey700FocusShadow: rgba(195, 195, 199, 0.5);
  --infoFocusShadow: rgba(11, 186, 239, 0.5);
  --greenFocusShadow: rgba(9, 200, 9, 0.5);
  --redFocusShadow: rgba(244, 144, 144, 0.5);
  --warnFocusShadow: rgba(249, 214, 21, 0.5);
}

html[data-mode=light],
body.theme--light {
  --white: #fff;
  --black: #222;
  --primary: #005b99;
  --primaryDark: rgb(0, 30.3333333333, 51);
  --secondary: #993d00;
  --secondaryDark: rgb(51, 20.3333333333, 0);
  --green: #036803;
  --successDark: rgb(0.1401869159, 4.8598130841, 0.1401869159);
  --info: #03607d;
  --infoDark: rgb(0.609375, 19.5, 25.390625);
  --red: #b60202;
  --dangerDark: rgb(81.1086956522, 0.8913043478, 0.8913043478);
  --warn: #695802;
  --warningDark: rgb(4.9065420561, 4.1121495327, 0.0934579439);
  --pink: #e83e8c;
  --silver: #ebebef;
  --grey900: #363640;
  --grey800: #4a4a4e;
  --grey700: #5e5e62;
  --grey600: #727276;
  --grey500: #868690;
  --grey400: #9b9b9f;
  --grey300: #afafb3;
  --grey200: #c3c3c7;
  --grey100: #d7d7db;
  --primaryActive: rgb(0, 54.6, 91.8);
  --primaryVisited: rgb(0, 115.2666666667, 193.8);
  --bodyBg: #fff;
  --headerBg: #ebebef;
  --npBg: #fff;
  --npTxt: #005b99;
  --sectionAltBg: #ebebef;
  --semanticContrast: #fff;
  --focusShadow: rgba(0, 91, 153, 0.5);
  --errorShadow: rgba(182, 2, 2, 0.5);
  --secondaryFocusShadow: rgba(112.2, 44.7333333333, 0, 0.5);
  --greyFocusShadow: rgba(74, 74, 78, 0.5);
  --grey900FocusShadow: rgba(54, 54, 64, 0.5);
  --grey700FocusShadow: rgba(94, 94, 98, 0.5);
  --infoFocusShadow: rgba(3, 96, 125, 0.5);
  --greenFocusShadow: rgba(3, 104, 3, 0.5);
  --redFocusShadow: rgba(182, 2, 2, 0.5);
  --warnFocusShadow: rgba(105, 88, 2, 0.5);
}

/**
  * Base elements
  */
html {
  overflow-x: hidden;
}

body {
  background-color: var(--bodyBg);
  color: var(--black);
  font-family: system-ui, sans-serif;
  font-variant-ligatures: common-ligatures;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Raleway, "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-weight: 600;
}

h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.67em;
  margin-bottom: 0.67em;
}

.subheading {
  color: var(--grey700);
}
h1 .subheading, h2 .subheading {
  font-size: 0.8em;
}
h3 .subheading, h4 .subheading {
  font-size: 0.9em;
}

p {
  line-height: 1.4;
}

p + p,
p + div {
  margin-top: 1rem;
}

a {
  color: var(--primary);
}
a:hover, a:active {
  color: var(--primaryActive);
}
a:visited {
  color: var(--primaryVisited);
}
a:focus {
  border-radius: 0.125rem;
  box-shadow: 0 0 0 0.2rem var(--focusShadow);
  outline: none;
}
a.permanent:hover, a.permanent:active, a.permanent:visited {
  color: var(--primary);
}
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
  color: inherit;
  text-decoration: none;
}
h1 > a:hover, h1 > a:active, h2 > a:hover, h2 > a:active, h3 > a:hover, h3 > a:active, h4 > a:hover, h4 > a:active, h5 > a:hover, h5 > a:active, h6 > a:hover, h6 > a:active {
  color: var(--primaryActive);
  text-decoration: underline;
}
h1 > a:visited, h2 > a:visited, h3 > a:visited, h4 > a:visited, h5 > a:visited, h6 > a:visited {
  color: inherit;
}

ul,
ol {
  margin-bottom: 1em;
  margin-left: 1.1em;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0.5em;
  margin-left: 2em;
}

li {
  line-height: 1.3em;
  margin-bottom: 0.3em;
}

dt {
  font-weight: bold;
}

dt,
dd {
  line-height: 1.5;
}

dd {
  margin-bottom: 0.25em;
}

blockquote {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

code {
  color: var(--pink);
  display: inline-block;
  font-family: monospace;
  padding: 0 2px;
  word-break: break-word;
}

pre {
  background-color: var(--silver);
  padding: 0.5rem;
  white-space: pre-wrap;
  width: 100%;
}
pre code {
  color: var(--grey800);
}

/**
  * Header
  */
.header {
  align-items: center;
  background-color: var(--headerBg);
  border-bottom: 1px solid;
  border-bottom-color: var(--grey300);
  color: var(--grey800);
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  display: grid;
  grid-template-areas: "brand brand navToggle" "site site site" "navigation navigation navigation" "toolbar toolbar toolbar";
  grid-template-columns: min-content auto min-content;
}
.header--fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}
@media (min-width: 544px) {
  .header {
    grid-template-areas: "brand site navToggle" "navigation navigation navigation" "toolbar toolbar toolbar";
  }
}
@media (min-width: 768px) {
  .header {
    grid-template-areas: "brand navigation site" "toolbar toolbar toolbar";
  }
}
.header--scroll {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  transition: top 0.3s ease;
}
.header--scroll.hidden {
  top: calc(var(--headerHeight) * -1 - 1px);
}
.header h1 {
  font-family: Raleway, "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 1.25rem;
  grid-area: site;
  margin-bottom: 0.5rem;
  margin-left: 1rem;
  margin-top: 0;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  white-space: nowrap;
}
@media (min-width: 544px) {
  .header h1 {
    margin-left: auto;
    margin-top: 0.5rem;
  }
}
@media (min-width: 768px) {
  .header h1 {
    margin-right: 1rem;
  }
}
.header__link {
  color: inherit;
  text-decoration: none;
}
.header__link:hover, .header__link:visited {
  color: inherit;
}
.header__link:focus {
  box-shadow: 0 0 0 0.2rem var(--greyFocusShadow);
}

.brand {
  font-weight: 600;
  font-family: Raleway, "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 1.25rem;
  grid-area: brand;
  margin: 0.5rem 0 0.5rem 1rem;
}
.brand > a {
  align-items: center;
  color: var(--grey800);
  display: flex;
  text-decoration: none;
}
.brand img,
.brand svg {
  margin-right: 0.5rem;
  width: 40px;
}
.brand svg .np__bg {
  fill: var(--npBg);
}
.brand svg .np__txt {
  fill: var(--npTxt);
}

/**
  * Main
  */
.main {
  margin: 1rem auto 0 auto;
  padding: 0 1rem;
}
.main--fixed {
  max-width: 60em;
}

/**
  * Sections
  */
.section {
  padding-top: 2rem;
  padding-bottom: 2rem;
  position: relative;
}
.section--alt::before {
  background-color: var(--sectionAltBg);
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin-left: -50vw;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: -1;
}

.sections--alternating > .section:nth-of-type(even)::before {
  background-color: var(--sectionAltBg);
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin-left: -50vw;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: -1;
}
.sections--alternating > .section--plain::before {
  content: none;
}

.toolbar {
  background-color: var(--grey100);
  border-top: 1px solid;
  border-top-color: var(--grey200);
  grid-area: toolbar;
  padding: 0.25rem 1rem;
}
.toolbar--right {
  text-align: right;
}
.toolbar .button {
  margin-top: 0;
}

/**
 * Accordion / Disclosure
 */
.accordion__trigger, .disclosure__trigger {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 600;
  justify-content: space-between;
  list-style: none;
  padding: 0.75rem 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.accordion__trigger::-webkit-details-marker, .disclosure__trigger::-webkit-details-marker {
  display: none;
}
.accordion__trigger:not(:has(> [class$=__icon]))::after, .disclosure__trigger:not(:has(> [class$=__icon]))::after {
  border-color: currentcolor;
  border-style: solid;
  border-width: 0.15em 0.15em 0 0;
  content: "";
  display: inline-block;
  flex-shrink: 0;
  height: 0.5em;
  margin-left: 1rem;
  transform: rotate(135deg);
  transition: transform 0.2s ease;
  width: 0.5em;
}
.accordion__trigger > [class$=__icon], .disclosure__trigger > [class$=__icon] {
  transition: transform 0.2s ease;
}
.accordion__trigger:focus, .disclosure__trigger:focus {
  box-shadow: inset 0 0 0 0.2rem var(--focusShadow);
  outline: none;
}

.accordion__item[open] > .accordion__trigger::after, .disclosure[open] > .disclosure__trigger::after {
  transform: rotate(-45deg);
}
.accordion__item[open] > .accordion__trigger > [class$=__icon], .disclosure[open] > .disclosure__trigger > [class$=__icon] {
  transform: rotate(180deg);
}

.accordion__body, .disclosure__body {
  border-top: 1px solid var(--grey200);
  padding: 1rem;
}
.accordion__body > * + *, .disclosure__body > * + * {
  margin-top: 1rem;
}

.disclosure {
  border: 1px solid var(--grey200);
  border-radius: 0.125rem;
  overflow: hidden;
}
.disclosure__trigger:hover {
  background-color: var(--silver);
}
.accordion {
  border: 1px solid var(--grey200);
  border-radius: 0.125rem;
  overflow: hidden;
}
.accordion__item {
  border-bottom: 1px solid var(--grey200);
}
.accordion__item:last-child {
  border-bottom: none;
}
.accordion__trigger {
  width: 100%;
}
.accordion__trigger:hover {
  background-color: var(--silver);
}
/**
  * Alerts
  */
.alert {
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--grey400);
  border-radius: 0.125rem;
  color: var(--grey800);
  display: flex;
  justify-content: space-between;
  padding: 0.5em 0.5rem;
  margin-bottom: 1rem;
}
.alert a {
  color: inherit;
  font-weight: bold;
}
.alert a:focus {
  box-shadow: 0 0 0 0.2rem var(--greyFocusShadow);
}
.alert__text {
  line-height: 1.6;
  margin-right: auto;
  padding: 0.25em 0;
}
.alert__icon {
  margin-right: 0.5em;
  opacity: 0.5;
}
.alert__close {
  align-self: baseline;
  margin-left: auto;
  opacity: 0.5;
  outline: none;
  padding: 0;
}
.alert__close:focus, .alert__close:hover {
  opacity: 1 !important;
}
.alert__close:focus {
  border-radius: 0.125rem;
  box-shadow: 0 0 0 0.2rem var(--greyFocusShadow);
}
.alert--overlay {
  background-color: var(--white);
  box-shadow: 0 1px 3px #727276;
  position: absolute;
  top: 5rem;
  width: 100%;
  z-index: 1000;
}
@media (min-width: 768px) {
  .alert--overlay {
    left: 50%;
    margin-left: -33.333%;
    width: 66.667%;
  }
}
.alert--info {
  border-color: var(--info);
  color: var(--info);
}
.alert--info a:focus, .alert--info > .alert__close:focus {
  box-shadow: 0 0 0 0.2rem var(--infoFocusShadow);
}
.alert--success {
  border-color: var(--green);
  color: var(--green);
}
.alert--success a:focus, .alert--success > .alert__close:focus {
  box-shadow: 0 0 0 0.2rem var(--greenFocusShadow);
}
.alert--danger {
  border-color: var(--red);
  color: var(--red);
}
.alert--danger a:focus, .alert--danger > .alert__close:focus {
  box-shadow: 0 0 0 0.2rem var(--redFocusShadow);
}
.alert--warning {
  border-color: var(--warn);
  color: var(--warn);
}
.alert--warning a:focus, .alert--warning > .alert__close:focus {
  box-shadow: 0 0 0 0.2rem var(--warnFocusShadow);
}
.alert--sm {
  padding: 0 0.5rem;
}
.alert--sm > .alert__text {
  line-height: normal;
}
.alert--sm > .alert__text > p {
  line-height: normal;
}
.alert--sm > .alert__icon {
  margin-right: 0.25em;
}
.alert--sm > .alert__icon, .alert--sm > .alert__close {
  margin-top: 0.125em;
  opacity: 0.75;
}

/**
 * Dropdown
 */
.dropdown {
  display: inline-block;
  position: relative;
}
.dropdown__trigger {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}
.dropdown__trigger:not(:has(> [class$=__icon]))::after {
  border-color: currentcolor;
  border-style: solid;
  border-width: 0.15em 0.15em 0 0;
  content: "";
  display: inline-block;
  flex-shrink: 0;
  height: 0.5em;
  transform: translateY(-2px) rotate(135deg);
  transition: transform 0.2s ease;
  width: 0.5em;
}
.dropdown__trigger[aria-expanded=true]:not(:has(> [class$=__icon]))::after {
  transform: translateY(2px) rotate(-45deg);
}
.dropdown__icon {
  transition: transform 0.2s ease;
}
.dropdown__trigger[aria-expanded=true] .dropdown__icon {
  transform: rotate(180deg);
}
.dropdown__menu {
  background-color: var(--bodyBg);
  border: 1px solid var(--grey200);
  border-radius: 0.125rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  list-style: none;
  margin: 0.25rem 0 0;
  min-width: 10rem;
  padding: 0.25rem 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
}
.dropdown__menu[hidden] {
  display: none;
}
.dropdown--right .dropdown__menu {
  left: auto;
  right: 0;
}
.dropdown__item {
  margin: 0;
  padding: 0;
}
.dropdown__link, .dropdown__button {
  background: none;
  border: none;
  color: var(--black);
  cursor: pointer;
  display: block;
  font: inherit;
  padding: 0.375rem 1rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}
.dropdown__link:hover, .dropdown__link:focus, .dropdown__button:hover, .dropdown__button:focus {
  background-color: var(--silver);
  color: var(--black);
  outline: none;
}
.dropdown__link:focus, .dropdown__button:focus {
  box-shadow: inset 0 0 0 0.2rem var(--focusShadow);
}
.dropdown__link--danger, .dropdown__button--danger {
  color: var(--red);
}
.dropdown__link--danger:hover, .dropdown__link--danger:focus, .dropdown__button--danger:hover, .dropdown__button--danger:focus {
  background-color: var(--red);
  color: #fff;
}
.dropdown__link[disabled], .dropdown__link[aria-disabled=true], .dropdown__button[disabled], .dropdown__button[aria-disabled=true] {
  color: var(--grey400);
  cursor: default;
  pointer-events: none;
}
.dropdown__divider {
  border: none;
  border-top: 1px solid var(--grey200);
  margin: 0.25rem 0;
}

/**
 * Badges
 */
.badge {
  background-color: var(--grey700);
  border-radius: 0.125rem;
  color: var(--white);
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.25em 0.5em;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
}
.badge--pill {
  border-radius: 50rem;
  padding-inline: 0.6em; /* adjust horizontal padding for pill shape */
}
.badge--primary {
  background-color: var(--primary);
  color: var(--white);
}
.badge--secondary {
  background-color: var(--secondary);
  color: var(--white);
}
.badge--success {
  background-color: var(--green);
  color: var(--white);
}
.badge--danger {
  background-color: var(--red);
  color: var(--white);
}
.badge--warning {
  background-color: var(--warn);
  color: var(--white);
}
.badge--info {
  background-color: var(--info);
  color: var(--white);
}
.badge--light {
  background-color: var(--silver);
  color: var(--black);
}
.badge--dark {
  background-color: var(--grey900);
  color: var(--white);
}

/**
  * Buttons
  */
button,
[type=button],
[type=submit],
[type=reset] {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: none;
  padding: 0;
}

.button {
  background-color: var(--white);
  border: solid 1px;
  border-color: var(--grey400);
  border-radius: 0.125rem;
  align-items: center;
  color: var(--black);
  display: inline-flex;
  justify-content: center;
  margin-top: 4px;
  padding: 0.5em 1em;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}
.button:focus, .button:hover, .button:hover:visited, .button:active {
  background-color: #5e5e62;
  border-color: var(--black);
  border-width: 1px;
  box-shadow: none;
  color: #fff;
}
.button:focus {
  box-shadow: 0 0 0 0.2rem var(--grey700FocusShadow);
}
.button:visited {
  color: var(--black);
}
.button--dark {
  background-color: #5e5e62;
  border-color: #222;
  color: #fff;
}
.button--dark:focus, .button--dark:hover, .button--dark:hover:visited, .button--dark:active {
  background-color: #363640;
  border-color: #222;
}
.button--dark:focus {
  box-shadow: 0 0 0 0.2rem var(--grey900FocusShadow);
}
.button--dark:visited {
  color: #fff;
}
.button--primary {
  border-color: var(--primary);
  color: var(--primary);
}
.button--primary:focus, .button--primary:hover, .button--primary:hover:visited, .button--primary:active {
  background-color: #005b99;
  border-color: var(--primaryDark);
  color: #fff;
}
.button--primary:focus {
  box-shadow: 0 0 0 0.2rem var(--focusShadow);
}
.button--primary:visited {
  color: var(--primary);
}
.button--primary-dark {
  background-color: #005b99;
  border-color: #005b99;
  color: #fff;
}
.button--primary-dark:focus, .button--primary-dark:hover, .button--primary-dark:hover:visited, .button--primary-dark:active {
  background-color: rgb(0, 66.7333333333, 112.2);
  border-color: rgb(0, 30.3333333333, 51);
  color: #fff;
}
.button--primary-dark:focus {
  box-shadow: 0 0 0 0.2rem var(--focusShadow);
}
.button--primary-dark:visited {
  color: #fff;
}
.button--secondary {
  border-color: var(--secondary);
  color: var(--secondary);
}
.button--secondary:focus, .button--secondary:hover, .button--secondary:hover:visited, .button--secondary:active {
  background-color: #993d00;
  border-color: var(--secondaryDark);
  color: #fff;
}
.button--secondary:focus {
  box-shadow: 0 0 0 0.2rem var(--secondaryFocusShadow);
}
.button--secondary:visited {
  color: #993d00;
}
.button--secondary-dark {
  background-color: #993d00;
  border-color: #993d00;
  color: #fff;
}
.button--secondary-dark:focus, .button--secondary-dark:hover, .button--secondary-dark:hover:visited, .button--secondary-dark:active {
  background-color: rgb(112.2, 44.7333333333, 0);
  border-color: rgb(51, 20.3333333333, 0);
  color: #fff;
}
.button--secondary-dark:focus {
  box-shadow: 0 0 0 0.2rem var(--secondaryFocusShadow);
}
.button--secondary-dark:visited {
  color: #fff;
}
.button--danger {
  border-color: var(--red);
  color: var(--red);
}
.button--danger:focus, .button--danger:hover, .button--danger:hover:visited, .button--danger:active {
  background-color: #b60202;
  border-color: var(--dangerDark);
  color: #fff;
}
.button--danger:focus {
  box-shadow: 0 0 0 0.2rem var(--redFocusShadow);
}
.button--danger:visited {
  color: #b60202;
}
.button--danger-dark {
  background-color: #b60202;
  border-color: #b60202;
  color: #fff;
}
.button--danger-dark:focus, .button--danger-dark:hover, .button--danger-dark:hover:visited, .button--danger-dark:active {
  background-color: rgb(141.6434782609, 1.5565217391, 1.5565217391);
  border-color: rgb(81.1086956522, 0.8913043478, 0.8913043478);
  color: #fff;
}
.button--danger-dark:focus {
  box-shadow: 0 0 0 0.2rem var(--redFocusShadow);
}
.button--danger-dark:visited {
  color: #fff;
}
.button--warning {
  border-color: var(--warn);
  color: var(--warn);
}
.button--warning:focus, .button--warning:hover, .button--warning:hover:visited, .button--warning:active {
  background-color: #695802;
  border-color: var(--warningDark);
  color: #fff;
}
.button--warning:focus {
  box-shadow: 0 0 0 0.2rem var(--warnFocusShadow);
}
.button--warning:visited {
  color: #695802;
}
.button--warning-dark {
  background-color: #695802;
  border-color: #695802;
  color: #fff;
}
.button--warning-dark:focus, .button--warning-dark:hover, .button--warning-dark:hover:visited, .button--warning-dark:active {
  background-color: rgb(64.9626168224, 54.4448598131, 1.2373831776);
  border-color: rgb(4.9065420561, 4.1121495327, 0.0934579439);
  color: #fff;
}
.button--warning-dark:focus {
  box-shadow: 0 0 0 0.2rem var(--warnFocusShadow);
}
.button--warning-dark:visited {
  color: #fff;
}
.button--success {
  border-color: var(--green);
  color: var(--green);
}
.button--success:focus, .button--success:hover, .button--success:hover:visited, .button--success:active {
  background-color: #036803;
  border-color: var(--successDark);
  color: #fff;
}
.button--success:focus {
  box-shadow: 0 0 0 0.2rem var(--greenFocusShadow);
}
.button--success:visited {
  color: #036803;
}
.button--success-dark {
  background-color: #036803;
  border-color: #036803;
  color: #fff;
}
.button--success-dark:focus, .button--success-dark:hover, .button--success-dark:hover:visited, .button--success-dark:active {
  background-color: rgb(1.8560747664, 64.3439252336, 1.8560747664);
  border-color: rgb(0.1401869159, 4.8598130841, 0.1401869159);
  color: #fff;
}
.button--success-dark:focus {
  box-shadow: 0 0 0 0.2rem var(--greenFocusShadow);
}
.button--success-dark:visited {
  color: #fff;
}
.button--info {
  border-color: var(--info);
  color: var(--info);
}
.button--info:focus, .button--info:hover, .button--info:hover:visited, .button--info:active {
  background-color: #03607d;
  border-color: var(--infoDark);
  color: #fff;
}
.button--info:focus {
  box-shadow: 0 0 0 0.2rem var(--infoFocusShadow);
}
.button--info:visited {
  color: #03607d;
}
.button--info-dark {
  background-color: #03607d;
  border-color: #03607d;
  color: #fff;
}
.button--info-dark:focus, .button--info-dark:hover, .button--info-dark:hover:visited, .button--info-dark:active {
  background-color: rgb(2.04375, 65.4, 85.15625);
  border-color: rgb(0.609375, 19.5, 25.390625);
  color: #fff;
}
.button--info-dark:focus {
  box-shadow: 0 0 0 0.2rem var(--infoFocusShadow);
}
.button--info-dark:visited {
  color: #fff;
}
.button--link {
  background-color: transparent;
  border: none;
  box-shadow: none;
  color: var(--primary);
  padding: calc(0.5em + 1px) calc(1em + 1px);
  text-decoration: underline;
}
.button--link:focus, .button--link:hover, .button--link:hover:visited, .button--link:active {
  background-color: inherit;
  color: var(--primaryActive);
}
.button--link:focus {
  box-shadow: 0 0 0 0.2rem var(--focusShadow);
}
.button--link:visited {
  color: var(--primary);
}
.button--lg {
  border-radius: 0.25rem;
  font-size: 1.25em;
  padding: 0.5em 1em calc(0.5em - 1px) 1em;
}
.button--sm {
  font-size: 0.9em;
  padding: 0.25em 0.5em;
}

/**
 * Button group
 *
 * Connects .button elements in a horizontal row with shared borders.
 *
 * Basic usage:
 *   <div class="button-group" role="group" aria-label="...">
 *     <button class="button button--primary">Left</button>
 *     <button class="button button--primary">Middle</button>
 *     <button class="button button--primary">Right</button>
 *   </div>
 *
 * Radio/checkbox usage — input immediately precedes its label:
 *   <div class="button-group" role="group" aria-label="...">
 *     <input class="button-group__input" type="radio" id="r1" name="grp">
 *     <label class="button button--secondary" for="r1">Option 1</label>
 *     <input class="button-group__input" type="radio" id="r2" name="grp">
 *     <label class="button button--secondary" for="r2">Option 2</label>
 *   </div>
 */
.button-group {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
}
.button-group .button {
  border-radius: 0;
  margin-top: 0;
  position: relative;
}
.button-group .button:focus, .button-group .button:hover, .button-group .button:active {
  z-index: 1;
}
.button-group .button + .button {
  margin-inline-start: -1px;
}
.button-group .button:first-child {
  border-start-start-radius: 0.125rem;
  border-end-start-radius: 0.125rem;
}
.button-group .button:last-child {
  border-start-end-radius: 0.125rem;
  border-end-end-radius: 0.125rem;
}

.button-group__input {
  clip-path: inset(50%);
  pointer-events: none;
  position: absolute;
}
.button-group__input + .button {
  margin-inline-start: -1px;
}
.button-group__input:first-child + .button {
  border-start-start-radius: 0.125rem;
  border-end-start-radius: 0.125rem;
  margin-inline-start: 0;
}
.button-group__input:focus + .button {
  box-shadow: 0 0 0 0.2rem var(--grey700FocusShadow);
  z-index: 1;
}
.button-group__input:focus + .button--primary {
  box-shadow: 0 0 0 0.2rem var(--focusShadow);
}
.button-group__input:focus + .button--secondary {
  box-shadow: 0 0 0 0.2rem var(--secondaryFocusShadow);
}
.button-group__input:focus + .button--danger {
  box-shadow: 0 0 0 0.2rem var(--redFocusShadow);
}
.button-group__input:focus + .button--warning {
  box-shadow: 0 0 0 0.2rem var(--warnFocusShadow);
}
.button-group__input:focus + .button--success {
  box-shadow: 0 0 0 0.2rem var(--greenFocusShadow);
}
.button-group__input:focus + .button--info {
  box-shadow: 0 0 0 0.2rem var(--infoFocusShadow);
}
.button-group__input:checked + .button {
  background-color: #5e5e62;
  border-color: #222;
  color: #fff;
  z-index: 1;
}
.button-group__input:checked + .button--primary {
  background-color: #005b99;
  border-color: rgb(0, 30.3333333333, 51);
  color: #fff;
}
.button-group__input:checked + .button--secondary {
  background-color: #993d00;
  border-color: rgb(51, 20.3333333333, 0);
  color: #fff;
}
.button-group__input:checked + .button--danger {
  background-color: #b60202;
  border-color: rgb(81.1086956522, 0.8913043478, 0.8913043478);
  color: #fff;
}
.button-group__input:checked + .button--warning {
  background-color: #695802;
  border-color: rgb(4.9065420561, 4.1121495327, 0.0934579439);
  color: #fff;
}
.button-group__input:checked + .button--success {
  background-color: #036803;
  border-color: rgb(0.1401869159, 4.8598130841, 0.1401869159);
  color: #fff;
}
.button-group__input:checked + .button--info {
  background-color: #03607d;
  border-color: rgb(0.609375, 19.5, 25.390625);
  color: #fff;
}

/**
  * Cards
  */
.card {
  background-color: var(--white);
  border: 1px solid #9b9b9f;
  border-color: var(--grey400);
  border-radius: 0.125rem;
  overflow: hidden;
}
.card--primary {
  border-color: var(--primary);
}
.card--primary .card__title {
  background-color: var(--white);
  border-color: var(--primary);
  color: var(--primary);
}
.card--primary-dark {
  border-color: var(--primaryDark);
}
.card--primary-dark .card__title {
  background-color: #005b99;
  border-color: var(--primaryDark);
  color: #fff;
}
.card--secondary {
  border-color: var(--secondary);
}
.card--secondary .card__title {
  background-color: var(--white);
  border-color: var(--secondary);
  color: var(--secondary);
}
.card--secondary-dark {
  border-color: var(--secondaryDark);
}
.card--secondary-dark .card__title {
  background-color: #993d00;
  border-color: var(--secondaryDark);
  color: #fff;
}
.card--info {
  border-color: var(--info);
}
.card--info .card__title {
  background-color: var(--white);
  border-color: var(--info);
  color: var(--info);
}
.card--info-dark {
  border-color: var(--infoDark);
}
.card--info-dark .card__title {
  background-color: #03607d;
  border-color: var(--infoDark);
  color: #fff;
}
.card--success {
  border-color: var(--green);
}
.card--success .card__title {
  background-color: var(--white);
  border-color: var(--green);
  color: var(--green);
}
.card--success-dark {
  border-color: var(--successDark);
}
.card--success-dark .card__title {
  background-color: #036803;
  border-color: var(--successDark);
  color: #fff;
}
.card--warning {
  border-color: var(--warn);
}
.card--warning .card__title {
  background-color: var(--white);
  border-color: var(--warn);
  color: var(--warn);
}
.card--warning-dark {
  border-color: var(--warningDark);
}
.card--warning-dark .card__title {
  background-color: #695802;
  border-color: var(--warningDark);
  color: #fff;
}
.card--danger {
  border-color: var(--red);
}
.card--danger .card__title {
  background-color: var(--white);
  border-color: var(--red);
  color: var(--red);
}
.card--danger-dark {
  border-color: var(--dangerDark);
}
.card--danger-dark .card__title {
  background-color: #b60202;
  border-color: var(--dangerDark);
  color: #fff;
}
.card__title {
  background-color: var(--silver);
  border-bottom: 1px solid;
  border-bottom-color: var(--grey400);
  padding: 1rem;
}
.card__title > * {
  font-size: 1.2rem;
  margin: 0;
}
.card__body {
  padding: 1rem;
}
.card__body > * {
  margin-bottom: 1em;
}
.card__body > *:last-child {
  margin-bottom: 0;
}

/**
  * Forms
  */
.form input[type=radio]:focus,
.form input[type=checkbox]:focus {
  box-shadow: 0 0 0 0.2rem var(--focusShadow);
  outline: none;
}
.form--inline {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0.2rem;
}
.form--inline input, .form--inline select {
  width: auto;
}
.form--inline .form__label, .form--inline .form__control {
  display: inline-block;
}
.form--inline > .form__group {
  margin-bottom: 0;
  margin-right: 4px;
  margin-top: 4px;
}
.form--inline > .form__group > .button {
  margin-top: 0;
}
.form__group {
  margin-bottom: 1rem;
}
.form__label {
  display: block;
  padding-bottom: 0.5rem;
}
.form__label--lg {
  font-size: 1.25rem;
}
.form__label--sm {
  font-size: 0.875rem;
  padding-bottom: 0.25rem;
}
.form__control {
  background-color: var(--white);
  background-clip: padding-box;
  border: 1px solid;
  border-color: var(--grey600);
  border-radius: 0.125rem;
  color: var(--black);
  display: block;
  margin-bottom: 0.25rem;
  outline: none;
  padding: 0.5em;
  width: 100%;
}
select.form__control {
  /* Hack to size height the same as other inputs */
  height: calc(2.5em + 2px);
}

.form__control:focus {
  box-shadow: 0 0 0 0.2rem var(--focusShadow);
}
.form__control--file {
  background-color: transparent;
  border: none;
  height: auto;
  padding: calc(0.5em + 1px);
  /* account for removed border */
  padding-left: 0;
}
.form__control-error {
  color: var(--red);
  margin-bottom: 0.25rem;
}
.form__control--hasError {
  border-color: var(--red);
}
.form__control--hasError:focus {
  box-shadow: 0 0 0 0.2rem var(--errorShadow);
}
.form__control--lg {
  border-radius: 0.25rem;
  font-size: 1.25rem;
}
.form__control--sm {
  font-size: 0.875rem;
}
.form__check {
  margin-bottom: 0.5rem;
}
.form__check input[type=checkbox],
.form__check input[type=radio] {
  margin-right: 0.25rem;
  /* spacing between control and text */
}

fieldset.form__group {
  border: none;
  padding: 0;
}

.icon,
.svg-inline--fa {
  font-size: inherit;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  width: auto;
}
.icon--fw, .icon.fa-fw,
.svg-inline--fa--fw,
.svg-inline--fa.fa-fw {
  width: 0.875em;
}

.img--default {
  background-color: var(--white);
  border: 1px solid #d7d7db;
  border-color: var(--grey100);
  border-radius: 0.125rem;
  padding: 0.25rem;
}
.img--round {
  border-radius: 50%;
  -o-object-fit: contain;
     object-fit: contain;
}
.img--rounded {
  border-radius: 0.5rem;
}
.img--padded {
  background-color: var(--white);
  padding: 0.25rem;
}
.img--border {
  border: 1px solid #d7d7db;
  border-color: var(--grey100);
}

/* Apply a filter directly on the body tag */
body.theme--dark img {
  filter: brightness(0.8) contrast(1.2);
}

/* Or apply it via media query */
@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(0.8) contrast(1.2);
  }
  .theme--light img {
    filter: none;
  }
}
.list--none {
  list-style: none;
  margin-left: 0;
}
.list--alpha {
  list-style-type: lower-alpha;
}
.list--roman {
  list-style-type: lower-roman;
}
.list--circle {
  list-style-type: circle;
}
.list--disc {
  list-style-type: disc;
}
.list--square {
  list-style-type: square;
}

/**
 * Modal (Dialog API)
 */
dialog.modal {
  background-color: var(--bodyBg);
  border: 1px solid var(--grey200);
  border-radius: 0.125rem;
  color: var(--black);
  margin-block-start: 4rem;
  margin-inline: auto;
  max-height: 90dvh;
  max-width: min(90vw, 40rem);
  overflow: auto;
  padding: 0;
}
dialog.modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.modal {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
}
.modal__header {
  align-items: center;
  background-color: var(--silver);
  border-bottom: 1px solid var(--grey200);
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}
.modal__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}
.modal__close {
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.6;
  padding: 0.25rem;
}
.modal__close:hover {
  opacity: 1;
}
.modal__close:focus {
  border-radius: 0.125rem;
  box-shadow: 0 0 0 0.2rem var(--greyFocusShadow);
  opacity: 1;
  outline: none;
}
.modal__body {
  padding: 1rem;
}
.modal__body > * + * {
  margin-top: 1rem;
}
.modal__footer {
  border-top: 1px solid var(--grey200);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 1rem;
}
.modal--centered {
  margin: auto;
}
.modal--sm {
  max-width: min(90vw, 25rem);
}
.modal--lg {
  max-width: min(90vw, 60rem);
}

.nav {
  display: flex;
  grid-area: navigation;
  margin: 0 1rem 0.5rem 1rem;
}
@media (min-width: 768px) {
  .nav {
    margin-bottom: 0;
    margin-left: auto;
  }
}
.nav__list {
  background-color: var(--bodyBg);
  border: 1px solid;
  border-color: var(--grey100);
  border-radius: 0.125rem;
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  list-style: none;
  margin-bottom: 0;
  margin-left: 0;
}
@media (min-width: 768px) {
  .nav__list {
    background-color: transparent;
    border: none;
    flex-basis: auto;
    flex-direction: row;
    margin-top: 0;
  }
}
.nav__item {
  border-bottom: 1px solid;
  border-bottom-color: var(--grey100);
  margin-bottom: 0;
  padding: 0.5rem;
}
@media (min-width: 768px) {
  .nav__item {
    background-color: transparent;
    border-bottom: none;
    margin-right: 0.5rem;
    padding: 0;
  }
}
.nav__item:last-child {
  border-bottom: none;
  margin-right: 0;
}
.nav__link {
  color: var(--grey800);
  display: block;
  text-decoration: none;
}
.nav__link:hover {
  color: var(--grey800);
  text-decoration: underline;
}
.nav__link:visited {
  color: var(--grey800);
}
.nav__control {
  display: block;
  grid-area: navToggle;
  margin-left: auto;
  margin-right: 1rem;
  margin-top: 0;
}
@media (min-width: 768px) {
  .nav__control {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav {
    margin-left: 0;
  }
}

.collapsed {
  display: none;
}
@media (min-width: 768px) {
  .collapsed {
    display: block;
  }
}

.expanded {
  display: block;
}

/**
 * Tables
 */
.table {
  border-collapse: collapse;
  caption-side: bottom;
  width: 100%;
}
.table caption {
  color: var(--grey700);
  font-size: 0.875rem;
  padding-top: 0.5rem;
  text-align: left;
}
.table th,
.table td {
  border-bottom: 1px solid #c3c3c7;
  border-bottom-color: var(--grey200);
  padding: 0.75rem;
  vertical-align: top;
}
.table th {
  font-weight: 600;
  text-align: left;
}
.table thead {
  background-color: var(--silver);
}
.table thead th,
.table thead td {
  border-bottom-width: 2px;
}
.table tfoot th,
.table tfoot td {
  border-bottom: none;
  border-top: 2px solid #c3c3c7;
  border-top-color: var(--grey200);
}
.table--striped tbody tr:nth-of-type(even) {
  background-color: var(--silver);
}
.table--bordered {
  border-radius: 0.125rem;
  overflow: hidden;
}
.table--bordered th,
.table--bordered td {
  border: 1px solid #c3c3c7;
  border-color: var(--grey200);
}
.table--bordered thead th,
.table--bordered thead td {
  border-bottom-width: 2px;
}
.table--bordered tfoot th,
.table--bordered tfoot td {
  border-top-width: 2px;
}
.table--hover tbody tr:hover {
  background-color: var(--grey100);
}
.table--sm th,
.table--sm td {
  padding: 0.375rem 0.75rem;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/**
 * Tabs
 */
.tabs__list {
  border-bottom: 2px solid var(--grey200);
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tabs__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0.125rem 0.125rem 0 0;
  color: var(--grey700);
  cursor: pointer;
  font: inherit;
  margin-bottom: -2px;
  outline: none;
  padding: 0.625rem 1rem;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.tabs__tab:hover {
  background-color: var(--silver);
  color: var(--black);
}
.tabs__tab:focus {
  box-shadow: inset 0 0 0 0.2rem var(--focusShadow);
}
.tabs__tab[aria-selected=true] {
  border-bottom-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.tabs__panel {
  padding: 1rem 0;
}
.tabs__panel > * + * {
  margin-top: 1rem;
}
.tabs__panel[hidden] {
  display: none;
}

/**
 * Tooltips
 *
 * Apply the .tooltip class directly to any interactive element and set the
 * data-tooltip attribute to the label text. No JavaScript required.
 *
 * Placement modifiers: .tooltip--top (default), .tooltip--bottom,
 * .tooltip--left, .tooltip--right
 */
.tooltip {
  display: inline-block;
  position: relative;
}
.tooltip::before, .tooltip::after {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.15s ease;
  z-index: 1070;
}
.tooltip::before {
  background-color: #363640;
  border-radius: 0.125rem;
  color: #fff;
  content: attr(data-tooltip);
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  bottom: calc(100% + 0.66rem);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip::after {
  border-left: 0.41rem solid transparent;
  border-right: 0.41rem solid transparent;
  border-top: 0.41rem solid #363640;
  border-bottom: 0;
  content: "";
  height: 0;
  width: 0;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip:hover::before, .tooltip:hover::after, .tooltip:focus-within::before, .tooltip:focus-within::after {
  opacity: 1;
}
.tooltip--bottom::before {
  bottom: auto;
  top: calc(100% + 0.66rem);
}
.tooltip--bottom::after {
  border-top: 0;
  border-bottom: 0.41rem solid #363640;
  border-left: 0.41rem solid transparent;
  border-right: 0.41rem solid transparent;
  bottom: auto;
  top: calc(100% + 0.25rem);
}
.tooltip--left::before {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 0.66rem);
  transform: translateY(-50%);
}
.tooltip--left::after {
  border-top: 0.41rem solid transparent;
  border-bottom: 0.41rem solid transparent;
  border-left: 0.41rem solid #363640;
  border-right: 0;
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 0.25rem);
  transform: translateY(-50%);
}
.tooltip--right::before {
  bottom: auto;
  top: 50%;
  left: calc(100% + 0.66rem);
  transform: translateY(-50%);
}
.tooltip--right::after {
  border-top: 0.41rem solid transparent;
  border-bottom: 0.41rem solid transparent;
  border-right: 0.41rem solid #363640;
  border-left: 0;
  bottom: auto;
  top: 50%;
  left: calc(100% + 0.25rem);
  transform: translateY(-50%);
}
.tooltip[data-tooltip-flip=top]::before {
  bottom: calc(100% + 0.66rem);
  left: 50%;
  right: auto;
  top: auto;
  transform: translateX(-50%);
}
.tooltip[data-tooltip-flip=top]::after {
  border-bottom: 0;
  border-left: 0.41rem solid transparent;
  border-right: 0.41rem solid transparent;
  border-top: 0.41rem solid #363640;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  right: auto;
  top: auto;
  transform: translateX(-50%);
}
.tooltip[data-tooltip-flip=bottom]::before {
  bottom: auto;
  left: 50%;
  right: auto;
  top: calc(100% + 0.66rem);
  transform: translateX(-50%);
}
.tooltip[data-tooltip-flip=bottom]::after {
  border-bottom: 0.41rem solid #363640;
  border-left: 0.41rem solid transparent;
  border-right: 0.41rem solid transparent;
  border-top: 0;
  bottom: auto;
  left: 50%;
  right: auto;
  top: calc(100% + 0.25rem);
  transform: translateX(-50%);
}
.tooltip[data-tooltip-flip=left]::before {
  bottom: auto;
  left: auto;
  right: calc(100% + 0.66rem);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip[data-tooltip-flip=left]::after {
  border-bottom: 0.41rem solid transparent;
  border-left: 0.41rem solid #363640;
  border-right: 0;
  border-top: 0.41rem solid transparent;
  bottom: auto;
  left: auto;
  right: calc(100% + 0.25rem);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip[data-tooltip-flip=right]::before {
  bottom: auto;
  left: calc(100% + 0.66rem);
  right: auto;
  top: 50%;
  transform: translateY(-50%);
}
.tooltip[data-tooltip-flip=right]::after {
  border-bottom: 0.41rem solid transparent;
  border-left: 0;
  border-right: 0.41rem solid #363640;
  border-top: 0.41rem solid transparent;
  bottom: auto;
  left: calc(100% + 0.25rem);
  right: auto;
  top: 50%;
  transform: translateY(-50%);
}

/**
 * Popovers
 *
 * A .popover wrapper contains a .popover__trigger button and a .popover__panel.
 * Toggle visibility is managed by JavaScript (initPopover).
 *
 * Default placement: bottom. Add .popover__panel--top / --left / --right
 * to the panel element to change direction.
 *
 * The directional arrow uses a stacked two-triangle technique:
 *   ::before — outer triangle in border colour (creates the 1px border edge)
 *   ::after  — inner triangle in background colour (fills the arrow interior)
 */
.popover {
  display: inline-block;
  position: relative;
}
.popover__panel {
  background-color: var(--bodyBg);
  border: 1px solid var(--grey200);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  min-width: 12rem;
  max-width: 16rem;
  padding: 0.5rem 1rem;
  position: absolute;
  z-index: 1060;
  left: 50%;
  top: calc(100% + 0.625rem);
  transform: translateX(-50%);
}
.popover__panel[hidden] {
  display: none;
}
.popover__panel::before, .popover__panel::after {
  content: "";
  height: 0;
  pointer-events: none;
  position: absolute;
  width: 0;
}
.popover__panel::before {
  border-bottom: 0.5625rem solid var(--grey200);
  border-left: 0.5625rem solid transparent;
  border-right: 0.5625rem solid transparent;
  border-top: 0;
  left: 50%;
  top: -0.5625rem;
  transform: translateX(-50%);
}
.popover__panel::after {
  border-bottom: 0.5rem solid var(--bodyBg);
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0;
  left: 50%;
  top: -0.5rem;
  transform: translateX(-50%);
}
.popover__panel--top {
  bottom: calc(100% + 0.625rem);
  top: auto;
}
.popover__panel--top::before {
  border-bottom: 0;
  border-left: 0.5625rem solid transparent;
  border-right: 0.5625rem solid transparent;
  border-top: 0.5625rem solid var(--grey200);
  bottom: -0.5625rem;
  top: auto;
}
.popover__panel--top::after {
  border-bottom: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0.5rem solid var(--bodyBg);
  bottom: -0.5rem;
  top: auto;
}
.popover__panel--left {
  left: auto;
  right: calc(100% + 0.625rem);
  top: 50%;
  transform: translateY(-50%);
}
.popover__panel--left::before {
  border-bottom: 0.5625rem solid transparent;
  border-left: 0.5625rem solid var(--grey200);
  border-right: 0;
  border-top: 0.5625rem solid transparent;
  left: auto;
  right: -0.5625rem;
  top: 50%;
  transform: translateY(-50%);
}
.popover__panel--left::after {
  border-bottom: 0.5rem solid transparent;
  border-left: 0.5rem solid var(--bodyBg);
  border-right: 0;
  border-top: 0.5rem solid transparent;
  left: auto;
  right: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.popover__panel--right {
  left: calc(100% + 0.625rem);
  top: 50%;
  transform: translateY(-50%);
}
.popover__panel--right::before {
  border-bottom: 0.5625rem solid transparent;
  border-left: 0;
  border-right: 0.5625rem solid var(--grey200);
  border-top: 0.5625rem solid transparent;
  left: -0.5625rem;
  top: 50%;
  transform: translateY(-50%);
}
.popover__panel--right::after {
  border-bottom: 0.5rem solid transparent;
  border-left: 0;
  border-right: 0.5rem solid var(--bodyBg);
  border-top: 0.5rem solid transparent;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.popover__panel[data-popover-flip=top] {
  bottom: calc(100% + 0.625rem);
  left: 50%;
  top: auto;
  transform: translateX(-50%);
}
.popover__panel[data-popover-flip=top]::before {
  border-bottom: 0;
  border-left: 0.5625rem solid transparent;
  border-right: 0.5625rem solid transparent;
  border-top: 0.5625rem solid var(--grey200);
  bottom: -0.5625rem;
  left: 50%;
  top: auto;
  transform: translateX(-50%);
}
.popover__panel[data-popover-flip=top]::after {
  border-bottom: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0.5rem solid var(--bodyBg);
  bottom: -0.5rem;
  left: 50%;
  top: auto;
  transform: translateX(-50%);
}
.popover__panel[data-popover-flip=bottom] {
  bottom: auto;
  left: 50%;
  top: calc(100% + 0.625rem);
  transform: translateX(-50%);
}
.popover__panel[data-popover-flip=bottom]::before {
  border-bottom: 0.5625rem solid var(--grey200);
  border-left: 0.5625rem solid transparent;
  border-right: 0.5625rem solid transparent;
  border-top: 0;
  bottom: auto;
  left: 50%;
  top: -0.5625rem;
  transform: translateX(-50%);
}
.popover__panel[data-popover-flip=bottom]::after {
  border-bottom: 0.5rem solid var(--bodyBg);
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0;
  bottom: auto;
  left: 50%;
  top: -0.5rem;
  transform: translateX(-50%);
}
.popover__panel[data-popover-flip=right] {
  left: calc(100% + 0.625rem);
  right: auto;
  top: 50%;
  transform: translateY(-50%);
}
.popover__panel[data-popover-flip=right]::before {
  border-bottom: 0.5625rem solid transparent;
  border-left: 0;
  border-right: 0.5625rem solid var(--grey200);
  border-top: 0.5625rem solid transparent;
  left: -0.5625rem;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
}
.popover__panel[data-popover-flip=right]::after {
  border-bottom: 0.5rem solid transparent;
  border-left: 0;
  border-right: 0.5rem solid var(--bodyBg);
  border-top: 0.5rem solid transparent;
  left: -0.5rem;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
}
.popover__panel[data-popover-flip=left] {
  left: auto;
  right: calc(100% + 0.625rem);
  top: 50%;
  transform: translateY(-50%);
}
.popover__panel[data-popover-flip=left]::before {
  border-bottom: 0.5625rem solid transparent;
  border-left: 0.5625rem solid var(--grey200);
  border-right: 0;
  border-top: 0.5625rem solid transparent;
  left: auto;
  right: -0.5625rem;
  top: 50%;
  transform: translateY(-50%);
}
.popover__panel[data-popover-flip=left]::after {
  border-bottom: 0.5rem solid transparent;
  border-left: 0.5rem solid var(--bodyBg);
  border-right: 0;
  border-top: 0.5rem solid transparent;
  left: auto;
  right: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.popover__title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.popover__body {
  font-size: 0.875rem;
  margin: 0;
}

/**
 * Background colour utilities
 */
/* Semantic colours — match text-* and alert/button variants */
.bg-primary {
  background-color: var(--primary);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-info {
  background-color: var(--info);
}

.bg-success {
  background-color: var(--green);
}

.bg-warning {
  background-color: var(--warn);
}

.bg-danger {
  background-color: var(--red);
}

/* Combined background + contrasting text colour */
.text-bg-primary {
  background-color: var(--primary);
  color: var(--semanticContrast);
}

.text-bg-secondary {
  background-color: var(--secondary);
  color: var(--semanticContrast);
}

.text-bg-info {
  background-color: var(--info);
  color: var(--semanticContrast);
}

.text-bg-success {
  background-color: var(--green);
  color: var(--semanticContrast);
}

.text-bg-warning {
  background-color: var(--warn);
  color: var(--semanticContrast);
}

.text-bg-danger {
  background-color: var(--red);
  color: var(--semanticContrast);
}

/* Neutral */
.bg-white {
  background-color: var(--white);
}

.bg-body {
  background-color: var(--bodyBg);
}

.bg-muted {
  background-color: var(--grey200);
}

.bg-dark {
  background-color: var(--grey900);
}

.bg-transparent {
  background-color: transparent;
}

/**
 * Display utilities
 */
.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

.d-flex {
  display: flex;
}

.d-inline-flex {
  display: inline-flex;
}

.d-grid {
  display: grid;
}

/**
 * Flex direction and wrapping
 */
.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/**
 * Align items
 */
.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-stretch {
  align-items: stretch;
}

.align-items-baseline {
  align-items: baseline;
}

/**
 * Justify content
 */
.justify-content-start {
  justify-content: flex-start;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.justify-content-evenly {
  justify-content: space-evenly;
}

/**
 * Gap (flex and grid) — n × 0.25rem, 0–8
 */
.gap-0 {
  gap: 0rem;
}

.gap-x-0 {
  -moz-column-gap: 0rem;
       column-gap: 0rem;
}

.gap-y-0 {
  row-gap: 0rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-6 {
  row-gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-x-7 {
  -moz-column-gap: 1.75rem;
       column-gap: 1.75rem;
}

.gap-y-7 {
  row-gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-y-8 {
  row-gap: 2rem;
}

/**
 * Overflow utilities
 */
.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-clip {
  overflow: clip;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

/**
 * Position utilities
 */
.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

/* Sticky helpers */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 100;
}

.sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 100;
}

/* Edge placement — use with position-absolute / position-fixed */
.top-0 {
  top: 0;
}

.top-50 {
  top: 50%;
}

.top-100 {
  top: 100%;
}

.bottom-0 {
  bottom: 0;
}

.bottom-50 {
  bottom: 50%;
}

.bottom-100 {
  bottom: 100%;
}

.start-0 {
  inset-inline-start: 0;
}

.start-50 {
  inset-inline-start: 50%;
}

.start-100 {
  inset-inline-start: 100%;
}

.end-0 {
  inset-inline-end: 0;
}

.end-50 {
  inset-inline-end: 50%;
}

.end-100 {
  inset-inline-end: 100%;
}

/* Centering helper — pair with top-50 / start-50 */
.translate-middle {
  transform: translate(-50%, -50%);
}

/**
 * Border utilities
 */
/* Add borders */
.border {
  border: 1px solid var(--grey300);
}

.border-top {
  border-block-start: 1px solid var(--grey300);
}

.border-bottom {
  border-block-end: 1px solid var(--grey300);
}

.border-start {
  border-inline-start: 1px solid var(--grey300);
}

.border-end {
  border-inline-end: 1px solid var(--grey300);
}

/* Remove borders */
.border-0 {
  border: 0;
}

.border-top-0 {
  border-block-start: 0;
}

.border-bottom-0 {
  border-block-end: 0;
}

.border-start-0 {
  border-inline-start: 0;
}

.border-end-0 {
  border-inline-end: 0;
}

/* Border colour */
.border-primary {
  border-color: var(--primary);
}

.border-secondary {
  border-color: var(--secondary);
}

.border-success {
  border-color: var(--green);
}

.border-info {
  border-color: var(--info);
}

.border-warning {
  border-color: var(--warn);
}

.border-danger {
  border-color: var(--red);
}

.border-light {
  border-color: var(--grey100);
}

.border-dark {
  border-color: var(--grey900);
}

/* Border width — 1–4px */
.border-1 {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-3 {
  border-width: 3px;
}

.border-4 {
  border-width: 4px;
}

/* Border radius */
.rounded {
  border-radius: 0.125rem;
}

.rounded-sm {
  border-radius: 0.0625rem;
}

.rounded-lg {
  border-radius: 0.25rem;
}

.rounded-xl {
  border-radius: 0.5rem;
}

.rounded-xxl {
  border-radius: 0.75rem;
}

.rounded-pill {
  border-radius: 50rem;
}

.rounded-full {
  border-radius: 50%;
}

.rounded-0 {
  border-radius: 0;
}

/**
 * Shadow utilities
 */
.shadow-none {
  box-shadow: none;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

/**
 * Z-index utilities
 */
/* Numeric scale */
.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-auto {
  z-index: auto;
}

/* Named semantic scale */
.z-above {
  z-index: 10;
}

.z-raised {
  z-index: 100;
}

.z-dropdown {
  z-index: 1000;
}

.z-sticky {
  z-index: 1020;
}

.z-fixed {
  z-index: 1030;
}

.z-backdrop {
  z-index: 1040;
}

.z-modal {
  z-index: 1050;
}

.z-popover {
  z-index: 1060;
}

.z-tooltip {
  z-index: 1070;
}

/**
 * Aspect ratio utilities
 *
 * Apply .ratio to a container, then add a modifier for the desired ratio.
 * The child element (iframe, img, video, etc.) should fill the container:
 *
 *   <div class="ratio ratio--16x9">
 *     <iframe src="..." title="..."></iframe>
 *   </div>
 */
.ratio {
  position: relative;
  width: 100%;
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ratio--1x1 {
  aspect-ratio: 1/1;
}

.ratio--4x3 {
  aspect-ratio: 4/3;
}

.ratio--3x2 {
  aspect-ratio: 3/2;
}

.ratio--16x9 {
  aspect-ratio: 16/9;
}

.ratio--21x9 {
  aspect-ratio: 21/9;
}

.ratio--9x16 {
  aspect-ratio: 9/16;
}

/**
 * Grid utilities
 *
 * .grid sets a 12-column grid. Use .grid-cols-{n} for equal-width
 * column layouts, or .col-{n} to span a specific number of columns.
 *
 *   <div class="grid grid-cols-3 gap-4">
 *     <div>...</div>
 *     <div>...</div>
 *     <div>...</div>
 *   </div>
 *
 *   <div class="grid gap-4">
 *     <div class="col-8">Main</div>
 *     <div class="col-4">Aside</div>
 *   </div>
 */
/* Grid container */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

/* Equal-width column shorthand — overrides the 12-col template */
.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid-cols-7 {
  grid-template-columns: repeat(7, 1fr);
}

.grid-cols-8 {
  grid-template-columns: repeat(8, 1fr);
}

.grid-cols-9 {
  grid-template-columns: repeat(9, 1fr);
}

.grid-cols-10 {
  grid-template-columns: repeat(10, 1fr);
}

.grid-cols-11 {
  grid-template-columns: repeat(11, 1fr);
}

.grid-cols-12 {
  grid-template-columns: repeat(12, 1fr);
}

/* Column span */
.col-1 {
  grid-column: span 1/span 1;
}

.col-2 {
  grid-column: span 2/span 2;
}

.col-3 {
  grid-column: span 3/span 3;
}

.col-4 {
  grid-column: span 4/span 4;
}

.col-5 {
  grid-column: span 5/span 5;
}

.col-6 {
  grid-column: span 6/span 6;
}

.col-7 {
  grid-column: span 7/span 7;
}

.col-8 {
  grid-column: span 8/span 8;
}

.col-9 {
  grid-column: span 9/span 9;
}

.col-10 {
  grid-column: span 10/span 10;
}

.col-11 {
  grid-column: span 11/span 11;
}

.col-12 {
  grid-column: span 12/span 12;
}

.col-auto {
  grid-column: auto;
}

.col-full {
  grid-column: 1/-1;
}

/* Row span */
.row-span-1 {
  grid-row: span 1/span 1;
}

.row-span-2 {
  grid-row: span 2/span 2;
}

.row-span-3 {
  grid-row: span 3/span 3;
}

.row-span-4 {
  grid-row: span 4/span 4;
}

.row-span-5 {
  grid-row: span 5/span 5;
}

.row-span-6 {
  grid-row: span 6/span 6;
}

.row-span-full {
  grid-row: 1/-1;
}

/* Alignment within cells */
.place-items-center {
  place-items: center;
}

.place-items-start {
  place-items: start;
}

.place-items-end {
  place-items: end;
}

.place-items-stretch {
  place-items: stretch;
}

.place-self-center {
  place-self: center;
}

.place-self-start {
  place-self: start;
}

.place-self-end {
  place-self: end;
}

.place-self-stretch {
  place-self: stretch;
}

/**
  * Flex (legacy layout system)
  *
  * This is the original Albert CSS flex-based layout grid. For new layouts,
  * prefer the CSS Grid utilities in _grid.scss (.grid, .grid-cols-*, .col-*).
  */
.flex {
  display: flex;
  margin-bottom: 1rem;
}
.flex--grid {
  flex-wrap: wrap;
  margin-bottom: 1rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  margin-top: -0.5rem;
}
.flex--wrap {
  flex-wrap: wrap;
}
.flex--column {
  flex-direction: column;
}
.flex--ai-start {
  align-items: flex-start;
}
.flex--ai-end {
  align-items: flex-end;
}
.flex--ai-center {
  align-items: center;
}
.flex--ai-baseline {
  align-items: baseline;
}
.flex--jc-end {
  justify-content: flex-end;
}
.flex--jc-center {
  justify-content: center;
}
.flex--jc-between {
  justify-content: space-between;
}
.flex--jc-around {
  justify-content: space-around;
}
.flex__item {
  flex-grow: 1;
  margin: 0.5rem;
}
.flex__item > .flex {
  margin-bottom: 0;
}
.flex__item--grow {
  flex-grow: 1;
}
.flex__item--fixed {
  flex-shrink: 0;
}
.flex__item--as-start {
  align-self: flex-start;
}
.flex__item--as-end {
  align-self: flex-end;
}
.flex__item--as-center {
  align-self: center;
}
.flex__item--as-baseline {
  align-self: baseline;
}
.flex__item--12 {
  flex: 0 0 calc(100% - 1rem);
}
@media (min-width: 544px) {
  .flex__item--12-sm {
    flex: 0 0 calc(100% - 1rem);
  }
}
@media (min-width: 768px) {
  .flex__item--12-md {
    flex: 0 0 calc(100% - 1rem);
  }
}
@media (min-width: 1012px) {
  .flex__item--12-lg {
    flex: 0 0 calc(100% - 1rem);
  }
}
.flex__item--11 {
  flex: 0 0 calc(91.6666666667% - 1rem);
}
@media (min-width: 544px) {
  .flex__item--11-sm {
    flex: 0 0 calc(91.6666666667% - 1rem);
  }
}
@media (min-width: 768px) {
  .flex__item--11-md {
    flex: 0 0 calc(91.6666666667% - 1rem);
  }
}
@media (min-width: 1012px) {
  .flex__item--11-lg {
    flex: 0 0 calc(91.6666666667% - 1rem);
  }
}
.flex__item--10 {
  flex: 0 0 calc(83.3333333333% - 1rem);
}
@media (min-width: 544px) {
  .flex__item--10-sm {
    flex: 0 0 calc(83.3333333333% - 1rem);
  }
}
@media (min-width: 768px) {
  .flex__item--10-md {
    flex: 0 0 calc(83.3333333333% - 1rem);
  }
}
@media (min-width: 1012px) {
  .flex__item--10-lg {
    flex: 0 0 calc(83.3333333333% - 1rem);
  }
}
.flex__item--9 {
  flex: 0 0 calc(75% - 1rem);
}
@media (min-width: 544px) {
  .flex__item--9-sm {
    flex: 0 0 calc(75% - 1rem);
  }
}
@media (min-width: 768px) {
  .flex__item--9-md {
    flex: 0 0 calc(75% - 1rem);
  }
}
@media (min-width: 1012px) {
  .flex__item--9-lg {
    flex: 0 0 calc(75% - 1rem);
  }
}
.flex__item--8 {
  flex: 0 0 calc(66.6666666667% - 1rem);
}
@media (min-width: 544px) {
  .flex__item--8-sm {
    flex: 0 0 calc(66.6666666667% - 1rem);
  }
}
@media (min-width: 768px) {
  .flex__item--8-md {
    flex: 0 0 calc(66.6666666667% - 1rem);
  }
}
@media (min-width: 1012px) {
  .flex__item--8-lg {
    flex: 0 0 calc(66.6666666667% - 1rem);
  }
}
.flex__item--7 {
  flex: 0 0 calc(58.3333333333% - 1rem);
}
@media (min-width: 544px) {
  .flex__item--7-sm {
    flex: 0 0 calc(58.3333333333% - 1rem);
  }
}
@media (min-width: 768px) {
  .flex__item--7-md {
    flex: 0 0 calc(58.3333333333% - 1rem);
  }
}
@media (min-width: 1012px) {
  .flex__item--7-lg {
    flex: 0 0 calc(58.3333333333% - 1rem);
  }
}
.flex__item--6 {
  flex: 0 0 calc(50% - 1rem);
}
@media (min-width: 544px) {
  .flex__item--6-sm {
    flex: 0 0 calc(50% - 1rem);
  }
}
@media (min-width: 768px) {
  .flex__item--6-md {
    flex: 0 0 calc(50% - 1rem);
  }
}
@media (min-width: 1012px) {
  .flex__item--6-lg {
    flex: 0 0 calc(50% - 1rem);
  }
}
.flex__item--5 {
  flex: 0 0 calc(41.6666666667% - 1rem);
}
@media (min-width: 544px) {
  .flex__item--5-sm {
    flex: 0 0 calc(41.6666666667% - 1rem);
  }
}
@media (min-width: 768px) {
  .flex__item--5-md {
    flex: 0 0 calc(41.6666666667% - 1rem);
  }
}
@media (min-width: 1012px) {
  .flex__item--5-lg {
    flex: 0 0 calc(41.6666666667% - 1rem);
  }
}
.flex__item--4 {
  flex: 0 0 calc(33.3333333333% - 1rem);
}
@media (min-width: 544px) {
  .flex__item--4-sm {
    flex: 0 0 calc(33.3333333333% - 1rem);
  }
}
@media (min-width: 768px) {
  .flex__item--4-md {
    flex: 0 0 calc(33.3333333333% - 1rem);
  }
}
@media (min-width: 1012px) {
  .flex__item--4-lg {
    flex: 0 0 calc(33.3333333333% - 1rem);
  }
}
.flex__item--3 {
  flex: 0 0 calc(25% - 1rem);
}
@media (min-width: 544px) {
  .flex__item--3-sm {
    flex: 0 0 calc(25% - 1rem);
  }
}
@media (min-width: 768px) {
  .flex__item--3-md {
    flex: 0 0 calc(25% - 1rem);
  }
}
@media (min-width: 1012px) {
  .flex__item--3-lg {
    flex: 0 0 calc(25% - 1rem);
  }
}
.flex__item--2 {
  flex: 0 0 calc(16.6666666667% - 1rem);
}
@media (min-width: 544px) {
  .flex__item--2-sm {
    flex: 0 0 calc(16.6666666667% - 1rem);
  }
}
@media (min-width: 768px) {
  .flex__item--2-md {
    flex: 0 0 calc(16.6666666667% - 1rem);
  }
}
@media (min-width: 1012px) {
  .flex__item--2-lg {
    flex: 0 0 calc(16.6666666667% - 1rem);
  }
}
.flex__item--1 {
  flex: 0 0 calc(8.3333333333% - 1rem);
}
@media (min-width: 544px) {
  .flex__item--1-sm {
    flex: 0 0 calc(8.3333333333% - 1rem);
  }
}
@media (min-width: 768px) {
  .flex__item--1-md {
    flex: 0 0 calc(8.3333333333% - 1rem);
  }
}
@media (min-width: 1012px) {
  .flex__item--1-lg {
    flex: 0 0 calc(8.3333333333% - 1rem);
  }
}

.m-auto {
  margin: auto;
}
.m-h-auto {
  margin-left: auto;
  margin-right: auto;
}
.m-v-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.m-l-auto {
  margin-left: auto;
}
.m-r-auto {
  margin-right: auto;
}
.m-t-auto {
  margin-top: auto;
}
.m-b-auto {
  margin-bottom: auto;
}

.m-t-0 {
  margin-top: 0rem;
}

.p-t-0 {
  padding-top: 0rem;
}

.m-b-0 {
  margin-bottom: 0rem;
}

.p-b-0 {
  padding-bottom: 0rem;
}

.m-l-0 {
  margin-left: 0rem;
}

.p-l-0 {
  padding-left: 0rem;
}

.m-r-0 {
  margin-right: 0rem;
}

.p-r-0 {
  padding-right: 0rem;
}

.m-h-0 {
  margin-left: 0rem;
  margin-right: 0rem;
}

.p-h-0 {
  padding-left: 0rem;
  padding-right: 0rem;
}

.m-v-0 {
  margin-bottom: 0rem;
  margin-top: 0rem;
}

.p-v-0 {
  padding-bottom: 0rem;
  padding-top: 0rem;
}

.m-0 {
  margin: 0rem;
}

.p-0 {
  padding: 0rem;
}

.m-t-xs {
  margin-top: 0.25rem;
}

.p-t-xs {
  padding-top: 0.25rem;
}

.m-b-xs {
  margin-bottom: 0.25rem;
}

.p-b-xs {
  padding-bottom: 0.25rem;
}

.m-l-xs {
  margin-left: 0.25rem;
}

.p-l-xs {
  padding-left: 0.25rem;
}

.m-r-xs {
  margin-right: 0.25rem;
}

.p-r-xs {
  padding-right: 0.25rem;
}

.m-h-xs {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.p-h-xs {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.m-v-xs {
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
}

.p-v-xs {
  padding-bottom: 0.25rem;
  padding-top: 0.25rem;
}

.m-xs {
  margin: 0.25rem;
}

.p-xs {
  padding: 0.25rem;
}

.m-t-sm {
  margin-top: 0.5rem;
}

.p-t-sm {
  padding-top: 0.5rem;
}

.m-b-sm {
  margin-bottom: 0.5rem;
}

.p-b-sm {
  padding-bottom: 0.5rem;
}

.m-l-sm {
  margin-left: 0.5rem;
}

.p-l-sm {
  padding-left: 0.5rem;
}

.m-r-sm {
  margin-right: 0.5rem;
}

.p-r-sm {
  padding-right: 0.5rem;
}

.m-h-sm {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.p-h-sm {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.m-v-sm {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.p-v-sm {
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

.m-sm {
  margin: 0.5rem;
}

.p-sm {
  padding: 0.5rem;
}

.m-t-md {
  margin-top: 1rem;
}

.p-t-md {
  padding-top: 1rem;
}

.m-b-md {
  margin-bottom: 1rem;
}

.p-b-md {
  padding-bottom: 1rem;
}

.m-l-md {
  margin-left: 1rem;
}

.p-l-md {
  padding-left: 1rem;
}

.m-r-md {
  margin-right: 1rem;
}

.p-r-md {
  padding-right: 1rem;
}

.m-h-md {
  margin-left: 1rem;
  margin-right: 1rem;
}

.p-h-md {
  padding-left: 1rem;
  padding-right: 1rem;
}

.m-v-md {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.p-v-md {
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.m-md {
  margin: 1rem;
}

.p-md {
  padding: 1rem;
}

.m-t-lg {
  margin-top: 1.5rem;
}

.p-t-lg {
  padding-top: 1.5rem;
}

.m-b-lg {
  margin-bottom: 1.5rem;
}

.p-b-lg {
  padding-bottom: 1.5rem;
}

.m-l-lg {
  margin-left: 1.5rem;
}

.p-l-lg {
  padding-left: 1.5rem;
}

.m-r-lg {
  margin-right: 1.5rem;
}

.p-r-lg {
  padding-right: 1.5rem;
}

.m-h-lg {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.p-h-lg {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.m-v-lg {
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}

.p-v-lg {
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
}

.m-lg {
  margin: 1.5rem;
}

.p-lg {
  padding: 1.5rem;
}

.m-t-xl {
  margin-top: 2rem;
}

.p-t-xl {
  padding-top: 2rem;
}

.m-b-xl {
  margin-bottom: 2rem;
}

.p-b-xl {
  padding-bottom: 2rem;
}

.m-l-xl {
  margin-left: 2rem;
}

.p-l-xl {
  padding-left: 2rem;
}

.m-r-xl {
  margin-right: 2rem;
}

.p-r-xl {
  padding-right: 2rem;
}

.m-h-xl {
  margin-left: 2rem;
  margin-right: 2rem;
}

.p-h-xl {
  padding-left: 2rem;
  padding-right: 2rem;
}

.m-v-xl {
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.p-v-xl {
  padding-bottom: 2rem;
  padding-top: 2rem;
}

.m-xl {
  margin: 2rem;
}

.p-xl {
  padding: 2rem;
}

.mx-auto {
  margin-inline: auto;
}

.my-auto {
  margin-block: auto;
}

.ms-auto {
  margin-inline-start: auto;
}

.me-auto {
  margin-inline-end: auto;
}

.mt-auto {
  margin-block-start: auto;
}

.mb-auto {
  margin-block-end: auto;
}

.m-0 {
  margin: 0rem;
}

.mt-0 {
  margin-block-start: 0rem;
}

.mb-0 {
  margin-block-end: 0rem;
}

.ms-0 {
  margin-inline-start: 0rem;
}

.me-0 {
  margin-inline-end: 0rem;
}

.mx-0 {
  margin-inline: 0rem;
}

.my-0 {
  margin-block: 0rem;
}

.p-0 {
  padding: 0rem;
}

.pt-0 {
  padding-block-start: 0rem;
}

.pb-0 {
  padding-block-end: 0rem;
}

.ps-0 {
  padding-inline-start: 0rem;
}

.pe-0 {
  padding-inline-end: 0rem;
}

.px-0 {
  padding-inline: 0rem;
}

.py-0 {
  padding-block: 0rem;
}

.m-1 {
  margin: 0.25rem;
}

.mt-1 {
  margin-block-start: 0.25rem;
}

.mb-1 {
  margin-block-end: 0.25rem;
}

.ms-1 {
  margin-inline-start: 0.25rem;
}

.me-1 {
  margin-inline-end: 0.25rem;
}

.mx-1 {
  margin-inline: 0.25rem;
}

.my-1 {
  margin-block: 0.25rem;
}

.p-1 {
  padding: 0.25rem;
}

.pt-1 {
  padding-block-start: 0.25rem;
}

.pb-1 {
  padding-block-end: 0.25rem;
}

.ps-1 {
  padding-inline-start: 0.25rem;
}

.pe-1 {
  padding-inline-end: 0.25rem;
}

.px-1 {
  padding-inline: 0.25rem;
}

.py-1 {
  padding-block: 0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.mt-2 {
  margin-block-start: 0.5rem;
}

.mb-2 {
  margin-block-end: 0.5rem;
}

.ms-2 {
  margin-inline-start: 0.5rem;
}

.me-2 {
  margin-inline-end: 0.5rem;
}

.mx-2 {
  margin-inline: 0.5rem;
}

.my-2 {
  margin-block: 0.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.pt-2 {
  padding-block-start: 0.5rem;
}

.pb-2 {
  padding-block-end: 0.5rem;
}

.ps-2 {
  padding-inline-start: 0.5rem;
}

.pe-2 {
  padding-inline-end: 0.5rem;
}

.px-2 {
  padding-inline: 0.5rem;
}

.py-2 {
  padding-block: 0.5rem;
}

.m-3 {
  margin: 0.75rem;
}

.mt-3 {
  margin-block-start: 0.75rem;
}

.mb-3 {
  margin-block-end: 0.75rem;
}

.ms-3 {
  margin-inline-start: 0.75rem;
}

.me-3 {
  margin-inline-end: 0.75rem;
}

.mx-3 {
  margin-inline: 0.75rem;
}

.my-3 {
  margin-block: 0.75rem;
}

.p-3 {
  padding: 0.75rem;
}

.pt-3 {
  padding-block-start: 0.75rem;
}

.pb-3 {
  padding-block-end: 0.75rem;
}

.ps-3 {
  padding-inline-start: 0.75rem;
}

.pe-3 {
  padding-inline-end: 0.75rem;
}

.px-3 {
  padding-inline: 0.75rem;
}

.py-3 {
  padding-block: 0.75rem;
}

.m-4 {
  margin: 1rem;
}

.mt-4 {
  margin-block-start: 1rem;
}

.mb-4 {
  margin-block-end: 1rem;
}

.ms-4 {
  margin-inline-start: 1rem;
}

.me-4 {
  margin-inline-end: 1rem;
}

.mx-4 {
  margin-inline: 1rem;
}

.my-4 {
  margin-block: 1rem;
}

.p-4 {
  padding: 1rem;
}

.pt-4 {
  padding-block-start: 1rem;
}

.pb-4 {
  padding-block-end: 1rem;
}

.ps-4 {
  padding-inline-start: 1rem;
}

.pe-4 {
  padding-inline-end: 1rem;
}

.px-4 {
  padding-inline: 1rem;
}

.py-4 {
  padding-block: 1rem;
}

.m-5 {
  margin: 1.25rem;
}

.mt-5 {
  margin-block-start: 1.25rem;
}

.mb-5 {
  margin-block-end: 1.25rem;
}

.ms-5 {
  margin-inline-start: 1.25rem;
}

.me-5 {
  margin-inline-end: 1.25rem;
}

.mx-5 {
  margin-inline: 1.25rem;
}

.my-5 {
  margin-block: 1.25rem;
}

.p-5 {
  padding: 1.25rem;
}

.pt-5 {
  padding-block-start: 1.25rem;
}

.pb-5 {
  padding-block-end: 1.25rem;
}

.ps-5 {
  padding-inline-start: 1.25rem;
}

.pe-5 {
  padding-inline-end: 1.25rem;
}

.px-5 {
  padding-inline: 1.25rem;
}

.py-5 {
  padding-block: 1.25rem;
}

.m-6 {
  margin: 1.5rem;
}

.mt-6 {
  margin-block-start: 1.5rem;
}

.mb-6 {
  margin-block-end: 1.5rem;
}

.ms-6 {
  margin-inline-start: 1.5rem;
}

.me-6 {
  margin-inline-end: 1.5rem;
}

.mx-6 {
  margin-inline: 1.5rem;
}

.my-6 {
  margin-block: 1.5rem;
}

.p-6 {
  padding: 1.5rem;
}

.pt-6 {
  padding-block-start: 1.5rem;
}

.pb-6 {
  padding-block-end: 1.5rem;
}

.ps-6 {
  padding-inline-start: 1.5rem;
}

.pe-6 {
  padding-inline-end: 1.5rem;
}

.px-6 {
  padding-inline: 1.5rem;
}

.py-6 {
  padding-block: 1.5rem;
}

.m-7 {
  margin: 1.75rem;
}

.mt-7 {
  margin-block-start: 1.75rem;
}

.mb-7 {
  margin-block-end: 1.75rem;
}

.ms-7 {
  margin-inline-start: 1.75rem;
}

.me-7 {
  margin-inline-end: 1.75rem;
}

.mx-7 {
  margin-inline: 1.75rem;
}

.my-7 {
  margin-block: 1.75rem;
}

.p-7 {
  padding: 1.75rem;
}

.pt-7 {
  padding-block-start: 1.75rem;
}

.pb-7 {
  padding-block-end: 1.75rem;
}

.ps-7 {
  padding-inline-start: 1.75rem;
}

.pe-7 {
  padding-inline-end: 1.75rem;
}

.px-7 {
  padding-inline: 1.75rem;
}

.py-7 {
  padding-block: 1.75rem;
}

.m-8 {
  margin: 2rem;
}

.mt-8 {
  margin-block-start: 2rem;
}

.mb-8 {
  margin-block-end: 2rem;
}

.ms-8 {
  margin-inline-start: 2rem;
}

.me-8 {
  margin-inline-end: 2rem;
}

.mx-8 {
  margin-inline: 2rem;
}

.my-8 {
  margin-block: 2rem;
}

.p-8 {
  padding: 2rem;
}

.pt-8 {
  padding-block-start: 2rem;
}

.pb-8 {
  padding-block-end: 2rem;
}

.ps-8 {
  padding-inline-start: 2rem;
}

.pe-8 {
  padding-inline-end: 2rem;
}

.px-8 {
  padding-inline: 2rem;
}

.py-8 {
  padding-block: 2rem;
}

/**
 * Text utilities
 */
.lede {
  font-family: Raleway, "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 1.1em;
  font-weight: 200;
}

/* Text colour */
.text-black {
  color: var(--black);
}

.text-white {
  color: var(--white);
}

.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--secondary);
}

.text-info {
  color: var(--info);
}

.text-success {
  color: var(--green);
}

.text-warning {
  color: var(--warn);
}

.text-danger {
  color: var(--red);
}

.text-muted {
  color: var(--grey700);
}

/* Font size — Tailwind-compatible scale */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

/* Font weight */
.fw-normal {
  font-weight: normal;
}

.fw-bold {
  font-weight: 600;
} /* not quite font-weight: bold == 700 */
.fw-light {
  font-weight: 300;
}

/* Text transform */
.text-uppercase {
  text-transform: uppercase;
}

/* Text alignment */
.text-start {
  text-align: start;
}

.text-center {
  text-align: center;
}

.text-end {
  text-align: end;
}

.text--primary {
  color: var(--primary);
}
.text--secondary {
  color: var(--secondary);
}
.text--info {
  color: var(--info);
}
.text--success {
  color: var(--green);
}
.text--warning {
  color: var(--warn);
}
.text--danger {
  color: var(--red);
}
.text--muted {
  color: var(--grey700);
}
.text--small {
  font-size: 0.8em;
}
.text--large {
  font-size: 2em;
}
.text--normal {
  font-weight: normal;
}
.text--bold {
  font-weight: 600;
}
.text--light {
  font-weight: 300;
}
.text--upper {
  text-transform: uppercase;
}

/* https://a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
.visually-hidden a:focus,
.visually-hidden input:focus,
.visually-hidden button:focus {
  position: static;
  width: auto;
  height: auto;
}