/* =============================================================================
   @elements/style — callout

   Tinted notice boxes with a coloured left border. Intent variants
   follow the universal vocabulary — pick one and combine freely:

     <div class="callout">…</div>                — accent (default)
     <div class="callout is-success">…</div>        — green
     <div class="callout is-warn">…</div>           — amber
     <div class="callout is-danger">…</div>         — red

   Children use generic scoped names (same pattern as card, announce):

     <div class="callout is-success">
       <div class="head">Payment received</div>
       <div class="body">Your card was charged $19.</div>
     </div>

   Defaults (.label / .head / .body) are wrapped in :where() so any
   class on a child wins.
============================================================================= */

.callout {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 0.875rem 1.125rem;
  font-family: var(--font-sans);
}

:where(.callout > .label) {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.65625rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--font-semibold);
  color: var(--accent-deep);
  margin-bottom: 0.375rem;
}

:where(.callout > .head) {
  color: var(--accent-deep);
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  font-size: var(--text-md);
  margin-bottom: 0.375rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

:where(.callout > .body),
:where(.callout p) {
  font-family: var(--font-sans);
  font-size: 0.84375rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
:where(.callout > .body strong),
:where(.callout p strong) {
  color: var(--ink);
  font-weight: var(--font-semibold);
}

:where(.callout code) {
  font-family: var(--font-sans);
  font-size: 0.78125rem;
  background: var(--accent-wash);
  padding: 1px 0.375rem;
  border-radius: var(--radius-xs);
  color: var(--accent-deep);
}

/* ─── Success variant ────────────────────────────────────────────── */

.callout.is-success {
  background: var(--green-soft);
  border-left-color: var(--green);
}
.callout.is-success > .label,
.callout.is-success > .head { color: var(--green); }
.callout.is-success > .head::before { content: '✓'; }
.callout.is-success code {
  background: color-mix(in srgb, var(--green) 8%, transparent);
  color: var(--green);
}

/* ─── Warn variant ───────────────────────────────────────────────── */

.callout.is-warn {
  background: var(--amber-soft);
  border-left-color: var(--amber);
}
.callout.is-warn > .label,
.callout.is-warn > .head { color: var(--amber); }
.callout.is-warn code {
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  color: var(--amber);
}

/* ─── Danger variant ─────────────────────────────────────────────── */

.callout.is-danger {
  background: var(--red-soft);
  border-left-color: var(--red);
}
.callout.is-danger > .label,
.callout.is-danger > .head { color: var(--red); }
.callout.is-danger code {
  background: color-mix(in srgb, var(--red) 8%, transparent);
  color: var(--red);
}

/* ─── Announcement strip ───────────────────────────────────────────
   Thin inline variant used at the top of the dashboard feed. Label on
   the left, body on the right (rather than stacked). Combine with
   intent variants the same way as .callout. */

.announce {
  margin: var(--space-7) 0 var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--accent-soft);
  border-radius: var(--radius-xs);
  font-size: 0.78125rem;
  display: flex;
  gap: 0.875rem;
  align-items: baseline;
}
:where(.announce > .label) {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  font-weight: var(--font-semibold);
  flex-shrink: 0;
}
:where(.announce > .body) {
  font-family: var(--font-sans);
  font-size: 0.84375rem;
  color: var(--ink);
  line-height: 1.5;
}
:where(.announce > .body strong) { font-weight: var(--font-semibold); }
:where(.announce > .body code) {
  font-family: var(--font-sans);
  font-size: 0.78125rem;
  background: var(--accent-wash);
  padding: 1px 0.375rem;
  border-radius: var(--radius-xs);
  color: var(--accent-deep);
}