/************************************************************************************/
/******************************** GLOBAL ********************************************/
/************************************************************************************/

/* CSS Reset */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: inherit;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
  margin: 0;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


/*

Normal Text - FG/BG, (FF, FS, FW)
Text Elements

Heading Text - (FF, FS, FW)
For each of H1, H2, H3, H4 ...
Colour not needed globally - use normal text unless overridden


Sub-title Text for only H1 and H2?

Subdued Text


Primary Buttons/CTA - FG/BG, (FF, FS, FW), also Hover/Focus
This should match CTA colours anywhere else

Secondary Buttons - FG/BG, (FF, FS, FW), also Hover/Focus

Links - Primary Text/BG, (FF, FS, FW), decoration (hover, visited)
BG could be Normal

Info elements with success, warning, fail/error states - colours

Other blocks will need to define their own?
e.g. nav, header, footer, sidebar, ...

normalize later - define as variables

*/




/* Colours ++ */
:root {
  --ff-base: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --ff-primary: var(--ff-base);
  /* --ff-secondary: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
  --ff-secondary: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --ff-mono: "Inconsolata", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --fw-100: 100;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  --fs-base: 16px;

  /* Normal DPI - 1pt = 1.33px */

  --fs-100: 0.75rem;    /* 9pt 12px */
  --fs-200: 0.8rem;     /* 10pt 13px */
  --fs-300: 0.875rem;   /* 11pt 14px */
  --fs-400: 1rem;       /* 12pt 16px */
  --fs-500: 1.17rem;    /* 14pt 19px */
  --fs-525: 1.3rem;     /* 16pt 21px */
  --fs-550: 1.875rem;   /* 22pt 30px */
  --fs-600: 2rem;       /* 24pt 32px */
  --fs-650: 2.31rem;    /* 28pt 37px */
  --fs-675: 2.625rem;   /* 32pt 42px */
  --fs-700: 3rem;       /* 36pt 48px */
  --fs-750: 3.8rem;     /* 45pt 60px */
  --fs-800: 4.7rem;     /* 57pt 75px */

  /* font tracking - letter spacing */
  --ls-0 : 0rem;
  --ls-50: -0.03rem;       /* -0.25pt -0.33px */
  --ls-100: 0.01rem;       /* 0.1pt 0.1px */
  --ls-200: 0.012rem;      /* 0.15pt 0.2px */
  --ls-300: 0.02rem;       /* 0.25pt 0.33px */
  --ls-400: 0.03rem;       /* 0.4pt 0.5px */
  --ls-500: 0.04rem;       /* 0.5pt 0.67px */

  /* line heights */
  --lh-800: 5.3rem;         /* 64pt 85px */
  --lh-775: 4.4rem;         /* 52pt 70px */
  --lh-750: 3.6rem;         /* 44pt 58px */
  --lh-700: 3.3rem;         /* 40pt 53px */
  --lh-650: 3rem;           /* 36pt 48px */
  --lh-600: 2.7rem;         /* 32pt 43px */
  --lh-550: 2.19rem;        /* 28pt 35px */
  --lh-500: 2rem;           /* 24pt 32px */
  --lh-450: 1.7rem;         /* 20pt 27px */
  --lh-400: 1.3rem;         /* 16pt 21px */

  --clr-black: hsl(180, 0%, 0%);
  --clr-gray-900: hsl(180, 0%, 10%);
  --clr-gray-800: hsl(180, 0%, 20%);
  --clr-gray-700: hsl(180, 0%, 30%);
  --clr-gray-600: hsl(180, 0%, 40%);
  --clr-gray-500: hsl(180, 0%, 50%);
  --clr-gray-400: hsl(180, 0%, 60%);
  --clr-gray-300: hsl(180, 0%, 70%);
  --clr-gray-200: hsl(180, 0%, 80%);
  --clr-gray-100: hsl(180, 0%, 90%);
  --clr-white: hsl(180, 0%, 100%);

  --clr-error: hsl(0, 75%, 70%);
  --clr-on-error: var(--clr-white);
  --clr-warn: hsl(30, 75%, 70%);
  --clr-on-warn: var(--clr-black);
  --clr-success: hsl(147, 50%, 70%);
  --clr-on-success: var(--clr-gray-800);

  --clr-neutral: var(--clr-gray-900);
  --clr-neutral-light: var(--clr-gray-700);
  --clr-neutral-lighter: var(--clr-gray-500);
  --clr-neutral-dark: var(--clr-black);
  --clr-neutral-darker: var(--clr-black);

  --clr-bg-neutral: var(--clr-white);
  --clr-bg-neutral-light: var(--clr-white);
  --clr-bg-neutral-lighter: var(--clr-white);
  --clr-bg-neutral-dark: var(--clr-gray-200);
  --clr-bg-neutral-darker: var(--clr-gray-300);

  --clr-primary-hue: 0;
  --clr-primary-sat: 0%;
  --clr-primary: hsl(var(--clr-primary-hue), var(--clr-primary-sat), 100%);
  --clr-primary-light: hsl(var(--clr-primary-hue), var(--clr-primary-sat), 305%);
  --clr-primary-lighter: hsl(var(--clr-primary-hue), var(--clr-primary-sat), 50%);
  --clr-primary-dark: hsl(var(--clr-primary-hue), var(--clr-primary-sat), 10%);
  --clr-primary-darker: hsl(var(--clr-primary-hue), var(--clr-primary-sat), 0%);

  --clr-bg-primary-hue: 36;
  --clr-bg-primary-sat: 100%;
  --clr-bg-primary: hsl(var(--clr-bg-primary-hue), var(--clr-bg-primary-sat), 48%);
  --clr-bg-primary-light: hsl(var(--clr-bg-primary-hue), var(--clr-bg-primary-sat), 75%);
  --clr-bg-primary-lighter: hsl(var(--clr-bg-primary-hue), var(--clr-bg-primary-sat), 90%);
  --clr-bg-primary-dark: hsl(var(--clr-bg-primary-hue), var(--clr-bg-primary-sat), 60%);
  --clr-bg-primary-darker: hsl(var(--clr-bg-primary-hue), var(--clr-bg-primary-sat), 30%);

  --clr-secondary-hue: 0;
  --clr-secondary-sat: 0%;
  --clr-secondary: hsl(var(--clr-secondary-hue), var(--clr-secondary-sat), 46%);
  --clr-secondary-light: hsl(var(--clr-secondary-hue), var(--clr-secondary-sat), 98%);
  --clr-secondary-lighter: hsl(var(--clr-secondary-hue), var(--clr-secondary-sat), 100%);
  --clr-secondary-dark: hsl(var(--clr-secondary-hue), var(--clr-secondary-sat), 70%);
  --clr-secondary-darker: hsl(var(--clr-secondary-hue), var(--clr-secondary-sat), 50%);

  --clr-bg-secondary-hue: 0;
  --clr-bg-secondary-sat: 18%;
  --clr-bg-secondary: hsl(var(--clr-bg-secondary-hue), var(--clr-bg-secondary-sat), 94%);
  --clr-bg-secondary-light: hsl(var(--clr-bg-secondary-hue), var(--clr-bg-secondary-sat), 98%);
  --clr-bg-secondary-lighter: hsl(var(--clr-bg-secondary-hue), var(--clr-bg-secondary-sat), 100%);
  --clr-bg-secondary-dark: hsl(var(--clr-bg-secondary-hue), var(--clr-bg-secondary-sat), 85%);
  --clr-bg-secondary-darker: hsl(var(--clr-bg-secondary-hue), var(--clr-bg-secondary-sat), 80%);

  --clr-bg-highlight-hue: 199;
  --clr-bg-highlight-sat: 29%;
  --clr-bg-highlight: hsl(var(--clr-bg-highlight-hue), var(--clr-bg-highlight-sat), 58%);

  --clr-highlight-hue: 0;
  --clr-highlight-sat: 5%;
  --clr-highlight: hsl(var(--clr-highlight-hue), var(--clr-highlight-sat), 9%);
  --clr-highlight-light: hsl(var(--clr-highlight-hue), var(--clr-highlight-sat), 30%);
  --clr-highlight-dark: hsl(var(--clr-highlight-hue), var(--clr-highlight-sat), 5%);

  --ff-heading-primary: var(--ff-base);
  --ff-heading-secondary: var(--ff-secondary);
  --ff-heading-tertiary: var(--ff-secondary);

  --clr-link-normal: var(--clr-neutral-600);

  --clr-bg-nav: var(--clr-bg-secondary);
  --clr-nav: var(--clr-secondary);

  --clr-text-neutral: var(--clr-neutral);
  --clr-text-highlight: var(--clr-highlight);
  --clr-text-bg-neutral: var(--clr-bg-neutral);
  --clr-text-bg-highlight: var(--clr-bg-highlight);

  --clr-body-bg: var(--clr-bg-neutral);
  --clr-body: var(--clr-text-neutral);
  --clr-body-bg-light: var(--clr-body-bg);
  --clr-body-bg-lighter: var(--clr-body-bg);
  --clr-body-bg-dark: color-mix(in hsl, var(--clr-body), white 90%);
  --clr-body-bg-darker: color-mix(in hsl, var(--clr-body), white 80%);
}

