/* chmod calculator - an rwx checkbox grid linked to octal / symbolic / command fields and a
   plain-English summary. Reuses base .copy-btn and .field tokens; colors come from theme
   tokens only (var(--surface) / --border / --text / --muted / --accent / --accent-weak). */

/* (visually-hidden text uses the shared base.css .sr-only utility) */

/* Permission grid: rows owner/group/other, columns read/write/execute. */
.chm-grid {
    border-collapse: collapse; width: 100%; max-width: 460px;
    margin: 8px 0 24px;
}
.chm-grid th, .chm-grid td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.chm-grid thead th {
    font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); font-weight: 600;
}
.chm-grid tbody th {
    text-align: left; color: var(--text); font-weight: 600;
}
.chm-grid .chm-grid-corner { border-bottom-color: transparent; }
.chm-grid tbody tr:last-child th,
.chm-grid tbody tr:last-child td { border-bottom: 0; }

.chm-bit {
    width: 22px; height: 22px; margin: 0;
    accent-color: var(--accent); cursor: pointer;
}
.chm-bit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Octal + symbolic fields side by side. */
.chm-fields {
    display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 240px);
    gap: 16px; margin-bottom: 16px;
}
@media (max-width: 480px) { .chm-fields { grid-template-columns: 1fr; } }

.chm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chm-label { font-size: 14px; color: var(--muted); font-weight: 600; }

.chm-input {
    width: 100%; box-sizing: border-box; padding: 12px;
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 18px; font-weight: 600; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    font-variant-numeric: tabular-nums;
}
.chm-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.chm-octal[aria-invalid="true"] { border-color: var(--bad); }
.chm-symbolic { letter-spacing: .06em; }
.chm-input[readonly] { color: var(--muted); }

/* Command row with copy button. */
.chm-command-row {
    display: flex; gap: 10px; align-items: stretch;
    max-width: 460px; margin-bottom: 16px;
}
.chm-command { flex: 1 1 auto; letter-spacing: .02em; }
.chm-copy { flex: 0 0 auto; align-self: stretch; }

.chm-summary {
    margin: 0; color: var(--muted); font-weight: 600; font-size: 16px;
}