/* Table ordering (xq-): the guest's pages and the staff page, for every venue that uses the engine.
   Colours, radius and the display face come from the venue's tokens; nothing here names a colour.
   A phone is the first screen: one column, 44 px controls, the table always in view.
   A control a guest has just pressed never moves: what changes appears beside it or below it. */

.xq-kicker { color: var(--x-muted); font-size: .8125rem; font-weight: 600; letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xq-lead { max-width: 42rem; font-size: 1.0625rem; }
:where(#main) .xq-h { margin-top: 10px; font-size: 1.25rem; }

/* What has just arrived fades up once; under reduced motion the kit makes it instant. */
@keyframes xq-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes xq-mark { from { opacity: .35; transform: scale(.7); } }
.xq-in, .xq-mine, .xq-ticket--moved { animation: xq-in var(--x-panel) var(--x-ease) both; }

/* ---- the table strip: the one element that sticks ---------------------------------- */
.xq-strip { background: var(--x-surface-2); border-bottom: 1px solid var(--x-hair); }
.xq-strip-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.xq-strip-t { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .9375rem; font-weight: 600; line-height: var(--x-lh-label); }
.xq-strip-t > .x-i { color: var(--x-accent-ink); }
.xq-strip-a { flex: none; font-size: .9375rem; font-weight: 600; white-space: nowrap; }
/* With the text doubled on a phone, three bars would take half the screen: the strip then scrolls away with the
   page, and a bottom bar that has something to explain gives its whole width to the explanation. */
@media (max-width: 19.9em) {
  .xq-strip.x-stick { position: static; }
  .xq-bar-t:has(+ .x-hint) { display: none; }
}
/* A venue may keep its categories at hand: a second row of the strip, one line that scrolls sideways with a soft edge. */
.xq-strip-below { border-top: 1px solid var(--x-hair); }
.xq-cats { display: block; min-width: 0; }
.xq-cats .x-filter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.xq-cats .x-chips { --x-under: var(--x-surface-2); position: relative; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; background: linear-gradient(90deg, var(--x-under) 40%, transparent) 0 0 / 32px 100% no-repeat local, linear-gradient(270deg, var(--x-under) 40%, transparent) 100% 0 / 32px 100% no-repeat local, linear-gradient(90deg, var(--x-hair), transparent) 0 0 / 14px 100% no-repeat scroll, linear-gradient(270deg, var(--x-hair), transparent) 100% 0 / 14px 100% no-repeat scroll; }
.xq-cats .x-chip { flex: none; }
.xq-cats .x-chip-face { white-space: nowrap; }

/* ---- start: the table card --------------------------------------------------------- */
.xq-start { display: grid; gap: 32px; }
.xq-start-main, .xq-start-side { align-content: start; }
.xq-tent { display: grid; justify-items: start; gap: 6px; padding: 20px; border: 1px solid var(--x-hair); border-top: 4px solid var(--x-accent); border-radius: calc(var(--x-radius, 8px) + 4px); background: var(--x-surface); }
.xq-tent-k { color: var(--x-muted); font-size: .875rem; }
.xq-tent-n { font-family: var(--x-display, var(--x-text)); font-size: clamp(2.25rem, 1.6rem + 3.4vw, 3.25rem); font-weight: var(--x-display-weight, 600); line-height: var(--x-lh-head); }
/* In Thai the figures sit beside Thai letters, so they are set plain like them. */
.xq-tent-n:lang(th) { font-family: "x-figures", var(--x-display, var(--x-text)); font-weight: var(--x-th-display-weight, 600); }
.xq-tent-z { margin-bottom: 10px; color: var(--x-muted); }
.xq-tent-more { display: grid; gap: 4px; margin-top: 8px; }
.xq-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 8px; }
.xq-table { display: grid; align-content: center; gap: 2px; min-height: 60px; margin: 0; padding: 8px 12px; border: 1px solid var(--x-line); border-radius: var(--x-radius, 8px); background: var(--x-surface); color: inherit; text-decoration: none; }
.xq-table-n { font-weight: 600; }
.xq-table-z { color: var(--x-muted); font-size: .875rem; }
/* The table in use: a heavier edge and a tick, never a colour alone. */
.xq-table[aria-current] { border-color: var(--x-ink); box-shadow: inset 0 0 0 1px var(--x-ink); }
.xq-table[aria-current] .xq-table-n::after { content: ""; display: inline-block; width: 6px; height: 11px; margin: 0 0 1px 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.xq-how { display: grid; gap: 12px; }
.xq-how li { display: flex; align-items: baseline; gap: 12px; }
.xq-how-n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--x-line); border-radius: 50%; font-size: .8125rem; font-weight: 700; line-height: 1; }
@media (min-width: 56.25em) {
  .xq-start { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
}

/* ---- the menu ---------------------------------------------------------------------- */
.xq-period { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.xq-period > .x-i { color: var(--x-accent-ink); }
.xq-sec { --x-gap: 12px; }
.xq-sec + .xq-sec { margin-top: 14px; }
.xq-sec-head { display: grid; gap: 2px; }
.xq-grid { --x-min: 260px; }
.xq-card-b { display: flex; }
.xq-card-d { color: var(--x-muted); font-size: .9375rem; }
/* A venue's own label on an item (how it is served, say): plain to see, never a colour alone. */
.xq-card-f { justify-self: start; padding: 2px 10px; border: 1px solid var(--x-line); border-radius: var(--x-radius, 8px); font-size: .875rem; font-weight: 600; }
/* The way on, and beside it how many are already in the order. The count arrives to the right of
   what was pressed, or under it on a narrow card, so the pressed control keeps its place. */
.xq-card-go { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.xq-card-go-t { display: inline-flex; align-items: center; gap: 4px; color: var(--x-accent-ink); font-size: .9375rem; font-weight: 600; }
.xq-card .x-card-actions { align-items: center; gap: 6px 10px; }
.xq-card--off .x-card-media { opacity: .5; }
/* The bar is there from the first render and is one height whether or not it has its button. */
.xq-bar-t { display: flex; align-items: center; min-width: 0; min-height: 44px; font-size: .9375rem; }
/* On a phone a card is a row: a slim photograph (or its plate) beside the words, so more of the menu fits a screen. */
@media (max-width: 37.4375em) {
  .xq-card { flex-direction: row; }
  .xq-card .x-card-media { flex: none; width: 96px; border-radius: calc(var(--x-radius, 8px) - 1px) 0 0 calc(var(--x-radius, 8px) - 1px); }
  .xq-card .x-card-media .x-img { height: 100%; }
  .xq-card .x-card-body { padding: 12px 14px; }
}

/* ---- one item and its options ------------------------------------------------------ */
.xq-item { display: grid; gap: 14px; }
.xq-item-grid { display: grid; gap: 20px; }
.xq-item-grid > * { min-width: 0; }
/* On a phone the photograph is a band above the name, cropped to the same shape whether it is a photograph or its plate. */
.xq-item-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--x-radius, 8px); }
.xq-item-media .x-img { height: 100%; }
.xq-item-meta { color: var(--x-muted); }
.xq-group { display: grid; gap: 4px; padding: 14px 16px 8px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xq-group--bad { border-color: var(--x-danger); box-shadow: inset 0 0 0 1px var(--x-danger); }
/* Floated, a legend is laid out inside its box like any other line, not across the border. */
.xq-group-l { float: left; width: 100%; padding: 0 0 2px; }
.xq-rule { margin-inline-start: 6px; color: var(--x-muted); font-size: .875rem; }
.xq-opts { display: grid; }
.xq-opt--off { color: var(--x-muted); }
.xq-opt-n { display: block; font-size: .875rem; }
/* Where there is room, the venue's facts about the item sit under the photograph, beside the choices,
   and the quantity and Add stay together at the end of the bar. */
@media (min-width: 53.75em) {
  .xq-item-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; gap: 24px 48px; align-items: start; }
  .xq-item-media { grid-column: 1; grid-row: 1; aspect-ratio: auto; }
  .xq-item-media .x-img { height: auto; }
  .xq-item-main { grid-column: 2; grid-row: 1 / span 2; }
  .xq-item-info { grid-column: 1; grid-row: 2; }
  .xq-bar--item .x-actionbar-in { justify-content: flex-end; gap: 20px; }
}

/* ---- order lines: in the cart, on the review, on a sent order, on a staff ticket ---- */
.xq-lines { border-bottom: 1px solid var(--x-hair); }
.xq-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; padding: 14px 0; border-top: 1px solid var(--x-hair); }
.xq-lines--read .xq-line { grid-template-columns: minmax(0, 1fr); }
.xq-line-img { width: 64px; border-radius: var(--x-radius, 8px); }
.xq-line-main { display: grid; align-content: start; gap: 4px; min-width: 0; }
.xq-line-n { font-weight: 600; }
.xq-line-q { font-variant-numeric: tabular-nums; }
.xq-line-c { display: inline-block; margin-inline-start: 8px; padding: 1px 8px; border-radius: 999px; background: var(--x-surface-2); color: var(--x-muted); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.xq-line-o { color: var(--x-muted); font-size: .9375rem; }
.xq-line-o li { display: inline; }
.xq-line-o li + li::before { content: " · "; }
.xq-line-note { padding-inline-start: 10px; border-inline-start: 2px solid var(--x-line); font-size: .9375rem; }
.xq-line-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* A line that can no longer be ordered: a bar at its edge and the reason in words. */
.xq-line--bad { padding-inline-start: 12px; box-shadow: inset 3px 0 0 var(--x-danger); }
.xq-blocked-list { padding-inline-start: 1.2em; list-style: disc; font-weight: 600; }
/* Lines set out for whoever prepares them: the venue's headings, each over its own lines. */
.xq-prep { display: grid; gap: 6px; }
.xq-prep-l { margin-top: 4px; color: var(--x-muted); font-size: .8125rem; font-weight: 700; letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xq-prep .xq-lines { border-bottom: 0; }
@media (min-width: 45em) {
  .xq-line { grid-template-columns: auto minmax(0, 1fr) auto; }
  .xq-line-acts { grid-column: auto; justify-content: flex-end; align-self: start; }
  .xq-lines--read .xq-line { grid-template-columns: minmax(0, 1fr); }
}

/* ---- a sent order ------------------------------------------------------------------ */
/* Reading pages keep a comfortable measure, set from the same left edge as the header. */
:is(.xq-cart, .xq-review, .xq-track, .xq-sent, .xq-requests) > * { max-width: 52rem; }
.xq-track-m { color: var(--x-muted); }
.xq-status { display: grid; justify-items: start; gap: 12px; padding: 16px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xq-status-now { font-weight: 600; }
.xq-flow { display: grid; width: 100%; }
.xq-flow-s { position: relative; display: flex; align-items: center; gap: 12px; min-height: 38px; color: var(--x-muted); }
.xq-flow-s + .xq-flow-s::before { content: ""; position: absolute; inset-inline-start: 10px; top: -10px; width: 2px; height: 20px; background: var(--x-line); }
.xq-flow-d { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--x-line); border-radius: 50%; background: var(--x-surface); font-size: .75rem; }
/* Behind it: a tick. On it: a filled mark and heavier words. Ahead: an empty ring. */
.xq-flow-s--done { color: var(--x-ink); }
.xq-flow-s--done .xq-flow-d { border-color: var(--x-ink); }
.xq-flow-s--now { color: var(--x-ink); font-weight: 700; }
.xq-flow-s--now .xq-flow-d { border-color: var(--x-accent); background: var(--x-accent); box-shadow: 0 0 0 3px var(--x-surface), 0 0 0 4px var(--x-accent); animation: xq-mark var(--x-panel) var(--x-ease) both; }
.xq-rounds { display: grid; gap: 12px; }
.xq-related { margin-top: 6px; }
/* The way to the dashboard is a control of its own, with a sentence about it in the same paragraph: it stands on a
   line to itself, as tall as any control to press, and the sentence reads under it. Focused, it keeps that height. */
.xq-related > .x-link, .xq-related > .x-link:focus-visible { display: block; width: fit-content; padding-block: 11px; }
.xq-sent-below { margin-top: 12px; }

/* ---- requests to staff ------------------------------------------------------------- */
.xq-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 12px; }
.xq-kind { display: grid; align-content: start; justify-items: start; gap: 8px; padding: 16px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xq-kind--on { border-color: var(--x-line); background: var(--x-surface-2); }
.xq-kind--out { border-style: dashed; border-color: var(--x-line); background: none; }
:where(#main) .xq-kind-t { font: 600 1.0625rem/var(--x-lh-label) var(--x-text); }
.xq-log li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--x-hair); }
.xq-log-t { margin-inline-end: auto; font-weight: 600; }

/* ---- the staff page ---------------------------------------------------------------- */
/* The top of the page is kept short, so the first ticket is on the first screen of a phone or a tablet. */
.xq-staff { --x-gap: 12px; }
.xq-role { border-block: 1px solid var(--x-hair); color: var(--x-muted); font-size: .9375rem; }
.xq-role summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.xq-role 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-role[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.xq-role summary::-webkit-details-marker { display: none; }
.xq-role p { max-width: 46rem; padding-bottom: 12px; }
/* The counts are one line of words and figures, not a row of tiles. */
.xq-counts { display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: .9375rem; }
.xq-count { display: flex; align-items: baseline; gap: 6px; }
.xq-count dt { color: var(--x-muted); }
.xq-count dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.xq-queue { display: grid; gap: 10px; }
:where(#main) .xq-queue-h { font-size: 1.1875rem; }
.xq-queue-n { color: var(--x-muted); font-weight: 400; }
.xq-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: start; gap: 12px; }
.xq-ticket { display: grid; gap: 8px; min-width: 0; padding: 14px 16px; border: 1px solid var(--x-hair); border-inline-start: 4px solid var(--x-line); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xq-ticket--sent, .xq-ticket--accepted, .xq-ticket--preparing { border-inline-start-color: var(--x-info); }
.xq-ticket--open { border-inline-start-color: var(--x-warn); }
.xq-ticket--ready { border-inline-start-color: var(--x-ok); }
/* A request is not an order, and does not look like one: a dashed edge on a tinted card. */
.xq-ticket--req { border-style: dashed; border-inline-start-style: solid; border-color: var(--x-line); background: var(--x-surface-2); }
.xq-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
:where(#main) .xq-ticket-t { font: 700 1.125rem/var(--x-lh-label) var(--x-text); }
.xq-ticket-m { color: var(--x-muted); font-size: .875rem; }
.xq-req-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; font-weight: 600; }
.xq-ticket .xq-line { padding: 8px 0; }
.xq-ticket-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xq-done summary { padding: 10px 0; font-weight: 600; cursor: pointer; }
.xq-done[open] summary { margin-bottom: 8px; }
.xq-avail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 20px 32px; }
.xq-avail-g { display: grid; align-content: start; }
.xq-avail-g legend { padding-bottom: 4px; }

@media (hover: hover) and (pointer: fine) {
  .xq-table:hover { border-color: var(--x-ink); }
}
@media (forced-colors: active) {
  .xq-flow-s--now .xq-flow-d { background: Highlight; border-color: Highlight; }
  .xq-table[aria-current] { border-color: Highlight; }
}