/* ==========================================================================
   Eterniseed HTML port — Marquee banner (α.9 marquee ship 2026-05-05)
   --------------------------------------------------------------------------
   Global chrome that renders active broadcasts (from /broadcasts/active) at
   the top of the viewport. One row per broadcast; severity → row color;
   per-broadcast scrolling animation; dismiss button per dismissible flag.
   Component: web_html_port/scripts/components/marquee-banner.js
   ========================================================================== */

.marquee-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Layout collision fix (2026-05-08 batch ship Sub-class C.1).
   Doc-class measurement (DOC_PROD_COMPREHENSIVE_WALK_2026-05-08.md §5b):
   sticky banner at top:0 height:38 z-index:1000 was visually overlaying
   the language picker tabs (lang tab y=14, h=44 → 24px overlap zone
   y=14→38). Two-part fix:
     (1) scroll-padding-top on html so anchor jumps + focus-scroll account
         for the banner's height (browser scrolls focused content BELOW
         the banner, not under it).
     (2) pointer-events:none on the banner background so clicks pass
         through to underlying content (lang tabs, etc.); dismiss + CTA
         stay pointer-events:auto so they remain interactive.
   :has() limits the rule to pages where the banner is actually rendered
   (Chrome 105+, Firefox 121+, Safari 15.4+ — covers all modern targets). */
html:has(body .marquee-banner) {
  scroll-padding-top: 38px;
}

.marquee-row {
  position: relative;
  width: 100%;
  height: 38px;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-family: var(--skin-font-body);
  background: var(--skin-accent, #1a73e8);
  color: var(--skin-ink-on-brand, #fff);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  /* Click-through: banner background is non-interactive so the lang
     picker / page content under it remains clickable. Dismiss + CTA
     re-enable pointer-events below. */
  pointer-events: none;
}

.marquee-row[data-severity="info"]     { background: var(--skin-accent, #1a73e8); color: var(--skin-ink-on-brand, #fff); }
.marquee-row[data-severity="warning"]  { background: #FF8F00; color: #fff; }
.marquee-row[data-severity="critical"] { background: var(--skin-danger, #C62828); color: #fff; }

.marquee-row__viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.marquee-row__scroller {
  display: inline-block;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  animation: marquee-banner-scroll 30s linear infinite;
}

@keyframes marquee-banner-scroll {
  0%   { left: 100%; }
  100% { left: -100%; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-row__scroller {
    animation: none;
    left: var(--space-4, 12px);
    transform: translateY(-50%);
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - var(--space-9, 32px));
  }
}

.marquee-row__title {
  font-weight: 600;
  margin-right: var(--space-3, 8px);
}

.marquee-row__body {
  font-weight: 400;
}

.marquee-row__fallback {
  font-size: 11px;
  opacity: 0.75;
  margin-left: var(--space-3, 8px);
  font-style: italic;
}

.marquee-row__cta {
  display: inline-block;
  margin-left: var(--space-4, 12px);
  padding: 2px var(--space-3, 8px);
  background: rgba(255,255,255,0.18);
  border-radius: var(--radius-sm, 4px);
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  /* Re-enable interactivity (parent .marquee-row sets pointer-events:none
     for click-through to lang picker; dismiss + CTA opt back in). */
  pointer-events: auto;
}

.marquee-row__cta:hover {
  background: rgba(255,255,255,0.28);
}

.marquee-row__dismiss {
  flex: 0 0 auto;
  margin-left: var(--space-3, 8px);
  margin-right: var(--space-4, 12px);
  padding: 0 var(--space-3, 8px);
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  height: 100%;
  opacity: 0.85;
  /* Re-enable interactivity (parent .marquee-row sets pointer-events:none
     for click-through to lang picker; dismiss + CTA opt back in). */
  pointer-events: auto;
}

.marquee-row__dismiss:hover {
  opacity: 1;
}