/* ---- queue columns: who has it, and whether the guest has been called back ---- */
.c-owner { white-space: nowrap; width: 10.5rem; color: var(--text-dim); }
.c-owner .meta, .c-back .meta { display: block; font-size: var(--fs-72); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.c-back { white-space: nowrap; width: 9rem; color: var(--text-dim); }
.c-work { text-align: right; white-space: nowrap; }
.c-work .work-state, .c-work .work-act { display: inline-flex; align-items: center; justify-content: flex-end; vertical-align: middle; }
.c-work .work-act { margin-left: var(--sp-45); }
.yes { display: inline-flex; align-items: center; gap: var(--sp-30); color: var(--text-dim); font-weight: 500; }
.yes svg { color: var(--violet); flex: none; }
.no { color: var(--text-faint); font-style: italic; }

.qact {
  font-size: var(--fs-72); font-weight: 600; color: var(--violet);
  padding: 0.24rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel);
}
.qact + .qact { margin-left: var(--sp-30); }
.qact:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.qact--crit { color: var(--crit); }
.qact--crit:hover { background: var(--crit); border-color: var(--crit); color: #fff; }
.qact:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.qdone { font-size: var(--fs-72); color: var(--text-faint); }

.qnote { font-size: var(--fs-72); color: var(--text-faint); margin-top: var(--sp-70); }

/* seven columns, and Status holds one pill here rather than two */
.queue .c-when { width: 7.5rem; }
.queue .c-who { max-width: 8.5rem; }
.queue .c-owner { width: 8.5rem; }
.queue .c-back { width: 7rem; }
.queue .c-work { width: 15.5rem; }
.queue .c-why { min-width: 11rem; }
/* .queue td, .queue thead th's cell padding lives in list.css, not here: it
   shares equal specificity with .calls td / .calls thead th and has always
   won only by coming after them in source (queue.css links after list.css).
   Its @media (max-width: 52rem) counterpart needs the opposite order --
   .calls td's own mobile override must win there -- so both copies stay
   next to .calls td in list.css, where their relative order can be kept
   correct in both places at once. */

@media (max-width: 52rem) {
  .calls .c-owner, .calls .c-back { display: none; }
  /* An auto-layout table is sized by its longest nowrap line, so the ellipsis
     never fires and the right-hand columns get pushed off the screen. Fixed
     layout is what makes the queue fit a phone — and the action button is the
     whole point of the queue, so it has to be reachable without a sideways
     scroll. */
  table.calls.queue { table-layout: fixed; width: 100%; }
  .queue .c-when { width: 5.5rem; }
  .queue .c-work { width: 7.5rem; }
  .queue .c-why { width: auto; min-width: 0; }
  /* the reason is the thing you are scanning for, so let it wrap to two lines
     rather than ellipsing it away; the secondary line stays clipped to one */
  .queue .c-why .why { white-space: normal; overflow: visible; }
  .queue .c-why .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the padding-left/right override for .queue td, .queue thead th moved to
     list.css's own 52rem block, right before .calls td -- see the comment
     by the base rule above */
  /* stack the pill over its action so neither is pushed off a narrow screen */
  .c-work .work-state, .c-work .work-act { display: flex; }
  .c-work .work-act { margin-left: 0; margin-top: var(--sp-30); }
}

@media (max-width: 30rem) {
  .c-work { text-align: right; }
  .qact + .qact { margin-left: var(--sp-25); }
}