@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asap:wdth,wght@75..125,100..900&display=swap');


/* PROPERTIES */

html { 
  --size-max: 1100px;
  --figure-max-width: 800px;
  --table-max-width: 800px;
  --size-0: 0;
  --font-sans: Asap, sans-serif;
  --font-serif: Domine, serif;
  --font-mono: Roberto Mono, monospace;
  --font-size-body: var(--font-size-1);
  --font-size-h1: var(--font-size-5);
  --font-size-h2: var(--font-size-4);
  --font-size-h3: var(--font-size-3);
  --font-size-h4: var(--font-size-2);
  --brand-light: var(--indigo-9);
  --brand-light-hsl: var(--indigo-9-hsl);
  --text-1-light: var(--gray-12);
  --text-2-light: var(--gray-9);
  --text-alert-light: var(--orange-11);
  --surface-highlight-light: var(--indigo-0);
  --surface-highlight-darker-light: var(--indigo-2);
  --surface-00-light: #FFF;
  --surface-0-light: var(--stone-0);
  --surface-1-light: var(--stone-1);
  --surface-2-light: var(--stone-2);
  --surface-3-light: var(--stone-3);
  --surface-4-light: var(--stone-4);
  --surface-5-light: var(--stone-5);
  --border-color-1: var(--stone-3);
  --border-color-2: var(--stone-4);
  --shadow-color: 200deg 8% 57%;
  --shadow:
    0px 1px 1px hsl(var(--shadow-color) / 0.41),
    0px 1.6px 1.6px -1.7px hsl(var(--shadow-color) / 0.33),
    0px 4.2px 4.2px -3.3px hsl(var(--shadow-color) / 0.24);
  --glow: 0 0 30px 15px hsl(var(--indigo-2-hsl) / 0.5);
  --panel-border: 1px solid rgba(0,0,0,0.05);
  --transition: all 0.4s ease-in-out;
  --transition-fast: all 0.1s ease-in-out;
  --icon-external-link: url('data:image/svg+xml,<svg\ xmlns=\"http://www.w3.org/2000/svg\"\ viewBox=\"0\ 0\ 20\ 20\"><g\ style=\"stroke:rgb\(35,82,124\);stroke-width:1\"><line\ x1=\"5\"\ y1=\"5\"\ x2=\"5\"\ y2=\"14\"\ /><line\ x1=\"14\"\ y1=\"9\"\ x2=\"14\"\ y2=\"14\"\ /><line\ x1=\"5\"\ y1=\"14\"\ x2=\"14\"\ y2=\"14\"\ /><line\ x1=\"5\"\ y1=\"5\"\ x2=\"9\"\ y2=\"5\"\ \ /><line\ x1=\"10\"\ y1=\"2\"\ x2=\"17\"\ y2=\"2\"\ /><line\ x1=\"17\"\ y1=\"2\"\ x2=\"17\"\ y2=\"9\"\ /><line\ x1=\"10\"\ y1=\"9\"\ x2=\"17\"\ y2=\"2\"\ style=\"stroke-width:1.5\"\ /></g></svg>');
}

@media screen and (max-width: 869px) { /* tablet definitions */
  html {
    --size-max: 100%;
    --figure-max-width: 100%;
    --table-max-width: 100%;
    --font-size-body: var(--font-size-1);
    --font-size-h1: var(--font-size-4);
    --font-size-h2: var(--font-size-3);
    --font-size-h3: var(--font-size-2);
    --font-size-h4: var(--font-size-1);
  }
}

@media screen and (max-width: 480px) { /* mobile definitions */
  html {
    --size-max: 100%;
    --figure-max-width: 100%;
    --table-max-width: 100%;
    --font-size-body: var(--font-size-0);
    --font-size-h1: var(--font-size-4);
    --font-size-h2: var(--font-size-2);
    --font-size-h3: var(--font-size-1);
    --font-size-h4: var(--font-size-1);
  }
}

:root { /* light theme by default */
  --brand: var(--brand-light);
  --brand-hsl: var(--brand-light-hsl);
  --text-1: var(--text-1-light);
  --text-2: var(--text-2-light);
  --text-alert: var(--text-alert-light);
  --surface-highlight: var(--surface-highlight-light);
  --surface-highlight-darker: var(--surface-highlight-darker-light);
  --surface-00: var(--surface-00-light);
  --surface-0: var(--surface-0-light);
  --surface-1: var(--surface-1-light);
  --surface-2: var(--surface-2-light);
  --surface-3: var(--surface-3-light);
  --surface-4: var(--surface-4-light);
  --surface-5: var(--surface-5-light);
}

