/* TOOLS / chmod_calculator — module-local styles only. */

.ch-grid {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.ch-grid th,
.ch-grid td {
    padding: 8px;
    text-align: center;
    border-top: 1px solid var(--border-soft);
}

.ch-grid thead th {
    border-top: none;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.ch-grid tbody th {
    text-align: left;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.ch-grid input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.ch-special {
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.ch-special-heading {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

/* Standard visually-hidden pattern — the grid's real labels are the column/row headers. */
.ch-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ch-command-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.ch-command {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-surface-alt);
    border-radius: var(--radius-md);
    font-family: var(--font-family-mono);
    font-size: 1.05rem;
    word-break: break-word;
}

[data-ch-status].is-error {
    color: var(--color-danger);
}

.tool-input-mono[aria-invalid="true"] {
    border-color: var(--color-danger);
}

@media (max-width: 720px) {
    .ch-grid th,
    .ch-grid td {
        padding: 6px 4px;
    }

    .ch-command-row {
        flex-wrap: wrap;
    }

    .ch-command {
        flex-basis: 100%;
    }
}