/*
 * App-specific styling for the projects dashboard. Everything reuses the
 * brand-kit's --gooo-* tokens so it stays visually consistent with the shared
 * chrome; only the CI-status colors are introduced here since the brand kit
 * doesn't ship a semantic "success/failure" palette.
 */

.gooo-page-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--gooo-text-strong);
    margin: 0 0 0.35rem;
}

.gooo-page-lede {
    color: var(--gooo-muted);
    margin: 0 0 1.5rem;
    max-width: 60ch;
}

.gooo-page-lede a {
    color: var(--gooo-accent);
    text-decoration: none;
}

.gooo-page-lede a:hover {
    text-decoration: underline;
}

.gooo-project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.gooo-project-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.gooo-project-card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gooo-project-card__icon {
    font-size: 1.2rem;
    line-height: 1;
}

.gooo-project-card__name {
    font-weight: 600;
    color: var(--gooo-text-strong);
}

.gooo-project-card__desc {
    margin: 0;
    color: var(--gooo-muted);
    font-size: 0.86rem;
    flex: 1;
}

.gooo-project-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gooo-project-card__link {
    align-self: flex-start;
}

.gooo-dot-inline {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}

.gooo-badge--ci-success { color: #34d399; border-color: rgba(52, 211, 153, 0.35); }
.gooo-badge--ci-failure { color: var(--gooo-danger); border-color: rgba(251, 113, 133, 0.35); }
.gooo-badge--ci-running { color: var(--gooo-accent); border-color: rgba(125, 211, 252, 0.35); }
.gooo-badge--ci-none,
.gooo-badge--ci-unknown { color: var(--gooo-faint); }

.gooo-badge--status-up { color: #34d399; border-color: rgba(52, 211, 153, 0.35); }
.gooo-badge--status-down { color: var(--gooo-danger); border-color: rgba(251, 113, 133, 0.35); }
.gooo-badge--status-unknown { color: var(--gooo-faint); }