/* LAYOUT */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; padding: 0;
  .wrapper {
    max-width: var(--size-max);
    margin: 0 auto; padding: var(--size-4);
    @media screen and (max-width: 869px) { padding: var(--size-2); } /* tablet and mobile */
  }
}

container {
  display: grid;
  justify-content: center;
  grid-template-columns: 1.2fr 4fr;
  grid-template-rows: auto auto 1fr;
  column-gap: var(--size-fluid-3);
  align-items: start;
  grid-template-areas: 
    "header breadcrumbs"
    "header content"
    "nav-internal content";
  @media screen and (max-width: 869px) { /* mobile and tablet */
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "breadcrumbs"
      "content";
  }
}

header { 
  grid-area: header;
  margin-bottom: var(--size-3);
  @media screen and (max-width: 869px) { /* tablet and mobile */
    display: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "info";
    a { grid-area: logo; }
    p { grid-area: info; }
  }
  img {
    width: 100%; height: auto;
    max-width: 100%;
  }
}

.breadcrumbs { grid-area: breadcrumbs; }

main { 
  grid-area: content; 
  @media screen and (max-width: 869px) { padding: var(--size-2); } /* tablet and mobile */
} 

nav.main-toc {
  grid-area: nav-internal;
  position: sticky;
  top: var(--size-3);
  overflow: auto;
  @media screen and (max-width: 869px) { display: none; } /* tablet and mobile */
} 

footer { margin-top: var(--size-fluid-4); }

.hide { display: none; }

.hidden-label { 
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  border: 0; clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

/* TYPOGRAPHY */

body, p, li, button, .button {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-4);
  font-size: var(--font-size-body);
  line-height: var(--font-lineheight-4);
}

h1,h2,h3,h4,h5 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-6);
  line-height: var(--font-lineheight-1);
}

h1 { font-size: var(--font-size-h1); margin-top: 0; }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4, h5 { font-size: var(--font-size-h4); }
li p { margin: 0; }
a { 
  text-decoration: underline; 
  transition: var(--transition-fast);
  &:hover { font-weight: var(--font-weight-7); }
}

nav.main-toc {
  li {
    font-size: var(--font-size-body);
    line-height: var(--font-lineheight-2);
    a {
      text-decoration: none;
      &&:hover { font-weight: var(--font-weight-6); }
    }
  }
  ul li ul ul li {
    font-size: var(--font-size-1);
    line-height: var(--font-lineheight-2);
  }
  p { display: inline; } /* fix margin/padding/line break issues introduced by Sphinx's HTML5 renderer wrapping **everything** in paragraphs */
}

.topic-title { /* TOC title */
  margin: 0; padding: 0;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-7);
}

/* COLORS */

body {
  background-color: var(--surface-0);
  color: var(--text-2);
  accent-color: var(--brand);
} 

h1, h2, h3, h4, h5, h6, caption, dt, .topic-title, summary, th, th p { color: var(--text-1); }
p, li, td, small, dd { color: var(--text-2); }
a { color: var(--brand); }

/* ELEMENT-SPECIFIC STYLING */

section > section:has(h2):not(section > section:has(h2):first-of-type) { /* top level sections */
  margin-top: var(--size-10);
  padding-top: var(--size-6);	
  @media screen and (max-width: 869px) { /* tablet and mobile */
    margin-top: var(--size-6); padding-top: var(--size-4);
  }
  @media screen and (max-width: 400px) { /* mobile */
    margin-top: var(--size-4); padding-top: var(--size-2);
  }
  h2 {
    font-weight: var(--font-weight-5);
    padding-bottom: var(--size-2); 
    border-bottom: 1px solid var(--stone-5);
  }
  h3:first-of-type {
    padding-top: var(--size-6);
  }
}

hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin: var(--size-6) 0;
  padding: 0;
}

main { /* external links in body */
  a[target="_blank"]::after, a.external::after {
    content: '';
    background: no-repeat var(--icon-external-link);
    padding-right: 1em;
  }
}

button, .button {
  color: var(--text-1);
  border-radius: var(--radius-2);
  border: 1px solid hsl(var(--indigo-1-hsl) / 0.25);
  box-shadow: var(--shadow);
  background-color: var(--surface-highlight);
  padding: var(--size-1) var(--size-4);
  cursor: pointer;
  transition: var(--transition);
  &:hover{
    background-color: var(--surface-highlight-darker);
    border-color: var(--surface-highlight-darker);
  }
}

