/* Alert - tone colour from --tp-color-* tokens; accent bar uses the solid
   token, the background is a token-derived tint via color-mix (solid fallback
   first for browsers without color-mix). */
.tp-alert {
  --tp-alert-color: var(--tp-color-info); /* info default */
  padding: var(--tp-spacing-3) var(--tp-spacing-4);
  border-radius: var(--tp-border-radius-sm);
  border-inline-start: 4px solid var(--tp-alert-color);
  background: var(--tp-color-surface-subtle);
  background: color-mix(in srgb, var(--tp-alert-color) 8%, transparent);
  color: var(--tp-color-text-default);
  font-family: var(--tp-font-family-sans);
  font-size: var(--tp-font-size-md);
}
.tp-alert--success { --tp-alert-color: var(--tp-color-success); }
.tp-alert--warning { --tp-alert-color: var(--tp-color-warning); }
.tp-alert--danger { --tp-alert-color: var(--tp-color-danger); }
.tp-alert__title {
  margin: 0 0 var(--tp-spacing-1);
  font-weight: var(--tp-font-weight-bold);
}
.tp-alert__body { margin: 0; }

/* Dismissible: content takes the row, the close button sits at the inline end.
   Negative margins pull the 44px target back into the alert padding so it does
   not inflate the alert height. */
.tp-alert--dismissible {
  display: flex;
  align-items: flex-start;
  gap: var(--tp-spacing-2);
}
.tp-alert__content { flex: 1 1 auto; }
.tp-alert__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: calc(var(--tp-spacing-2) * -1) calc(var(--tp-spacing-3) * -1) calc(var(--tp-spacing-2) * -1) 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--tp-font-size-xl);
  line-height: 1;
  cursor: pointer;
}
.tp-alert__close:focus-visible {
  outline: 2px solid var(--tp-alert-color);
  outline-offset: 2px;
}