/*
 * The load-more control.
 *
 * The control is an `<a href>` carrying the real URL of the next page, so it works before the script loads and
 * the script takes it over. That is why it is styled as a button rather than being one: the fallback has to be
 * a navigation, and a navigation is a link.
 *
 * Beneath it is a status paragraph with `role="status"`, empty in the resting state. It exists so a fetch that
 * fails has somewhere to say so out loud instead of merely not painting anything (§92). Because it is empty
 * to begin with, it must not reserve a line — hence the `:empty` rule, which is safe here: the element is
 * written with no whitespace inside it.
 */

.load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-5);
}

.load-more__status {
    margin: 0;
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
    text-align: center;
}

.load-more__status:empty {
    display: none;
}

/* While a page is in flight the button stays exactly where it is and stops inviting a second press. The
   attribute is set by the script: the state belongs to the element, not to a class somebody has to remember
   to remove. */
.load-more[data-loading="true"] .load-more__link {
    pointer-events: none;
    opacity: 0.6;
}