.login {
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-section);
  padding-block: var(--space-section);
  padding-inline: var(--space-gutter);
  background: var(--color-navy);
}

.login__box {
  inline-size: 100%;
  max-inline-size: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-section);
}

.login__logo {
  display: block;
  inline-size: clamp(120px, 36vw, 168px);
  block-size: auto;
}

.login__title {
  margin-block: 0 var(--space-field);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.login__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-label);
  margin-block-end: var(--space-field);
}

.login__field label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.login__field input[type="email"],
.login__field input[type="password"],
.login__field input[type="text"] {
  block-size: var(--control-h);
  padding-block: calc((var(--control-h) - 1lh) / 2 - 1px);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: max(var(--text-base), var(--text-input-min));
}

.login__field input:focus {
  border-color: var(--color-accent);
}

.login__field--inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.login__field--inline label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.login__field--inline a {
  font-size: var(--text-sm);
  white-space: nowrap;
  color: var(--color-text-muted);
  text-decoration: none;
}

@media (hover: hover) {
  .login__field--inline a:hover {
    color: var(--color-text);
  }
}

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

.login__panel-actions > .btn {
  flex: 1 1 0;
}

.login__success {
  margin-block-end: var(--space-note);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: var(--text-sm);
}

.login__error {
  margin-block-end: var(--space-note);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-error-soft);
  color: var(--color-error);
  font-size: var(--text-sm);
}

.login__intro {
  margin-block-end: var(--space-field);
}


@media (max-width: 768px) {
  .login__field input[type="email"],
  .login__field input[type="password"],
  .login__field input[type="text"] {
    block-size: var(--control-h-touch);
    padding-block: calc((var(--control-h-touch) - 1lh) / 2 - 1px);
  }
}