:root
{
    font-family: system-ui, sans-serif;
    color-scheme: light dark;
    color: #202124;
    background: #f5f6f8;
}

main
{
    max-width: 60rem;
    margin: 3rem auto;
    padding: 0 1rem;
}

h1
{
    margin-bottom: 2rem;
}

.service-group
{
    margin-bottom: 2rem;
}

.service-list
{
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.service-card
{
    background: white;
    border: 1px solid #d9dce1;
    border-radius: 0.5rem;
    padding: 1rem;
}

.service-heading
{
    align-items: center;
    display: flex;
    gap: 0.6rem;
}

.service-heading h3
{
    margin: 0;
}

.led
{
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 0.8rem;
    height: 0.8rem;
    width: 0.8rem;
}

.led-good
{
    background: #1b9e4b;
}

.led-bad
{
    background: #d93434;
}

.led-other
{
    background: #e0a21a;
}

.led-na
{
    background: #858b94;
    opacity: 0.45;
}

.status-label
{
    color: #59616d;
    font-size: 0.9rem;
    font-weight: 600;
}

.empty
{
    color: #59616d;
}