/* The kitchen view (seller tools, step T4a): big text, easy to read from across the kitchen.
   On a phone the times are one under the other; on a tablet or laptop, side by side. */

.kitchen-page .page__body { max-width: 70rem; }

.kitchen__intro { margin: 0 0 var(--space-3); }
.kitchen__new { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0 0 var(--space-3); padding: var(--space-3); background: var(--info-bg); border-radius: var(--radius-sm); font-weight: 800; }
.kitchen__new svg { width: 1.2em; height: 1.2em; flex: none; margin-top: .15em; }
.kitchen__new a { padding-block: .6rem; } /* a bigger tap area */
.kitchen__empty { margin: var(--space-4) 0; font-size: var(--fs-lg); color: var(--text-muted); }
.kitchen__done { margin: var(--space-4) 0 0; font-weight: 800; }

.kitchen__columns { display: grid; gap: var(--space-5); }
.kitchen__column { min-width: 0; }
.page__body .kitchen__column-title { margin: 0 0 var(--space-2); font-size: var(--fs-2xl); }
.page__body .kitchen__slot { margin: var(--space-3) 0 var(--space-2); padding: var(--space-1) var(--space-3); font-size: var(--fs-xl); background: var(--surface-sunk); border-radius: var(--radius-sm); }

.page__body .kitchen__tickets { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.page__body .kitchen__tickets li + li { margin-top: 0; }

.kitchen__ticket {
  padding: var(--space-3);
  font-size: var(--fs-lg);
  background: var(--surface);
  border: 3px solid var(--card-border);
  border-radius: var(--radius);
}
/* Ready: a dashed edge as well as the "Ready" words, so it isn't told by colour alone. */
.kitchen__ticket--ready { border-style: dashed; background: var(--surface-sunk); }

.kitchen__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.kitchen__who { font-size: var(--fs-xl); overflow-wrap: anywhere; }
.kitchen__how { margin: var(--space-1) 0 var(--space-2); font-weight: 800; }

.page__body .kitchen__dishes { margin: 0 0 var(--space-2); padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.page__body .kitchen__dishes li { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.kitchen__choices { display: block; font-size: var(--fs-base); font-weight: 700; color: var(--text-muted); }
.kitchen__note { margin: 0 0 var(--space-3); padding: var(--space-2); background: var(--info-bg); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.kitchen__button { font-size: var(--fs-lg); }

@media (min-width: 900px) {
  .kitchen__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}