/* ==========================================================================
   Alert — the standing inline message (ADR-131, UI Component Service)

   States a fact about the page it sits on and stays until the fact changes: a
   form that will not submit, a connection that needs attention, a payout that
   is waiting on a bank. A toast is the other half of the pair — transient
   feedback for something the person just did.

     <div class="global-alert global-alert--danger" role="alert">…</div>

   Tone comes from the shared --status-* tints, the same fills and edges the
   .global-badge pill and the .global-notice strip wear, so retuning a semantic
   color moves every soft surface at once.

   Spacing is the caller's: an alert carries no margin, so it mounts anywhere.

   Singleton-gated: a second `.global-alert {` base definition anywhere fails
   tests/interface/test_css_standards.py. Do not fork it — add a modifier.
   ========================================================================== */

.global-alert {
    padding: var(--spacing-smd) var(--spacing-md);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
}

/* A layout modifier's display wins over the hidden attribute, and an alert
   revealed by a script spends most of its life hidden. */
.global-alert[hidden] {
    display: none;
}

/* Opt-in, for an alert riding inside a dense panel or under a single field,
   where a full-size box would outweigh the control it belongs to. */
.global-alert--compact {
    padding: var(--spacing-sm) var(--spacing-smd);
    font-size: var(--font-size-sm);
}

/* An icon beside the sentence. Top-aligned, so a two-line sentence keeps the
   icon on its first line rather than floating it to the middle. */
.global-alert--row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.global-alert__icon {
    flex: 0 0 auto;
}

/* The sentence at one end, the control that answers it at the other. */
.global-alert--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-smd);
}

/* The control sits under the sentence instead of beside it — for a button
   wide enough that a row would strand the words against the far edge. */
.global-alert--stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.global-alert--success {
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
    color: var(--color-success);
}

.global-alert--warning {
    background: var(--status-warning-bg);
    border-color: var(--status-warning-border);
    color: var(--status-warning-fg);
}

.global-alert--danger {
    background: var(--status-danger-bg);
    border-color: var(--status-danger-border);
    color: var(--color-error);
}

.global-alert--info {
    background: var(--status-info-bg);
    border-color: var(--status-info-border);
    color: var(--color-info);
}

/* A fact that carries no weight — a state that is simply so, not a warning. */
.global-alert--neutral {
    background: var(--color-grey-200);
    border-color: var(--color-border);
    color: var(--color-grey-700);
}