/*
 * alerts.css
 * Alert = surface + row layout. Inline notification banner.
 * Pairs naturally with tones (.alert.info, .alert.danger, etc.)
 *
 * Anatomy:
 *   <div class="alert info">
 *     <div class="alert-icon">ⓘ</div>
 *     <div class="alert-content">
 *       <strong>Heads up</strong>
 *       <p>Something happened.</p>
 *     </div>
 *   </div>
 */

.alert {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-lg);
  padding:     var(--space-lg) var(--space-2xl);
}

.alert-icon {
  flex-shrink: 0;
  font-size:   var(--text-lg);
  line-height: 1.4;
}

/* `min-inline-size: 0`, or a `.code` block inside an alert widens the alert
   past its card — a flex item's automatic minimum is its content, and a
   <pre> that does not wrap has the width of its longest line. */
.alert-content {
  flex:            1;
  min-inline-size: 0;
  line-height:     1.5;
}
.alert-content > strong { display: block; margin-bottom: 2px; }
/* `pretty` avoids a one-word last line; an alert is short enough that
   a widow is a large share of it. */
.alert-content > p      { margin: 0; text-wrap: pretty; }