/* ── The entire button system: two primitives. ─────────────────────────────
   1) .btn      = standard text button. The default IS the primary action (brand
                  accent). ONE size only: height var(--field-h) so it fits table
                  rows without inflating; min-width calc(--field-h * 4) so short
                  labels share a standardized width and long labels grow.
                  Colour variants: .btn-secondary / .btn-ghost / .btn-danger.
   2) .btn-icon = square icon button (1:1 at the control height).
   No size variants (.btn-sm/.btn-lg) and no round buttons — the design language
   is square/rectangular. Uses --brand-accent (NOT --accent) so the primary keeps
   the brand colour through the dark swap, where --accent becomes the pale surface
   and white text would lose contrast.                                          */
/* .btn-unstyled = a real <button> stripped back to plain inline content. Use it
   when an element must be a native button for accessibility (keyboard focus +
   activation) but should look exactly like the surrounding markup it replaced
   (e.g. a clickable <span>/<div> turned into a <button>). Layout classes added
   alongside it still apply. */
.btn-unstyled { display: inline; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--field-h); min-width: calc(var(--field-h) * 4); box-sizing: border-box; background: var(--brand-accent); color: var(--n-0); padding: 0 var(--sp-3); border-radius: var(--radius-control); font-weight: var(--fw-600); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: var(--transition); font-size: var(--fs-2); }
.btn:hover { background: color-mix(in srgb, var(--brand-accent) 88%, var(--n-950)); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-sunken); }
/* Ghost = transparent tertiary/inline action; opts out of the text min-width
   because it's used for compact and icon-adjacent actions. */
.btn-ghost { background: transparent; color: var(--text-muted); border: none; min-width: 0; }
.btn-ghost:hover { background: var(--surface-raised); color: var(--text); }
.btn-danger { background: var(--danger); color: var(--n-0); }
.btn-danger:hover { background: var(--danger-hover); }
.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* THE square icon button — 1:1 at the control height. Opts out of the text
   min-width. In a table row it fills the row height (table context rule). */
.btn-icon { min-width: 0; width: var(--field-h); padding: 0; aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Ledger verification pulse animation */
.pulse-verifying { animation: pulse-blue 1.5s infinite; opacity: 0.8; pointer-events: none; }
@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 var(--accent-surface); }
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.btn.is-disabled { opacity: 0.35; cursor: not-allowed; }