/* buttons: raised at rest, sunken while pressed, and the label moves with the press */
.btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 12px;
font: inherit; font-size: 12.5px; color: var(--text); text-decoration: none; white-space: nowrap; text-shadow: var(--emboss);
background: var(--grad-control);
border: 1px solid var(--edge); border-radius: var(--r-btn);
box-shadow: var(--raised);
cursor: pointer;
}
.btn:hover { background: var(--grad-control-hover); }
.btn:active { padding: 4px 11px 2px 13px; background: var(--grad-pressed); box-shadow: var(--sunken); text-shadow: none; }
.btn:focus-visible { outline: 1px dotted var(--text); outline-offset: -4px; }
.btn[disabled], .btn[aria-disabled="true"] {
padding: 3px 12px;
color: var(--etch); background: var(--chrome-hover); border-color: var(--etch);
box-shadow: var(--raised-soft);
cursor: default;
}