.article {
    display: grid;
    grid-template-columns: 12rem auto;
    grid-template-areas: "sidebar content";
    margin-inline: 5rem;
}

.article-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.article header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    padding-block-end: 3rem;
}

.article article {
    grid-area: content;
    box-shadow: 0 5px 15px 0px rgb(0 0 0 / 0.1);
    padding: 1rem;
}

.article aside {
    grid-area: sidebar;
}

a {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

.article .toc {
    font-size: 1.2rem;
}

.article .toc ol {
    list-style: none;
    padding-inline-start: 0;
}

.article ol.toc-subsection {
    padding-inline-start: 1rem;
}

.article-edit {
    margin: auto;
    width: 60vw;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

.article-edit form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.article-edit-text {
    width: 100%;
    height: 30rem;
    resize: none;
}

.articles {
    display: flex;
    flex-direction: column;
    width: 40vw;
    margin: auto;
}

.articles ul {
    list-style: none;
    padding-inline-start: 0;
}

.articles li {
    padding-block: 0.5rem;
}

.articles hr {
    width: 100%;
}

.articles header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

h1 {
    margin-block-end: 0;
}

.article-edit input,
.article-edit textarea {
    padding: 0.2rem;
}

.article .ref-tooltip {
  transition: opacity 200ms, visibility 200ms;
  position:absolute;
  display: none;
  opacity: 0;
  top: 0;
  left: 0;
  box-shadow: 0 5px 15px 0px rgb(0 0 0 / 0.1);
  padding: .5rem;
  background-color: white;
}

.article .ref-tooltip.shown {
  display: block;
  opacity: 1;
}

.article .citation {
    cursor: pointer;
}

@media (width < 48rem) {
    .article {
        grid-template-columns: 0 auto;
        margin-inline: 1rem;
    }

    .article .toc {
        display: none;
    }
    .article-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .articles {
        width: auto;
        margin: 3rem;
    }
}