/**
 * banner.css — Banner family SSOT
 *
 * Covers: .hx-banner, .hx-banner-callout, .hx-banner-overlay, .hx-banner-slim
 * and all modifiers (--info, --success, --warning, --error, etc.)
 *
 * All styles via design tokens only.
 * 4-variant system: light/dark × desktop/mobile
 *   Controlled by html[data-theme] + html[data-hx-vp]
 * No. No hard-coded colors or spacing.
 * Composition: uses Badge, Indicator, Button primitives where applicable.
 *
 * Restored and aggregated from 3.05.39 master. Duplicates removed.
 */

/* Base banner */
.hx-banner {
  display: flex;
  align-items: center;
  gap: var(--hx-space-3);
  padding: var(--hx-space-3) var(--hx-space-4);
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
  border-radius: var(--hx-radius-element);
  border: 0;
}


/* Family shared */
.hx-banner-callout,
.hx-banner-overlay,
.hx-banner-slim {
  color: var(--hx-fg);
  border-radius: var(--hx-radius-element);
}

/* Overlay */
.hx-banner-overlay {
  background: var(--hx-surface);
  box-shadow: var(--hx-elev);
  border: 0;
}

.hx-banner-overlay__title,
.hx-banner-overlay__msg {
  color: inherit;
}

.hx-banner-overlay__actions {
  display: flex;
  align-items: center;
  gap: var(--hx-space-2);
  margin-left: auto;
  flex-wrap: wrap;
}

/* Callout */
.hx-banner-callout {
  background: var(--hx-surface-subtle);
  border: 0;
}

.hx-banner-callout__title {
  color: inherit;
  font-weight: var(--hx-font-weight-semibold);
  margin: 0 0 var(--hx-space-1);
}

.hx-banner-callout__msg {
  margin: 0;
  color: inherit;
}

/* Slim */
.hx-banner-slim {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
  font-size: var(--hx-font-size-sm);
  padding: var(--hx-space-2) var(--hx-space-3);
  display: flex;
  align-items: center;
  gap: var(--hx-space-2);
}

.hx-banner-slim__msg {
  flex: 1;
}

/* Status modifiers */
.hx-banner-overlay--error,
.hx-banner-callout--error,
.hx-banner-slim--error {
  background: var(--hx-danger-bg);
  color: var(--hx-danger);
}

.hx-banner-callout--warning,
.hx-banner-slim--warning {
  background: var(--hx-warning-bg);
  color: var(--hx-warning);
}

.hx-banner-callout--success,
.hx-banner-slim--success {
  background: var(--hx-success-bg);
  color: var(--hx-success);
}

/* Dismiss button */
.hx-banner-dismiss {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: var(--hx-space-1);
  margin-left: auto;
  border-radius: var(--hx-radius-element);
  opacity: 0.7;
}

.hx-banner-dismiss:hover,
.hx-banner-dismiss:focus-visible {
  opacity: 1;
  background: var(--hx-surface-hover);
}

/* 4-variant readiness
   Tokens flip automatically via data-theme on html.
   Density via data-hx-vp if needed for spacing overrides.
 */
html[data-theme="light"][data-hx-vp="desktop"] .hx-banner,
html[data-theme="light"][data-hx-vp="mobile"] .hx-banner,
html[data-theme="dark"][data-hx-vp="desktop"] .hx-banner,
html[data-theme="dark"][data-hx-vp="mobile"] .hx-banner {
  /* All values from tokens. No overrides required for base. */
}

/* Dark theme specific if tokens don't cover fully (prefer token updates) */
html[data-theme="dark"] .hx-banner-slim {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
  border-color: var(--hx-line);
}

html[data-theme="dark"] .hx-banner-slim--error {
  background: var(--hx-danger-bg);
  color: var(--hx-danger);
}

html[data-theme="dark"] .hx-banner-slim--warning {
  background: var(--hx-warning-bg);
  color: var(--hx-warning);
}

