.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: 10px;
    line-height: 20px;
    border-radius: 10px;
    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 {
    border-color: color-mix(in srgb, var(--border), var(--secondary) 50%);
    background: var(--code-bg);
    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-search-toggle {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--secondary);
    opacity: 0.45;
    display: flex;
    align-items: center;
    transition: opacity 0.2s, color 0.2s;
}

.tag-search-toggle:hover,
.tag-filter-box.expanded .tag-search-toggle {
    opacity: 0.85;
    color: var(--primary);
}

.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 transparent;
    color: var(--primary);
    font-size: 13px;
    padding: 0;
    outline: none;
    width: 0;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: width 0.25s ease, max-width 0.25s ease, opacity 0.2s ease,
                padding 0.25s ease, border-color 0.2s;
}

.tag-filter-box.expanded #tag-search {
    width: 150px;
    max-width: 150px;
    opacity: 1;
    padding: 3px 0;
    border-bottom-color: var(--border);
    pointer-events: auto;
}

.tag-filter-box.expanded #tag-search:focus {
    border-bottom-color: var(--secondary);
}

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

.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;
    }
}