/* Gate card, members form states, sign-in. Kit tokens only. Ported from docs/mockup/gate.css; Ghost's form classes replace the demo hide/show. */
.gate { font-size: var(--jp-typography-scale-03); margin-block: var(--jp-size-space-800); }
.gate .jp-btn-row { align-items: center; }
.gate-note { margin: 0; color: var(--jp-color-text-default-secondary); font: var(--jp-typography-weight-ui) var(--jp-typography-scale-02)/var(--jp-lh-label-x) var(--jp-font-ui); }
.gate-ok { display: flex; align-items: flex-start; gap: var(--jp-size-space-200); margin: 0; font: var(--jp-typography-weight-ui) var(--jp-typography-scale-03)/var(--jp-lh-label-x) var(--jp-font-ui); }
.gate-ok .jp-ic { color: var(--jp-color-icon-positive-default); margin-block-start: calc((1em * var(--jp-lh-label-x) - var(--jp-size-glyph-medium)) / 2); }
.gate-hint { margin: 0; color: var(--jp-color-text-default-secondary); font: var(--jp-typography-weight-ui) var(--jp-typography-scale-02)/var(--jp-lh-label-x) var(--jp-font-ui); }
/* Ghost states: .success swaps the fields for the confirmation, .error shows the message */
.gate-form:not(.success) .gate-done, .gate-form:not(.error) .gate-error { display: none; }
.gate-form.success [data-hide-on-success] { display: none; }
.gate-signin { inline-size: min(100%, 28rem); margin-inline: auto; padding-block: 0; display: grid; gap: var(--jp-size-space-600); }
.gate-signin h1 { margin: 0; }
/* sign-in sits vertically centred in the main area (the main grows to fill the viewport) */
.view:has(> .gate-signin) { display: grid; align-content: center; }
@media (max-width: 640px) {
  .gate { margin-block: var(--jp-size-space-800); }
  .gate-signin { gap: var(--jp-size-space-400); }
}