/* ============================================================================
   Buttons
   ----------------------------------------------------------------------------
   A single resting style is shared by .btn and every real form button so the
   app looks consistent even where no variant class is applied.

   Convention: neutral buttons use this shared resting style; .btn-primary is
   reserved for the one main workflow action (including Save on a standalone
   new/edit form). Embedded settings/status Save controls stay neutral so they
   do not compete with the page workflow. .btn-danger marks destructive actions.
   Cancel is a link when it navigates away and a neutral button in a modal.

   The bare element selectors are wrapped in :where() so they carry ZERO
   specificity. This matters: `input[type="submit"]` is specificity (0,1,1) and
   would otherwise outrank a `.btn-primary` (0,1,0) class on `<input>` submits.
   With :where(), variant classes (.btn-primary, .btn-danger) and context rules
   reliably win, while `.btn` keeps real specificity so it beats element rules
   like `a { color }` for link-buttons.
   ============================================================================ */

@layer components {
  .btn,
  :where(button, input[type="submit"], input[type="reset"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--speed-fast) var(--ease-out),
                border-color var(--speed-fast) var(--ease-out),
                opacity var(--speed-fast) var(--ease-out),
                transform var(--speed-fast) var(--ease-out);
  }

  /* Hover/press are gated on :not(:disabled) (inside :where so specificity
     stays (0,2,0) and variant :hover rules below still win the tie). Forcing
     the background BACK on :disabled:hover instead would sit at (0,3,0) and
     clobber .btn-primary's inverted background, leaving light-on-light text. */
  .btn:hover:where(:not(:disabled)),
  :where(button, input[type="submit"], input[type="reset"]):hover:where(:not(:disabled)) { background: var(--bg-tertiary); text-decoration: none; }

  /* Press feedback lands on pointer-down, not release: a slight scale reads
     as the button giving under the finger the instant it's touched. */
  .btn:active:where(:not(:disabled)),
  :where(button, input[type="submit"], input[type="reset"]):active:where(:not(:disabled)) { transform: scale(0.97); }

  .btn:disabled,
  :where(button, input[type="submit"], input[type="reset"]):disabled { opacity: 0.45; cursor: not-allowed; }

  /* --- Variants ---------------------------------------------------------- */
  .btn-primary {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
  }
  .btn-primary:hover { background: var(--text-primary); opacity: 0.9; }
  /* The global ::selection paints text-primary text over a 14%-alpha accent
     tint — on this button's text-primary background the selected label is
     invisible in both themes, so give selection an opaque, inverted paint. */
  .btn-primary::selection,
  .btn-primary ::selection { background: var(--bg-tertiary); color: var(--text-primary); }

  .btn-danger {
    color: var(--danger-text);
    border-color: var(--danger-border);
    background: var(--bg-primary);
  }
  .btn-danger:hover { background: var(--danger-bg); }

  .btn-small { font-size: 11px; padding: var(--space-1) var(--space-2); }

  /* Keep inline button_to forms from forcing a line break. */
  form.button_to { display: inline-block; }
}