/* buttons.css — .btn and its variants.
 *
 * Three weights and no more: a filled accent button is the one thing a screen
 * wants you to do, a bezelled button is everything else you may do, and a link
 * button is a change of mind. The press is a scale rather than a darker fill —
 * the surface moves under the finger, which is the feedback the platform gives
 * and the only one that reads at 34px. */
.btn{height:36px;padding:0 16px;border:1px solid transparent;border-radius:var(--r-md);background:var(--accent);color:var(--on-accent);font-size:13.5px;font-weight:590;letter-spacing:-.01em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.btn:hover{background:var(--accent-dark);box-shadow:var(--btn-glow)}
.btn:active{transform:scale(.96);box-shadow:none}
.btn.lg{height:42px;padding:0 20px;font-size:14.5px;border-radius:var(--r-lg)}

/* The bezelled button: a raised surface with a hairline and the faintest lift,
   which is what the platform draws for a secondary action. Deliberately not a
   grey fill — this button lands on the page, on a card and on a dialog footer,
   and a fill tuned for one of those disappears on another. */
.btn.ghost{background:var(--raised);border-color:var(--line);color:var(--ink-2);box-shadow:var(--shadow-xs)}
.btn.ghost:hover{background:var(--hover);border-color:var(--field);box-shadow:var(--shadow-xs)}

/* The confirm button of a destructive dialog. --on-accent is the ink that sits
   on a filled button in either palette, and clears AA on --danger in both. */
.btn.danger{background:var(--danger);color:var(--on-accent)}
.btn.danger:hover{background:var(--danger-hover);box-shadow:none}

.btn.link{background:transparent;color:var(--accent);border-color:transparent;padding:6px 4px;height:auto;font-size:13px;font-weight:500;box-shadow:none}
.btn.link:hover{background:transparent;text-decoration:underline;box-shadow:none}

/* A control that cannot be used says so by fading, not by changing colour:
   the shape stays recognisable, the press feedback goes away with it. */
.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover{background:var(--accent)}
.btn.ghost:disabled:hover{background:var(--raised);border-color:var(--line)}
.btn.danger:disabled:hover{background:var(--danger)}
.btn.link:disabled:hover{background:transparent;text-decoration:none}
.btn:disabled:active{transform:none}