/* Top banner stack: a fixed full-width column holding the optional WIP
   banner (js/dev-banner.js) and any error banners (js/error-banner.js).
   Stacking them in one flex column means multiple banners pile up instead
   of overlapping; js/error-banner.js republishes the stack height to
   --banners-height so the #status pill stays below it. */
#banners {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50; /* above the panels (z-index 5) and the label overlay */
  display: flex;
  flex-direction: column;
}
/* Optional "work in progress" banner (shown only when DEV=1; see
   js/dev-banner.js). A full-width amber warning bar. */
#dev-banner {
  background: rgba(176, 124, 24, 0.95);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  padding: 9px 44px;
  border-bottom: 1px solid rgba(var(--ink), 0.25);
  backdrop-filter: blur(6px);
  user-select: none;
}
#dev-banner strong { font-weight: 600; }
/* Red, dismissible error banners (js/error-banner.js): the same shape as
   the dev banner but red, each with a × close button, stacked under it. */
.error-banner {
  position: relative;
  background: rgba(150, 30, 35, 0.96);
  color: #ffe3e5;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  padding: 9px 44px;
  border-bottom: 1px solid rgba(var(--ink), 0.2);
  backdrop-filter: blur(6px);
}
.banner-close {
  position: absolute;
  top: 6px;
  right: 12px;
  padding: 0 4px;
  font-size: 18px;
  line-height: 1.2;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.8;
}
.banner-close:hover { opacity: 1; }