/* SLE-T7-banners — block-level status messages per Camp v2 Style Guide §19.
 *
 * Use these instead of toasts for persistent state (errors, warnings,
 * informational notes about page-level state). Toasts are for transient
 * success/info confirmations only.
 *
 * Pairs with @suite/lib/components/banners (QW-4) when that JS ships.
 *
 * Depends on tokens.css.
 */
.sg-banner,
.sg-banner-warn,
.sg-banner-error,
.sg-banner-success,
.sg-banner-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
}

.sg-banner-warn    { background: var(--bg-warn);    color: var(--fg-warn); }
.sg-banner-error   { background: var(--bg-error);   color: var(--fg-error); }
.sg-banner-success { background: var(--bg-success); color: var(--fg-success); }
.sg-banner-info    { background: var(--bg-info);    color: var(--g4); }

/* Inner elements — leading icon, title, secondary, inline code. */
.sg-banner span:first-child,
.sg-banner-warn span:first-child,
.sg-banner-error span:first-child,
.sg-banner-success span:first-child,
.sg-banner-info span:first-child {
  font-size: 18px;
  line-height: 1;
}
.sg-banner strong,
.sg-banner-warn strong,
.sg-banner-error strong,
.sg-banner-success strong,
.sg-banner-info strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}
.sg-banner span span,
.sg-banner-warn span span,
.sg-banner-error span span,
.sg-banner-success span span,
.sg-banner-info span span {
  font-size: 11px;
  opacity: 0.85;
}
.sg-banner code,
.sg-banner-warn code,
.sg-banner-error code,
.sg-banner-success code,
.sg-banner-info code {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Close button — × */
.sg-banner > button.sg-banner-close,
.sg-banner-warn > button.sg-banner-close,
.sg-banner-error > button.sg-banner-close,
.sg-banner-success > button.sg-banner-close,
.sg-banner-info > button.sg-banner-close {
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.2em;
  line-height: 1;
  opacity: 0.7;
}
.sg-banner > button.sg-banner-close:hover,
.sg-banner-warn > button.sg-banner-close:hover,
.sg-banner-error > button.sg-banner-close:hover,
.sg-banner-success > button.sg-banner-close:hover,
.sg-banner-info > button.sg-banner-close:hover {
  opacity: 1;
}

/* Print: hide banners (they're not part of the printable content). */
@media print {
  .sg-banner,
  .sg-banner-warn,
  .sg-banner-error,
  .sg-banner-success,
  .sg-banner-info {
    display: none;
  }
}