/* Notice bar CTA refinements (§9.6).
 * The promo CTA and the shared contact-channel CTAs stay at the standard
 * painted button height so adding actions never makes the announcement chrome
 * taller. Below the tablet breakpoint the same accessible links collapse to
 * icon-only controls; their text returns when there is enough horizontal room.
 */
@layer components {
  .notice-bar__actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--s-2);
  }

  .notice-bar .notice-bar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    flex: 0 0 auto;
    inline-size: var(--btn-h);
    min-inline-size: var(--btn-h);
    block-size: var(--btn-h);
    min-block-size: var(--btn-h);
    padding: 0;
    border: 1px solid currentColor;
    background-color: transparent;
    color: inherit;
    text-decoration: none;
  }

  .notice-bar .notice-bar__cta:hover,
  .notice-bar .notice-bar__cta:focus-visible {
    border-color: currentColor;
    background-color: transparent;
    color: inherit;
  }

  .notice-bar__inner {
    padding-block: var(--s-1);
  }

  .notice-bar__cta-icon,
  .notice-bar__dismiss > [aria-hidden="true"] {
    display: grid;
    place-items: center;
    line-height: 0;
  }

  .notice-bar__cta-label {
    display: none;
    white-space: nowrap;
  }

  @media (min-width: 768px) {
    .notice-bar .notice-bar__cta {
      inline-size: auto;
      min-inline-size: 0;
      padding-inline: var(--s-3);
    }

    .notice-bar__cta-label {
      display: inline;
    }
  }
}