.rights-grid-page {
  padding: var(--space-6, 1.5rem);
}

.rights-grid__intro,
.rights-grid__bypass {
  color: var(--text-light);
  max-width: 60ch;
}

.rights-grid__bypass {
  background: var(--surface-sunken);
  border-left: 3px solid var(--accent);
  padding: var(--space-4, 1rem);
  border-radius: 4px;
}

.rights-grid__scroll {
  overflow-x: auto;
  margin: var(--space-6, 1.5rem) 0;
}

.rights-grid {
  border-collapse: collapse;
  font-size: 0.875rem;
}

.rights-grid th,
.rights-grid td {
  border: 1px solid var(--border-neutral);
  padding: var(--space-2, 0.5rem);
  text-align: center;
}

.rights-grid thead th {
  background: var(--surface-sunken);
  font-weight: 500;
  white-space: nowrap;
}

.rights-grid thead th code {
  font-size: 0.75rem;
  color: var(--text-light);
}

.rights-grid tbody th {
  text-align: left;
  white-space: nowrap;
  background: var(--surface-sunken);
}

.rights-grid__cell--undeclared {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    var(--border-light) 4px,
    var(--border-light) 5px
  );
}

.rights-grid__void {
  color: var(--text-faint);
  cursor: default;
}

.rights-grid__form {
  display: inline;
  margin: 0;
}

.rights-grid__toggle {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}

.rights-grid__toggle:hover {
  background: var(--surface-sunken);
}

.rights-grid__toggle--on {
  background: var(--success-quiet);
  color: var(--success);
  font-weight: 600;
}

.rights-grid__toggle--inherited {
  color: var(--success);
  opacity: 0.5;
}

.rights-grid__toggle--derogated-on {
  background: var(--success-quiet);
  border-color: var(--success);
  color: var(--success);
  font-weight: 700;
}

.rights-grid__toggle--derogated-off {
  background: var(--danger-quiet);
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 700;
}

.rights-grid__legend {
  list-style: none;
  padding: 0;
  color: var(--text-light);
  font-size: 0.875rem;
}

.rights-grid__legend li {
  margin-bottom: var(--space-2, 0.5rem);
}

.rights-grid__legend .rights-grid__toggle {
  cursor: default;
  vertical-align: middle;
}

.user-derogations a {
  color: var(--text-light);
  font-size: 0.875rem;
}