body {
  margin: 0;
  height: 100%;
  font-size: var(--fs-base);
  font-family: var(--ff-base);
  font-weight: var(--fw-400);
  background-color: var(--clr-text-bg-neutral);
  color: var(--clr-text-neutral);
}

/*
h1 {
  font-family: var(--ff-heading-primary);
  font-size: var(--fs-800);
  font-weight: var(--fw-bold);
}

h2 {
  font-family: var(--ff-heading-secondary);
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
}

h3 {
  font-family: var(--ff-heading-tertiary);
  font-size: var(--fs-400);
  font-weight: var(--fw-normal);
}
*/

/*
footer {
  min-height: 300px;
  background-color: var(--bg-tertiary);
  color: var(--text-on-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
}
*/
/*
    Link Styling
*/

a:link,
a:visited {
  text-underline-position: under;
}


/* END GLOBAL */

/********** App specific vars *******************/
:root {
  --header-logo-width: 13rem;
  --header-min-width: 3rem;
}

/************************************************************************************/
/******************************** COMPOSITION ***************************************/
/************************************************************************************/

/*******
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between each item

--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other

--switcher-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

/* Max 2 items,
so anything greater than 2 is full width */
.switcher > :nth-child(n + 3) {
  flex-basis: 100%;
}

/*******/

