/*
 * The feed page, and the pages a single post lives on.
 *
 * ### One column, and why it is narrow
 *
 * The feed is a single column at reading width rather than a grid of cards. Posts arrive in time order and
 * are read in time order; two columns would ask the reader to decide which one continues the sequence, and
 * the answer changes as the column heights change. The width is capped well below the page width for the
 * same reason `--measure` exists: a line of text 120 characters long is hard to come back from.
 *
 * ### The "new posts" notice
 *
 * The feed does not reorder itself under the reader's eyes. When the poll finds newer posts it reveals a
 * notice at the top and waits to be pressed — inserting them silently moves everything down mid-sentence,
 * and doing it while somebody is typing a comment costs them the comment (§34).
 *
 * The notice ships in the page with `hidden` on it, so the script has an element to reveal rather than one to
 * build: markup built in JavaScript is markup that is not in this stylesheet's reach and not in the
 * translation files either.
 */

.feed-page {
    max-width: 42rem;
    margin-inline: auto;
    padding-top: var(--space-2);
}

.feed-page__title {
    margin-top: 0;
    margin-bottom: var(--space-5);
}

.feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.feed__fresh {
    display: flex;
    justify-content: center;
    margin: 0;
}

/* Sticky, because the notice is only useful where the reader is: they will be well down the column by the
   time new posts exist, and a notice at the top of a page nobody is looking at is a notice nobody reads. */
.feed__fresh-button {
    position: sticky;
    top: var(--space-4);
    z-index: var(--layer-header);
    box-shadow: var(--shadow-md);
    transition:
        box-shadow var(--duration-base) var(--easing),
        transform var(--duration-base) var(--easing);
}

.feed__fresh-button:hover {
    box-shadow: var(--shadow-lg);
}

.feed__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* A card arriving at the top of the list — whether by the composer or by the new-posts button — is
   placed rather than dropped: one short settle from above. The first card settles the same way when
   the page loads, which is the same moment seen once. The duration token zeroes under reduced motion,
   so the settle honours that setting without a media query of its own. */
.feed__list > :first-child {
    animation: feed-item-arrive var(--duration-base) var(--easing);
}

@keyframes feed-item-arrive {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.post-page {
    max-width: 42rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.post-page__comments {
    scroll-margin-top: var(--space-6);
}

.post-page__comments-title {
    margin-top: 0;
    font-size: var(--text-lg);
}

.post-edit {
    max-width: 42rem;
    margin-inline: auto;
}

.post-edit__title {
    margin-top: 0;
}

.post-edit__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* The sentence explaining that an edit is recorded and shown. Quiet, but under the buttons rather than above
   them: it describes what pressing "save" will do, and it is read last. */
.post-edit__note {
    margin-top: var(--space-4);
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}