/* The preview gate shares the site's tokens without loading protected content. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: var(--space-xl) var(--space-md) var(--space-3xl);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  overflow-wrap: anywhere;
}

::selection {
  background: var(--color-brand-primary);
  color: var(--color-text-on-dark);
}

[hidden] {
  display: none !important;
}

:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.staging-brand,
.staging-access {
  inline-size: 100%;
  max-inline-size: 34rem;
  margin-inline: auto;
}

.staging-brand {
  color: var(--color-brand-primary);
  font-weight: 700;
}

.staging-access {
  margin-block-start: var(--space-3xl);
}

h1,
h2,
p {
  margin: 0;
}

h1,
h2 {
  color: var(--color-heading);
}

h1 {
  margin-block-end: var(--space-md);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

form {
  margin-block-start: var(--space-xl);
}

label {
  display: block;
  font-weight: 700;
}

.staging-access__required {
  font-weight: 400;
}

.staging-access__hint {
  margin-block: var(--space-xs) var(--space-sm);
}

.staging-access__code {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-sm);
}

.staging-access__code input {
  flex: 1 1 14rem;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--control-height);
  padding: var(--space-sm);
  border: 2px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-input-bg);
  color: var(--color-text);
  font: inherit;
  caret-color: var(--color-brand-primary);
}

.staging-access__code input[aria-invalid="true"] {
  border-color: var(--color-message-error);
}

button {
  min-block-size: var(--control-height);
  max-inline-size: 100%;
  padding: var(--space-sm) var(--space-lg);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  line-height: var(--text-label-lg-lh);
  overflow-wrap: anywhere;
  cursor: pointer;
}

.staging-access__reveal {
  border-color: var(--color-btn-secondary);
  background: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary);
}

.staging-access__reveal:hover,
.staging-access__reveal:active {
  border-color: var(--color-btn-secondary-hover);
  background: var(--color-btn-secondary-bg-hover);
  color: var(--color-btn-secondary-hover);
}

.staging-access__submit {
  margin-block-start: var(--space-lg);
  border-color: var(--color-btn-primary);
  background: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
}

.staging-access__submit:hover,
.staging-access__submit:active {
  border-color: var(--color-btn-primary-hover);
  background: var(--color-btn-primary-hover);
}

.staging-access__remember {
  margin-block-start: var(--space-xl);
}

.staging-access__errors {
  margin-block-start: var(--space-xl);
  padding: var(--space-md);
  border: 2px solid var(--color-message-error);
}

.staging-access__errors h2 {
  margin-block-end: var(--space-sm);
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-lh);
}

.staging-access__errors p + p {
  margin-block-start: var(--space-sm);
}

.staging-access__errors a {
  color: var(--color-interactive);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.staging-access__errors a:hover {
  color: var(--color-interactive-hover);
}

.staging-access__field-error {
  margin-block-end: var(--space-sm);
  font-weight: 700;
}