.nav-layout {
  --nav-layout-vertical-alignment: flex-start;

  display: grid;
  gap: var(--gutter, 0rem);
  align-items: var(--nav-layout-vertical-alignment);
}

@media screen and (min-width: 760px) {
  .nav-layout {
    grid-template-columns: auto 1fr;
    min-height: 100%;
    align-items: stretch;
  }

  .nav-layout > :first-child {
    min-height: 100%;
  }
}

.auto-fixed-grid {
  --ag-cell-size: 12rem;
  --ag-gap: 1rem;

  display: grid;
  gap: var(--ag-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--ag-cell-size), 100%), 1fr));
}

.main-with-header {
  --header-height: 3.0rem;
  display: flex;
  flex-direction: column;
  max-height: 100vh;

  main {
    max-height: calc(100% - var(--header-height));
    flex-grow: 1;
  }

  header {
    flex-grow: 0;
    padding: 0rem;
    height: var(--header-height, 3rem);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
 }

}



/************************************************************************************/
/******************************** UTILITY *******************************************/
/************************************************************************************/

.wrapper {

}

.wrapper--wide {

}

/* Visibility */

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.hide {
  display: none !important; /* when set need this to override everything else */
}

.d-none {
  display: none !important;
}

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

/* Flex */
.d-flex {
  display: flex;
}

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

.d-flex-column {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.d-flex-row {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-grow-very-large {
  flex-grow: 9999;
}

.gap-1 {
  gap: 1rem;
}

.gap-03 {
  gap: 0.3rem;
}

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

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

/* Grid */
.d-form-stacked-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.d-grid {
  display: grid;
}

.d-grid-1-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap)
}

.d-grid-2-col {
  display: grid;
  grid-template-columns: var(--col1, 1fr) var(--col2, 1fr);
}

.col-gap-03 {
  column-gap: 0.3rem;
}

.col-gap-1 {
  column-gap: 1rem;
}

.row-gap-03 {
  row-gap: 0.3rem;
}

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

/* Sizes */

.min-w-20vw {
  min-width: 20vw;
}

.min-h-100p {
  min-height: 100%;
}

.min-h-mhx {
  min-height: var(--mhx);
}

.h-100 {
  height: 100%;
}

.h-100vh {
  height: 100vh;
}

.h-hx {
  height: var(--hx);
}

.w-100 {
  width: 100%;
}

.w-x {
  width: var(--x);
}

/* Borders */

.border-dashed {
  border-style: dashed;
}

.border-1 {
  border: 1px solid var(--border-color, var(--clr-neutral-lighter));
  border-radius: var(--border-radius, 0)
}

