/* Contacts: only what is the app's own; everything else is the design
   system's (ridderholt-ui), and uses its tokens only. */

/* ---- Sign-in */
.signin { gap: var(--space-5); }
.google-button { display: flex; align-items: center; justify-content: center; gap: var(--space-4); width: 100%; height: 44px; padding: 0 var(--space-5);
  border: 1px solid #747775; border-radius: var(--radius-2); background: #ffffff; color: #1f1f1f; font-weight: var(--weight-medium); }
.google-button:hover { background: #f2f2f2; text-decoration: none; }
.google-mark { flex: none; }
[data-theme="dark"] .google-button { background: #131314; border-color: #8e918f; color: #e3e3e3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .google-button { background: #131314; border-color: #8e918f; color: #e3e3e3; } }

form.inline { display: inline; }

/* ---- Connecting an assistant (mcpauth's consent page) */
.mcpauth-consent { display: grid; gap: var(--space-3); }
.mcpauth-consent dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.mcpauth-consent dd { margin: 0; }
.mcpauth-note, .mcpauth-warning { padding: var(--space-3) var(--space-4); border-radius: var(--radius-2); font-size: var(--text-sm); }
.mcpauth-note { background: var(--surface-2); }
.mcpauth-warning { background: var(--warn-bg); color: var(--warn-fg); }
.mcpauth-consent form { display: flex; gap: var(--space-3); }
.mcpauth-consent button { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-2); background: var(--surface); color: var(--text);
  font: inherit; font-weight: var(--weight-medium); cursor: pointer; }
.mcpauth-consent button:hover { background: var(--surface-2); }
.mcpauth-consent button[value="allow"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.mcpauth-consent button[value="allow"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ---- A script's changes, for the person to accept or decline */
.changes { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); }
.changes li { overflow-wrap: anywhere; }
.changes .tool { color: var(--text-3); font-size: var(--text-sm); }
.changes .ok { color: var(--pass-fg); }
.changes .fail { color: var(--fail-fg); }
.decide { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---- Home, privacy and terms */
.prose { display: grid; gap: var(--space-3); max-width: 42rem; }
.prose h2 { margin-top: var(--space-4); }
.prose ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.copyable { overflow-wrap: anywhere; }