@media (max-width: 639px) {
  .non-mobile { display: none; }
  .mobile-only { display: initial; }
}

@media (min-width: 640px) {
  .non-mobile { display: initial; }
  .mobile-only { display: none; }
}

.native-trees {
  font-style: normal;
  font-size: 16px;
  line-height: 20px;

  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  scroll-behavior: smooth;

  nav {
    details {
      padding: 0.75em 0.75em 0.75em 1.5em;
      margin: 0 0 1em 0;
      border: 2px solid var(--border-color);
      border-radius: var(--border-radius, 6px);
    }

    ul {
      margin: 0;
      padding: 0 0 0 1rem;
      list-style: none;
    }

    .native-tree-item {
      border-left: 4px solid var(--border-color, #bababa);
      padding-left: 0.5em;
      margin-bottom: 0.75em;

      a {
        font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
      }
    }

    .native-tree-scientific-name {
      display: block;
      text-decoration: none;
      font-size: 0.85rem;
      padding-left: 0.5em;
      font-family: initial;
    }
  }

  .trees-list {
    scroll-behavior: smooth;

    dl {
      dt {
        font: italic 0.925rem/1rem sarif;
        margin: 0.5em 0 0.25em;
      }

      dd {
        font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
      }
    }

    .native-tree {
      h2 {
        font-size: 2rem;
        line-height: 2.5rem;
        margin: 0 0 0.5em;
        padding-left: 0.25em;
        border-left: 0.125em solid var(--border-color, black);
      }

      h3 {
        font-size: 1.5rem;
        margin: 0 0 0.25em;
        font-style: italic;
      }
    }

    .tree-description {
      white-space: pre-line;
      font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    }
  }
}

@media (min-width: 640px) {
  .native-trees {
    flex-flow: row nowrap;
    justify-content: space-between;

    nav {
      flex-basis: 30%;
      position: sticky;
      align-self: start;
      top: 2rem;
      max-height: 90vh;
      overflow: scroll;
    }

    .trees-list {
      flex-basis: 66%;
    }
  }
}

.salicaceae {
  --border-color: green;
}