details { /* "What we asked" collapsing details blocks */
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease-out;
  border-radius: var(--radius-2);
  border: var(--panel-border);
  box-shadow: var(--shadow);
  background: var(--surface-00);
  padding: var(--size-4);
  strong {
    font-weight: var(--font-weight-5);
    color: var(--text-1);
  }
  summary {
    cursor: pointer;
    letter-spacing: var(--font-letterspacing-1);
    padding-left: var(--size-1);
    color: var(--text-1);
    &:focus-visible {
      outline: dotted 1px;
      outline-offset: var(--size-4);
    }
    @media screen and (max-width: 869px) { /* remove highlight on mobile */
      cursor: url("data:image/svg+xml,%3Csvg fill='%23f00' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32px' height='32px'%3E%3Cpath d='M 13 2 C 11.355469 2 10 3.355469 10 5 L 10 16.8125 L 9.34375 16.125 L 9.09375 15.90625 C 7.941406 14.753906 6.058594 14.753906 4.90625 15.90625 C 3.753906 17.058594 3.753906 18.941406 4.90625 20.09375 L 4.90625 20.125 L 13.09375 28.21875 L 13.15625 28.25 L 13.1875 28.3125 C 14.535156 29.324219 16.253906 30 18.1875 30 L 19.90625 30 C 24.441406 30 28.09375 26.347656 28.09375 21.8125 L 28.09375 14 C 28.09375 12.355469 26.738281 11 25.09375 11 C 24.667969 11 24.273438 11.117188 23.90625 11.28125 C 23.578125 9.980469 22.394531 9 21 9 C 20.234375 9 19.53125 9.300781 19 9.78125 C 18.46875 9.300781 17.765625 9 17 9 C 16.648438 9 16.316406 9.074219 16 9.1875 L 16 5 C 16 3.355469 14.644531 2 13 2 Z M 13 4 C 13.554688 4 14 4.445313 14 5 L 14 16 L 16 16 L 16 12 C 16 11.445313 16.445313 11 17 11 C 17.554688 11 18 11.445313 18 12 L 18 16 L 20 16 L 20 12 C 20 11.445313 20.445313 11 21 11 C 21.554688 11 22 11.445313 22 12 L 22 16 L 24.09375 16 L 24.09375 14 C 24.09375 13.445313 24.539063 13 25.09375 13 C 25.648438 13 26.09375 13.445313 26.09375 14 L 26.09375 21.8125 C 26.09375 25.277344 23.371094 28 19.90625 28 L 18.1875 28 C 16.722656 28 15.457031 27.476563 14.40625 26.6875 L 6.3125 18.6875 C 5.867188 18.242188 5.867188 17.757813 6.3125 17.3125 C 6.757813 16.867188 7.242188 16.867188 7.6875 17.3125 L 12 21.625 L 12 5 C 12 4.445313 12.445313 4 13 4 Z'/%3E%3C/svg%3E") 0 0, default;		
    }
  }
  i { /* fontawesome icon */
    color: var(--surface-highlight);
    position: absolute;
    font-size: 12rem;
    right: -4.25rem;
    top: -4.75rem;
  }
  @media (prefers-reduced-motion: no-preference) { interpolate-size: allow-keywords; } /* transitions */
  &::details-content {
    opacity: 0;
    block-size: 0;
    transition: content-visibility 0.5s allow-discrete, opacity 0.5s, block-size 0.5s;
  }
  &[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
  + details { /* when there's two <details> blocks together, reduce spacing */
    margin-top: 0.5em;
  }
}

.question { /* what we asked and question background content */ 
  p { position: relative; }
  ul { padding-inline-start: 30px; }
}

#back-to-top { /* back to top link */
  position: fixed; z-index: 100;
  bottom: var(--size-4); right: var(--size-4);
  color: var(--text-2);
  background-color: var(--surface-highlight);
  border-radius: var(--radius-2);
  padding: var(--size-2);
  font-size: var(--font-size-0);
  display: none;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  &:hover { background-color: var(--surface-highlight-darker); }
}

nav.main-toc { /* TOC */
  ul { 
    margin: 0; padding: 0;
    list-style-type: none;
    li {
      padding: var(--size-1) 0;
      ul { 
        margin: var(--size-2) var(--size-3); padding: 0;
        list-style-type: none;
        ul {
          margin: 0; padding: var(--size-2) 0 var(--size-2) var(--size-1);
          li {
              padding: 0;
              &::before {
                  content:'\2022';
                  margin-right: var(--size-1);
              }
          }
        }
      }
    }
  } 
  div.contents.topic ul.simple > li > p > a.reference.internal, p.nav-heading { display: none; } /* hide top level internal nav link */
  ul.simple > li { padding-top: 0; } /* reduce padding before first internal nav link */
  .simple ul ul { display: none; }
  .simple > li > ul { display: block; margin: 0; }
  .simple > li > ul > li > a { position: relative; }
  .simple > li > ul > li > a::before {
    content: "\25B8"; 
    position: absolute; 
    left: -1rem; /* Adjust arrow position */
    display: inline-block;
    margin-right: 0.5rem; 
    transition: transform 0.3s ease;
  }
  .simple > li > ul > li.active > ul {
    display: block;
    margin-top: 0; margin-bottom: 0;
    padding-top: 0; padding-bottom: 0;
    padding-left: var(--size-2);
  }
  .simple > li > ul > li.active > a::before { transform: rotate(90deg); } /* Rotate the arrow for active state */
  .current { font-weight: var(--font-weight-6); }
} /* nav.main-toc */

