/* Buttons. The office's .btn (oak, or .ghost outlined, .sm smaller); the customer's
   .small-button (navy) and .accept-button (the big blue yes). After Campfire's buttons.css. */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--r); padding: 8px 13px; font: 600 13.5px var(--body); background: var(--accent); color: var(--on-accent); white-space: nowrap; cursor: pointer; text-decoration: none; }
.staff a.btn { color: var(--on-accent); }
.btn.ghost, .staff a.btn.ghost { background: transparent; border: 1.5px solid var(--line); color: var(--ink); }
.btn.sm { padding: 5px 10px; font-size: var(--text-s); }
.staff .btn[disabled] { opacity: .45; cursor: not-allowed; }
/* Long buttons in a card wrap instead of pushing the column wider than the screen. */
.staff .card .btn { white-space: normal; text-align: left; }

/* A small × that removes a row. */
.staff .x { border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
.staff .x:hover { color: var(--flag-ink); }

/* The crew's buttons are big enough for a gloved thumb. */
.crewv .btn { min-height: 44px; }
.crewv .btn.big { padding: 13px; font-size: var(--text-l); width: 100%; }

.customer .small-button { min-height: 42px; padding: 0 18px; border: 0; border-radius: var(--r); background: var(--navy); color: var(--white); font: 700 14px/1 var(--body); cursor: pointer; }
.customer .small-button:hover { background: var(--black); }
.customer .accept-button { display: block; width: 100%; min-height: 50px; border: 0; border-radius: var(--r); background: var(--accent); color: var(--on-accent); font: 700 16px/1 var(--body); letter-spacing: .02em; cursor: pointer; }
.customer .accept-button:hover { background: var(--blue-ink); }