/* Copyright Ayers Electronics Inc. All rights reserved. */
.gate-code {
  display: flex;
  margin: 0 0 8px;
  min-height: 58px;
}
.gate-code > * + * {
  margin-left: 10px;
}
.gate-code-group {
  display: flex;
}
.gate-code-group > * + * {
  margin-left: 6px;
}
.gate-code-char {
  width: 2.75rem;
  height: 3.625rem;
  border-radius: var(--radius);
  background: var(--elevated);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-display);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.gate-where {
  font-size: var(--type-label);
  color: var(--text);
  line-height: max(1.4em, var(--text-pitch-floor));
  margin: 0;
  max-width: 360px;
}
/* The QR: a small white quiet zone (the symbol needs one whatever the theme) with its sentence beside it.
   No padding of our own: the server's PNG already carries the symbol's four-module quiet zone (measured:
   8px modules, 32px margin), and a padded white card round it read as unwanted extra white space. */
.gate-qr-row {
  display: flex;
  align-items: center;
  margin: 0;
}
.gate-qr-row > * + * {
  margin-left: 10px;
}
.gate-qr {
  width: 78px;
  height: 78px;
  padding: 0;
  box-sizing: border-box;
  background: #fff;
  border-radius: var(--radius-small);
  display: block;
  flex: none;
}
.gate-qr-text {
  display: flex;
  flex-direction: column;
}
.gate-qr-text > * + * {
  margin-top: 2px;
}
.gate-qr-caption {
  font-size: var(--type-label);
  color: var(--muted);
  text-align: left;
  max-width: 120px;
  line-height: max(1.35em, var(--text-pitch-floor));
}
/* The manual-entry path the QR itself encodes (AuthEndpoints.cs's LinkFor), plain and full-contrast -
   the destination, where the sentence above it is only the instruction. */
.gate-qr-address {
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--text);
}
.gate-copy {
  font-size: var(--type-label);
  color: var(--muted);
  margin: 0 0 10px;
}
.gate-err {
  color: var(--error);
  font-size: var(--type-label);
  min-height: 18px;
  margin-top: 12px;
}
.gate-err:empty {
  margin-top: 0;
  min-height: 0;
}
.gate-stack {
  text-align: left;
}
.gate-stack > div {
  margin-bottom: 10px;
}
.gate-stack > div:last-child {
  margin-bottom: 0;
}
.gate-stack input {
  width: 100%;
}
/* The rule under a field, in the server's words: quiet, left with the field, one line or two. */
.gate-hint {
  font-size: var(--type-label);
  color: var(--muted);
  line-height: max(1.35em, var(--text-pitch-floor));
  margin-top: 4px;
}
.gate-card .primary {
  width: 100%;
}
.gate-card .switch {
  width: 100%;
  margin-top: 8px;
}
.gate-legal {
  font-size: var(--type-label);
  color: var(--muted);
  margin-top: 12px;
}
.gate-legal a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gate-legal a:hover,
.gate-legal a:focus {
  color: var(--text);
}