/* Shared button vocabulary.
 *
 * See docs/BUTTON-VOCABULARY.md for the reasoning, the audit it came from, and
 * the migration map. Six roles and three sizes, replacing 119 class
 * combinations across the tools.
 *
 * Load AFTER the tool's own styles.css. This file relies on source order rather
 * than !important, so a tool can still override a rule where it genuinely needs
 * to.
 *
 * Roles, by meaning rather than colour:
 *
 *   btn              an ordinary action; the default and most common choice
 *   btn btn-primary  the one action that completes the screen's purpose
 *   btn btn-ghost    low emphasis: filters, toggles, cancel, in-place controls
 *   btn btn-danger   destructive or irreversible; never also primary
 *   btn btn-link     a low-emphasis action rendered as inline text
 *
 * FIVE roles, not six. btn-success was dropped after the migration found it at
 * zero uses: it requires a *different* primary beside it, and on a screen whose
 * purpose is approving something the approval IS the primary. Approve is
 * btn-primary and reject is btn-danger. Do not reintroduce a green role without
 * amending docs/BUTTON-VOCABULARY.md first.
 *
 * Sizes: btn-sm for dense rows and toolbars, default for everything else,
 * btn-lg for empty-state and sign-in calls to action only.
 *
 * Every rule states `color` explicitly. A <button> does not inherit the page's
 * colour, so a rule that sets only a background renders the browser's default
 * black and goes unreadable in dark mode. That bug is why fd7bbff exists.
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--color-border);
  background: var(--color-bg-hover);
  color: var(--color-text);
  font: 600 0.8125rem/1.2 inherit;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s ease),
              border-color var(--transition-fast, 0.15s ease);
}

.btn:hover:not(:disabled) {
  background: var(--color-bg-active);
  border-color: var(--color-text-muted);
}

.btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- roles ------------------------------------------------------------- */

.btn.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn.btn-ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn.btn-ghost:hover:not(:disabled) {
  background: var(--color-bg-hover);
  border-color: var(--color-text-muted);
}

.btn.btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-inverse);
}
.btn.btn-danger:hover:not(:disabled) {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}


/* A low-emphasis action rendered as inline text. It is deliberately a <button>,
   not an <a>: of the ten uses that existed at migration, nine were mutations or
   disclosure toggles rather than navigation, and an anchor without an href is
   not keyboard-operable while one with href="#" invites a middle-click "open in
   new tab" on something that writes to the database.
   For GENUINE navigation use a real <a href="...">, which may carry these same
   classes - clientlog's "Open in Confluence" is the example to copy. */
.btn.btn-link {
  background: none;
  border-color: transparent;
  color: var(--color-text-link);
  padding-left: 0.15rem;
  padding-right: 0.15rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn.btn-link:hover:not(:disabled) {
  background: none;
  border-color: transparent;
  color: var(--color-text-link-hover);
}

/* ---- sizes ------------------------------------------------------------- */

/* The btn-small alias was removed once the last of the 75-plus legacy spellings
   was migrated; verified at zero uses across all 16 tools. */
.btn.btn-sm {
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
}

.btn.btn-lg {
  padding: 0.6rem 1.2rem;
  font-size: 0.9375rem;
}

/* ---- icon-only --------------------------------------------------------- */

/* Square, for a button whose whole content is an icon. Rule 04: it still needs
   an aria-label, which CSS cannot supply. */
.btn.btn-icon-only {
  padding: 0.35rem;
  aspect-ratio: 1;
}

/* ---- touch targets ----------------------------------------------------- */

/* priora, oncall and quotes each wrote this rule for themselves, and all three
   were silently defeated once they linked this sheet: a tool's single-class
   `.btn` ties with the base rule here and loses on source order. It belongs
   with the definition it modifies, so it lives here now.
   `pointer: coarse` rather than a width breakpoint, which is oncall's version
   and the correct one - a tablet at 1024px needs the larger target and a narrow
   desktop window with a mouse does not. */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
    padding: 0.6rem 1rem;
  }

  .btn.btn-sm {
    min-height: 36px;
    padding: 0.4rem 0.75rem;
  }

  .btn.btn-icon-only {
    min-width: 36px;
  }
}
