/* A clubhouse restaurant (xq-ch-): what a golf club adds to the table-ordering pages. Linked after ex-ordering.css.
   Colours, radius and the display face come from the club's tokens; nothing here names a colour.
   Two things set it apart. The table is read like a sign on the course: light letters on the club's darkest
   ink, on every guest page and largest on the review. And every control is larger than the kit's, for a hand
   that has just come off the course, on a veranda in daylight. */

/* ---- larger controls, inside the example only -------------------------------------- */
:where(#main) .x-btn { min-height: 52px; padding: 10px 22px; font-size: 1.0625rem; }
:where(#main) .x-btn--s { min-height: 48px; padding: 8px 16px; font-size: 1rem; }
:where(#main) .x-check { min-height: 52px; gap: 12px; font-size: 1.0625rem; }
:where(#main) .x-check input { width: 26px; height: 26px; }
/* A guest's choices by chip: the menu's categories and the table on the review. The staff page keeps the kit's. */
:is(.xq-menu, .xq-ch-move) .x-chip { min-height: 52px; }
:is(.xq-menu, .xq-ch-move) .x-chip-face { min-height: 44px; padding: 0 18px; font-size: 1rem; }
:where(#main) .x-qty-btn { width: 52px; height: 52px; }
:where(#main) .x-qty-n { min-width: 2.5ch; font-size: 1.125rem; }
:where(#main) .x-input { min-height: 52px; font-size: 1.0625rem; }
:where(#main) .x-search-clear { top: 4px; }
:where(#main) .x-back { min-height: 48px; font-size: 1.0625rem; }
:where(#main) .x-nav a, :where(#main) .x-menu-btn { min-height: 48px; }
/* The bottom bar is one height with or without its button, so its arrival moves nothing. */
.xq-bar-t { min-height: 52px; font-size: 1rem; }
.xq-card .x-card-title { font-size: 1.125rem; }
.xq-card-go-t { min-height: 28px; font-size: 1rem; }
.xq-table { min-height: 68px; padding: 10px 14px; }
.xq-table-n { font-size: 1.0625rem; }
.xq-role summary { min-height: 48px; }
.xq-done summary { display: flex; align-items: center; min-height: 48px; padding-block: 0; }

/* ---- the table strip, as a sign ------------------------------------------------------ */
.xq-strip { border-bottom: 0; background: var(--x-ink); color: var(--x-bg); }
.xq-strip-in { min-height: 52px; }
.xq-strip-t { font-size: 1.0625rem; }
/* Where the line is too long for a phone it breaks evenly: the restaurant above, the table and its part of the room below. */
.xq-strip-t > span { text-wrap: balance; }
.xq-strip-t > .x-i { color: inherit; }
.xq-strip-a { color: inherit; font-size: 1rem; }
/* On the dark strip the focus ring is drawn in the page's own light colour, where it can be seen. */
#main .xq-strip a:focus-visible { outline-color: var(--x-bg); }
.xq-strip-below { border-top-color: color-mix(in srgb, var(--x-bg) 30%, transparent); }

/* ---- welcome and menu ---------------------------------------------------------------- */
.xq-tent { border-top-width: 6px; }
.xq-ch-note { max-width: 42rem; padding-inline-start: 14px; border-inline-start: 3px solid var(--x-line); }
/* The quick label is the club's own mark on a dish: filled, so it is found at a glance down the list. */
.xq-card-f { border-color: transparent; background: var(--x-ink); color: var(--x-bg); }

/* ---- the review: where the order is going ------------------------------------------- */
.xq-ch-dest { display: grid; gap: 2px; padding: 18px 20px 20px; border-radius: calc(var(--x-radius, 8px) + 4px); background: var(--x-ink); color: var(--x-bg); }
.xq-ch-dest-k { font-size: .8125rem; font-weight: 600; letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xq-ch-dest-n { font-family: var(--x-display, var(--x-text)); font-size: clamp(2.5rem, 1.7rem + 4vw, 3.75rem); 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-ch-dest-n:lang(th) { font-family: "x-figures", var(--x-display, var(--x-text)); font-weight: var(--x-th-display-weight, 600); }
.xq-ch-dest-z { font-size: 1.0625rem; font-weight: 600; }
.xq-ch-dest-o { max-width: 40rem; margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--x-bg) 35%, transparent); font-size: .9375rem; }
.xq-ch-move { display: grid; gap: 6px; }

/* ---- the page that says where the service stops ------------------------------------- */
.xq-ch-else > * { max-width: 52rem; }
.xq-ch-stops { display: grid; gap: 10px; }
.xq-ch-stop { display: grid; gap: 2px; padding: 12px 16px; border: 1px dashed var(--x-line); border-radius: var(--x-radius, 8px); }
.xq-ch-stop dt { font-weight: 700; }
.xq-ch-stop dd { color: var(--x-muted); }
.xq-ch-way { --x-gap: 10px; padding: 18px 20px; border: 1px solid var(--x-hair); border-radius: calc(var(--x-radius, 8px) + 4px); background: var(--x-surface); }
:where(#main) .xq-ch-way h3 { font-size: 1.1875rem; }
.xq-ch-zone { display: grid; gap: 6px; }
.xq-ch-zone-l { color: var(--x-muted); font-size: .8125rem; font-weight: 700; letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xq-ch-asks { display: grid; gap: 4px; padding-inline-start: 1.2em; list-style: disc; }
.xq-ch-chan { display: block; font-weight: 600; overflow-wrap: anywhere; }

/* ---- the staff page ------------------------------------------------------------------ */
/* One quiet line under the heading: it must not push the first ticket off a phone's first screen. */
.xq-ch-scope { max-width: 46rem; padding-inline-start: 10px; border-inline-start: 3px solid var(--x-ink); color: var(--x-muted); font-size: .875rem; }
/* A ticket's heading carries the restaurant's name as well as the table. It is given room for that name on one
   line, in Thai as in English; where the status cannot share the row with it (a long status, large text on a
   phone) the status goes under the heading, and nothing is squeezed or pushed off the ticket. */
:where(#main) .xq-ticket-t { flex: 1 1 11rem; min-width: 0; font-size: 1.1875rem; }
.xq-ticket-head { flex-wrap: wrap; }
/* The order's sheet is headed the same way. With the reader's text size doubled on a phone the name is wider
   than the sheet: the heading may then give way, so that the button that closes the sheet stays inside it. */
#xq-detail .x-dialog-h { min-width: 0; }

/* On a phone the office's address goes under its label, where it has the whole line and is not cut in two. */
@media (max-width: 30em) {
  .xq-ch-way { --x-fact-label: 100%; }
}
@media (min-width: 45em) {
  .xq-ch-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (forced-colors: active) {
  .xq-strip, .xq-ch-dest, .xq-card-f { border: 1px solid CanvasText; }
}