/* elegant.work — buttons made of the field (variant c, "the clearing"). Decided by Carsten, 3 Oct 2026, 22:58.
   Load after site.css. Works with buttons-field.js (load after site.js). No edits to site.css or site.js.
   The primary button has no body: a few of the page field's own lines trace the boundary of a clearing, and the clearing
   is the button (drawn on a canvas inside the button by buttons-field.js). The label sits on the clear ground, in the line
   blue at the small size. Secondary: the plain blue label. Colours come from the site's tokens, so light and dark follow. */

/* primary: no fill, no stroke; the label in the line blue */
.btn.primary { position: relative; isolation: isolate; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--blue); min-height: 52px; padding: 0 30px; letter-spacing: .02em; }
.btn.primary:hover, .btn.primary:focus-visible { color: var(--blue); }
.btn.primary[disabled] { opacity: .5; cursor: default; }
/* the field the button is drawn from (created by buttons-field.js); never takes pointer events, never takes space */
.btn.primary > .bf-field { position: absolute; z-index: -1; pointer-events: none; display: block; max-width: none; }
/* the site's clearing pseudo-element would paint the ground over the canvas inside the isolated button: the canvas paints its own ground */
.btn.primary.bf-on.bf-on::after { content: none; }

/* secondary: the plain blue label; underline on hover and focus */
.btn.ghost { border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--blue); min-height: 48px; padding: 0 6px; letter-spacing: .02em; }
.btn.ghost:hover, .btn.ghost:focus-visible { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* rows of buttons: room for the field around the primary */
.actions, .after, .diag-nav { column-gap: var(--sp-5); row-gap: var(--sp-3); align-items: center; }

/* header button and the floating "Message us" */
.nav .nav-cta { min-height: 44px; padding: 0 22px; }
.msg-us { position: fixed; right: 40px; bottom: 28px; z-index: 30; transition: opacity 300ms ease; }
.msg-us .btn.primary { min-height: 48px; padding: 0 26px; }
.msg-us.bf-aside { opacity: 0; pointer-events: none; }
@media (max-width: 720px) { .msg-us { right: 16px; bottom: 16px; } }
@media print { .bf-field, .msg-us { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .msg-us { transition: none; } }

/* Home: the field lines converging into "Start the read" (agent-gather) read as a comet; the button now carries its own field */
.agent-gather { display: none; }