.auth-header {
  align-items: flex-start;
  flex-wrap: wrap;
}

.header-controls {
  display: flex;
  min-width: 0;
  flex: 1 1 24rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.header-link {
  color: inherit;
  font-weight: 700;
}

.locale-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.locale-form select {
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
}

.auth-shell {
  width: min(100% - 2rem, 42rem);
  min-height: calc(100vh - 10rem);
  margin-inline: auto;
  padding-block: clamp(var(--space-4), 8vh, 5rem);
}

.auth-card,
.help-shell {
  display: grid;
  gap: var(--space-3);
  padding: clamp(var(--space-3), 4vw, var(--space-5));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.auth-card h1,
.auth-card p,
.help-shell h1 {
  margin-block: 0;
}

.auth-form {
  margin-block-start: var(--space-2);
}

.password-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.caps-lock:empty {
  display: none;
}

.account-facts {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.account-facts div {
  display: grid;
  gap: var(--space-1);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--color-border);
}

.account-facts dt {
  color: var(--color-muted);
  font-weight: 700;
}

.account-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.account-actions,
.help-grid {
  display: grid;
  gap: var(--space-2);
}

.choice-list {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}

.choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
}

.choice input {
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: 0.125rem;
}

.message-list {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
  padding-inline-start: 1.25rem;
}

.message-list li,
.message-list code,
[data-invitation-link] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.section-navigation,
.inline-form {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.section-navigation a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  overflow-wrap: anywhere;
}

.data-list {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
  padding-inline-start: 1.25rem;
}

.data-list li,
.data-list span,
.inline-form,
.inline-form > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.stack select,
.stack textarea,
.inline-form input,
.inline-form select {
  max-width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
}

.synthetic-qr {
  width: min(12rem, 100%);
  height: auto;
  margin-block: var(--space-2);
  border: 0.5rem solid white;
}

.account-actions .button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.auth-footer {
  display: flex;
  width: min(100% - 2rem, var(--content-width));
  margin-inline: auto;
  padding-block: var(--space-3);
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: 0.875rem;
}

.session-dialog {
  max-height: calc(100vh - 2rem);
  overflow: auto;
}

@media (max-width: 40rem) {
  .header-controls {
    justify-content: flex-start;
  }

  .auth-shell {
    width: min(100% - 1rem, 42rem);
    padding-block: var(--space-3);
  }

  .password-field {
    grid-template-columns: minmax(0, 1fr);
  }

  .locale-form,
  .locale-form select,
  .locale-form .button {
    width: 100%;
  }

  .section-navigation,
  .section-navigation a,
  .inline-form,
  .inline-form .button {
    width: 100%;
  }
}

@media (max-height: 36rem) {
  .auth-shell {
    min-height: auto;
    padding-block: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}