/*
 * Privacy settings, and the blocked and muted lists.
 *
 * ### Visibility is a set of radios, not a menu
 *
 * Each level needs a sentence explaining what it does — who can see the posts, whether a follow becomes a
 * request — and a `<select>` has nowhere to put three sentences. Radios show all three answers and all three
 * explanations at once, which is what somebody deciding between them needs to read (§92). The options come
 * from `Visibility::all()`, so the styling must not assume there are exactly three.
 *
 * ### Two lists, deliberately different
 *
 * A muted account is still an account you can visit: its rows use the `person` component and link to the
 * profile. A blocked account is a 404 to the blocker as well, so its rows draw the identity flat, with no
 * link — a control that leads to "not found" reads as the block having broken something rather than as it
 * having worked (§16, §17). That difference is in the markup; this file only avoids contradicting it, which
 * is why there is no hover rule that would make a blocked row look pressable.
 *
 * ### The count is a server-rendered number
 *
 * Each list page prints how many rows there are, and the block and unblock endpoints return the new figure so
 * the script can correct it after a change. Nothing here counts DOM nodes: a page is one page of a list, and
 * counting what is on screen would report the page size as the total.
 */

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

.privacy__section + .privacy__section {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--colour-border);
}

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

/* A fieldset with no frame: the legend is hidden because the heading above already says what these are, and
   the browser's default border would draw a box around a box. */
.privacy__options {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.privacy__error,
.privacy__status {
    margin: var(--space-3) 0 0;
}

.privacy__status {
    color: var(--colour-success);
    font-size: var(--text-sm);
}

/* Empty until the save reports back, so it must not hold a line open. `role="status"` still works: the
   element is in the document, it is only unpainted. */
.privacy__status:empty {
    display: none;
}

.privacy__links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Label on the leading edge, count on the trailing one, so the two counts line up under each other and can be
   compared at a glance. */
.privacy__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
}

.privacy__link:hover {
    border-color: var(--colour-primary);
    background-color: var(--colour-surface-sunken);
}

.privacy__link-label {
    font-weight: var(--weight-medium);
}

/* Label and hint stack inside the card so the tile reads as one destination; the count or the
   chevron stays on the trailing edge where the eye expects the "how many / where to". */
.privacy__link-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.privacy__link-hint {
    margin: 0;
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}

.privacy__link-chevron {
    flex-shrink: 0;
    color: var(--colour-ink-faint);
}

/* ---- The blocked and muted lists ------------------------------------------------------------ */

.blocks,
.mutes {
    max-width: 42rem;
    margin-inline: auto;
}

.blocks__header,
.mutes__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.blocks__title,
.mutes__title {
    margin: 0;
}

.blocks__count,
.mutes__count {
    margin: 0;
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}

.blocks__intro,
.mutes__intro {
    color: var(--colour-ink-quiet);
    max-width: var(--measure);
}

.blocks__list,
.mutes__list {
    margin: var(--space-5) 0 0;
}

.blocks__back,
.mutes__back {
    margin-top: var(--space-5);
}

.blocks__back-link,
.mutes__back-link {
    font-size: var(--text-sm);
}