/************************************************************************************/
/******************************** 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: "Arial", 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;

  display: grid;
  gap: 1rem;
  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);
}


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


/************************************************************************************/
/******************************** BLOCK *********************************************/
/************************************************************************************/

.nav-layout > :first-child {
  --vnav-bg-color: var(--bg-primary);
  --vnav-color: var(--text-on-primary);
  --vnav-font-family: var(--ff-normal); /* no such var */
  --vnav-font-size: var(--fs-500);
  --vnav-font-weight: var(--fw-300);
  --vnav-bg-highlight: var(--bg-accent);
  --vnav-text-highlight: var(--text-on-accent);
  --vnav-font-weight-highlight: var(--fw-400);
  --vnav-active-bg-color: var(--bg-secondary);
  --vnav-active-color: var(--text-on-secondary);
  --vnav-min-width: 10rem;

  min-width: var(--vnav-min-width);
  background-color: var(--vnav-bg-color);
  color: var(--vnav-color);
  margin: 0;
  font-family: var(--vnav-font-family);
  font-size: var(--vnav-font-size);
  font-weight: var(--vnav-font-weight);
  padding-right: 0.1rem;

  ul {
    list-style: none;
    padding: 0;

    a {
      text-decoration: none;
      color: inherit;
      width: 100%;
      display: block;
      border-radius: 0.2rem;
      padding-inline: 1rem;
      margin: 0.1rem 0 0.1rem 0;

      &:visited {
        text-decoration: none;
      }

      &:hover {
        background-color: var(--vnav-bg-highlight);
        color: var(--vnav-text-highlight);
        font-weight: var(--vnav-font-weight-highlight);
      }
    }

    a.active {
      background-color: var(--vnav-active-bg-color);
      color: var(--vnav-active-color);

      &:hover {
        background-color: var(--vnav-active-bg-color);
        color: var(--vnav-active-color);
        font-weight: inherit;
      }
    }
  }
}

.card {
  box-shadow: 0px 0px 4px darkgray;
  border-radius: 0.2rem;
  background-color: white;

  .card-header {
    padding: 0.3rem;
    background-color: hsl(0, 0%, 94%);
    flex-basis: 30%;
    overflow: hidden;

    &.header--ready {
      /*background-color: hsl(80, 70%, 80%);*/
    }

    &.header--not-ready {
      /*background-color: hsl(20, 70%, 80%);*/
    }
  }


  .card-body {
    flex-grow: 999;
    background-color: transparent;

    .description {
      height: 6rem;
      overflow-y: auto;
      overflow-x: auto;
      scrollbar-width: none;
    }
  }

  .card-title {
  }

  .card-footer {
    width: 100%;
    background-color: var(--bg-tertiary);
    flex-basis: 30%;
  }
}

.card--square {
  aspect-ratio: 1;
}

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

/*
.button-secondary {
  --button-bg: var(--bg-secondary);
  --button-text-color: var(--text-on-secondary);
}
*/

.card--project {
  .card-footer {
    display: flex;
    align-items: end;

    .buttons {
      margin-inline: auto;
      margin-bottom: 2rem;
      display: flex;
      flex-direction: row;
      gap: 1rem;

      button {
        padding: 1rem;
      }

      .open-project-button {
      }
    }
  }

  .card-title {
    a {
      text-decoration: none;
    }
  }
}

.card--create-new {
  .card-content {
    border: 2px dashed gray;
    background-color: transparent;
  }

}

.projects-grid {
  --ag-cell-size: 22rem;
}

.navbar-brand {
  font-weight: var(--fw-600);
  font-size: var(--fs-400);
  width: 10rem;
  background-color: var(--bg-primary);
  color: var(--text-on-primary);
  letter-spacing: 0.31rem;

  &::first-letter {
    font-size: var(--fs-800);
  }
}

