/* Consent screen for the client-authentication platform
   (public/assets/js/pages/authorize.js). Kept in its own file rather than
   appended to components.css since it's a small, self-contained set of
   rules specific to one page. */

.authorize-body { display: grid; gap: var(--space-5); margin-top: var(--space-2); }
.authorize-loading { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 13px; }
.authorize-loading svg { width: 16px; height: 16px; animation: spin 1.1s linear infinite; }

.authorize-detail { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.02); }
.authorize-detail__label { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.authorize-detail__value { color: var(--text-strong); font-size: 14px; font-weight: 600; }

.authorize-permissions { display: grid; gap: 10px; }
.authorize-permissions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.authorize-permissions li { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 13.5px; }
.authorize-permissions li svg { width: 16px; height: 16px; flex: none; color: var(--teal); }

.authorize-actions { display: flex; gap: 10px; margin-top: var(--space-6); }
.authorize-actions .button { flex: 1; }