/* Drinks ordered from a table: the preparation line, the bar's ticket, and the read-back on a drink's own screen.
   Linked after ex-ordering.css by a scenario that names it. Colours, radius and faces come from the business's tokens. */

/* One order line as the bar calls it. Each choice is a piece that stays whole: the line wraps between choices,
   never inside one, and nothing is cut short. */
.xq-call { line-height: var(--x-lh); overflow-wrap: anywhere; }
.xq-call-q { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xq-call-s { display: inline-block; max-width: 100%; vertical-align: top; }
.xq-call-n { font-weight: 700; }
.xq-call-t { font-weight: 600; }
.xq-call-note { color: var(--x-muted); font-weight: 600; }

/* The same in the order, its review and a sent order: a choice is never broken in two, and a line never begins with a dot. */
.xq-line-o li { display: inline-block; margin-inline-end: .35em; }
.xq-line-o li + li::before { content: none; }
.xq-line-o li:not(:last-child)::after { content: " ·"; }

/* The ticket: the table, then a line for each drink and plate under the station that makes it. */
.xq-calls { display: grid; gap: 4px; }
.xq-calls-g { display: grid; gap: 2px; }
.xq-calls-l { display: grid; }
.xq-calls-l > li { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--x-hair); }
/* On a ticket nobody has started: what the line asks for has run out. An icon and words, never a colour alone. */
.xq-flag { display: flex; gap: 6px; color: var(--x-warn); font-size: .9375rem; font-weight: 700; }
.xq-flag > .x-i { flex: none; margin-top: .22em; }
.xq-ticket--call .xq-prep-l { margin-top: 6px; }

/* On a drink's screen: the line as it stands, and what still waits to be chosen. Beside the choices where there is
   room for both. On a phone the same line rides in the bottom bar, so it is in view while the choices change; where
   that bar would take too much of the screen (a very small phone, or text set much larger) it stays in the page. */
.xq-readback { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--x-hair); border-inline-start: 4px solid var(--x-accent); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xq-readback--open { border-inline-start-color: var(--x-warn); }
:where(#main) .xq-readback-h { color: var(--x-muted); font: 600 .8125rem/var(--x-lh-label) var(--x-text); letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xq-readback .xq-call { font-size: 1.0625rem; }
.xq-readback-w { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--x-hair); font-size: .9375rem; }
.xq-readback-l { color: var(--x-warn); font-weight: 700; }
.xq-readback-w ul { display: grid; gap: 6px; }
.xq-bar-call { display: none; gap: 2px; flex: 1 0 100%; min-width: 0; }
:where(#main) .xq-bar-call-h { color: var(--x-muted); font: 600 .75rem/var(--x-lh-label) var(--x-text); letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xq-bar-call .xq-call { font-size: .9375rem; }
.xq-bar-wait { display: flex; gap: 6px; color: var(--x-warn); font-size: .875rem; font-weight: 700; }
.xq-bar-wait > .x-i { flex: none; margin-top: .22em; }
.xq-bar--drink .x-actionbar-in { flex-wrap: wrap; gap: 8px 12px; }
@media (min-width: 22.5em) and (max-width: 53.7499em) and (min-height: 37.5em) {
  .xq-item--drink .xq-readback { display: none; }
  .xq-bar-call { display: grid; }
  html:has(.xq-bar-call) { scroll-padding-bottom: 176px; }
}
/* Why a choice was taken off is said under the control that caused it: it reads as part of that group. */
.xq-item--drink #xq-taken { margin-top: -8px; }

/* The other tables, one tap away: closed, it is a single line under the list. */
.xq-seat { border-block: 1px solid var(--x-hair); color: var(--x-muted); font-size: .9375rem; }
.xq-seat summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.xq-seat summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-inline-start: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.xq-seat[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.xq-seat summary::-webkit-details-marker { display: none; }
.xq-seat > p { max-width: 46rem; }
.xq-seat-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0 16px; padding-block: 8px 12px; }
.xq-seat-l > li { display: flex; align-items: center; min-height: 44px; }
.xq-seat-l .x-link[aria-current] { color: var(--x-ink); font-weight: 700; text-decoration: none; }

/* The top of the menu is kept short, so that a phone's first screen already shows drinks: the heading and the
   count share a line, and the categories, without their counts on a narrow screen, fit the row or nearly. */
.xq-menu-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
@media (max-width: 37.4375em) {
  .xq-menu--drinks { --x-gap: 14px; padding-top: 16px; }
  :where(#main) .xq-menu--drinks h1 { font-size: 1.5rem; }
  .xq-cats .x-chips { gap: 0 4px; }
  .xq-cats .x-chip-face { justify-content: center; min-width: 44px; padding-inline: 8px; }
  .xq-cats .x-chip-n { display: none; }
}

/* Under an order that cannot be sent yet, the bar's explanation takes a line of its own on a phone, so the table
   and the count keep the whole row and a figure is not parted from what it counts. */
@media (max-width: 37.4375em) {
  .xq-bar .x-actionbar-in:has(> #xq-fix) { flex-wrap: wrap; gap: 0 12px; }
  .xq-bar .x-actionbar-in:has(> #xq-fix) .xq-bar-t { min-height: 0; }
  .xq-bar #xq-fix { flex-basis: 100%; }
}

/* The staff's switches: a milk or a bean that is always kept has a line, not a box. */
.xq-avail-k { padding-block: 8px; }
.xq-avail .xq-h { margin-top: 6px; }

/* A drinks menu reads as a list at every width: a small square picture, the name, how it is served and the way in,
   with a hairline between one drink and the next. Two columns where there is room. */
.xq-menu .xq-grid { --x-min: 21rem; gap: 0 32px; }
.xq-menu .xq-card { flex-direction: row; align-items: flex-start; border: 0; border-top: 1px solid var(--x-hair); border-radius: 0; background: none; }
.xq-menu .xq-card .x-card-media { flex: none; width: 76px; margin-block: 14px; border-radius: var(--x-radius, 8px); }
.xq-menu .xq-card .x-card-media .x-img { height: auto; }
.xq-menu .xq-card .x-card-body { padding: 14px 0 14px 14px; }
.xq-menu .xq-card-f { font-size: .8125rem; }

/* A drink's choices sit two to a row, each in the same place every time, so a regular order is a few quick taps. */
.xq-item .xq-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.xq-item .xq-opt { align-items: flex-start; padding-block: 11px; }
/* Beside the choices the picture is a band, not a wall: the read-back under it stays on the first screen. */
@media (min-width: 53.75em) {
  .xq-item .xq-item-media { aspect-ratio: 3 / 2; }
  .xq-item .xq-item-media .x-img { height: 100%; }
}