/* ============================================================
   ANNOUNCEMENT STRIP — additions

   The strip itself is styled in juq.css exactly as the mockup drew it. This
   file only adds what the mockup had no way to show, because its slides were
   hardcoded text: emote images inside a slide, and the pre-data state.
   ============================================================ */

/* An emote sits on the mono uppercase line, so it is sized to the cap height
   rather than the line box, and its width is fixed by the height so a wide
   emote cannot stretch the slide. */
.anno-emote {
  height: 20px; width: auto; display: inline-block;
  vertical-align: -5px; margin: 0 1px;
}

/* Before the first render the placeholder slides must not flash. The strip
   keeps its height so the page does not jump when the real slides arrive. */
.anno-slides:not(.ready) .anno-slide { opacity: 0; }

/* ---------- the type badge ----------

   The word and colour come from the type picked in the admin. These five
   colours are FIXED, not theme tokens: a type has to mean the same thing in
   every skin, or "alert" would be orange in one and pink in another and stop
   meaning anything. They are the same five the admin already shows as dots
   beside each type, so both screens describe a banner identically.

   `info` has no rule here on purpose. It is the default, and it keeps the
   mockup's plain outlined badge; a colour is earned by choosing a type.

   All four fills are light enough to carry near-black text and a near-black
   outline, which is what keeps the badge legible on any band: orange on dark,
   blue on light, red on spicy, pink on sweet. */
.anno-k[data-style="go"],
.anno-k[data-style="hype"],
.anno-k[data-style="warn"],
.anno-k[data-style="alert"] { color: #111114; border-color: #111114; }

.anno-k[data-style="go"]    { background: #57d98a; }
.anno-k[data-style="hype"]  { background: #b26bff; }
.anno-k[data-style="warn"]  { background: #ffb84d; }
.anno-k[data-style="alert"] { background: #ff6b6b; }