#activator { /* mobile hamburger button */
  position: fixed; right: 10px; top: 10px;
  z-index: 4000;
  cursor: pointer;
  height: 20px; width: 20px;
  padding: 20px; 
  overflow: visible;
  background-color: var(--surface-highlight);
  border-radius: var(--radius-2);
  span { 
    position: absolute; right: 10px; top: 18px;
    display: block;		 
    width: 20px; height: 2px;
    background: var(--text-1);	
    opacity: 1;		
    transition: 0.3s ease-in-out;
    &::before { 
      position: absolute; left: 0px; top: -5px;
      display: block;
      content: "";
      width: 20px; height: 2px;
      background: var(--text-1);
      opacity: 1;
      transition: 0.3s ease-in-out;			
    }
    &::after { 
      position: absolute; left: 0px; top: 5px;
      display: block;
      content: "";
      width: 20px; height: 2px;
      background: var(--text-1);
      opacity: 1;			
      transition: 0.3s ease-in-out;
    }
  }
  &.close {
    span {
      transform: rotate(-45deg);
      top: 18px; width: 20px;
      &::before {
        transform: rotate(90deg);
        top: 0; width: 20px; 
      }
      &::after {
        transform: rotate(90deg);
        top: 0; left: 0;
        opacity: 0;
        width: 0;
      }
    }
  }
  @media screen and (min-width: 869px) { display: none; } /* hide on desktop */
} /* end mobile hamburger button */

nav.mobile-nav {
  z-index: 2000;
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0; right: 0; height: 0;
  visibility: hidden;
  opacity: 0;
  padding: 20px;
  transition: all 0.3s ease-in-out;
  background-color: var(--surface-highlight);
  div.contents.topic {
    padding: 0 var(--size-2) var(--size-2) var(--size-2);
    p.topic-title {
      margin: 0; padding: 0;
      font-family: var(--font-serif);
      font-size: var(--font-size-1);
      color: var(--text-1);
    }
    ul.simple {
      margin: 0; padding: 0;
      list-style-type: none;
      ul {
        margin: 0.5em 1em; padding: 0;
        list-style-type: disc;
      }
    }
    ul.simple > li > p > a.reference.internal { /* hide top level internal nav link */
      display: none;
    }
  } 
  &.overlay {
    visibility: visible;
    opacity: 1;
    background-color: var(--surface-highlight);
  }
}

.contents.local.topic.boxed { /* localized section TOC */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: var(--radius-2);
  border: var(--panel-border);
  box-shadow: var(--shadow);
  background: var(--surface-00);
  padding: var(--size-4);
  ul.simple {
    list-style-type: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--size-2);
    li {
      position: relative;
      display: inline;
      padding: 0 0.5em;
      &::before {
        content: "[";
        position: absolute;
        left: 0;
      }
      &::after {
        content: "]";
        position: absolute;
        right: 0;
      }
      p {
        display: inline; 
        margin: 0; padding: 0;
      }
      a {
        text-decoration: none;
        &:hover { text-decoration: underline; font-weight: bold; }
      }
    }
  }
  .topic-title {
    display: block;
    white-space: nowrap;
    &:after { content: ": "; }
  }
}

.survey-nav { /* other surveys jump menu */
	margin: var(--size-4) 0;
	div {
		margin: var(--size-2) 0;
		display: flex;
	}
	select {
		width: 60%;
		margin-right: var(--size-4);
	}
}

.headerlink { /* clickable section anchors */
	color: var(--surface-highlight);
	padding: 0 0 0 2px;
	text-decoration: none;
	font-size: var(--font-size-1);
	font-weight: var(--font-weight-2);
	display: inline;
}

h1,h2,h3,h4,h5,caption {
	&:hover .headerlink {
		visibility: visible;
	}
}

