.entry-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    position: relative;
    z-index: 1;
}

.entry-footer .post-tags {
    margin-left: auto;
    padding-left: 12px;
    justify-content: flex-end;
}

.post-tags a.post-tag {
    padding: 0 7px;
    font-size: 11px;
    line-height: 20px;
    border-radius: 6px;
    border-color: color-mix(in srgb, var(--border), var(--secondary) 35%);
    background: color-mix(in srgb, var(--code-bg) 55%, var(--theme));
    color: var(--secondary);
    opacity: 0.6;
    cursor: pointer;
    transition: color 0.15s, opacity 0.15s, background 0.15s;
    user-select: none;
}

.post-tags a.post-tag.active {
    background: color-mix(in srgb, var(--code-bg) 85%, var(--theme));
    color: var(--primary);
    opacity: 1;
}

/* Hover only on devices that truly support it — otherwise touchscreens keep the
   hover state stuck on a tag after it's tapped (e.g. when deselecting). */
@media (hover: hover) {
    .post-tags a.post-tag:hover {
        background: color-mix(in srgb, var(--code-bg) 85%, var(--theme));
        color: var(--primary);
        opacity: 1;
    }
}

/* During a light/dark toggle, suppress every transition for one frame so the
   whole page changes palette together instead of some elements animating late. */
body.theme-switching * {
    transition: none !important;
}

.tag-filter-box {
    display: none;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    padding: 0 var(--gap);
}

.tag-clear {
    background: none;
    border: none;
    padding: 0;
    color: color-mix(in srgb, var(--theme), var(--secondary) 55%);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: color 0.15s, opacity 0.15s;
}

.tag-clear:hover {
    color: var(--primary);
    opacity: 1;
}

.tag-clear[hidden] {
    display: none;
}

#tag-search {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--primary);
    font-size: 13px;
    padding: 3px 0;
    outline: none;
    width: 160px;
    transition: border-color 0.2s, width 0.2s;
}

#tag-search::placeholder {
    color: var(--secondary);
    opacity: 0.6;
}

#tag-search:focus {
    border-bottom-color: var(--secondary);
    width: 200px;
}

.post-entry.tag-hidden,
.first-entry.tag-hidden {
    display: none;
}

/* Pressing a tag chip shouldn't trigger the entry's scale-down press animation;
   opening the post (pressing anywhere else) still animates. */
.post-entry:has(.post-tag:active),
.first-entry:has(.post-tag:active) {
    transform: none;
}

.pager-footer[hidden] {
    display: none;
}

.pager-footer .page-indicator {
    flex: 1;
    text-align: center;
    align-self: center;
    color: var(--secondary);
    font-size: 14px;
}

.pager-footer .prev,
.pager-footer .next {
    cursor: pointer;
    user-select: none;
}

.pager-footer .disabled {
    visibility: hidden;
}

/* On narrow screens the date + tags don't fit on one footer line. Dissolve the
   footer (display: contents) so the date keeps its spot in the text column and
   the tags drop to their own full-width row beneath the post. The tags row is
   single-line: chips that don't fit are clipped (and faded at the edge) rather
   than wrapping. The rest of the layout is unchanged. */
@media screen and (max-width: 768px) {
    .post-entry .entry-footer,
    .first-entry .entry-footer {
        display: contents;
    }

    .post-entry .entry-footer > span,
    .first-entry .entry-footer > span {
        grid-column: 2;
        align-self: end;
    }

    .entry-footer .post-tags {
        grid-column: 1 / -1;
        margin: 8px 0 0;
        padding-left: 0;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to right, #000 90%, transparent);
        mask-image: linear-gradient(to right, #000 90%, transparent);
    }

    .entry-footer .post-tags a.post-tag {
        flex-shrink: 0;
    }
}