Panel

/* Story-only styles for the sample content in ApprovalReport.tsx. */
.approval-report {
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-m);
}

.approval-report p,
.approval-report h3,
.approval-report h4 {
	margin: 0;
}

.approval-report__header {
	align-items: flex-start;
	display: flex;
	gap: var(--pds-spacing-xs);
}

.approval-report__title {
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-2xs);
}

/* Three classes so it beats the Panel's heading-adjacent margin (12px) and the
   gap alone sets the heading-to-subtitle spacing. */
.approval-report .approval-report__title > .approval-report__meta {
	margin-block-start: 0;
}

.approval-report__meta {
	align-items: center;
	color: var(--pds-color-foreground-default-secondary);
	display: flex;
	gap: var(--pds-spacing-2xs);
}

.approval-report__rule {
	border: 0;
	border-block-start: var(--pds-border-width-default) solid
		var(--pds-color-border-default);
	margin: 0;
	width: 100%;
}

.approval-report__eyebrow {
	color: var(--pds-color-foreground-default-secondary);
}

.approval-report .approval-report__error {
	font-family: var(--pds-typography-ff-default);
	font-size: var(--pds-typography-size-s);
	font-weight: var(--pds-typography-fw-semibold);
	line-height: var(--pds-typography-lh-m);
	margin-block: var(--pds-spacing-s) var(--pds-spacing-2xs);
}

/* Three classes so it beats the Panel's heading-adjacent margin (12px); the
   section's gap then sets the heading-to-text spacing (2xs). */
.approval-report .approval-report__section > .approval-report__text {
	margin-block-start: 0;
}

.approval-report__section {
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-2xs);
}

.approval-report__checks {
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.approval-report__checks li {
	align-items: center;
	color: var(--pds-color-foreground-default-secondary);
	display: flex;
	font-size: var(--pds-typography-size-xs);
	gap: var(--pds-spacing-2xs);
}

.approval-report__checks .pds-icon {
	color: var(--pds-color-status-success-foreground);
	flex-shrink: 0;
}

.approval-report__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pds-spacing-xs);
}