/* Table ordering by serving period (xq-mp-): what a venue with a breakfast menu and an all-day menu adds
   to the ordering engine's screens. It is linked after ex-ordering.css, only by a scenario that names it.
   Colours, radius and the display face come from the venue's tokens; nothing here names a colour.
   Nothing here sticks: the table strip stays the one element that does. */

/* ---- the line over a menu: the period in ink, its hours quieter ----------------------- */
.xq-mp-line { align-items: baseline; }
.xq-mp-line > .x-i { align-self: center; flex: none; }
.xq-mp-line-h { color: var(--x-muted); font-weight: 400; }

/* ---- today's periods: a short card of rows, the one being served marked in words ------- */
.xq-mp-panel { display: grid; gap: 6px; max-width: 42rem; padding: 18px 20px 14px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
:where(#main) .xq-mp-panel-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-mp-rows { display: grid; }
.xq-mp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--x-hair); }
.xq-mp-row-n { grid-column: 1; font-family: var(--x-display, var(--x-text)); font-size: 1.25rem; font-weight: var(--x-display-weight, 600); line-height: var(--x-lh-head); }
/* In Thai the name sits beside Thai figures, so it is set plain like them. */
.xq-mp-row-n:lang(th) { font-family: "x-figures", var(--x-display, var(--x-text)); font-weight: var(--x-th-display-weight, 600); }
/* The state stands beside the name; the hours take the whole width under them, so a phone has room for both pieces. */
.xq-mp-row-s { grid-column: 2; grid-row: 1; justify-self: end; }
.xq-mp-row-h { grid-column: 1 / -1; color: var(--x-muted); font-size: .9375rem; }
.xq-mp-row--now .xq-mp-row-h { color: var(--x-ink); }
.xq-mp-row-off { color: var(--x-muted); font-size: .875rem; white-space: nowrap; }
.xq-mp-sample { max-width: 46rem; }
.xq-mp-panel .xq-mp-sample { padding-top: 6px; }
/* The strip names the restaurant before the table: where that takes two lines, they are two even ones. */
.xq-strip-t > span { text-wrap: balance; }

/* ---- the menu, one period at a time ---------------------------------------------------- */
.xq-mp-tabs .x-chip-face { white-space: normal; }
/* The mark on a dish of the other menu is a short sentence: in a slim card, or with large text, it wraps inside its own shape. */
.xq-mp-menu .xq-card-b { min-width: 0; }
.xq-mp-menu .xq-card-b .x-pill { border-radius: 14px; white-space: normal; }
.xq-mp-menu .xq-sec-head { padding-bottom: 8px; border-bottom: 1px solid var(--x-hair); }
.xq-mp-menu > .xq-mp-sample { padding-top: 14px; border-top: 1px solid var(--x-hair); }
.xq-mp-welcome { --x-gap: 12px; }

/* A ticket's heading carries the restaurant's name before the table, so its status drops to a line of its own when the two do not fit. */
.xq-staff .xq-ticket-head { flex-wrap: wrap; }

/* ---- a sent order: the way to the hotel's dashboard stands on a line of its own, as tall as any control to press --- */
.xq-related > .x-link, .xq-related > .x-link:focus-visible { display: block; width: fit-content; padding-block: 11px; }

/* ---- what the table service does not do: said in the place where it would be asked for --- */
.xq-mp-out { --x-gap: 6px; }
.xq-mp-out > p { color: var(--x-muted); font-size: .9375rem; }

/* ---- hours and service ------------------------------------------------------------------ */
.xq-mp-info { display: grid; gap: 32px; }
.xq-mp-info-main, .xq-mp-info-side { align-content: start; min-width: 0; }
.xq-mp-info-main > * { max-width: 46rem; }
/* The table's column names are set in ink: its first one stands on the scroller's edge cue, where the quieter colour is too faint. */
.xq-mp-times thead th { color: var(--x-ink); }
.xq-mp-covers { display: grid; gap: 8px; padding-inline-start: 1.2em; list-style: disc; }
.xq-mp-changes { display: grid; }
.xq-mp-changes li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--x-hair); }
.xq-mp-changes li:last-child { border-bottom: 1px solid var(--x-hair); }
.xq-mp-changes-d { font-weight: 600; }
@media (min-width: 56.25em) {
  .xq-mp-info { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
}