/* .live-region — styles for src/lib/expand.mjs's `x-live-region`. Load AFTER
   tokens.css. See public/components/README.md for load order.

   A block that announces itself: content changing while the user's focus is
   somewhere else. The tag emits role="status" or role="alert" and no
   aria-live/aria-atomic, because both roles already imply them — see
   apr:role-status and apr:role-alert in ontology/domain/component.ttl.

   Styled as one block for both roles, differing only in border colour. An
   alert deliberately does NOT get a red fill, a full-width banner or an icon:
   the /reps directive is explicit that a failed upload is not a red page and
   not a modal, and the words carry the meaning. Colour is the quiet half of
   the signal here, never the whole of it — anyone who cannot distinguish the
   border still reads "That memo did not send". */

.live-region {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background-color: var(--color-surface-raised);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-default);
  color: var(--color-text-primary);
}

/* An alert is the one state on the page that something went wrong, so it
   earns a stronger edge than the subtle hairline — but it stays a border, not
   a fill. --color-mark-accent is already the page's "look at this" colour and
   moves darker on paper for outdoor contrast, which is exactly the condition
   this is read in. */
.live-region[role="alert"] {
  border-color: var(--color-mark-accent);
}

/* No __label or __figure elements here on purpose. The region's contents are
   whatever the caller puts inside it — x-prose, x-heading, a button — so this
   file owns the box and nothing else. An earlier draft shipped .live-region__
   label and .live-region__figure; both were dead the moment the page was
   built from real components instead of hand-written spans, since `class` is
   not in expand.mjs's passthrough and no component could ever have carried
   them. A page needing to single out one line inside a region targets it by
   id (see #rec-elapsed in public/reps.css). */