/* Aviso contextual: inline, junto do conteúdo, sempre com tom. */

.notice:has(> .notice-icon) {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
}

.page-alert {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--space-6);
}

@media (width <= 760px) {
  .page-alert {
    padding-inline: var(--space-4);
  }
}

.notice-info {
  background: var(--surface);
  color: var(--text);
}

.notice-success {
  background: var(--success-bg);
  color: var(--success);
}

.notice-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.notice-error {
  background: var(--error-bg);
  color: var(--error);
}

.notice-body :is(p, dt, dd) {
  margin: 0;
  color: inherit;
}

.notice-body > * + * {
  margin-top: var(--space-2);
}

.notice-title {
  display: block;
}

@media (forced-colors: active) {
  .notice:has(> .notice-icon) {
    border: 1px solid CanvasText;
  }
}