/* @mike-engel/a11y-css-reset */
*:focus:not(:focus-visible),*::before:focus:not(:focus-visible),*::after:focus:not(:focus-visible){outline:none}.visually-hidden{position:absolute;white-space:nowrap;width:1px;height:1px;overflow:hidden;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(50%);margin:-1px}.plain-list{list-style:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");padding-left:0}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/*----- BASICS -----*/
* {
  box-sizing:border-box;
}

html, body {
  scroll-behavior:smooth;
}

html {
  font-size:var(--Base-Font-Size);
  -webkit-text-size-adjust:100%;
}

body {
  margin:0;
  font:var(--Body-Font);
  letter-spacing:var(--Body-Letter-Spacing);
  word-spacing:var(--Body-Word-Spacing);
  color:var(--Body-Text-Color);
  background:var(--Background-Color,#fcfcfc);
  word-break:break-word;
  opacity:0;
}

html:not([color-scheme]) body {
  background:black; /* the background color BEFORE the light/dark mode kicks in. should NOT be a css variable, but can be the same as --Loading-Overlay-Color if so desired */
}

/*----- BODY + FADE IN ON LOAD -----*/
body.fade-in {
  opacity:1;
}

body,
body.fade-in {  
  transition:opacity var(--Loading-Overlay-FadeOut-Speed) ease-in-out;
}

/*----- SOLID COLOR OVERLAY FOR SWITCHING -----*/
.overlay-bg {
  position:fixed;
  top:0;left:0;
  width:100vw;
  height:100vh;
  background:var(--Loading-Overlay-Color);
  z-index:2147483647;
  opacity:0;
  display:none;
}

html.dark-to-light .overlay-bg {
  background:var(--Color-Scheme-Dark-To-Light-Overlay-Color);
}

html.light-to-dark .overlay-bg {
  background:var(--Color-Scheme-Light-To-Dark-Overlay-Color);
}

.overlay-bg,
.overlay-bg.fade-in {  
  transition:opacity var(--Color-Scheme-Switching-Fade-Speed) ease-in-out;
}

.overlay-bg.fade-in {
  opacity:1;
}

a { text-decoration:none }

b, strong, form label, details summary {
  font-weight:var(--Bold-Font-Weight);
  color:var(--Bold-Text-Color);
}

canvas, img, video { vertical-align:middle }
button, [data-style="button"], details summary { cursor:pointer }

:is(h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol):first-child {
  margin-top:0;
}

:is(h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol):last-child {
  margin-bottom:0;
}

blockquote > p:first-child {
  margin-top:0;
}

blockquote > p:last-child {
  margin-bottom:0;
}

details summary {
  width:fit-content;
  border-color:var(--Secondary-BG);
  background:var(--Secondary-BG);
  color:var(--Secondary-FG);
  border-radius:var(--Rounded-Corners-S);
  padding:calc(var(--Padding-S) - 1px) var(--Padding-S);
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

[class^="mgc_"]:before, [class*=" mgc_"]:before {
  color:inherit;
}

/*----- HEADINGS -----*/
h1, h2, h3 {
  font-family:var(--Heading-Font-Family);
  font-weight:var(--Heading-Font-Weight);
  font-size:var(--Subheading-Font-Size);
  color:var(--Heading-Text-Color);
}

h1, h2.h1-size, h3.h1-size {
  font-size:var(--Heading-Font-Size);
}

/*----- SUBTITLES ------*/
/* i.e. faded text */
.subtitle {
  color:var(--Text-Subtitle);
}

/*----- SMALL CAPS -----*/
.caps {
  font:var(--Caps-Font-Weight,normal) var(--Caps-Font-Size,0.9rem)/var(--Caps-Line-Height,1.5) var(--Caps-Font-Family), sans-serif;
  text-transform:uppercase;
  letter-spacing:var(--Caps-Letter-Spacing);
}

/*----- LINKS -----*/
a[href]:not([href=""],[data-style="button"],:has(>*:not(span))){
  color:var(--Links-Color);
  text-decoration:underline var(--Links-Underline-Color) var(--Links-Underline-Size);
  text-underline-offset:var(--Links-Underline-Gap);
  text-decoration-skip-ink:auto;
}

/*----- BLOCKQUOTES ------*/
blockquote {
  position:relative;
  margin-left:var(--Blockquote-Border-Gap-Left);
  padding-left:calc(var(--Blockquote-Border-Size) + var(--Blockquote-Border-Gap-Right));
  margin-right:0;
}

blockquote:before {
  content:"";
  position:absolute;
  display:block;
  top:0;left:0;
  width:var(--Blockquote-Border-Size);
  height:100%;
  border-radius:var(--Blockquote-Border-Rounded-Corners);
  background:var(--Blockquote-Border-Color);
}

blockquote blockquote {
  --Blockquote-Border-Gap-Left:var(--Blockquote-Nested-Border-Gap-Left);
}

/*----- LISTS ------*/
ul, ol {
  padding-left:calc(var(--Blockquote-Border-Gap-Left) + var(--Body-Font-Size));
}

ul li {
  padding-left:calc(var(--Body-Font-Size) * 0.25);
}

ol li {
  padding-left:calc(var(--Body-Font-Size) * 0.420);
}

/*----- CODE -----*/
code, pre {
  font:var(--Code-Font-Weight,normal) var(--Code-Font-Size,1.1rem)/var(--Code-Line-Height,1.65) var(--Code-Font-Family), monospace;
  font-variant-ligatures:none;
  font-variant-numeric:tabular-nums;
  letter-spacing:var(--Code-Letter-Spacing);
  word-spacing:var(--Code-Word-Spacing);
  word-wrap:break-word;
}

pre {
  border-radius:var(--Code-Block-Rounded-Corners);
  padding:calc(var(--Code-Block-Padding-Y) - var(--Code-Block-LH-V-Gap)) var(--Code-Block-Padding-X);
  background:var(--Code-Block-BG);
  white-space:pre-line;
  color:var(--Code-Block-Text-Color);
}

/*----- <HR> -----*/
hr {
  display:block;
  border:none;
  margin:var(--Spacing-L) auto;
  width:100%;
  height:var(--Borders-Size);
  background:var(--Borders);
}

/*----- CARDS -----*/
.card {
  padding:calc(var(--Padding-L) - var(--Body-LH-V-Gap)) var(--Padding-L);
  background:var(--Content-BG);
  border-radius:var(--Rounded-Corners-M);
}

.card:not(.popup .card){
  border:var(--Borders-Size) solid var(--Borders);
  box-shadow:var(--Shadows);
}

.card.borderless:not(.popup .card.borderless){
  border-color:var(--Content-BG);
}

.card.center, .center:is(h1, h2, h3, h4, h5, h6, p, button, label){ text-align:center }

/*----- ROWS -----*/
.row {
  display:flex;
  justify-content:flex-start;
  gap:var(--Spacing-S);
}

.row.can-wrap { flex-wrap:wrap }

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

.row.x-right {
  justify-content:flex-end;
}

.row.y-top {
  align-items:flex-start;
}

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

.row.y-bot {
  align-items:flex-end;
}

.row > .x-stretch {
  flex:1;
}

/*----- COLUMNS -----*/
.column {
  display:flex;
  flex-direction:column;
  justify-content:flex-start; /* y-top */
  gap:var(--Spacing-S);
}

.column.compact {
  align-items:flex-start;
}

/*----- BUTTONS -----*/
button, [data-style="button"]{
  /* inherit body font in the next 4 lines */
  font:var(--Body-Font);
  letter-spacing:var(--Body-Letter-Spacing);
  word-spacing:var(--Body-Word-Spacing);
  color:var(--Body-Text-Color);
  line-height:1;
  display:block;
  max-width:100%;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;

  /* border color & BG color will be overriden based on style */
  border:var(--Borders-Size) solid transparent;
  background:transparent;

  border-radius:var(--Rounded-Corners-S);
  padding:calc(var(--Padding-S) - 1px) var(--Padding-S);

  transition:border-color var(--Hover-Speed) ease-in-out, background var(--Hover-Speed) ease-in-out, color var(--Hover-Speed) ease-in-out;
}

button:not(:has(i[class]:not([class=""]))), [data-style="button"]:not(:has(i[class]:not([class=""]))){
  font-weight:var(--Buttons-Font-Weight);
}

button.caps, [data-style="button"].caps {
  font-weight:calc(max(var(--Caps-Font-Weight),var(--Buttons-Font-Weight)) + 100)!important;
}

.popup button,
.popup [data-style="button"]{
  padding:calc(var(--Padding-M) - 1px) var(--Padding-M);
}

button:active,
[data-style="button"]:active {
  transform:translateY(1px);
}

button.caps,
[data-style="button"].caps {
  line-height:1;
  padding:var(--Padding-S);
}

button.primary,
[data-style="button"].primary {
  border-color:var(--Primary-BG);
  background:var(--Primary-BG);
  color:var(--Primary-FG);
}

button.primary:hover,
[data-style="button"].primary:hover {
  border-color:var(--Primary-BG-Alt);
  background:var(--Primary-BG-Alt);
  color:var(--Primary-FG-Alt);
}

button.secondary,
[data-style="button"].secondary {
  border-color:var(--Secondary-BG);
  background:var(--Secondary-BG);
  color:var(--Secondary-FG);
}

button.secondary:hover,
[data-style="button"].secondary:hover {
  border-color:var(--Secondary-BG-Alt);
  background:var(--Secondary-BG-Alt);
  color:var(--Secondary-FG-Alt);
}

button.outlined,
[data-style="button"].outlined {
  border-color:var(--Borders);
  background:var(--Content-BG);
  color:var(--Text-Special);
}

button.outlined:hover,
[data-style="button"].outlined:hover {
  background:var(--Content-BG-Alt);
}

button.danger,
[data-style="button"].danger {
  border-color:var(--Danger-BG);
  background:var(--Danger-BG);
  color:var(--Danger-FG);
}

button.danger:hover,
[data-style="button"].danger:hover {
  border-color:var(--Danger-BG);
  background:var(--Danger-BG);
  color:var(--Danger-FG);
}

button.warning,
[data-style="button"].warning {
  border-color:var(--Warning-BG);
  background:var(--Warning-BG);
  color:var(--Warning-FG);
}

button.warning:hover,
[data-style="button"].warning:hover {
  border-color:var(--Warning-BG);
  background:var(--Warning-BG);
  color:var(--Warning-FG);
}

button.success,
[data-style="button"].success {
  border-color:var(--Success-BG);
  background:var(--Success-BG);
  color:var(--Success-FG);
}

button.success:hover,
[data-style="button"].success:hover {
  border-color:var(--Success-BG);
  background:var(--Success-BG);
  color:var(--Success-FG);
}

button.informative,
[data-style="button"].informative {
  border-color:var(--Informative-BG);
  background:var(--Informative-BG);
  color:var(--Informative-FG);
}

button.informative:hover,
[data-style="button"].informative:hover {
  border-color:var(--Informative-BG);
  background:var(--Informative-BG);
  color:var(--Informative-FG);
}

button.square {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--Padding-S);
}

button.square i[class]:not([class=""]){
  flex-shrink:0;
  font-size:var(--Icons-Size);
}

/*----- FORM LABELS -----*/
form label {
  cursor:inherit;
}

/* required field labels */
form label:has(+ :is(input,textarea)[required]):after {
  content:"*";
  margin-left:1px;
  font-family:var(--Code-Font-Family);
  color:var(--Danger-FG);
}

/*----- FORM INPUT FIELDS -----*/
form input {
  /* inherit body font in the next 4 lines */
  font:var(--Body-Font);
  letter-spacing:var(--Body-Letter-Spacing);
  word-spacing:var(--Body-Word-Spacing);
  color:var(--Body-Text-Color);
  line-height:1;

  border:var(--Borders-Size) solid var(--Borders);
  background:var(--Content-BG);
  padding:calc(var(--Padding-S) - 1px) var(--Padding-S);
  border-radius:var(--Rounded-Corners-S);

  box-shadow:var(--Shadows);
}

/*----- FORM TEXTAREAS -----*/
form textarea {/* inherit body font in the next 4 lines */
  font:var(--Body-Font);
  letter-spacing:var(--Body-Letter-Spacing);
  word-spacing:var(--Body-Word-Spacing);
  color:var(--Body-Text-Color);

  border:var(--Borders-Size) solid var(--Borders);
  background:var(--Content-BG);
  padding:calc(var(--Padding-S) - var(--Body-LH-V-Gap)) var(--Padding-S);
  border-radius:var(--Rounded-Corners-S);
  min-height:calc(var(--Body-Font-Size) + (var(--Padding-S) * 2) + (var(--Borders-Size) * 2));

  box-shadow:var(--Shadows);

  resize:vertical;
}

/*----- POPUP STUFF -----*/
.popup input[type="radio"],
label[for="close-popups"i] input[type="radio"]{
  position:absolute;
  margin:-1px;
  width:1px;
  height:1px;
  clip:rect(0, 0, 0, 0);
  clip-path:inset(50%);
  border:0;
  padding:0;
  white-space:nowrap;
  overflow:hidden;
  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  -o-appearance:none;
  appearance:none;
  opacity:0;
}

label[for="close-popups"i]:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:var(--Popup-BG-Color);
  opacity:calc(100% - var(--Popup-BG-Color-Transparency, 100%));
  z-index:-1;
}

label[for="close-popups"i]{
  position:fixed;
  display:block;
  margin:0;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  backdrop-filter:blur(var(--Popup-BG-Blur, 0));
  visibility:hidden;
  opacity:0;
  transition:opacity var(--Popup-Fade-Speed, 420ms) ease-in-out, visibility 0s var(--Popup-Fade-Speed, 420ms) ease-in-out;
  z-index:var(--Popup-Z-Index, 9);
  cursor:default !important;
}

body:has(.popup > input[type="radio"]:checked) label[for="close-popups"i]{
  visibility:visible;
  opacity:1;
  transition:opacity var(--Popup-Fade-Speed, 420ms) ease-in-out, visibility 0s 0s ease-in-out;
}

.popup {
  position:fixed;
  margin:0;
  display:block;
  top:50%;
  left:50%;
  transform:translate3D(-50%, -50%, 0);
  width:var(--Popup-Width, 420px);
  visibility:hidden;
  opacity:0;
  transition:opacity var(--Popup-Fade-Speed, 420ms) ease-in-out, visibility 0s var(--Popup-Fade-Speed, 420ms) ease-in-out;
  z-index:calc(var(--Popup-Z-Index, 9) + 1);
}

.popup:has(>input[type="radio"]:checked){
  visibility:visible;
  opacity:1;
  transition:opacity var(--Popup-Fade-Speed, 420ms) ease-in-out, visibility 0s 0s ease-in-out;
}

.popup .card {
  padding:var(--Padding-XL);
}

.popup .card > h1:first-child,
.popup .card > :is(h2,h3).h1-size:first-child {
  margin-top:calc(0px - var(--Heading-LH-V-Gap) + 0.25em);
}

.popup .card > :is(h2,h3):not(.h1-size):first-child {
  margin-top:calc(0px - var(--Subheading-LH-V-Gap) + 0.25em);
}

/*----- FOCUS-VISIBLES -----*/
:is(a, button, input, textarea, summary):focus-visible {
  border-color:transparent;
  outline:var(--Borders-Size) solid var(--Borders-Alt);
  outline-offset:calc(0px - var(--Borders-Size));
  box-shadow:0 0 3px 1px rgb(from var(--Borders-Alt) r g b / 25%);
}

:is(a:not(:has(i:not([class])))):focus-visible {
  border-radius:100vmax;
  outline-offset:calc(var(--Borders-Size) + (var(--Body-Font-Size) * 0.2));
  box-shadow:none;
  text-decoration-color:transparent;
}

/*----- SCROLLBARS -----*/
::-webkit-scrollbar {
  width:calc((var(--Scrollbar-Padding) * 2) + var(--Scrollbar-Size));
  height:calc((var(--Scrollbar-Padding) * 2) + var(--Scrollbar-Size));
}

::-webkit-scrollbar {
  background-color:var(--Scrollbar-BG);
}

::-webkit-scrollbar-track {
  border:var(--Scrollbar-Padding) solid var(--Scrollbar-BG);
  background-color:var(--Scrollbar-Track-Color);
}

::-webkit-scrollbar-thumb {
  border:var(--Scrollbar-Padding) solid var(--Scrollbar-BG);
  background-color:var(--Scrollbar-Thumb-Color);
}