/* snps/_actions_list — vertical list of action items inside an actions card */
.actions-list {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-primary);

  & > * + * { margin-top: var(--spacing-12); }

  & .actions-list-item {
    display: flex;
    gap: var(--spacing-12);
  }

  & .actions-list-type {
    font-size: var(--font-size-12);
    line-height: 1rem;
    padding-inline: var(--spacing-8);
    padding-block: var(--spacing-4);
    border-radius: var(--corner-radius-full);
    font-weight: var(--font-weight-500);
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: var(--spacing-2);
    width: 4rem; /* Note: bespoke value */
    text-align: center;

    &.actions-list-type--supplement { background-color: var(--background-surface-2);       color: var(--text-primary); }
    &.actions-list-type--diet       { background-color: var(--background-surface-2); color: var(--text-primary); }
    &.actions-list-type--lifestyle  { background-color: var(--background-surface-2);        color: var(--text-primary); }
    &.actions-list-type--monitoring { background-color: var(--background-surface-2);  color: var(--text-primary); }
    &.actions-list-type--avoidance  { background-color: var(--background-surface-2);      color: var(--text-primary); }
    &.actions-list-type--default    { background-color: var(--background-surface-2);  color: var(--text-primary); }
  }
  @media (min-width: 40rem) {
    & .actions-list-type { width: 5rem; } /* Note: bespoke value */
  }

  & .actions-list-body {
    min-width: 0;
    flex: 1 1 0%;
  }

  & .actions-list-title { font-weight: var(--font-weight-600); }

  & .actions-list-personalized {
    font-size: var(--font-size-12);
    line-height: 1rem;
    padding-inline: var(--spacing-4);
    padding-block: var(--spacing-2);
    border-radius: var(--corner-radius-sm);
    background-color: var(--background-surface-2);
    color: var(--text-primary);
    font-weight: var(--font-weight-400);
    margin-left: var(--spacing-4);
  }

  & .actions-list-summary {
    color: var(--text-secondary);
    margin-top: var(--spacing-2);
  }

  /* prose styling lives in objects/_prose.css; ERB carries `actions-list-prose prose prose-sm`. */
  & .actions-list-prose {
    margin-top: var(--spacing-8);
    max-width: none;
    color: var(--text-secondary);
  }

  & .actions-list-meta {
    margin-top: var(--spacing-8);
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
  }
}