/* Structural elements used by the master examples */
.hx-banner,
.hx-banner-callout,
.hx-banner-overlay,
.hx-banner-slim {
  display: flex;
  align-items: flex-start;
  gap: var(--hx-space-3);
  width: 100%;
}

.hx-banner__body,
.hx-banner-callout__body,
.hx-banner-overlay__body {
  flex: 1;
  min-width: 0;
}

.hx-banner__title,
.hx-banner-callout__title,
.hx-banner-overlay__title {
  margin: 0 0 var(--hx-space-1);
  font-weight: var(--hx-font-weight-semibold);
  color: inherit;
}

.hx-banner__msg,
.hx-banner__desc,
.hx-banner-callout__msg,
.hx-banner-overlay__msg,
.hx-banner-slim__msg {
  margin: 0;
  color: inherit;
}

.hx-banner__actions,
.hx-banner-callout__actions,
.hx-banner-overlay__actions {
  display: flex;
  align-items: center;
  gap: var(--hx-space-2);
  margin-left: auto;
  flex-wrap: wrap;
}

.hx-banner-slim {
  align-items: center;
  font-size: var(--hx-font-size-sm);
  padding: var(--hx-space-2) var(--hx-space-3);
}

.hx-banner-slim__action,
.hx-banner-callout__action {
  flex-shrink: 0;
}

.hx-banner--elev-med,
.hx-banner-overlay {
  box-shadow: var(--hx-elev);
}

.hx-banner--collapsible .hx-banner__details {
  margin-top: var(--hx-space-2);
  font-size: var(--hx-font-size-sm);
}

.hx-banner-tools {
  display: flex;
  align-items: center;
  gap: var(--hx-space-1);
  margin-left: auto;
}

