@layer sections{
  /* ---------- Shared ---------- */
  [ui-section=announcement-bar] .messages{
    display:grid;
    align-items:center;
    justify-items:center;
    margin:0;
    padding:0;
    list-style:none;
  }
  [ui-section=announcement-bar] .message{
    grid-area:1/1;
    max-width:100%;
    font-size:var(--bar-font-mobile, 12px);
    font-style:normal;
    font-weight:500;
    line-height:1.5;
    text-align:center;
    text-wrap:balance;
  }
  [ui-section=announcement-bar] .message a{
    color:inherit;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
  }

  /* ---------- Mobile: one message at a time ---------- */
  @media (max-width: 769px){
    [ui-section=announcement-bar] .message:not(:first-child){
      opacity:0;
      visibility:hidden;
    }
    [ui-section=announcement-bar]:not([data-count="1"]) .message{
      animation:announcement-bar-rotate var(--bar-cycle, 12s) linear infinite both;
      animation-delay:calc(var(--i, 0) * var(--bar-step, 4s));
    }
  }
  @media (max-width: 769px) and (prefers-reduced-motion: reduce){
    [ui-section=announcement-bar] .message{
      animation:none !important;
    }
  }

  /* ---------- Desktop: all messages in one fixed row ---------- */
  @media (min-width: 769.02px){
    [ui-section=announcement-bar] .messages{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:center;
    }
    [ui-section=announcement-bar] .message{
      grid-area:auto;
      padding-inline:var(--spacing-24);
      font-size:var(--bar-font-desktop, 13px);
    }
    [ui-section=announcement-bar] .message + .message{
      border-inline-start:1px solid color-mix(in srgb, currentColor 35%, transparent);
    }
  }
}