header {
  font-size: var(--header-font-size);

  .header-page {
    color: var(--clr-bg-primary-darker);
    /*margin-left: 1rem;*/
  }

  .header-item {
    flex-grow: 0;
    align-items: center;
    display: flex;
    padding-inline: 0.1rem;
  }

  .header-logo {
    width: var(--header-logo-width, 10rem);
    background-color: var(--clr-gray-200);
    padding: 1.5rem 3rem 1.5rem 1rem;

    img {
      height: 2rem;
    }
  }
}

.account-container {
  font-size: 2rem;
  margin-right: 0.3rem;
  &:hover {
    color: var(--clr-highlight);
    cursor: pointer;
  }
  .account-menu-items {
    font-size: var(--fs-400);
    position: absolute;
    top: var(--header-height, 3rem);
    right: 1rem;
    border: 1px solid gray;
    background-color: var(--clr-bg-secondary);
    color: var(--clr-secondary);
    padding-block: 0.3rem;
    padding-inline: 0.5rem;

    ul {
      list-style: none;
    }

    li:hover {
      background-color: var(--clr-bg-highlight);
      color: var(--clr-highlight);
    }
  }
}

.project-main {
  overflow: hidden;

  nav.vertical-sidebar {
    width: var(--header-logo-width, 10rem);
    flex-grow: 0;
    flex-shrink: 0;
    align-self: stretch;
    /*color: var(--clr-secondary);*/
    background-color: var(--clr-gray-200);
    color: var(--clr-neutral);
    font-family: var(--ff-secondary);
    font-weight: var(--fw-200);
    font-size: var(--fs-500);
/*
    border-right: 1px solid var(--clr-neutral-lighter);
*/
    position: relative; /* because of the collapse button's absolute position */

    ul {
      list-style: none;
    }

    li:hover {
      color: var(--clr-highlight);
      background-color: var(--clr-bg-highlight);
      border-radius: 0.3rem;
    }

    li {
      display: grid;
      min-height: 3rem;
    }

    a {
      width: 100%;
      align-content: center;
    }

    li:has(> a.active) {
      border-radius: 0.3rem;
      background-color: var(--clr-gray-600);
/*
      background: linear-gradient(to right,
           var(--clr-bg-primary) 50%,
           white 100%);
*/
    }

    a.active {
      color: var(--clr-primary);
/*
      background-color: var(--clr-bg-primary);
*/
      /*font-weight: var(--fw-600);*/
      border-radius: 0.3rem;
    }

    a span {
      transition: width 200ms ease;
      transition-delay: 300ms;
    }

    li i {
      padding-inline: 0.3rem;
      font-size: var(--fs-600);
    }

  }

  nav.vertical-sidebar[aria-expanded="false"] {
    width: 4rem;
    transition: width 250ms ease-in-out;

    .vertical-sidebar-collapse button::before {
      content: '>';
    }
  }

  nav.vertical-sidebar[aria-expanded="true"] {
    width: var(--header-logo-width, 10rem);
    transition: width 250ms ease-in-out;

    .vertical-sidebar-collapse button::before {
      content: '<';
    }
  }

  .vertical-sidebar-collapse {
    position: absolute;
    bottom: 1rem;
    right: -1rem;

    button {
      width: 2rem;
      aspect-ratio: 1;
      border: 1px dotted gray;
      border-radius: 20rem;
      color: gray;
      background-color: var(--clr-bg-neutral-dark);
      opacity: 0.5;

      &:hover {
        color: var(--clr-neutral);
      }
    }
  }
}

