.status__number { font-size: 3rem; font-weight: 900; line-height: 1; }
.status--ready .page__title { color: var(--color-success); }
.status__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
/* Steps: future = empty outline, done = ✓ on latte, now = espresso. */
.status__steps li { text-align: center; padding: 8px 4px; border-radius: var(--radius); border: 1.5px dashed var(--color-border); background: transparent; color: var(--color-faint); font-size: 0.85rem; font-weight: 700; }
.status__steps li.is-done { border: 1.5px solid var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.status__steps li.is-now { border-color: var(--color-primary); }
.status__steps li.is-now { background: var(--color-primary); color: var(--color-on-dark); }
.status__lines { list-style: none; margin: 0; padding: 0; }
.status__line { display: flex; justify-content: space-between; gap: var(--space-2); padding: 6px 0; border-top: 1px solid var(--color-border); }
.status__line:first-child { border-top: 0; }
.status__sub { color: var(--color-muted); font-size: 0.85rem; }
.status__total { display: flex; justify-content: space-between; }
.status__tip { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.status__tip-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.status .btn--primary { align-self: flex-start; }
.status__bill { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.status--called .page__title { animation: status-pulse 0.9s ease-in-out 3; }
@keyframes status-pulse { 50% { transform: scale(1.04); } }
.status__again { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Your bill: each order in its own box with its items in small latte text. */
.status__orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.status__order { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); }
.status__order-head { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.status__order-head .num { margin-left: auto; font-weight: 700; }
.status__order-items { margin: 4px 0 0; color: var(--color-muted); font-size: 0.85rem; line-height: 1.4; }
.status__order--cancelled .status__order-items { text-decoration: line-through; }
.status__again-one, .status > .btn { align-self: flex-start; }
.status__paid, .status__paid-tag { color: var(--color-success); font-weight: 800; }
.status__paid-tag { margin-right: 8px; font-size: 0.9rem; }
/* Where each order on the bill is. */
.status__tag { padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
.status__tag--quiet { background: var(--color-surface-2); color: var(--color-muted); }
.status__tag--busy { background: var(--color-accent); color: var(--color-accent-ink); }
.status__tag--go { background: var(--color-success); color: var(--color-on-dark); }
.status__tag--off { background: transparent; color: var(--color-muted); border: 1px solid var(--color-border); }
/* Ask for the bill. */
.status__ask { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); }
.status__ask-note { margin: 0; font-weight: 700; }
.status__ask-again { padding-left: 0; }