Callout

{% comment %}
CONTENT / callout: a note pulled out of the flow of a docs or blog page.

WHY THIS IS NOT {% bw_alert %}. An alert is a STATUS message about the current
state of the application ("your export failed"). A callout is editorial: part
of the document, true whenever the page is read, and not a response to anything
the reader did. They look similar and mean different things, so a callout is
NOT given role="alert" or aria-live: announcing a permanent note as if it just
happened is wrong, and it would interrupt a screen-reader user mid-sentence.

The heading carries the kind ("Note", "Warning") as TEXT, not colour alone.
Colour-only signalling fails WCAG 1.4.1, and this section is styled per kind.

Kinds available via the `_callout.html` include: note (default), info,
success, warning, danger, neutral. This example still shows note and warning
inline so the section remains copy-pasteable with zero context; prefer the
include when composing from a view.

States: none: a static block, no open/closed or hover-driven state.
Accessibility: deliberately no role="alert"/aria-live (see above: it is
  editorial content, not a status announcement). The kind is stated as text
  in the title, never colour alone (WCAG 1.4.1). Covered by axe.spec.mjs
  against sections-*.html, which renders this exact file, both themes.
Responsive: no breakpoint switch; no width-dependent CSS on any
  .bw-callout* selector.
{% endcomment %}
<div class="bw-callout bw-callout--note">
  <p class="bw-callout__title">Note</p>
  <div class="bw-prose bw-callout__body">
    <p>
      Reminder schedules are evaluated in the account's own timezone, not the
      server's. An invoice due on the 30th in Sydney is chased on the 30th in
      Sydney.
    </p>
  </div>
</div>

<div class="bw-callout bw-callout--warning">
  <p class="bw-callout__title">Before you enable this</p>
  <div class="bw-prose bw-callout__body">
    <p>
      Turning on automatic reminders sends to every account with an open
      invoice, including ones already overdue. Run
      <a href="/docs/reminders/#preview">the preview</a> first to see exactly
      who would be contacted.
    </p>
  </div>
</div>