.stall-order-actions,
.fulfilment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.stall-order-actions button,
.fulfilment-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
}

.stall-order-actions button.primary,
.fulfilment-actions button.primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.clipped {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}

.clipped.primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

.clipped:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The sole action in its own form/panel, so it gets the width rather
 * than shrinking to content - a long verbal-confirmation sentence needs
 * the room. Stall Queue never defined this family at all (a real gap
 * this consolidation closes, not just a duplicate it removes): the same
 * handoff.js markup rendered on that surface with no special width or
 * centring treatment. */
.confirm-handoff,
.undo-handoff,
.confirm-exceptional,
.exceptional-disclose {
  display: flex;
  width: 100%;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
}

/* These live in a padded panel (.handoff-form etc.); bleed to its full
 * content width rather than sit inset from it a second time. */
.handoff-form .confirm-handoff,
.exceptional-form .confirm-exceptional,
.exceptional-form .exceptional-disclose,
.fulfilment-panel .confirm-handoff {
  width: calc(100% + var(--space-2) * 2);
  margin: 0 calc(var(--space-2) * -1);
}

.handoff-form,
.exceptional-form,
.fulfilment-panel {
  margin-top: var(--space-3);
  border-radius: 20px;
  background: var(--color-accent-100);
}

.handoff-hint,
.exceptional-hint,
.fulfilment-hint {
  margin: 0 0 var(--space-2);
}

.exceptional-name,
.exceptional-contact,
.fulfilment-reason {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-bg);
}

.exceptional-name-label,
.exceptional-contact-label,
.fulfilment-reason-label {
  display: block;
  margin-top: var(--space-2);
  font-size: 12px;
  color: color-mix(
    in srgb,
    var(--color-text) 70%,
    transparent
  ); /* .field > label */
}

.exceptional-error,
.fulfilment-error {
  margin-top: var(--space-2);
  color: var(--color-accent-800);
  font-size: 12.5px;
}

.fulfilment-question {
  margin: 0 0 var(--space-2);
  font-weight: 600;
  font-size: 13.5px;
}

.handoff-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.handoff-window-hint {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* The same ticket shape as a live queue row — 28px on `--color-surface`, the
 * radius and ground the artboard gives every ticket — held back by opacity
 * rather than by a different card, because it is the same object, finished. */
.handed-off-row {
  padding: var(--space-3) var(--space-4);
  border-radius: 28px;
  background: var(--color-surface);
  opacity: 0.7;
}