about/static/css/plugin-services.css

.services-section .plugin-header {
    border: none !important;
    box-shadow: none !important;
    align-items: center;
}

.services-header { display: flex; gap: 12px; }

.services-header__meta {
    display: flex; align-items: center; gap: 10px; margin-left: auto;
    font-size: 12px; color: var(--muted);
}

.services-updated {
    padding: 4px 8px; border-radius: 999px;
    background: rgba(255,255,255,.04); border: 1px solid var(--edge-0);
    font-weight: 700;
}
.services-section[data-stale="true"] .services-updated {
    color: var(--warn);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--warn) 20%, transparent) inset;
}

.services-legend { display: none; }
@media (min-width: 680px) {
    .services-legend { display: flex; align-items: center; gap: 8px; }
}
.legend-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 999px; font-weight: 700;
    color: var(--ink-2); background: rgba(255,255,255,.03); border: 1px solid var(--edge-0);
}

.services-grid {
    --min: 240px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min), 1fr));
    gap: 12px; margin-bottom: 16px;
}
.services-section.is-compact .services-grid { --min: 220px; gap: 10px; }

/* Full-card link overlay */
.card-overlay {
    position: absolute; inset: 0; border-radius: inherit; z-index: 1; opacity: 0;
}

/* Card */
.service-item {
    position: relative;
    padding: 12px 14px;
    border-radius: 14px;
    background:
            linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.01)),
            radial-gradient(120% 100% at 0% 0%, rgba(122,162,255,.06), transparent 40%) border-box;
    box-shadow: inset 0 0 0 1px var(--edge-0);
    transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease;
    cursor: pointer; overflow: hidden; isolation: isolate;
}

.service-item::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--muted); opacity: .35;
    transition: opacity .2s ease, background .2s ease, box-shadow .2s ease;
}
.service-item[data-status="online"]::before {
    background: var(--good); opacity: 1;
    box-shadow: 0 0 10px color-mix(in oklab, var(--good) 40%, transparent);
}
.service-item[data-status="offline"]::before {
    background: var(--bad); opacity: 1;
    box-shadow: 0 0 10px color-mix(in oklab, var(--bad) 40%, transparent);
}

.service-item:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px var(--edge-1), 0 6px 22px rgba(0,0,0,.28);
    background:
            linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.016)),
            radial-gradient(120% 100% at 0% 0%, rgba(122,162,255,.08), transparent 42%) border-box;
}

/* Header */
.service-head {
    display: grid; grid-template-columns: 22px 1fr;
    gap: 10px; align-items: center; margin-bottom: 6px;
}
.service-icon { width: 20px; height: 20px; font-size: 16px; line-height: 1; text-align: center; filter: grayscale(.2); }
.service-item[data-status="online"] .service-icon { filter: none; }

.service-id { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.service-title, .service-title-link {
    color: var(--ink); font-weight: 800; font-size: 14px; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s ease;
}
.service-title-link { cursor: default; }
.service-item:hover .service-title, .service-item:hover .service-title-link { color: var(--accent); }

/* Status chip — no heartbeat */
.service-statuschip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800;
    background: rgba(255,255,255,.03); border: 1px solid var(--edge-0); line-height: 1;
}
.service-statuschip .status-label { color: var(--ink-2); letter-spacing: .2px; }
.status-dot {
    --s: 10px; width: var(--s); height: var(--s); border-radius: 50%;
    background: #888; border: 2px solid rgba(0,0,0,.25);
}
.status-online { background: var(--good) !important; }
.status-offline { background: var(--bad) !important; }

/* Description */
.service-description {
    color: var(--ink-2); font-size: 12px; margin-bottom: 8px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Stats */
.service-stats {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-family: var(--mono);
}
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: var(--muted);
    padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.03); border: 1px solid var(--edge-0);
}
.chip-rt { color: var(--good); }
.chip-code[data-code^="2"] { color: var(--good); }
.chip-code[data-code^="3"] { color: var(--warn); }
.chip-code[data-code^="4"], .chip-code[data-code^="5"] { color: var(--bad); }
.chip-last { color: var(--ink-2); }

/* Keep skeleton shimmer (not the heartbeat) */
.chip-skeleton { position: relative; color: transparent !important; }
.chip-skeleton::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,.06) 80%);
    background-size: 200% 100%; animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Summary */
.services-summary {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; padding: 14px; border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    box-shadow: inset 0 0 0 1px var(--edge-0);
}
.summary-item {
    display: grid; place-items: center; gap: 4px; padding: 10px; border-radius: 10px;
    background: rgba(255,255,255,.02); transition: background .2s ease, transform .12s ease;
}
.summary-item:hover { background: rgba(255,255,255,.04); transform: translateY(-1px); }
.summary-label { font-size: 10px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.summary-count { font-size: 20px; font-weight: 900; font-family: var(--mono); line-height: 1; }
.online-count { color: var(--good); text-shadow: 0 0 12px rgba(58,211,139,.25); }
.offline-count { color: var(--bad); text-shadow: 0 0 12px rgba(255,107,107,.25); }
.total-count { color: var(--accent); text-shadow: 0 0 12px rgba(122,162,255,.25); }

/* No services */
.no-services { text-align: center; padding: 32px 20px; color: var(--muted); }
.no-services p { margin: 6px 0; font-size: 13px; }

/* Responsive */
@media (max-width: 1200px) { .services-grid { --min: 220px; gap: 10px; } }
@media (max-width: 900px)  { .services-grid { --min: 200px; gap: 8px; } .services-summary { gap: 10px; padding: 12px; } .summary-count { font-size: 18px; } }
@media (max-width: 780px)  { .services-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .service-item { padding: 10px 12px; } .service-description { -webkit-line-clamp: 1; } }
@media (max-width: 520px)  { .services-grid { grid-template-columns: 1fr; gap: 8px; } .services-summary { gap: 8px; padding: 10px; } .summary-item { padding: 6px; } .summary-count { font-size: 16px; } }

/* Screen-reader only helper */
.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}