/* MetricLab Inline Feedback System: contextual operation messages only. */
:root {
  --feedback-gap: var(--space-sm);
  --feedback-padding-inline: var(--space-md);
  --feedback-padding-block: var(--space-sm);
  --feedback-radius: var(--radius-sm);
  --feedback-border-width: 1px;
  --feedback-neutral-color: var(--muted);
  --feedback-info-color: var(--primary);
  --feedback-success-color: var(--positive);
  --feedback-warning-color: #a16207;
  --feedback-error-color: var(--danger);
  --feedback-neutral-surface: var(--bg-soft);
  --feedback-info-surface: color-mix(in srgb, var(--primary) 7%, var(--card));
  --feedback-success-surface: color-mix(
    in srgb,
    var(--positive) 7%,
    var(--card)
  );
  --feedback-warning-surface: color-mix(in srgb, #a16207 7%, var(--card));
  --feedback-error-surface: color-mix(in srgb, var(--danger) 7%, var(--card));
  --feedback-title-size: var(--text-sm);
  --feedback-message-size: var(--text-sm);
  --feedback-reserved-min-height: 1.5rem;
}

.ml-feedback {
  --feedback-state-color: var(--feedback-neutral-color);
  --feedback-state-surface: var(--feedback-neutral-surface);

  box-sizing: border-box;
  display: flex;
  gap: var(--feedback-gap);
  align-items: flex-start;
  min-width: 0;
  max-width: var(--ml-container-readable);
  color: var(--feedback-state-color);
  font-size: var(--feedback-message-size);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ml-feedback[data-state="info"] {
  --feedback-state-color: var(--feedback-info-color);
  --feedback-state-surface: var(--feedback-info-surface);
}

.ml-feedback[data-state="success"],
.ml-feedback[data-state="ok"] {
  --feedback-state-color: var(--feedback-success-color);
  --feedback-state-surface: var(--feedback-success-surface);
}

.ml-feedback[data-state="warning"] {
  --feedback-state-color: var(--feedback-warning-color);
  --feedback-state-surface: var(--feedback-warning-surface);
}

.ml-feedback[data-state="error"] {
  --feedback-state-color: var(--feedback-error-color);
  --feedback-state-surface: var(--feedback-error-surface);
}

.ml-feedback--inline {
  padding-block: var(--space-xs);
}

.ml-feedback--block {
  width: 100%;
  padding: var(--feedback-padding-block) var(--feedback-padding-inline);
  border: var(--feedback-border-width) solid
    color-mix(in srgb, var(--feedback-state-color) 30%, var(--border));
  border-radius: var(--feedback-radius);
  background: var(--feedback-state-surface);
}

.ml-feedback--reserved {
  min-height: var(--feedback-reserved-min-height);
}

.ml-feedback:empty {
  padding-block: 0;
}

.ml-feedback--block:empty {
  border-color: transparent;
  background: transparent;
}

.ml-feedback__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin-block-start: 0.15em;
}

.ml-feedback__content {
  display: grid;
  flex: 1 1 auto;
  gap: var(--space-2xs);
  min-width: 0;
}

.ml-feedback__title,
.ml-feedback__message {
  margin: 0;
}

.ml-feedback__title {
  color: var(--text);
  font-size: var(--feedback-title-size);
  font-weight: var(--weight-bold);
  line-height: var(--line-snug);
}

.ml-feedback__message {
  color: inherit;
  font-size: var(--feedback-message-size);
}

.ml-feedback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

@media (width <= 520px) {
  :root {
    --feedback-padding-inline: var(--space-sm);
    --feedback-reserved-min-height: 1.25rem;
  }

  .ml-feedback--block {
    max-width: 100%;
  }

  .ml-feedback__actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ml-feedback {
    scroll-behavior: auto;
    transition: none;
  }
}

@media (forced-colors: active) {
  .ml-feedback--block {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}