/* ==========================================================================
   COMPONENTS · ALERT — transient feedback set as a printed notice: a compact
   bar with a small-caps status word, a message, and an optional dismiss. Kept
   inside the archival family — myrtle / ochre / brick — never a bright UI red
   or green. Pair with role="status" or role="alert".
   ========================================================================== */

.op-alert {
  --al-ink: var(--text);
  --al-line: var(--rule-strong);
  --al-wash: var(--surface-sunken);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background: var(--al-wash);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--al-line);
  border-radius: var(--radius-xs);
  padding: var(--space-xs) var(--space-sm);
}

.op-alert__status {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--al-ink);
  flex: none;
  padding-top: 0.1em;
}
.op-alert__body {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text);
}
.op-alert__dismiss {
  margin-left: auto;
  font-family: var(--font-data);
  color: var(--text-muted);
  line-height: 1;
  padding: 0 0.2em;
}
.op-alert__dismiss:hover { color: var(--text); }

/* — Variants — */
.op-alert--info     { --al-ink: var(--text-secondary); --al-line: var(--rule-strong); --al-wash: var(--surface-sunken); }
.op-alert--positive { --al-ink: var(--positive); --al-line: var(--positive); --al-wash: var(--positive-wash); }
.op-alert--caution  { --al-ink: var(--warning);  --al-line: var(--warning);  --al-wash: var(--warning-wash); }
.op-alert--critical { --al-ink: var(--critical); --al-line: var(--critical); --al-wash: var(--critical-wash); }