/* ── .dv-callout ──────────────────────────────────────────────────────────
   Tinted status/info notice panel — the hand-rolled bg-*-bg panels promoted
   to a canonical component. NOT a card (no card shell); a flagged message.
   Layout: leading icon + content (optional eyebrow + body) + optional action.
   Tones key to the status palette triplets. Token-only; light-only.
   ───────────────────────────────────────────────────────────────────────── */

.dv-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.dv-callout__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-0-5);
}

.dv-callout__icon svg,
.dv-callout__icon [data-lucide] {
  width: 16px;
  height: 16px;
}

.dv-callout__content {
  flex: 1 1 auto;
  min-width: 0;
}

.dv-callout__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

.dv-callout__title {
  font-weight: 600;
  color: var(--ink);
}

.dv-callout__body {
  color: var(--text-secondary);
}

.dv-callout__title + .dv-callout__body {
  margin-top: var(--space-0-5);
}

.dv-callout__action {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* Centre the trailing action against the message instead of top-aligning it
     (the callout itself is flex-start so the icon hugs the first body line). A
     32px button beside a single-line title looked dropped without this. */
  align-self: center;
  margin-left: auto;
}

/* ── Tones ───────────────────────────────────────────────────────────────── */

.dv-callout--info {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--ink);
}
.dv-callout--info .dv-callout__icon,
.dv-callout--info .dv-callout__eyebrow {
  color: var(--accent);
}

.dv-callout--briefing {
  background: var(--briefing-bg);
  border-color: var(--briefing-border);
  color: var(--briefing);
}
.dv-callout--briefing .dv-callout__icon,
.dv-callout--briefing .dv-callout__eyebrow,
.dv-callout--briefing .dv-callout__title {
  color: var(--briefing);
}

.dv-callout--confirmed {
  background: var(--confirmed-bg);
  border-color: var(--confirmed-border);
  color: var(--confirmed);
}
.dv-callout--confirmed .dv-callout__icon,
.dv-callout--confirmed .dv-callout__eyebrow,
.dv-callout--confirmed .dv-callout__title {
  color: var(--confirmed);
}

.dv-callout--cancelled {
  background: var(--cancelled-bg);
  border-color: var(--cancelled-border);
  color: var(--cancelled);
}
.dv-callout--cancelled .dv-callout__icon,
.dv-callout--cancelled .dv-callout__eyebrow,
.dv-callout--cancelled .dv-callout__title {
  color: var(--cancelled);
}

.dv-callout--inwater {
  background: var(--inwater-bg);
  border-color: var(--inwater-border);
  color: var(--inwater);
}
.dv-callout--inwater .dv-callout__icon,
.dv-callout--inwater .dv-callout__eyebrow,
.dv-callout--inwater .dv-callout__title {
  color: var(--inwater);
}