.border-x {
  border-color: var(--b-clr, var(--clr-neutral-lighter));
  border-style: var(--b-s, solid);
  border-top-width: var(--b-t-w, 1px);
  border-left-width: var(--b-l-w, 1px);
  border-right-width: var(--b-r-w, 1px);
  border-bottom-width: var(--b-b-w, 1px);
  border-radius: var(--border-radius, 0);
}

/* Padding */
.p-01 {
  padding: 0.1rem;
}

.p-03 {
  padding: 0.3rem;
}

.p-1 {
  padding: 1rem;
}

.p-2 {
  padding: 2rem;
}

.p-3 {
  padding: 3rem;
}

.p-4 {
  padding: 4rem;
}

.p-b-03 {
  padding-block: 0.3rem;
}

.p-b-1 {
  padding-block: 1rem;
}

.p-b-2 {
  padding-block: 2rem;
}

.p-i-03 {
  padding-inline: 0.3rem;
}

.p-i-1 {
  padding-inline: 1rem;
}

.p-i-2 {
  padding-inline: 2rem;
}

.p-i-x {
  padding-inline: var(--x, 1rem);
}

.p-t-03 {
  padding-top: 0.3rem;
}

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

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

.p-bt-1 {
  padding-bottom: 1rem;
}

.p-bt-2 {
  padding-bottom: 1rem;
}

.p-bt-03 {
  padding-bottom: 0.3rem;
}

.p-r-03 {
  padding-right: 0.3rem;
}

.p-l-03 {
  padding-left: 0.3rem;
}

.m-a {
  margin: auto;
}

.m-1 {
  margin: 1rem;
}

.m-03 {
  margin: 0.3rem;
}

.m-i-03 {
  margin-inline: 0.3rem;
}

.m-i-1 {
  margin-inline: 1rem;
}

.m-b-1 {
  margin-block: 1rem;
}

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

.m-t-03 {
  margin-top: 0.3rem;
}

.m-bt-1 {
  margin-bottom: 1rem;
}

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

.m-l-03 {
  margin-left: 0.3rem;
}

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


/* Positioning */
:has(> .centered) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

:has(> .label-centered) {
  display: flex;
  align-items: anchor-center;
  flex-direction: row;
}

.link-plain:link, .link-plain:active, .link-plain:hover, .link-plain:visited {
  text-decoration: none;
  color: inherit;
}

/* All Text Styles (https://m3.material.io/styles/typography/applying-type) */

/* Largest text - short (can have expressive fonts) */
.display-large {
  font-family: var(--ff-secondary);
  font-size: var(--display-fs, var(--fs-800));
  letter-spacing: var(--display-ls, var(--ls-50));
  font-weight: var(--display-fw, 400);
  line-height: var(--display-lh, var(--lh-800));
}

.display-medium {
  font-family: var(--ff-secondary);
  font-size: var(--display-fs, var(--fs-750));
  letter-spacing: var(--display-ls, var(--ls-0));
  font-weight: var(--display-fw, 400);
  line-height: var(--display-lh, var(--lh-775));
}

.display-small {
  font-family: var(--ff-secondary);
  font-size: var(--display-fs, var(--fs-700));
  letter-spacing: var(--display-ls, var(--ls-0));
  font-weight: var(--display-fw, 400);
  line-height: var(--display-lh, var(--lh-750));
}

.headline-large {
  font-family: var(--ff-secondary);
  font-size: var(--headline-fs, var(--fs-675));
  letter-spacing: var(--headline-ls, var(--ls-0));
  font-weight: var(--headline-fw, 400);
  line-height: var(--headline-lh, var(--lh-700));
}

.headline-medium {
  font-family: var(--ff-secondary);
  font-size: var(--headline-fs, var(--fs-650));
  letter-spacing: var(--headline-ls, var(--ls-0));
  font-weight: var(--headline-fw, 400);
  line-height: var(--headline-lh, var(--lh-650));
}

.headline-small {
  font-family: var(--ff-secondary);
  font-size: var(--display-fs, var(--fs-600));
  letter-spacing: var(--headline-ls, var(--ls-0));
  font-weight: var(--headline-fw, 400);
  line-height: var(--headline-lh, var(--lh-600));
}

.title-large {
  font-family: var(--ff-secondary);
  font-size: var(--title-fs, var(--fs-550));
  letter-spacing: var(--title-ls, var(--ls-0));
  font-weight: var(--title-fw, 400);
  line-height: var(--title-lh, var(--lh-550));
}

