/*
 * CP-04 Document request item — app/components/ui/document_request_component.rb
 *
 * accent-100 tinted row: inbox icon frame, requested doc name + optional
 * message, trailing role-specific action. Fulfilled variant swaps the
 * tint to success and renders a CP-03 document item in place of the
 * request UI. Token vars only — enforced by test/lint/css_token_lint_test.rb.
 */

.ui-document-request {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent-100);
}

.ui-document-request--fulfilled {
  background: var(--color-success-subtle);
  align-items: center;
}

.ui-document-request__icon-frame {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--color-surface);
  color: var(--color-accent-pressed);
}

.ui-document-request__icon-frame--success {
  color: var(--color-success-ink);
}

.ui-document-request__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ui-document-request__name {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: 500;
  color: var(--color-ink);
}

.ui-document-request__message {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-muted);
}

.ui-document-request__fulfilled-document {
  width: 100%;
}

.ui-document-request__action {
  flex-shrink: 0;
}