/* The sign-in pages: one card, centred on the page ground. */
body.auth {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--paper); color: var(--ink);
  font-family: var(--sans); display: grid; place-items: center; padding: var(--s-4);
  box-sizing: border-box;
}
.auth-card {
  width: 100%; max-width: 24rem; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: var(--s-6) var(--s-5); box-sizing: border-box;
}
.auth-card.auth-wide { max-width: 32rem; }
.auth-mark { display: inline-block; margin: 0 0 var(--s-5); padding: 0; }
.auth-card h1 { font-family: var(--serif); font-size: var(--t-h2); font-weight: 500; margin: 0 0 var(--s-4); }
.auth-card p { color: var(--ink-soft); line-height: 1.5; }
.auth-go { width: 100%; min-height: var(--tap); font-size: var(--t-body); }
.auth-error {
  margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--radius);
  background: var(--danger-bg); color: var(--danger); font-size: var(--t-small);
}
.auth-note { font-size: var(--t-small); }
.auth-code { font-size: var(--t-h3) !important; letter-spacing: 0.15em; text-transform: uppercase; }
.auth-scopes { padding-left: var(--s-5); line-height: 1.6; }
.auth-h2 {
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint); font-weight: 600; margin: var(--s-5) 0 var(--s-2);
}
.auth-apps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-2);
}
.auth-apps a {
  display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3);
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel-alt);
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.auth-apps a:hover { border-color: var(--accent); color: var(--accent); }
.auth-foot { margin-top: var(--s-6); justify-content: space-between; }