.title-medium {
  font-family: var(--ff-secondary);
  font-size: var(--title-fs, var(--fs-525));
  letter-spacing: var(--title-ls, var(--ls-200));
  font-weight: var(--title-fw, 500);
  line-height: var(--title-lh, var(--lh-500));
}

.title-small {
  font-family: var(--ff-secondary);
  font-size: var(--title-fs, var(--fs-500));
  letter-spacing: var(--title-ls, var(--ls-100));
  font-weight: var(--title-fw, 500);
  line-height: var(--title-lh, var(--lh-450));
}

.body-large {
  font-family: var(--ff-primary);
  font-size: var(--body-fs, var(--fs-525));
  letter-spacing: var(--body-ls, var(--ls-500));
  font-weight: var(--body-fw, 400);
  line-height: var(--body-lh, var(--lh-500));
}

.body-medium {
  font-family: var(--ff-primary);
  font-size: var(--body-fs, var(--fs-500));
  letter-spacing: var(--body-ls, var(--ls-300));
  font-weight: var(--body-fw, 400);
  line-height: var(--body-lh, var(--lh-450));
}

.body-small {
  font-family: var(--ff-primary);
  font-size: var(--body-fs, var(--fs-400));
  letter-spacing: var(--body-ls, var(--ls-400));
  font-weight: var(--body-fw, 400);
  line-height: var(--body-lh, var(--lh-400));
}

.label-large {
  font-family: var(--ff-primary);
  font-size: var(--body-fs, var(--fs-500));
  letter-spacing: var(--body-ls, var(--ls-400));
  font-weight: var(--body-fw, 500);
  line-height: var(--body-lh, var(--lh-450));
}

.label-medium {
  font-family: var(--ff-primary);
  font-size: var(--body-fs, var(--fs-400));
  letter-spacing: var(--body-ls, var(--ls-500));
  font-weight: var(--body-fw, 500);
  line-height: var(--body-lh, var(--lh-400));
}

.label-small {
  font-family: var(--ff-primary);
  font-size: var(--body-fs, var(--fs-300));
  letter-spacing: var(--body-ls, var(--ls-500));
  font-weight: var(--body-fw, 500);
  line-height: var(--body-lh, var(--lh-400));
}

.text-weight-x {
  font-weight: var(--font-weight-x, --fw-400);
}

.push-right {
  margin-left: auto;
}

.push-left {
  margin-right: auto;
}

.center {
  margin: auto;
}

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

.text-subdued {
  color: var(--clr-neutral-lighter);
}

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

.o-scroll {
  overflow: scroll;
}

.o-scroll-y {
  overflow-x: hidden;
  overflow-y: auto;
}

.in-progress {
  border: var(--in-progress-size, 0.25rem) solid var(--in-progress-bg, var(--clr-bg-neutral));
  border-top: var(--in-progress-size, 0.25rem) solid var(--in-progress-highlight, var(--clr-highlight));
  border-left: var(--in-progress-size, 0.25rem) solid var(--in-progress-highlight, var(--clr-highlight));
  border-radius: 50%;
  width: var(--in-progress-width, 1.5rem);
  aspect-ratio: 1;

  &[data-in-progress="true"] {
    display: block;
    -webkit-animation: spin 1.25s linear infinite; /* Safari */
    animation: spin 1.25s linear infinite;
  }

  &[data-in-progress="false"] {
    display: none;
  }

}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.success {
  background-color: var(--clr-success);
  color: var(--clr-on-success);
}

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

.error {
  background-color: var(--clr-error);
  color: var(--clr-on-error);
}

.normal {
  background-color: var(--clr-bg-neutral);
  color: var(--clr-neutral);
}

.cursor-pointer {
  cursor: pointer;
}

.table-striped {
  tr:nth-child(even) {
    background-color: var(--bg-clr, var(--clr-gray-100))
  }
}

table {
  border-collapse: collapse;
  th, td {
    padding-inline: 0.3rem;
  }
  tr:hover {
    background-color: var(--bg-clr-hover, var(--clr-bg-highlight)) !important;
    color: var(--clr-hover, var(--clr-white)) !important;
  }
}

div.pill {
  display:inline-flex;
  padding-inline: 0.03rem;
  padding-top: 0.1rem;
  padding-right: 0.3rem;
  border-radius: 1rem;
  border: 1px solid var(--b-clr, var(--clr-gray-200));
  color: var(--clr, var(--clr-highlight));
}

