:root {
  color-scheme: light dark;
  background-color: light-dark(#E6EBE9, #232927);
}

@view-transition {
  navigation: auto;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  src: url(assets/fonts/Figtree-NonSlashZero.woff2) format('woff2');
  font-weight: 300 900;
}

@font-face {
  font-family: 'Figtree';
  font-style: italic;
  src: url(assets/fonts/Figtree-Italic-NonSlashZero.woff2) format('woff2');
  font-weight: 300 900;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  pointer-events: none;
  fill: currentcolor;
}

a>.icon {
  margin-right: .35ch;
}

body {
  font-family: Figtree, ui-sans-serif, sans-serif;
  line-height: 1.4;
  margin: 0 3px;
  padding: 0;
  color: light-dark(#232927, #E6EBE9);
}

@media (width > 25rem) {
  body {
    font-size: 1.5rem;
    margin: 0 3rem;
  }
}

@media (width > 1560px) {
  body {
    margin: 0 auto;
    max-width: 1560px;
  }
}


body>section {
  /*padding: .3rem;
  margin: .6rem 0;
  border: 3px solid light-dark(#7C5624, #E8D19E);
  border-radius: 1rem;*/
}

@media (width > 25rem) {
  body>section {
    /*padding: 1rem;
    margin: 2rem 0;*/
  }
}

.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;

  & img {
    height: 1.5rem;
    display: block;
  }
}

@media (width > 25rem) {
  .meta img {
    height: 3rem;
  }
}

:focus {
  border-radius: 3px;
  outline: .2em solid light-dark(#7C5624, #E8D19E);
  outline-offset: .2em;
}

a {
  color: light-dark(#0E4A2B, #B7E0CC);

  &:hover,
  &:focus {
    color: light-dark(#7C5624, #E8D19E);
  }
}

.deliverables {
  padding: 2rem 0 0;

  & h3 {
    border-left: .2rem solid light-dark(#7C5624, #E8D19E);
    border-bottom: none;
    padding: .8rem;
    font-weight: bold;
    font-size: 1.7rem;
    margin-bottom: 0;
  }

  & h3+div {
    border-left: .2rem solid light-dark(#7C5624, #E8D19E);
    padding: .8rem;
  }
}

ul ::marker {
  color: light-dark(#7C5624, #E8D19E);
}

a.primary {
  font-weight: 700;
}

p:has(.primary) {
  margin-bottom: 0;
}

p:has(.primary)+p {
  margin: 0;
}

p:has(.primary)+p+ul {
  margin-top: 0;
  margin-bottom: .5rem;
}

/*

Below scrollable region code is CC-BY-SA Adrian Roselli: https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html

*/

[role="region"][aria-labelledby][tabindex] {
  overflow: auto;
}

[role="region"][aria-labelledby][tabindex]:focus {
  outline: .2em solid light-dark(#7C5624, #E8D19E);
  outline-offset: .2em;
}

/* End of Adrian’s code */

table {
  font-variant-numeric: tabular-nums;
}

table,
th,
td {
  border: 1px solid light-dark(#7C5624, #E8D19E);
  border-collapse: collapse;
  vertical-align: top;
}

th,
td,
caption {
  text-align: left;
  padding: .35em;
}

td:has(.score) {
  text-align: center;
}

thead th {
  background-color: light-dark(#7C5624, #E8D19E);
  color: light-dark(#fff, #000);
}

caption {
  font-weight: 700;
}

.pill {
  --color: light-dark(#000, #fff);
  --pill-color: light-dark(#CBD3D0, #55625C);
  color: var(--color);
  border: 1px solid var(--color);
  background-color: var(--pill-color);
  padding: .15em .5em;
  border-radius: 1em;
  font-size: .9em;
  letter-spacing: 1px;
  font-weight: 500;
}


.completed {
  --pill-color: light-dark(#6DC9A0, #167A46);
}

.friction {
  --pill-color: light-dark(#E8D19E, #7C5624);
}

.workaround {
  --pill-color: light-dark(#B3BCF1, #2F3ABF);
}

.blocked {
  --pill-color: light-dark(#E8738B, #B01E38);
}

img[src^="data"] {
  max-width: 100%;
}

:is(h1,h2,h3,h4,h5,h6):empty {
  display: none;
}