/* =============================================================================
   COMPONENT: action-bar — a screen's ONE primary action (FEA-0000 / MOBILE.md).
   Flows inline at the end of the content on mobile (the <main> scrollport
   scrolls and the bar with it); on desktop it sheds its bar chrome and sits in
   a toolbar. (No longer pinned, so no translucent/blur over scrolling content.)
   ========================================================================== */
@layer components {
  .action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) max(var(--space-md), var(--safe-left));
    background: var(--surface);
    border-block-start: var(--border-width) solid var(--color-border);
  }
  .action-bar > .btn { flex: 1; }   /* primary action spans the full width */

  @media (min-width: 48rem) {
    .action-bar {
      background: none;
      border: 0;
      padding-inline: 0;
    }
    .action-bar > .btn { flex: 0 0 auto; }
  }
}