.form-field {
  display: grid;
  gap: var(--space-2);
}

.form-field__label,
.sort-control label {
  color: var(--color-text-primary);
  font-size: var(--type-label);
  font-weight: 700;
}

.form-field__input,
.sort-control select {
  min-height: var(--control-min);
  width: 100%;
  padding-inline: var(--space-4);
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-strong);
  box-shadow: var(--shadow-inset);
  color: var(--color-text-primary);
  font-size: var(--type-body);
}

.sort-control select {
  width: auto;
  padding-inline: var(--space-3);
}

.form-field[data-state="invalid"] .form-field__input,
.form-field__input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.form-field__message {
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm);
}

.form-field__message--error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-error);
}

.login-panel {
  display: grid;
  width: min(100%, var(--login-form-max));
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-rest);
}

.login-panel__intro {
  color: var(--color-text-secondary);
  font-size: var(--type-body-lg);
}

.login-panel__form {
  display: grid;
  gap: var(--space-5);
}

.notice {
  display: grid;
  grid-template-columns: var(--icon-lg) 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-strong);
  color: var(--color-text-primary);
}

.notice--error {
  background: var(--color-error-surface);
  color: var(--color-error);
}

.notice--warning {
  background: var(--color-warning-surface);
  color: var(--color-warning);
}

.notice--info .icon {
  color: var(--color-info);
}

.notice--success .icon {
  color: var(--color-success);
}

.notice__content {
  display: grid;
  gap: var(--space-2);
}

.notice__content p {
  color: var(--color-text-primary);
}

.notice__action {
  display: inline-flex;
  min-height: var(--control-min);
  align-items: center;
  justify-self: start;
  font-weight: 700;
}