/* Buttons, links that act, and the row of actions they sit in. */

@layer base {
  button, input[type="submit"], .button {
    font: 600 1rem/1.2 var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-pill);
    border: 2px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    margin: 0;
  }
  /* The focus ring (base/document.css) keeps a button link's pill shape. */
  .button:focus-visible { border-radius: var(--radius-pill); }
  button:hover, .button:hover { background: var(--soft); }
  button:disabled { opacity: 0.35; cursor: default; }

  input[type="submit"], .button.primary {
    background: var(--ink);
    color: var(--paper);
  }
  input[type="submit"]:hover, .button.primary:hover { background: #333; }

  .actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 1.5rem;

    form { margin: 0; }
  }
  .form + .actions { margin-top: 1rem; }
}