/*
    Post styles
*/
.post-featured-image {
  max-height: 300px;
  min-height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*
.post-body a[role!="button"]:link,
.post-body a[role!="button"]:visited,
.app-content a[role!="button"]:link,
.app-content a[role!="button"]:visited {
  color: #555555;
  text-decoration: underline;
  text-underline-position: under;
}
*/

details.references-list ul {
    background-color: rgb(var(--bs-highlight), 0.35);
    border: 1px solid #777777;
    border-radius: 2px;
    margin: 10px;
}

/*
    TOC Styles
*/
a.toc-list-link:link, a.toc-list-link:visited {
  text-decoration: none;
  color: var(--bs-secondary-text);
}

a.toc-list-link:active, a.toc-list-link:hover {
  text-decoration: underline;
  text-underline-position: under;
}

/*
Home page styles
*/

.main-content {
  min-height: 100vh;
}

.available-in-plan {
  border: 1px solid var(--clr-gray-200);
  border-radius: 1rem;
  padding-inline: 0.5rem;
  margin-inline: 0.3rem;
  background-color1: color-mix(in srgb, var(--clr-success) 50%, transparent);
  color: color-mix(in srgb, var(--clr-on-success) 50%, transparent);
}

/* ////// ANIMATIONS ///// */
 .fade-out {
     opacity: 0;
     transition: opacity 0.3s ease-out;
 }

 .fade-in {
     opacity: 1;
     transition: opacity 0.3s ease-in;
 }

.text-size-x-small {
  font-size: var(--fs-200);
}

.text-size-small {
  font-size: var(--fs-300);
}

.text-size-normal {
  font-size: var(--fs-400);
}

.text-size-medium {
  font-size: var(--fs-600);
}

.text-size-x-large {
  font-size: var(--fs-800);
}

/* defaults to secondary */
.button {
  display: inline-flex;
  font-family: var(--button-ff, var(--ff-secondary));
  font-size: var(--button-fs, --fs-500);
  background-color: var(--button-bg, var(--clr-bg-secondary));
  color: var(--button-text-color, var(--clr-secondary));
  border: 1px solid var(--button-accent, var(--clr-bg-secondary-darker));
  border-radius: 0.3rem;
  padding: var(--block-padding, 0.35rem);
  cursor: pointer;

  &:hover, &:focus-visible {
    background-color: var(--button-accent, var(--clr-bg-secondary-darker));
    color: var(--button-text-on-accent-color, var(--clr-secondary));
  }
  &[disabled] {
    cursor: default;
  }
}

.button[data-btn-type="primary"] {
  --button-bg: var(--clr-bg-primary);
  --button-text-color: var(--clr-primary);
  --button-accent: var(--clr-bg-primary-darker);
  --button-text-on-accent-color: var(--clr-primary);
}

.button[data-btn-type="subdued"] {
  --button-bg: var(--clr-bg-neutral);
  --button-text-color: var(--clr-primary-lighter);
  --button-accent: var(--clr-bg-neutral);
  --button-text-on-accent-color: var(--clr-secondary);
  border: none;
}

.button[data-btn-type="outline"] {
  --button-bg: transparent;
  --button-text-color: var(--clr-primary-lighter);
  --button-accent: transparent;
  --button-text-on-accent-color: var(--clr-highlight);
  border: none;
}

.button[data-btn-size="small"] {
  --button-fs: --fs-300;
}

.button[data-btn-toggle-on="true"] {
    background-color: var(--button-accent, var(--clr-bg-secondary-darker));
}

.button[disabled] {
  background-color: var(--clr-gray-300);
}

a.button {
  text-decoration: none;
  line-height: 1.1; /* match button */
  cursor: pointer;
}

.modal-dialog {
  max-width: var(--max-width, 50rem);
  max-height: var(--max-height, 30rem);
  background-color: white;
  border-radius: 5px;
  padding: 10px;

  .modal-dialog--header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--clr-body-bg-darker);
    color: var(--clr-body-lighter);
    font-size: var(--fs-600);
    padding: 1rem 0rem 1rem 1rem;
  }

  .modal-dialog--header .close-button {
    background: none;
    border: none;
    color: var(--clr-body-lighter);
    font-size: var(--fs-600);
    padding: 0;
    margin: 0;
    position: relative;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .model-dialog--body {

  }

  .modal-dialog--footer {
    padding: 0.3rem;
    min-width: 1rem;
  }
}