/* Inline message block (shared/_alert) — the sentence-length half of the trust vocabulary:
   a refusal reason, a probe result, a whole-form validation failure. Anything short enough to
   be a label is a chip instead. Tone rides on the chip wash plus a hairline in that tone's own
   ink — no left accent bar, no icon, no shadow. The flash region renders its messages through
   these same classes, so a pushed message and an inline one are one object. */
@layer components {
  .alert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-sm);
    padding: var(--space-3);
  }

  .alert-ok {
    background-color: var(--chip-ok-bg);
    border-color: color-mix(in oklch, var(--chip-ok-text) 28%, var(--chip-ok-bg));
    color: var(--chip-ok-text);
  }
  .alert-warn {
    background-color: var(--chip-warn-bg);
    border-color: color-mix(in oklch, var(--chip-warn-text) 28%, var(--chip-warn-bg));
    color: var(--chip-warn-text);
  }
  .alert-err {
    background-color: var(--chip-err-bg);
    border-color: color-mix(in oklch, var(--chip-err-text) 28%, var(--chip-err-bg));
    color: var(--chip-err-text);
  }
  .alert-info {
    background-color: var(--chip-info-bg);
    border-color: color-mix(in oklch, var(--chip-info-text) 28%, var(--chip-info-bg));
    color: var(--chip-info-text);
  }

  /* The headline sits in the tone's ink — it is what the tone is for. Supporting prose drops
     to the neutral secondary ramp so the two never compete. */
  .alert-title {
    font: var(--type-control);
  }
  .alert-code {
    font: var(--type-mono);
  }
  .alert-body {
    font: var(--type-small);
    color: var(--text-secondary);
    text-wrap: pretty;
  }
}