/* ─────────────────────────────────────────────────────────────────────────
   MESSAGES — what just happened, said once, at the top of the page.

   Django's messages framework, given a component. The markup was written out
   by hand in three templates (crm/profile, crm/report, coherence/memory
   consent) and the rules lived in settings.css, which is loaded on one page —
   so two of the three copies rendered unstyled, and the fourth was about to be
   written for the Outreach queue. Extend with a modifier; never fork.
   docs/dev/web/design-system.md §3.4.

   Anatomy:
     .messages                 the stack
     .message                  one notice — shape, spacing, type
     .message--success         it worked
     .message--warning         it worked, and something was left out
     .message--info            neither, and worth knowing
     .message--error           it did not work

   The variant classes carry Django's own tag names (`message-{{ tags }}`
   renders `message-success`), so both spellings are matched: the modifier is
   the design-system form, and the tag form is what `{{ message.tags }}` emits.
   One rule, two selectors, rather than a template that has to translate.
   ──────────────────────────────────────────────────────────────────────── */

@layer components {
  .messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
  }

  .message {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: var(--text-base);
  }

  .message--success,
  .message-success {
    background: var(--color-success-bg);
    color: var(--color-success);
    border-color: var(--color-success-border);
  }

  .message--error,
  .message-error {
    background: var(--color-danger-bg);
    color: var(--color-danger-strong);
    border-color: var(--color-danger-border);
  }

  /* Warning has a background and a text colour but no border token of its own,
     so the border is mixed from the text colour rather than a fourth token
     being invented for one component. */
  .message--warning,
  .message-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: color-mix(in oklab, var(--color-warning) 20%, transparent);
  }

  /* Info is the neutral one on purpose: it reports, it does not judge. Built
     from the surface tokens rather than the accent, which is themeable — an
     app must not be able to make a notice unreadable. */
  .message--info,
  .message-info,
  .message-debug {
    background: var(--color-surface-2);
    color: var(--color-text);
    border-color: var(--color-border-light);
  }
}

@layer components {
  /* ── toast modifier ──────────────────────────────────────────────────
     The same message, when there is no page render to put it at the top of.
     An HTMX refusal (403) carries HX-Trigger rather than a body, because
     htmx discards a 4xx body — so the notice has to place itself, and it
     must not disturb whatever the user was doing. Fixed, above the page,
     and pointer-transparent except for the notice itself. */
  .messages--toast {
    position: fixed;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 1000;
    max-width: min(28rem, calc(100vw - 2 * var(--space-md)));
    pointer-events: none;
  }

  .messages--toast .message {
    pointer-events: auto;
    box-shadow: var(--elev-2);
  }
}