/* The header's Animation item: a menu with both animators, the Classic Animator and the Broadcast Animator.
   It's a details.header-more like More, so each page's own menu styles apply; this adds the two-line entries. */
.header-animators > summary { gap: 3px; padding-left: 8px; padding-right: 8px; }
.header-animators > summary img { width: 24px; height: 24px; display: block; object-fit: contain; }
.header-animators .header-more-menu { left: 50%; right: auto; transform: translateX(-50%); min-width: 272px; }
.header-animators .header-more-menu a { display: grid !important; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; align-items: center; white-space: normal !important; }
.header-animators .header-more-menu a img { width: 24px; height: 24px; display: block; object-fit: contain; }
.header-animators .header-more-menu strong { display: block; color: #1e293b; font-size: 13px; font-weight: 800; line-height: 1.25; }
.header-animators .header-more-menu small { display: block; margin-top: 2px; color: #64748b; font-size: 11px; font-weight: 600; line-height: 1.3; }
.header-animators .header-more-menu a.active strong,
.header-animators .header-more-menu a.is-active strong { color: #059669; }
/* "New" on the Animation icon and the Broadcast entry until the visitor has seen it (header-animators.js). */
.header-animators > summary { position: relative; }
.header-new-badge { display: inline-block; padding: 1px 5px; border-radius: 999px; background: #10b981; color: #fff; font-size: 9px; font-weight: 800; line-height: 1.35; letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.header-animators > summary .header-new-badge { position: absolute; top: -5px; right: -7px; }
.header-animators .header-more-menu strong .header-new-badge { margin-left: 6px; vertical-align: 1px; box-shadow: none; }