/* v3 banners and chips (reference §5, §6). Inline, full width of their
   container, radius 8px, bold lead word, never icon-only. Chips name a
   state in sentence case (or a numeric code in mono). */

.lg-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  font-size: var(--size-body);
  line-height: var(--leading-body);
}
.lg-banner svg { flex: none; margin-top: 0.125rem; }
.lg-banner strong { font-weight: 600; }
.lg-banner--error { background: var(--danger-tint); color: var(--danger); }
.lg-banner--warning { background: var(--warning-tint); color: var(--text); }
.lg-banner--warning strong { color: var(--warning); }
.lg-banner--info { background: var(--primary-tint); color: var(--primary-ink); }
.lg-banner--success { background: var(--success-tint); color: var(--text); }
.lg-banner--success strong { color: var(--success); }
.lg-banner a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* Offline notice under the top bar (js/v3/net.js). */
.lg-offline {
  position: fixed;
  inset: calc(var(--bar-height) + env(safe-area-inset-top) + var(--space-2)) var(--space-4) auto;
  z-index: var(--layer-bar);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.lg-offline .lg-banner { margin: 0; box-shadow: var(--shadow-menu); pointer-events: auto; }

.lg-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--neutral-tint);
  color: var(--text-muted);
  font-size: var(--size-caption);
  line-height: var(--leading-caption);
  font-weight: 500;
}
.lg-chip--danger { background: var(--danger-tint); color: var(--danger); }