/*
 * FB-05 Form validation summary — app/components/ui/validation_summary_component.rb
 *
 * A specialisation of the danger alert treatment: --color-danger-subtle
 * panel, ink text, an anchor list to each invalid field.
 */

.ui-validation-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-danger-subtle);
  color: var(--color-danger-ink);
}

.ui-validation-summary:focus-visible {
  outline: 2px solid var(--color-danger);
  outline-offset: 2px;
}

.ui-validation-summary__icon {
  flex-shrink: 0;
  display: inline-flex;
  width: var(--icon-md);
  height: var(--icon-md);
}

.ui-validation-summary__icon svg {
  display: block;
}

.ui-validation-summary__body {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
}

.ui-validation-summary__heading {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

.ui-validation-summary__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ui-validation-summary__link {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-danger-ink);
  text-decoration: underline;
}

.ui-validation-summary__link:hover,
.ui-validation-summary__link:focus-visible {
  color: var(--color-danger);
}