@layer components {
  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 4.8rem; padding: .8rem 1.6rem; border: 1px solid var(--primary); border-radius: var(--r-control); background: var(--primary); color: var(--on-primary); font: inherit; font-size: 1.4rem; font-weight: 400; line-height: 1.28; letter-spacing: .01em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .11s cubic-bezier(.2, 0, .38, .9), border-color .11s cubic-bezier(.2, 0, .38, .9), color .11s cubic-bezier(.2, 0, .38, .9); }
  .btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
  /* Carbon tertiary: blue outline that fills on hover. */
  .btn--ghost { background: transparent; border-color: var(--primary); color: var(--primary); }
  .btn--ghost:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
  .btn--small { min-height: 3.2rem; padding: .4rem 1.2rem; font-size: 1.35rem; }
  .btn.is-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
  .btn.is-danger:hover { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
  .btn.is-live { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
  .btn.is-live:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
  .btn.is-live:disabled { background: var(--danger); }
  .linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2); font-size: 1.35rem; cursor: pointer; text-decoration: underline; }
  .tool { background: none; border: 0; padding: .3rem .7rem; border-radius: var(--r-control); font: inherit; font-size: 1.3rem; font-weight: 500; color: var(--ink-2); text-decoration: none; cursor: pointer; }
  .tool:hover { background: var(--surface-2); color: var(--ink); }
  .tool.is-danger:hover { background: var(--error-soft); color: var(--error); }
  .actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 1.6rem 0 0; }
  .actions form, .adders form { display: inline; }
  .adders { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; }
  .btn:disabled { opacity: .45; cursor: not-allowed; }
}