/* Icon sizing — inspired by Astryx Banner (20px) */
.hx-banner__icon,
.hx-banner-callout__icon,
.hx-banner-overlay__icon,
.hx-banner-slim__icon,
.hx-banner .hx-icon,
.hx-banner-callout .hx-icon {
  width: var(--hx-banner-icon-size);
  height: var(--hx-banner-icon-size);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hx-banner__icon svg,
.hx-banner-callout__icon svg,
.hx-banner-overlay__icon svg,
.hx-banner-slim__icon svg,
.hx-banner-dismiss svg {
  width: 100%;
  height: 100%;
}

/* Status color applied to icon + text (matches left border) */
.hx-banner--info,
.hx-banner-callout--info,
.hx-banner-overlay--info,
.hx-banner-slim--info {
  color: var(--hx-primary);
}
.hx-banner--info .hx-banner__icon,
.hx-banner--info .hx-banner-callout__icon,
.hx-banner--info .hx-icon,
.hx-banner-callout--info .hx-icon {
  color: var(--hx-primary);
}

.hx-banner--success,
.hx-banner-callout--success,
.hx-banner-slim--success {
  color: var(--hx-success);
}
.hx-banner--success .hx-icon,
.hx-banner-callout--success .hx-icon {
  color: var(--hx-success);
}

.hx-banner--warning,
.hx-banner-callout--warning,
.hx-banner-slim--warning {
  color: var(--hx-warning);
}
.hx-banner--warning .hx-icon,
.hx-banner-callout--warning .hx-icon {
  color: var(--hx-warning);
}

.hx-banner--error,
.hx-banner-callout--error,
.hx-banner-slim--error,
.hx-banner-overlay--error {
  color: var(--hx-danger);
}
.hx-banner--error .hx-icon,
.hx-banner-callout--error .hx-icon {
  color: var(--hx-danger);
}

/* Force status color on text + icon (higher specificity) */
.hx-banner.hx-banner--info,
.hx-banner-callout.hx-banner-callout--info,
.hx-app .hx-banner--info,
.hx-app .hx-banner-callout--info {
  color: var(--hx-primary)
}
.hx-banner.hx-banner--success,
.hx-banner-callout.hx-banner-callout--success,
.hx-app .hx-banner--success {
  color: var(--hx-success);
}
.hx-banner.hx-banner--warning,
.hx-banner-callout.hx-banner-callout--warning,
.hx-app .hx-banner--warning {
  color: var(--hx-warning);
}
.hx-banner.hx-banner--error,
.hx-banner-callout.hx-banner-callout--error,
.hx-app .hx-banner--error {
  color: var(--hx-danger);
}

/* Restore core layout (moved from helix) */
.hx-banner,
.hx-banner-callout,
.hx-banner-overlay {
  display: flex;
  align-items: flex-start;
  gap: var(--hx-space-3);
  width: 100%;
  padding: var(--hx-space-3) var(--hx-space-4);
  border-radius: var(--hx-radius-element);
  text-align: start;
  box-sizing: border-box;
}

.hx-banner__title,
.hx-banner-callout__title {
  margin: 0 0 var(--hx-space-1);
  font-weight: var(--hx-font-weight-semibold);
}

.hx-banner__body,
.hx-banner-callout__body {
  flex: 1;
  min-width: 0;
}

/* Typography */
.hx-banner__title,
.hx-banner-callout__title,
.hx-banner-overlay__title {
  font-size: 14px;
  line-height: 1.4;
  font-weight: var(--hx-font-weight-semibold);
}

.hx-banner__desc,
.hx-banner__msg,
.hx-banner-callout__msg,
.hx-banner-overlay__msg,
.hx-banner-slim__msg {
  font-size: 12px;
  line-height: 1.4;
}

/* Width: content-sized by default, full only when explicitly section/full */
.hx-banner,
.hx-banner-callout,
.hx-banner-overlay,
.hx-banner-slim {
  width: auto;
  max-width: 100%;
  display: inline-flex;
}

.hx-banner--section,
.hx-banner--full,
.hx-banner-callout--full {
  width: 100%;
  display: flex;
}

/* Spacing between stacked banners */
.hx-banner,
.hx-banner-callout,
.hx-banner-overlay,
.hx-banner-slim {
  margin-bottom: var(--hx-space-3);
}
.hx-banner:last-child,
.hx-banner-callout:last-child,
.hx-banner-overlay:last-child,
.hx-banner-slim:last-child {
  margin-bottom: 0;
}

/* Floating surface */
.hx-banner--floating,
.hx-banner-overlay {
  position: relative;
  max-width: 360px;
  box-shadow: var(--hx-elev);
  background: var(--hx-surface);
  border-radius: var(--hx-radius-element);
  width: auto;
  display: inline-flex;
}

.hx-banner--floating .hx-banner__actions,
.hx-banner-overlay .hx-banner-overlay__actions {
  margin-left: auto;
}


/* Migrated from helix-app.css */
.hx-banner-callout--success, .hx-app .hx-banner-slim--success { background: var(--hx-success-bg); }
.hx-banner-callout--warning, .hx-app .hx-banner-slim--warning { background: var(--hx-warning-bg); }
.hx-banner-callout--error, .hx-app .hx-banner-slim--error { background: var(--hx-danger-bg); }
.hx-banner-callout--recommendation, .hx-app .hx-banner-slim--recommendation { background: var(--hx-recommendation-bg); }
.hx-banner-callout--default, .hx-app .hx-banner-slim--neutral { background: var(--hx-neutral-bg); }
.hx-banner-dismiss {
////	margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
////	width: 28px; height: 28px; border-radius: 6px; cursor: pointer; flex-shrink: 0;
////}
.hx-banner-slim { align-items: center; }
.hx-banner-slim--info { background: var(--hx-info-bg); color: var(--hx-info); }
.hx-banner-slim--success { background: var(--hx-success-bg); color: var(--hx-success); }
.hx-banner-slim--warning { background: var(--hx-warning-bg); color: var(--hx-warning); }