/* One compact card for every Clerk step, in the app's shape language: the
 * gate's fill card (app.css), the app's radius on fields and buttons, the
 * Google button a fill step darker, never an outline. Typography and spacing
 * live here; Clerk retains its headers, errors and provider footer. */
.gate {
  padding: clamp(16px, 4vw, 32px);
}
.gate .gate-card {
  width: min(25rem, 100%);
  padding: clamp(20px, 5vw, 32px);
  gap: 20px;
}
.gate-card .wordmark-symbol { animation: none; }
.gate.clerk-mode .gate-card > h1,
.gate.clerk-mode .gate-card > p {
  display: none;
}
#gate-clerk:not(:empty) {
  margin-top: 0;
}
#gate-clerk :is(.cl-rootBox, .cl-cardBox, .cl-card, .cl-main, .cl-form, .cl-formField, .cl-formFieldInputGroup) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#gate-clerk .cl-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#gate-clerk :is(.cl-cardBox, .cl-card) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
#gate-clerk .cl-card {
  padding: 0;
}
#gate-clerk .cl-main { gap: 20px; }
#gate-clerk .cl-form { gap: 20px; }
#gate-clerk .cl-header {
  align-items: flex-start;
  text-align: left;
}
#gate-clerk :is(.cl-headerTitle, .cl-headerSubtitle) {
  text-align: left;
}
#gate-clerk .cl-headerTitle {
  font-size: var(--sv-text-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.025em;
}
#gate-clerk .cl-headerSubtitle {
  margin-top: 6px;
  font-size: var(--ui-text);
  line-height: 1.5;
}
#gate-clerk :is(.cl-formFieldLabel, .cl-footerActionText, .cl-footerActionLink, .cl-dividerText) {
  font-size: var(--ui-text);
}
#gate-clerk :is(.cl-formFieldInput, .cl-formButtonPrimary, .cl-socialButtonsBlockButton) {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border-radius: var(--sv-radius);
  font-size: var(--sv-text-body); /* 16px: no zoom on iOS focus */
  box-shadow: none;
}
#gate-clerk .cl-formFieldInput {
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  background: var(--sv-surface);
  color: var(--sv-ink);
}
#gate-clerk .cl-socialButtonsBlockButton {
  border: 0;
  background: var(--sv-fill-3);
  color: var(--sv-ink);
}
#gate-clerk .cl-socialButtonsBlockButton:hover { background: var(--sv-fill-4); }
#gate-clerk :is(input, button, a):focus-visible {
  outline: 2px solid var(--sv-ink);
  outline-offset: 3px;
}
#gate-clerk .cl-formFieldInput::placeholder { color: var(--sv-ink-tertiary); }
#gate-clerk .cl-footer {
  padding: 16px 0 0;
  background: transparent;
}
#gate-clerk .cl-footerAction {
  padding: 0;
}

/* Why the gate is back (auth.js showGateNote): one line and one button. */
.gate-note {
  display: grid;
  gap: 16px;
  line-height: 1.5;
}
.gate-note[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .gate { padding: 24px 16px; }
  .gate .gate-card { background: transparent; padding: var(--sv-space-2) var(--sv-space-1); }
}