/*
 * The tag page: one hashtag's latest posts, as the viewer may read them.
 *
 * The list itself is the feed's — same cards, same spacing, same load-more — so this file only owns
 * the header: the tag's name, how much has been posted under it, and the scope toggle between
 * "everywhere" and "near you".
 *
 * ### The scope toggle
 *
 * Two links, one active. They are addresses, not switches — pressing one navigates, which is why
 * the toggle works with the script layer blocked and why a shared link to the local view still
 * shows what it says. The active one is marked by weight and colour rather than by movement, so
 * switching scopes never reflows the page under the reader.
 */

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

.tag-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
}

.tag-page__title {
    margin: 0;
    overflow-wrap: anywhere;
}

.tag-page__count {
    margin: var(--space-1) 0 0;
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}

/* A quiet segmented control: two links sharing one border, the active one filled. */
.tag-page__scope {
    display: inline-flex;
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.tag-page__scope-link {
    padding: var(--space-2) var(--space-4);
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
    text-decoration: none;
    transition:
        background-color var(--duration-fast) var(--easing),
        color var(--duration-fast) var(--easing);
}

.tag-page__scope-link + .tag-page__scope-link {
    border-inline-start: var(--border-width) solid var(--colour-border);
}

.tag-page__scope-link:hover {
    background-color: var(--colour-surface-sunken);
    color: var(--colour-ink);
}

.tag-page__scope-link.is-active {
    background-color: var(--colour-primary-surface);
    color: var(--colour-primary);
    font-weight: var(--weight-medium);
}

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