/* ── Divider ─────────────────────────────────────────── */
.card-divider {
    border: none;
    border-top: 1px solid var(--divider-color);
    margin: 20px 0;
}

/* ── Toggle button ───────────────────────────────────── */
#toggle-projects-btn {
    background: var(--toggle-bg);
    border: 1px solid var(--card-border);
    color: var(--toggle-color);
    font-family: var(--font);
    font-size: 0.75rem;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#toggle-projects-btn:focus-visible {
    outline: 2px solid var(--toggle-outline);
    outline-offset: 3px;
}

#toggle-projects-btn:hover,
#toggle-projects-btn.active {
    background: var(--toggle-bg-hover);
    border-color: var(--toggle-border-hover);
    color: var(--toggle-color-hover);
}

.project-card.hidden {
    display: none !important;
}

/* ── Commit pills ────────────────────────────────────── */
.commit-info {
    margin: 4px 0 12px;
}

.update-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--pill-bg);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    text-decoration: none;
    color: var(--pill-color);
    transition: background 0.2s;
}

.update-pill:hover {
    background: var(--pill-bg-hover);
}

.dot-recent {
    width: 8px;
    height: 8px;
    background-color: var(--dot-recent-color);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.dot-recent::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--dot-recent-color);
    border-radius: 50%;
    animation: pulse-red 2s infinite ease-out;
}

@keyframes pulse-red {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    70% {
        transform: scale(3.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}