.setup-frame {
  .status-container {
    width: fit-content;
    grid-area: status;
    margin-bottom: 1rem;

    > div {
      gap: 2rem;
      padding: 0.2rem;
      border-radius: 0.3rem;
      font-family: var(--ff-mono);
      align-items: center;

      .error {
        color: red;
      }

      .ok {
        color: green;
      }

      .warning {
        color: orange;
      }
    }
  }

  .column-mapping-container {
/*
    display: grid;
    grid-template-areas:
      "title ."
      "controls-url help-url"
      "controls-sheet help-sheet"
      "field-mapping-title ."
      "controls-data-range help-data-range"
      "controls-field-mapping help-field-mapping"
      "edit-validation-messages help-edit-validation-messages"
      "preview-title ."
      "controls-preview help-preview"
      "buttons ."
      ;
    grid-template-columns: 60% 40%;
*/
    align-items: stretch;
    padding-bottom: 3rem;

    &[data-mode="edit"] {
      input, select {
        /* common styling for input fields */
      }
      select:invalid {
        border: 2px solid var(--clr-error);
      }
    }

    .help {
      border-left: 4px solid rgba(200, 200, 200, 0.7);
      padding-left: 1rem;
      color: var(--clr-neutral-light);

      ul {
        list-style: none;
        padding-left: 0.3rem;
      }
    }

    .controls {
      label {
        font-weight: var(--fw-600);
        font-size: var(--fs-300);
      }
    }

    .title {
      grid-area: title;
    }

    .controls-url {
      grid-area: controls-url;
    }

    .help-url {
      grid-area: help-url;
    }

    .controls-sheet {
      grid-area: controls-sheet;
    }

    .help-sheet {
      grid-area: help-sheet;
    }

    .field-mapping-title {
      grid-area: field-mapping-title;
    }

    .controls-data-range {
      grid-area: controls-data-range;
    }

    .help-data-range {
      grid-area: help-data-range
    }

    .controls-field-mapping {
      grid-area: controls-field-mapping;
    }

    .help-field-mapping {
      grid-area: help-field-mapping;
    }

    .preview-title {
      grid-area: preview-title;
    }

    .controls-preview {
      grid-area: controls-preview;
    }

    .help-preview {
      grid-area: help-preview;
    }

    .edit-validation-messages {
      grid-area: edit-validation-messages;
    }

    .help-edit-validation-messages {
      grid-area: help-edit-validation-messages;
    }

    .buttons {
      grid-area: buttons;
    }

    .column-mapping--card-container, .column-mapping--preview {
      margin: auto;
      padding-block: 2rem;
      min-width: 50%;

      label {
        font-weight: var(--fw-600);
        font-size: var(--fs-300);
      }

      .column-mapping--card {
        margin-top: 3rem;
        margin-inline: auto;
        position: relative;

        .field {
          text-wrap: nowrap;
        }
      }

      .unmapped {
        opacity: 0.5;
      }

      .reportsTo-field {
        min-height: 1.5rem; /* because line-height: 1.5 */
        text-align: end;
        padding-inline: 0.5rem;
        position: absolute;
        top: -3rem;
        border: 1px solid var(--clr-neutral-darker);
        border-radius: 0.3rem;
        background-color: var(--clr-gray-200);
        color: var(--clr-gray-800);
        min-width: 100%;
        max-width: 500px;
        text-align: center;

        &::after {
          content: '';
          border: 1px solid var(--clr-neutral-darker);
          height: 3rem;
          z-index: -1;
          position: absolute;
          border-left: none;
          width: 50%;
          top: 0.6rem;
          left: 0;
        }
      }
    }

    .column-mapping--card {
      .add-field-button {
        width: 100%;
        background: var(--clr-gray-100);
        color: var(--clr-gray-700);
        border: 1px dotted var(--clr-gray-400);
        border-radius: 0.1rem;
        margin-top: 5px;

        &:hover {
          border: 1px solid var(--clr-gray-700);
        }
      }

      .field, .reportsTo-field, .additional-field {
        select {
          max-width: 25%;
          font-size: var(--fs-400);
        }
      }

      .additional-field {
        padding-top: 0.15rem;
        /* these are the inline styles additional-field because the additional-field gets removed in the setup page */
        min-height: 1.5rem;
        text-align: end;
        font-size: var(--fs-400);
        overflow: hidden;
        text-overflow: ellipsis;
        text-wrap: nowrap;
/*
        &:hover {
          background: var(--clr-gray-200);
        } */
      }
    }
  }

  .validation-issue {
    padding-inline: 1rem;
    padding-block: 0.2rem;
    display: flex;
    flex-direction: row;
    border-left: 3px solid var(--clr-validation-issue-bg, var(--clr-success));
    background-color: rgba(from var(--clr-validation-issue-bg, var(--clr-success)) r g b / 0.1);
    color: var(--clr-validation-issue, var(--clr-body));
    margin-block: 1rem;

    .severity-icon-container {
      align-self: start;
      padding-right: 1rem;
      font-size: var(--fs-600);
    }

    &[data-severity="fail"] {
      --clr-validation-issue-bg: var(--clr-error);
    }

    &[data-severity="warn"] {
      --clr-validation-issue-bg: var(--clr-warn);
    }

    .main-message {
      font-size: var(--fs-400);
    }

    .help-message {
      font-size: var(--fs-300);
      color: var(--clr-neutral-lighter);
    }

    .impact-message {
      font-size: var(--fs-300);
      color: var(--clr-neutral-lighter);
    }

    .affected-rows {
      .row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .expandable {
        &::after {
          content: 'Expand';
          margin-left: 0.3rem;
          font-size: var(--fs-200);
          color: var(--clr-neutral-lighter);
        }
        +.affected-rows-content {
          display:none
        }
      }
      .expandable.expanded {
        &::after {
          content: 'Collapse';
        }
        +.affected-rows-content {
          display: block;
        }
      }
    }
  }
}

