.button {
  display: inline-flex;
  min-block-size: var(--hui-control-standard);
  align-items: center;
  justify-content: center;
  gap: var(--hui-space-2);
  border: var(--hui-border-thin) solid transparent;
  border-radius: var(--hui-radius-medium);
  background: transparent;
  color: var(--hui-color-text);
  cursor: pointer;
  font-size: var(--hui-text-body-small-size);
  font-weight: var(--hui-font-weight-semibold);
  line-height: var(--hui-text-body-small-line);
  padding-inline: var(--hui-space-4);
  text-decoration: none;
}

.button-primary {
  border-color: var(--hui-color-primary-hover);
  background: var(--hui-color-primary);
  color: var(--hui-color-on-primary);
}

.button-primary:hover {
  background: var(--hui-color-primary-hover);
}

.button-danger {
  border-color: var(--hui-color-danger-action);
  background: var(--hui-color-danger-action);
  color: var(--hui-color-on-danger);
}

.button-danger:hover {
  filter: brightness(0.92);
}

.button-secondary {
  border-color: var(--hui-color-control-border);
  background: var(--hui-color-surface);
}

.button-secondary:hover,
.button-quiet:hover {
  background: var(--hui-color-surface-strong);
}

.button-quiet {
  border-color: transparent;
  color: var(--hui-color-link);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.button[hidden] {
  display: none;
}

.messages {
  display: grid;
  gap: var(--hui-space-2);
  margin-block-end: var(--hui-space-4);
}

.message {
  border: var(--hui-border-thin) solid var(--hui-color-border-strong);
  border-radius: var(--hui-radius-medium);
  background: var(--hui-color-info-soft);
  color: var(--hui-color-info);
  padding: var(--hui-space-3) var(--hui-space-4);
}

.message-success {
  background: var(--hui-color-success-soft);
  color: var(--hui-color-success);
}

.message-error {
  background: var(--hui-color-danger-soft);
  color: var(--hui-color-danger);
}
.message-warning {
  background: var(--hui-color-warning-soft); color: var(--hui-color-warning);
}

.form-stack {
  display: grid;
  gap: var(--hui-space-4);
}

.field {
  display: grid;
  gap: var(--hui-space-1);
  min-inline-size: 0;
}

.field label {
  color: var(--hui-color-text-secondary);
  font-size: var(--hui-text-body-small-size);
  font-weight: var(--hui-font-weight-semibold);
}

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  min-block-size: var(--hui-control-standard);
  border: var(--hui-border-thin) solid var(--hui-color-control-border);
  border-radius: var(--hui-radius-small);
  background: var(--hui-color-surface);
  padding: var(--hui-space-2) var(--hui-space-3);
}

.field textarea {
  min-block-size: 7rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--hui-color-focus);
}

.field-invalid input,
.field-invalid select,
.field-invalid textarea {
  border-color: var(--hui-color-danger);
}

.field-error {
  color: var(--hui-color-danger);
  font-size: var(--hui-text-body-small-size);
}

.field-help {
  color: var(--hui-color-text-tertiary);
  font-size: var(--hui-text-body-small-size);
}

.field-choice label {
  display: inline-flex;
  min-block-size: var(--hui-hit-target-min);
  align-items: center;
  gap: var(--hui-space-2);
}

.field-choice input {
  inline-size: 1.25rem;
  min-block-size: 1.25rem;
}

.form-actions,
.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--hui-space-2);
}

.form-panel,
.panel {
  border: var(--hui-border-thin) solid var(--hui-color-border);
  border-radius: var(--hui-radius-large);
  background: var(--hui-color-surface);
  padding: var(--hui-space-4);
  box-shadow: var(--hui-shadow-small);
}

.form-panel {
  inline-size: min(100%, 48rem);
}

.auth-page {
  display: grid;
  min-block-size: 100dvh;
  place-items: center;
  padding: var(--hui-space-4);
}

.auth-card {
  display: grid;
  inline-size: min(100%, 26rem);
  gap: var(--hui-space-5);
  border: var(--hui-border-thin) solid var(--hui-color-border);
  border-block-start: 4px solid var(--hui-color-primary);
  border-radius: var(--hui-radius-large);
  background: var(--hui-color-surface);
  padding: var(--hui-space-6);
  box-shadow: var(--hui-shadow-medium);
}

.auth-heading {
  display: flex;
  align-items: center;
  gap: var(--hui-space-3);
}

details > summary {
  min-block-size: var(--hui-hit-target-min);
  cursor: pointer;
  font-weight: var(--hui-font-weight-semibold);
  padding-block: var(--hui-space-2);
}

@media (max-width: 480px) {
  .form-actions .button {
    flex: 1 1 auto;
  }
}