/* Buttons. One definition, for every page that has one: the console
   (console/layout.html), the end user's own page (portal/desktops.html) and
   the three sign-in pages.

   ONE PRIMARY BUTTON A PAGE. It is the thing the page is for (Register a
   desktop, Assign desktop, Connect, Sign in). Everything else is a plain
   button or a line in a menu, and a destructive action is never a button on
   the page it would act on: it is a menu line that leads to a page that asks
   first, and the filled red button exists only there.

   WHY THIS IS ITS OWN FILE. These rules lived in components.css, which only
   the console loads. The end user's page used the same classes and got none
   of them: its Connect button rendered as link-blue text on the blue
   gradient, with no padding. A class a page uses and a stylesheet it loads
   are two lists nothing compiles together; tests/ui_buttons.rs holds them
   to each other now.

   `background-color`, NEVER THE `background` SHORTHAND, on anything here.
   The primary button takes its fill from `.brand-gradient` in tokens.css,
   which sets `background-image`. The shorthand sets every background
   property at once, the image included, and this file loads after tokens.css
   with selectors of the same weight, so `.btn { background: ... }` put
   `background-image: none` on every primary button. With `.btn-primary`
   setting white text and no border, the main button of every create form in
   the console (Assign, Add, Register, Create, Mint, Save) was white on a
   white card: there and working, and invisible. People submitted those forms
   with the Enter key and took that for the design. Found 2026-10-09. The
   contrast test had passed throughout: it checks white on the gradient's
   colours, and never asked whether the gradient was what got painted. */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  min-height: 32px; padding: 0 12px; font: inherit; font-size: 13px;
  color: var(--fg); background-color: var(--ink-2); cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn .i { margin-left: -2px; }

/* Sizes and kinds. Each is a kind of .btn, never a class by itself
   (tests/ui_buttons.rs holds that per element). */
.btn-lg { min-height: 36px; padding: 0 16px; font-size: 14px; }
.btn-icon { width: 32px; padding: 0; justify-content: center; }
/* Beside a value it acts on, such as Copy beside an address. */
.btn-sm { min-height: 24px; padding: 0 8px; font-size: 12px; }
.btn-quiet { border-color: transparent; background-color: transparent; color: var(--fg-2); }

/* A fill of its own under the gradient, so that a primary button is legible
   even where `.brand-gradient` is left off or fails to apply. White on
   --royal is the lighter end of that gradient, and the contrast test already
   holds it above 4.5:1. */
.btn-primary { border: 0; color: #fff; font-weight: 600; background-color: var(--royal); }
.btn-primary:hover { opacity: 0.9; }

/* Destructive actions must not look like every other action. */
.btn-danger {
  border-color: color-mix(in srgb, var(--st-offline) 45%, transparent);
  color: var(--st-offline);
}
.btn-danger:hover { border-color: var(--st-offline); background-color: color-mix(in srgb, var(--st-offline) 5%, transparent); }

/* Filled red exists in one place: the page that confirms something that cannot
   be undone. Everywhere else a destructive action is a line in a menu. */
.btn-destroy { border: 0; color: var(--ink-2); font-weight: 600; background-color: var(--st-offline); }
.btn-destroy:hover { opacity: 0.9; }