/* Shared product banner contract.
 * `--row` is a compact notification inside an island.
 * `--static` is a passive status message and never gains hover affordance.
 */
.nv-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--color-surface-raised, var(--color-well));
  color: var(--dash-text);
}

.nv-banner + .nv-banner { margin-top: 4px; }

.nv-banner--row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 8px;
  background: transparent;
}

.nv-banner--static { cursor: default; }

.nv-banner__icon {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
}

.nv-banner--success { background: var(--color-success-soft, var(--color-well)); }
.nv-banner--warning { background: var(--color-warning-soft, var(--color-well)); }
.nv-banner--danger { background: var(--color-error-soft, var(--color-well)); }
.nv-banner--info { background: var(--color-info-soft, var(--color-well)); }
.nv-banner--success .nv-banner__icon { color: var(--color-success, var(--dash-text)); }
.nv-banner--warning .nv-banner__icon { color: var(--color-warning, var(--dash-text)); }
.nv-banner--danger .nv-banner__icon { color: var(--color-error, var(--dash-text)); }
.nv-banner--info .nv-banner__icon { color: var(--color-info, var(--dash-text)); }

.nv-banner--row .nv-banner__icon,
.nv-banner--compact .nv-banner__icon {
  display: grid;
  place-items: center;
  margin-top: 0;
  background: var(--color-well);
}

.nv-banner--row .nv-banner__icon {
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.nv-banner--row.nv-banner--success,
.nv-banner--row.nv-banner--warning,
.nv-banner--row.nv-banner--danger,
.nv-banner--row.nv-banner--info { background: transparent; }

.nv-banner--row.nv-banner--success .nv-banner__icon,
.nv-banner--compact.nv-banner--success .nv-banner__icon { background-color: var(--color-success-soft, var(--color-well)); }
.nv-banner--row.nv-banner--warning .nv-banner__icon,
.nv-banner--compact.nv-banner--warning .nv-banner__icon { background-color: var(--color-warning-soft, var(--color-well)); }
.nv-banner--row.nv-banner--danger .nv-banner__icon,
.nv-banner--compact.nv-banner--danger .nv-banner__icon { background-color: var(--color-error-soft, var(--color-well)); }
.nv-banner--row.nv-banner--info .nv-banner__icon,
.nv-banner--compact.nv-banner--info .nv-banner__icon { background-color: var(--color-info-soft, var(--color-well)); }

.nv-banner__content { flex: 1; min-width: 0; }

.nv-banner__title {
  min-width: 0;
  margin: 0 0 4px;
  color: var(--dash-text);
  font-size: var(--nv-type-body-size);
  letter-spacing: var(--nv-type-body-tracking);
  font-weight: var(--nv-type-weight-semibold);
  line-height: var(--nv-type-body-line);
}

.nv-banner__text {
  min-width: 0;
  margin: 0;
  color: var(--dash-text-subtle);
  font-size: var(--nv-type-callout-size);
  letter-spacing: var(--nv-type-callout-tracking);
  line-height: var(--nv-type-callout-line);
}

.nv-banner--row .nv-banner__title { margin: 0; font-size: var(--nv-type-callout-size); letter-spacing: var(--nv-type-callout-tracking); }
.nv-banner--row .nv-banner__text { font-size: var(--nv-type-footnote-size); letter-spacing: var(--nv-type-footnote-tracking); line-height: var(--nv-type-footnote-line); }

.nv-banner__chevron {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--dash-text-subtle);
  opacity: 0.72;
}

.nv-banner--compact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
}

.nv-banner--compact .nv-banner__icon { width: 28px; height: 28px; border-radius: 8px; }
.nv-banner--compact .nv-banner__text { align-self: center; color: var(--dash-text); font-size: var(--nv-type-callout-size); letter-spacing: var(--nv-type-callout-tracking); }

.nv-banner__actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

.nv-banner__close {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--dash-text-muted);
  cursor: pointer;
}

.nv-banner__close:hover { background: var(--color-well-hover); color: var(--dash-text); }
.nv-banner__close:focus-visible { outline: 2px solid var(--color-focus-ring, currentColor); outline-offset: 2px; }

.nv-banner--page { border-radius: 0; padding: 12px 24px; }