/*
 * Rodauth OAuth consent screen (app/views/rodauth/authorize.rb).
 */

.consent-intro { margin: 0; color: var(--text-muted, #6b7280); line-height: 1.5; }
.consent-intro strong { color: var(--dark-gray, #343a40); }

.consent-gym {
  padding: 0.625rem 0.875rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--dark-gray, #343a40);
  background: color-mix(in oklch, var(--primary-color, #007bff) 8%, white);
  border: 1px solid color-mix(in oklch, var(--primary-color, #007bff) 25%, transparent);
  border-radius: 0.375rem;
}

.consent-scopes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.consent-scope {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--secondary-color, #6c757d);
  border-radius: 0.375rem;
  background: var(--surface-white, #fff);
}
.consent-scope-label { color: var(--dark-gray, #343a40); line-height: 1.4; }
.consent-scope-code {
  flex: none;
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  background: color-mix(in oklch, var(--secondary-color, #6c757d) 12%, white);
  padding: 0.0625rem 0.375rem; border-radius: 0.25rem;
}

@media (max-width: 480px) {
  .consent-scope { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}