/* beschrijf.css -- the small banner for writing a program straight into the tab
 * (S-0000-0329). All sizes and colors from core.css' variables (var(--surface) etc.),
 * no own hex. #editor is position: relative (e1a.css), so this sits over the top of
 * the editor without any change to e1a.js. */

.bs-banner {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  max-width: min(560px, calc(100% - 32px));
  background: var(--surface2);
  color: var(--text-strong);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 6px 14px;
  font-family: var(--font-ui);
  font-size: var(--ui-fs);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-banner-ok  { border-color: var(--ok); color: var(--ok); }
.bs-banner-err { border-color: var(--danger); color: var(--danger-tx); }

/* light theme only (S-0000-0382): the floating banner becomes a soft card, same tokens
 * and same guard as core.css' #menubar .dropdown -- dark is untouched, this never matches
 * either selector below unless system light with no override, or an explicit
 * data-theme="light". */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .bs-banner {
    background: var(--surface-card); border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
  }
}
:root[data-theme="light"] .bs-banner {
  background: var(--surface-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}