blockquote.pull-quote { /* pull quotes */
  margin: 0 var(--size-4);
  div {
    display: flex; align-items: center;
    min-height: 6rem;
  }
	p {
		font-family: var(--font-serif);
		text-align: center;
		padding: 0; margin: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    position: absolute; 
		&::before {
			content: '\201C';
		}
    &::after {
			content: '\201D';
		}
    &.visible {
      opacity: 1;
      position: relative;
    }
	}
}

.note, .text-carousel { 
	position: relative;
	overflow: hidden;
  margin: var(--size-8) 0;
	padding: var(--size-2) var(--size-4);	
	background-color: var(--surface-00);
  border: var(--panel-border);
	box-shadow: var(--shadow);
	border-radius: var(--radius-2);
  p { position: relative; }
	.rubric {
		font-size: var(--font-size-h4);
    font-weight: var(--font-weight-7);
		line-height: var(--font-lineheight-1);
		font-family: var(--font-serif);
	}
  i { /* fontawesome icon */
    color: var(--surface-highlight);
    position: absolute;
    z-index: 0;
    font-size: 12rem;
    right: -4.0rem;
    top: -3.75rem;
  }
}

.text-carousel {
  .text-carousel-controls {
    display: flex; justify-content: space-between;
    padding: var(--size-4) 0;
  }
}

.admonition {
	width: fit-content;
	display: flex;
	column-gap: var(--size-2);
	margin: var(--size-6) auto var(--size-8);
	padding: 0 var(--size-6);
	background-color: var(--surface-highlight);
	border-radius: var(--radius-2);
  border: var(--panel-border);
	box-shadow: var(--shadow);
	justify-content: center;
	.admonition-title { display: none; }
}

figure { 
	width: 100%;
	max-width: var(--figure-max-width);
	margin: var(--size-2) 0 var(--size-8) 0;
	background-color: var(--surface-00);
	border-radius: var(--radius-2);
	padding: var(--size-6) var(--size-6) var(--size-6) var(--size-6);
	@media screen and (max-width: 869px) { /* tablet */
		padding: var(--size-4) var(--size-4) var(--size-4) var(--size-4);
	}
	@media screen and (max-width: 400px) { /* mobile */
		padding: var(--size-2) var(--size-2) var(--size-2) var(--size-2);
	}
  border: var(--panel-border);
	box-shadow: var(--shadow);
	object {
		display: block;
    width: 100%;
		max-width: 100%;
		height: auto;
    background-color: var(--surface-0);
    border-radius: var(--radius-2);
    border: var(--panel-border);
    box-shadow: var(--shadow);
		& * { max-width: 100%; }
		p { text-align: center; font-style: italic; }
	}
	figcaption {
		text-align: center;
    padding: var(--size-4) 0 0 0;
	}
	&:has(.hide) { display: none; }
}