.chart-container {
  color: var(--clr-neutral);
}

/*
.card--body {
  border: 1px solid var(--clr-neutral-darker);
  border-radius: 0.3rem;
  background-color: var(--clr-white);
  color: var(--clr-gray-800);
  padding: 0.5rem;

  .field {
    min-height: 1.5rem; // because line-height: 1.5
    text-align: end;
    font-size: var(--fs-400);
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }

  .id-field {
    font-size: var(--fs-300);
  }

  .name-field {
    font-size: var(--fs-525);
  }

  .field-label {
    font-size: var(--fs-200);
  }

  &[data-highlighted="true"] {
    border-color: var(--clr-highlight);
    background-color: var(--clr-bg-neutral-dark);
    border-width: 1px;
  }

  &[data-is-on-node="true"] {
    background-color: var(--clr-gray-200);
  }
}
*/

.login-section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.login-billboard {
  height: 100%;
  align-items: center;
  justify-content: center;
  border-left: 1px solid darkgray;
  display: flex;

  h1 {
    font-size: 3rem;
    font-family: var(--ff-heading-secondary);
    font-weight: 300;
    padding: 0.25rem;
    text-align: center;
  }

  img {
    align-self: center;
    justify-self: center;

  }
}

.inline-message-alert {
  display: flex;
  margin: 1rem;
  padding: 0.5rem;
  justify-content: center;
  border: var(--border-width, 1px) solid var(--clr-border, var(--clr-highlight));
  background-color: var(--clr-background, var(--clr-bg-neutral-dark));
  border-radius: 0.4rem;

  .title {
    font-weight: var(--fw-600);
  }

  .button {
    margin-right: 0.3rem;
  }
}

.create-project-container {
/*  transition: all 0.2s ease-in-out;
  opacity: 0;
  visibility: hidden;
  */
}

.create-project-container.showContainer {
  opacity: 1;
  visibility: visible;
}

.create-project-container.hideContainer {
  opacity: 0;
  visibility: hidden;
  display: none;
}

.welcome {
  & .welcome-toggle {
    cursor: pointer;
    color: inherit;
    margin-inline: 0.3rem;
    border: none;
    background: none;
    text-decoration: none;
/*    transition: transform 0.3s ease;  */
  }
}
/*  & .welcome-toggle[aria-expanded="true"] {
    i {
      transform: rotate(180deg);
    }
*/

