/* Status surfaces answer or flag one operational question. Tone, outline,
   compactness, and elevation are composable so page styles only own layout
   and content hierarchy. */
.status-surface {
  --status-surface-accent: var(--color-line);

  background: var(--color-surface);
  border: var(--border-thin);
  border-left: 4px solid var(--status-surface-accent);
  border-radius: var(--radius-md);
}

.status-surface.is-information { --status-surface-accent: var(--color-information); }
.status-surface.is-good { --status-surface-accent: var(--color-positive); }
.status-surface.is-warn { --status-surface-accent: var(--color-warning-accent); }
.status-surface.is-danger { --status-surface-accent: var(--color-danger); }

.status-surface-compact {
  border-left-width: 3px;
  border-radius: var(--radius-sm);
}

.status-surface-elevated { box-shadow: var(--shadow); }

/* A short status note under content inside a panel, such as the Tax Year
   page's tax-code warning or the Dashboard drawdown card's emergency-tax
   note. Combine with `.status-surface-compact` and a tone. */
.status-surface-note {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
}

/* The main Actual-vs-Plan verdict used the darker semantic gold before this
   primitive existed. Keep that hierarchy as an explicit reusable modifier. */
.status-surface-strong-warning.is-warn {
  --status-surface-accent: var(--color-warning);
}

/* Passive context and guidance are not operational statuses. This surface is
   intentionally neutral and has no semantic tone variants. */
.note-surface {
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
}