/* Tri-state row: make it feel like the checklist controls */
.tri-controls {
    gap: .5rem;
}

.tri-group .btn {
    min-width: 64px;
}
/* equal width OK/Not OK/— */
.tri-group.is-na {
    opacity: .45;
}
/* grey out when N/A */
.check-text.is-na {
    opacity: .45;
}

.na-label.is-na {
    opacity: .65;
}

/* Tri-state: compact segmented pill */
.tri-controls {
    gap: .5rem;
}

.tri-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 999px;
    overflow: hidden;
    height: 26px;
    background: #fff;
}

.tri-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 26px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    background: transparent;
    color: #212529;
    border-left: 1px solid #ced4da;
}

.tri-group label.tri-btn:first-of-type {
    border-left: 0;
}

/* Selected */
.tri-radio:checked + .tri-btn {
    background: #e9ecef;
}

/* OK selected = green */
.tri-radio[value="true"]:checked + .tri-btn {
    background: #198754;
    color: #fff;
}

/* Not OK selected = red */
.tri-radio[value="false"]:checked + .tri-btn {
    background: #dc3545;
    color: #fff;
}

/* When N/A: force neutral look (override green/red) */
.tri-group.is-na {
    background: #e9ecef !important;
    border-color: #ced4da !important;
}

    .tri-group.is-na .tri-btn {
        background: transparent !important;
        color: #adb5bd !important; /* light grey text */
    }

    /* even if checked, do NOT show green/red while N/A */
    .tri-group.is-na .tri-radio:checked + .tri-btn {
        background: transparent !important;
        color: #adb5bd !important;
    }

/* Common N/A visuals */
.check-text.is-na {
    opacity: .45;
}

.na-label.is-na {
    opacity: .65;
}
.check-comment {
    min-width: 220px;
}