main { 
  table, th, td, tr, thead, tbody { /* fix random double-weight cell borders */
    border: none;
		border-spacing: 0;
    border-collapse: separate;
    p { display: inline; /* fix margin/padding/line break issues introduced by Sphinx's HTML5 renderer wrapping **everything** in paragraphs */ }
  } /* end fixes */
  table {
    position: relative;
		width: 100%;
    margin: var(--size-6) 0 var(--size-8) 0;
    padding: var(--size-2) var(--size-6) var(--size-6) var(--size-6);
		background-color: var(--surface-00);
    border-radius: 0 0 var(--radius-2) var(--radius-2);
    @media screen and (max-width: 869px) { /* tablet */
      margin-bottom: var(--size-4);
			padding: var(--size-2) var(--size-2) var(--size-3) var(--size-2);
    }
    @media screen and (max-width: 400px) { /* mobile */
			margin-bottom: var(--size-2);
      padding: var(--size-2) var(--size-2) var(--size-3) var(--size-2);
    }
    caption {
      border-radius: var(--radius-2) var(--radius-2) 0 0;
      border-top: var(--panel-border);
      border-left: var(--panel-border);
      border-right: var(--panel-border);
      background-color: var(--surface-00);
      text-align: center;
      .caption-text {
        display: inline-block;
        padding: var(--size-2);
        font-size: var(--font-size-1);
        font-weight: var(--font-weight-5);
      }
    }		
    &::after { /* add box-shadow */
			display: block;
			content:'';
			position: absolute; z-index: -1;
			bottom: 0; left: 0; right: 0; top: 0;
			border-radius: var(--radius-2);
      border: var(--panel-border);
			box-shadow: var(--shadow);
    }
    thead {
			th {
				padding: var(--size-2) var(--size-2) var(--size-2) var(--size-2);
        @media screen and (max-width: 869px) { padding: var(--size-1) var(--size-1) var(--size-1) var(--size-1); } /* tablet and mobile */
				background: var(--surface-3);
				text-align: left;
				border-bottom: 2px solid var(--border-color-2);
				position: sticky; top: -1px; z-index: 1; /* make all headers sticky */
				&:first-of-type { border-radius: var(--radius-2) 0 0 0; } 
				&:last-of-type { border-radius: 0 var(--radius-2) 0 0; }
				p { font-weight: var(--font-weight-5); }
			}
			&:hover th { background: var(--indigo-2); }
    } /* end thead */
    tbody {
			border-radius: 0 0 var(--radius-2) var(--radius-2);
      border: var(--panel-border);
			box-shadow: var(--shadow);
			td {
				padding: var(--size-2);
				@media screen and (max-width: 869px) { /* tablet */
					padding: var(--size-1);
				}
				@media screen and (max-width: 400px) { /* mobile */
					padding: var(--size-1);
				}				
				ul {
					margin: 0 0 0 0.75rem;
					padding: 0;
					li::marker {
						font-weight: var(--font-weight-1);
						font-size: 10px;
					}
				}
				span { display: none; }
				strong { font-weight: var(--font-weight-5); }
			}
			tr:nth-child(even) { /* striping */
				td { background: var(--surface-2); transition: var(--transition-fast); } 
				&:hover td { background: var(--surface-highlight-darker); }
			}
			tr:nth-child(odd) { /* striping */
				td { background: var(--surface-0);  transition: var(--transition-fast); }
				&:hover td { background: var(--surface-highlight-darker); }
			}
    } /* end tbody */
    &.nosort1 { /* no sorting on first column */
			thead { th:nth-of-type(1) { pointer-events: none; } }
    }
    &.std3col {
      thead { tr { th { &:nth-of-type(2) { text-align: center; } &:nth-of-type(3) { text-align: right; } } } }
			tbody { tr { td { &:nth-of-type(2) { text-align: center; } &:nth-of-type(3) { text-align: right; } } } }
    } 
    &.col2center { thead { th:nth-of-type(2) { text-align: center; } } tbody { td:nth-of-type(2) { text-align: center; } } } 
    &.col3center { thead { th:nth-of-type(3) { text-align: center; } } tbody { td:nth-of-type(3) { text-align: center; } } }
    &.col2right { thead { th:nth-of-type(2) { text-align: right; } } tbody { td:nth-of-type(2) { text-align: right; } } }
    &.col3right { thead { th:nth-of-type(3) { text-align: right; } } tbody { td:nth-of-type(3) { text-align: right; } } }
    &.col4right { thead { th:nth-of-type(4) { text-align: right; } } tbody { td:nth-of-type(4) { text-align: right; } } }
    &.medians { 
			thead { th { text-align: right; &:nth-of-type(1) { text-align: left; } } }
			tbody { tr:has(td strong) { td { border-bottom: 1px solid var(--border-color-1); } } 
				td { text-align: right; &:nth-of-type(1) { text-align: left; } &:has(strong) { text-transform: uppercase; } } }
    }
    &.medians-with-num {
			thead { th { text-align: right; &:nth-of-type(1) { text-align: left; } &:nth-of-type(2) { text-align: center; } } }
			tbody { td { text-align: right; &:nth-of-type(1) { text-align: left; } &:nth-of-type(2) { text-align: center; } } }
    }
    &.statements {
			thead { th { text-align: right; &:nth-of-type(1) { text-align: left; } } }
			tbody { td { text-align: right; &:nth-of-type(1) { text-align: left; } } }
    }
    &:has(+ figure) { /* table + figure OUTSIDE a tab group */
      margin-bottom: 0;
      + figure {
        margin: -8px 0 0 0; /* overlap shadow on bottom of table */
        padding: 8px var(--size-6) var(--size-6) var(--size-6);
        @media screen and (max-width: 869px) { padding: var(--size-2) var(--size-2) var(--size-2) var(--size-2); } /* tablet */
        @media screen and (max-width: 400px) { padding: var(--size-2) var(--size-2) var(--size-2) var(--size-2); } /* mobile */
        figcaption { padding: var(--size-2) 0 0 0; } 
      }
    } /* end table + figure */
    &:has(a.footnote-reference.brackets) { /* table + footnote */
      background-color: transparent; 
      padding-bottom: var(--size-1);
      margin-bottom: 0; 
      &::before {
        content: ''; display: block;
        position: absolute; z-index: -1;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: var(--surface-00);
        border-radius: var(--radius-2) var(--radius-2) 0 0;
        border: var(--panel-border); border-bottom: none;
        box-shadow: var(--shadow);
      }
      &::after { display: none; }
  	} /* end table + footnote */
  } /* end table */
} /* end main */

