/* ops-button.css
   The ops button primitive, in ONE place.

   Extracted from ops-dashboard.css on 2026-08-16. The ConsoleShell renders
   Refresh and Sign out with these classes, and the shell now mounts on the
   spin-up surface (index.html) as well as the dashboard (ops.html). Rather
   than duplicate the rules into console-shell.css, or pull the whole
   dashboard stylesheet onto a page that renders none of its grammar, the
   primitive gets its own file that every shell-bearing page loads.

   Consumes the canonical ORA token stack only (tokens.base →
   tokens.teglo.light → tokens.ceremonial): colours --color-*, type --fs-*
   with --fw-*, spacing the 4px --space-* grid, radii --radius-*, motion
   --duration-* on --ease-*. No literal values.
*/

.ops-btn {
  font: inherit; font-size: var(--type-body); font-weight: var(--fw-medium); cursor: pointer;
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface); color: var(--color-text);
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.ops-btn:hover { background: var(--color-bg-elevated); border-color: var(--color-border-strong); }
.ops-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ops-btn--ghost { background: transparent; }
.ops-btn--danger { color: var(--color-status-danger); border-color: var(--danger-border); }
.ops-btn--danger:hover { background: var(--danger-bg); }
.ops-btn--sm { padding: var(--space-2xs) var(--space-sm); font-size: var(--type-meta); border-radius: var(--radius-md); }
/* Run the check. Deliberately NOT the danger colour of --fix: this button
   changes nothing, it answers a question, and dressing a read as an
   intervention is the same category of lie in a different direction. */
.ops-btn--check { color: var(--color-text); border-color: var(--color-border); font-weight: var(--fw-semibold); }
.ops-btn--check:hover { background: var(--color-bg-glass); }
.ops-btn--fix { color: var(--color-text-inverse); background: var(--color-status-danger); border-color: transparent; font-weight: var(--fw-semibold); }
.ops-btn--fix:hover { background: var(--color-status-danger-bright); border-color: transparent; }