.coming-soon {
  background-color: var(--clr-bg-primary-light);
  border: 1px solid var(--clr-bg-primary-light);
  border-radius: 0.3rem;
  padding-inline: 0.3rem;
  margin-right: 0.3rem;
}

.coming-soon::after {
  content: 'Coming Soon';
}

.pricing-container {
  display: grid;
  max-width: 72rem;
  margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
  padding-top: 1rem;
  justify-content: center;
}

.pricing-container-addendum {
  grid-column: 1 / -1; /* This makes it span the full row */
  justify-self: start; /* Align to left of cards */
}

.faq-container {
  grid-column: 1 / -1; /* This makes it span the full row */
  justify-self: start; /* Align to left of cards */
  summary {
    color: var(--clr-gray-600);
  }
  summary::marker {
    list-style-type: square;
  }
}

/* Inline Edit Support */
.editable-input {
    transition: background-color 0.2s ease;
    cursor: auto;
}

.editable-input:hover {
    background-color: var(--clr-gray-100);
    cursor: pointer;
}

.editable-input:focus {
    outline: 1px solid var(--clr-gray-300);
    cursor: auto;
}



/************************************************************************************/
/******************************** EXCEPTION *****************************************/
/************************************************************************************/










/************************************************************************************/



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

/*
nav.post-toc {
  float: right;
  border: 1px solid #aaaaaa;
  max-width: 400px;
  background-color: hsl(71, 30%, 90%);
  font-size: 0.9em;
  margin-left: 10px;
  border-radius: 5px;
}

nav.post-toc a {
    color: #555555;
}

nav.post-toc .toc-title {
  font-size: 1.2em;
}

nav.post-toc .toc-list-item.indent-2 {
    font-size: 1.0em;
}

nav.post-toc .toc-list-item.indent-3 {
  margin-left: 15px;
  font-size: 0.9em;
}

nav.post-toc .toc-list-item.indent-4 {
  margin-left: 30px;
}

nav.post-toc .toc-list-item.indent-5 {
  margin-left: 30px;
}

nav.post-toc .toc-list {
    list-style: none;
    padding-left: 10px;
}

@media (max-width: 1000px) {
    nav.post-toc {
      float: none;
      max-width: 100%;
    }
}
*/

/*
    Reference popup style
*/

.ref-def {
  position: relative;
  background: #FFF;
  padding: 25px;
  width: auto;
  max-width: 900px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  border-top: 7px solid darkgray;
  border-bottom: 7px solid darkgray;
}

.ref-def .ref-def-label {
  font-size: large;
  font-weight: bold;
}

.ref-def .ref-def-content {
  margin-bottom: 10px;
}

.ref-def .ref-def-title-container {
    margin-bottom: 10px;
}

.ref-def .ref-def-title-container .ref-def-title {
  font-weight: bold;
  font-size: large;
}

.ref-def-url {
    margin-top: 10px;
    margin-bottom: 10px;
}

/*
    Reference Link Styles
*/
a.ref-link:link, a.ref-link:visited {
    text-decoration: none;
}

a.ref-button:link, a.ref-button:visited {
    text-decoration: none;
    border: 1px solid gray;
    border-radius: 4px;
    color: gray;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 2px;
    margin-right: 2px;
    font-size: small;
}

a.ref-button:hover, a.ref-button:active {
    border: 1px solid darkgray;
    background-color: darkgray;
    color: white;
}

/*
link button styles
*/
a.button1:link, a.button1:visited {
    text-decoration: none;
    border: 1px solid hsl(70, 40%, 50%);
    border-radius: 5px;
    background-color: hsl(70, 40%, 70%);
    margin-left: 2px;
    margin-right: 2px;
    line-height: 1.1;
}

a.button1:active, a.button1:hover {
    background-color: hsl(70, 40%, 80%);
}

/*
Home page styles
*/

.content-hero {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.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);
}