.tab-wrap { /* tabs */
  transition: 0.3s box-shadow ease;
  border-radius: var(--radius-2);
  max-width: 100%;
  display: flex; flex-wrap: wrap;
  position: relative;
  list-style: none;
  background-color: var(--surface-00);
  margin: var(--size-8) 0;
	@media screen and (max-width: 869px) { margin-bottom: var(--size-4); } /* tablet */
	@media screen and (max-width: 400px) { margin-bottom: var(--size-2); } /* mobile */		
	&::before {
		content: ''; display: block;
		position: absolute; z-index: -1;
		top: 0; left: 0; right: 0; bottom: 0;
		background-color: var(--surface-00);
		border-radius: var(--radius-2) var(--radius-2) 0 0;
    border: var(--panel-border);
		box-shadow: var(--shadow);
	}
	&::after {
		content: ''; display: block;
		position: absolute; z-index: -1;
		top: 0; left: 0; right: 0; bottom: 0;
		background-color: var(--surface-00);
		border-radius: var(--radius-2) var(--radius-2) 0 0;
	}
  border: var(--panel-border);
  box-shadow: var(--shadow);
	.tab {
		position: absolute; z-index: -1;	
		&:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
			opacity: 1; transition: 0.5s opacity ease-in, 0.8s transform ease;
			position: relative; top: 0; z-index: 100;
		}
		&:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
			opacity: 1; transition: 0.5s opacity ease-in, 0.8s transform ease;
			position: relative; top: 0; z-index: 100;
		}	
		&:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) {
			opacity: 1; transition: 0.5s opacity ease-in, 0.8s transform ease;
			position: relative; top: 0; z-index: 100;
		}
		&:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4) {
			opacity: 1; transition: 0.5s opacity ease-in, 0.8s transform ease;
			position: relative; top: 0; z-index: 100;
		}
		&:checked:nth-of-type(5) ~ .tab__content:nth-of-type(5) {
			opacity: 1; transition: 0.5s opacity ease-in, 0.8s transform ease;
			position: relative; top: 0; z-index: 100;
		}
		&:first-of-type:not(:last-of-type) + label {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
		&:not(:first-of-type):not(:last-of-type) + label {
			border-radius: 0;
		}
		&:last-of-type:not(:first-of-type) + label {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
		&:checked + label {
			background-color: var(--surface-00);
			box-shadow: 0 -1px 0 var(--surface-00) inset;
			cursor: default;
		}
		&:checked + label:hover {
			box-shadow: 0 -1px 0 var(--surface-00) inset;
			background-color: var(--surface-00);
		}
		&:not(:hover):not(:active):focus + label { /* when tabbed to via keyboard */
			text-decoration: underline dotted;
		}
		& + label {
			box-shadow: 0 -1px 0 #eee inset;
			border-radius: var(--radius-2) var(--radius-2) 0 0;
			cursor: pointer;
			display: grid; align-items: center;
			text-decoration: none;
			color: var(--text-1);
			flex-grow: 3;
			text-align: center;
			background-color: var(--surface-1);
			-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;			
			text-align: center;
			transition: 0.3s background-color ease, 0.3s box-shadow ease;
			height: var(--size-8);
			padding: var(--size-2);
		}
		& + label:hover {
			background-color: var(--surface-0);
			box-shadow: 0 1px 0 #f4f4f4 inset;
		}
	}
	.tab__content {
		padding: var(--size-6);
		@media screen and (max-width: 869px) { padding: var(--size-4); } /* tablet */
		@media screen and (max-width: 400px) { padding: var(--size-2); } /* mobile */
		background-color: transparent;
		position: absolute;
		width: 100%;
		z-index: -1;
		opacity: 0;
		left: 0;
		transform: translateY(-3px);
		border-radius: var(--radius-2);
		table { 
      margin: 0 0 var(--size-2) 0; 
      padding: 0 0 0 0;
      caption { border: none; }
      &:after { display: none; }
      &:has(+ figure) { /* table + figure inside a tab */
        margin-bottom: 0;
        + figure {
          padding: var(--size-6) 0 0 0;
          border: none;
          @media screen and (max-width: 869px) { padding: var(--size-4) 0 0 0; } /* tablet */
          @media screen and (max-width: 400px) { padding: var(--size-4) 0 0 0; } /* mobile */
        }        
      }
    } /* end table + figure */
  } /* end tab__content */
  figure { /* figure inside tab wrap but outside of tab_content */
    box-shadow: none;
    border: none;
    border-radius: 0 0 var(--radius-2) var(--radius-2);
    margin: 0 0 0 0;
    padding: var(--size-0) var(--size-6) var(--size-6) var(--size-6);
    @media screen and (max-width: 869px) { padding: var(--size-0) var(--size-4) var(--size-4) var(--size-4); } /* tablet */    
    @media screen and (max-width: 400px) { padding: var(--size-0) var(--size-2) var(--size-2) var(--size-2); } /* mobile */
    figcaption { @media screen and (max-width: 869px) { padding: var(--size-2) 0 0 0; } } /* tablet and mobile */ 
  } /* end figure outside tab content */
} /* end tab-wrap */

