@layer components {
  /* Shared, not admin-only: the client delivery page uses the public layout,
     where admin.css is not loaded — the download button rendered as bare text. */
  .btn {
    display: inline-block;
    cursor: pointer;
    padding: .65rem 1.1rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9375rem;
    color: var(--sf-chalk);
    background: var(--accent);
    border: 0;
    border-radius: var(--radius);
    text-align: center;
  }
  .btn:hover { background: var(--sf-brand-lit); }
  .btn--sm  { padding: .45rem .8rem; font-size: .8125rem; }
  .btn--big { padding: .85rem 1.5rem; font-size: 1rem; }
  .btn--danger {
    background: transparent;
    color: var(--sf-brand-lit);
    border: 1px solid var(--sf-brand-lit);
  }
  .btn--danger:hover { background: var(--accent); color: var(--sf-chalk); }
}