/*
 * A working card on the left, a column of explanation on the right.
 *
 * The shape of a page that is opened rarely and has to say what it is for before it is used:
 * settings, installation, anything the owner meets twice a year. Pages of everyday objects need
 * no captions and do not use this.
 */

/*
 * Two columns: the working half and the reading half.
 *
 * `align-items: start` and not the `stretch` of .app-cards — the explanation is text, and text
 * stretched to the height of a table would hang its last line in the middle of nothing.
 */
.app-explain {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-5);
}

/*
 * The same shape where the left half carries a table rather than a short list. A table cut to
 * half a screen scrolls sideways inside its box, so it takes two thirds; the text is capped at
 * 68ch by .app-note anyway and gains nothing from more.
 */
.app-explain--wide {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

/* Several cards in the working half, at the gap of a row of cards. */
.app-explain__stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

/*
 * The wide shape folds earlier than the plain one: what has to fit on the left is a table, and
 * folding hands it the whole width — the answer to the sideways scroll rather than a compromise.
 */
@media (max-width: 1240px) {
    .app-explain--wide {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Below this two columns of thirty characters are harder to read than one column of sixty. */
@media (max-width: 1080px) {
    .app-explain {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * The explanation itself: not a card.
 *
 * A card is an object the owner acts on (core.md §4.9, §4.12). A paragraph saying what a page does is
 * not one, and a border around it would put it on the same footing as the thing it explains.
 */
.app-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-3);
}

/*
 * The heading of the column: the smallest type in the system, muted and semibold — it must not
 * compete with the title of the card beside it, because it names a footnote. Sentence case, no
 * tracking: core.md §17.8 allows no capitals in captions.
 */
.app-aside__title {
    color: var(--text-3);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}

/* The button an explanation offers stands under its own paragraph, not stretched across it. */
.app-aside__action {
    align-self: flex-start;
    margin-top: var(--space-1);
}