/* Directory: Microsoft 365 / Google Workspace sign-in and staff sync.
   Loaded on directory pages and the sign-in page. No inline styles (strict CSP). */

.sso-buttons { display: grid; gap: .75rem; }
.sso-buttons form { margin: 0; }
.sso-or { display: flex; align-items: center; gap: .75rem; color: var(--muted); }
.sso-or::before, .sso-or::after { content: ""; flex: 1; border-top: 1px solid var(--line-2); }

.dir-steps { margin: 0; padding-left: 1.4rem; display: grid; gap: .9rem; max-width: 75ch; }
.dir-steps li::marker { font-weight: 700; color: var(--green-2); }

/* Values the club's IT person copies (client IDs, scopes). Long values wrap. */
.dir-value { display: block; padding: .5rem .75rem; background: var(--paper);
  border: 1px solid var(--line-2); border-radius: 6px; font-family: ui-monospace,
  SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; overflow-wrap: anywhere;
  user-select: all; }

.dir-status { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.dir-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dir-actions form { margin: 0; }

.dir-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem; }
.dir-count { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: .75rem 1rem; }
.dir-count strong { display: block; font-size: 1.6rem; color: var(--green); }

.dir-change-add { border-left: 6px solid var(--green-3); }
.dir-change-archive { border-left: 6px solid var(--gold-d); }

@media print {
  .dir-actions { display: none; }
}