body { background: var(--green-900); }
.staff-shell { margin: 0 auto; max-width: calc(var(--s20) * 7); min-height: 100dvh; padding: var(--s8) var(--s4); }
/* Sits on the always-dark --green-900 body, so the ink is fixed light. */
.staff-header { align-items: center; color: var(--paper-fixed); display: flex; gap: var(--s5); }
.staff-header img { width: calc(var(--s20) * 2); }
.staff-header .eyebrow { color: var(--green-200); }
.staff-shell > .btn.ghost { border-color: var(--green-200); color: var(--green-200); }
.order-details { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); }
.order-details div { background: var(--green-100); border-radius: var(--r-lg); color: var(--froyo); display: grid; gap: var(--s1); padding: var(--s4); }
.kds-board { display: grid; gap: var(--s3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kds-column { background: var(--green-050); border-radius: var(--r-lg); display: grid; gap: var(--s3); padding: var(--s3); }
.kds-card { background: var(--surface-2); border-radius: var(--r-md); display: grid; gap: var(--s2); padding: var(--s3); }
@media (max-width: 40rem) { .staff-header, #lookup { align-items: stretch; flex-direction: column; } .order-details { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .kds-board { grid-template-columns: 1fr; } }