table:has(+ div.tbl-footnote) { margin-bottom: 0;  } /* custom footnotes */
.tbl-footnote { margin-bottom: var(--size-8); }

a.footnote-reference.brackets { vertical-align: super; text-decoration: none; } /* built-in footnotes */
dl.footnote.brackets {
	margin: 0 auto var(--size-6) auto;
	display: flex; align-items: baseline;
	padding: 7px var(--size-6) 0 var(--size-6);
	background-color: var(--surface-00);
	border-radius: 0 0 var(--radius-2) var(--radius-2);
  border: var(--panel-border); border-top: none;
	box-shadow: var(--shadow);
  /*position: relative; top: -7px;*/
	@media screen and (max-width: 869px) { padding: 0 var(--size-2); } /* tablet and mobile */
	dt { a { text-decoration: none; } }
	dd { margin-inline-start: 10px; a { text-decoration: none; } }
}

/* specific table overrides */
#tbl-2023-basis-of-employment-history {
	thead {
		th {
			&:nth-of-type(2) { text-align: center; }
			&:nth-of-type(4) { text-align: center; }
		}
	}
	tbody {
		td {
			&:nth-of-type(2) { text-align: center; }
			&:nth-of-type(3) { text-align: right; }
			&:nth-of-type(5) { text-align: center; }
			&:nth-of-type(6) { text-align: right; }
		}
	}
}

#tbl-2023-employee-job-offer-considerations {
	thead {
		tr {
			&:nth-of-type(1) { th { &:nth-of-type(2) { text-align: center; } } }
			&:nth-of-type(2) { th { text-align: right; &:nth-of-type(1) { text-align: left; } } }
		}
	}
	tbody { tr { td { text-align: right; &:first-child { text-align: left; } } } }
}

@media screen and (max-width: 869px) { /* scrolling table - tablet and mobile */
	.tablescroller {
		width: 100vw; overflow-x: scroll;
	}
}

.sortable { /* table sorting */
	thead {
		th:not(.no-sort) {
			cursor: pointer;
			&::after,	&::before { transition: color .1s ease-in-out; font-size: 1.2em; color: rgba(0, 0, 0, 0); }
			&::after { margin-left: 3px; content: "▸"; }
			&:hover::after { color: inherit; }
			[aria-sort=descending]::after { color: inherit; content: "▾"; }
			[aria-sort=ascending]::after { color: inherit; content: "▴"; }
			.indicator-left::after { content: ""; }
			.indicator-left::before { margin-right: 3px; content: "▸"; }
			.indicator-left:hover::before { color: inherit; }
			.indicator-left[aria-sort=descending]::before { color: inherit; content: "▾"; }
			.indicator-left[aria-sort=ascending]::before { color: inherit; content: "▴"; } 
		}
	}
	tbody { td { padding-right: 12px; } }
	&.std3col { thead { tr { th { &:nth-of-type(3) { pointer-events: none; padding-right: 14px; &::after { display: none; } } } } } }
	&.rates { tbody { td { padding-right: 30px; } } }
} /* end table sorting */


#mc_embed_signup { /* MailChimp form embed */
  form {
    display: block; position: relative;
    padding: 0 0 var(--size-4) 0;
    input {
      border: 1px solid var(--border-color-1); 
      border-radius: var(--radius-2);
      &[type=email] {
        width: 80%;
        padding: var(--size-2);
        &.mce_inline_error {
          color: var(--text-alert) !important;
          border-color: var(--text-alert) !important;
        }
      }
    }
    label {
      span {
        position: absolute; left: -10000vw;
      }
    }
    .mc-field-group {
      clear: left; 
      position: relative; display: grid;
      padding: var(--size-2) 0;
      ul {
        list-style-type: none;
        margin: var(--size-1); padding: 0;
        display: grid; grid-template-columns: 1fr 1fr;
      }
    }
    div.mce_inline_error {
      background-color: transparent !important;
      color: var(--text-alert) !important;
      margin: var(--size-1) var(--size-0) !important; 
      padding: 0 !important;
    }
  }
  #mce-responses {
    padding: var(--size-4) 0;
    font-weight: var(--font-weight-7);
  }
}