/* The app's own styles, on top of the Ridderholt design system. */

/* ---- 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; } }

/* ---- Admin */
form.inline { display: inline; }

/* ---- Jobs */
.badge-fail { background: transparent; box-shadow: inset 0 0 0 1px var(--fail-fg); color: var(--fail-fg); }
.job-head { margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.job-head .badge { margin-left: 0; }
.job-log { max-height: 60vh; min-height: 3em; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-xs); line-height: 1.5; }
.job-log:empty { display: none; }
.job-log .err { color: var(--fail-fg); }
.deploy-ref { margin-top: var(--space-4); }
.deploy-ref form { margin-top: var(--space-3); align-items: flex-end; flex-wrap: wrap; }

/* ---- App and servers */
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.plain-list .badge { margin-left: var(--space-2); }
.settings { max-width: var(--form-max); }
.token, .install { white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
#add form { align-items: flex-end; flex-wrap: wrap; }
.steps { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-4); }
.steps p { margin: 0 0 var(--space-2); font-size: var(--text-sm); }