/* A bakery's board (xq-bk-): what Dawn Bakehouse adds to the table-ordering pages. Linked after ex-ordering.css.
   Colours, radius and the display face come from the bakehouse's tokens; nothing here names a colour.
   Two things are always said on a card, in words: how a bake is served, and whether it is on the board. */

/* ---- the board ---------------------------------------------------------------------- */
/* What stands above the bakes takes as few lines as it can, so the first of them, with their labels, are on the
   first screen: the heading shares its line with the sample label and the count, search shares its line with
   "show only", and the page starts close under the table strip. */
.xq-bk-board { gap: 14px; padding-top: clamp(14px, 2.6vw, 30px); }
.xq-bk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.xq-bk-tally { color: var(--x-muted); font-size: .9375rem; }
.xq-bk-find { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 28px; }
.xq-bk-find > .x-search { flex: 1 1 18rem; }
/* The filter's name stands beside its two chips. A floated legend is laid out as an ordinary child of the row. */
.xq-bk-show { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.xq-bk-show > .x-filter-label { float: left; }
/* On a phone the two chips stand directly under the search box and their name is kept for assistive technology only,
   as the sections' name is in the strip above. */
@media (max-width: 29.99em) {
  .xq-bk-board { gap: 12px; padding-top: 12px; }
  .xq-bk-show > .x-filter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.xq-bk-card .x-card-body { gap: 8px; }
.xq-bk-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
/* With very large text a label is wider than a phone's card: it wraps inside the card and never pushes the card wider. */
.xq-bk-labels > * { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* The serving format is the bakery's label on the tray: a filled tag, read before the description. */
.xq-bk-serving, .xq-item-main > .xq-card-f { display: inline-block; padding: 3px 10px; border-radius: 6px; background: var(--x-accent); color: var(--x-on-accent); font-size: .8125rem; font-weight: 700; line-height: var(--x-lh-label); }
.xq-item-main > .xq-card-f { border: 0; font-size: .875rem; }
/* A sold-out card keeps its words at full strength; only the photograph steps back (the engine's rule). */
.xq-bk-card.xq-card--off .xq-bk-serving { background: var(--x-surface-2); color: var(--x-ink); box-shadow: inset 0 0 0 1px var(--x-line); }

/* ---- one bake: the way it is served comes first ------------------------------------- */
/* A group whose id begins "serve-" is one bake's own ways of being served (the bakehouse's naming). It is drawn
   as the choice that matters most on the page: a heavier top edge, and each way a box of its own. */
.xq-group[id^="xq-g-serve-"] { border-color: var(--x-line); border-top: 4px solid var(--x-accent); }
.xq-group[id^="xq-g-serve-"] .xq-opts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 8px; padding: 4px 0 8px; }
.xq-group[id^="xq-g-serve-"] .xq-opt { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--x-line); border-radius: var(--x-radius, 8px); font-weight: 600; }
.xq-group[id^="xq-g-serve-"] .xq-opt:has(input:checked) { border-color: var(--x-ink); box-shadow: inset 0 0 0 1px var(--x-ink); }
.xq-group[id^="xq-g-serve-"] .xq-opt-n { font-weight: 400; }

.xq-bk-info { --x-gap: 16px; }
.xq-bk-ways { display: grid; gap: 10px; }
.xq-bk-way-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 12px; }
.xq-bk-way { display: grid; align-content: start; gap: 6px; padding-bottom: 10px; overflow: hidden; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xq-bk-way .x-img { width: 100%; }
.xq-bk-way-t, .xq-bk-way-s { padding-inline: 12px; }
/* "Sold out (sample)" is wider than a narrow tile: it wraps inside the tile, and is never cut short. */
.xq-bk-way-s .x-pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.xq-bk-way-t { font-size: .9375rem; font-weight: 600; line-height: var(--x-lh-label); }
.xq-bk-way--off .x-img { opacity: .5; }

/* ---- the review: something to try ---------------------------------------------------- */
/* It follows the review's own column, so it is tucked up under it and takes the page's closing space itself. */
.xq-bk-try { margin-top: calc(18px - clamp(24px, 5vw, 56px)); padding-bottom: clamp(24px, 5vw, 56px); }
.xq-bk-try > * { max-width: 52rem; }

/* ---- the counter's ticket ------------------------------------------------------------ */
/* What goes into the oven is counted at the top of a ticket and marked on its line, always in words. */
.xq-bk-oven { justify-self: start; padding: 2px 10px; border-radius: 6px; background: var(--x-warn-soft); color: var(--x-warn); font-size: .875rem; font-weight: 700; line-height: var(--x-lh-label); }
.xq-bk-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .9375rem; }
.xq-bk-part { color: var(--x-muted); }
.xq-bk-part--plain + .xq-bk-part--plain::before { content: "· "; }
.xq-bk-part--warm { padding: 1px 8px; border-radius: 6px; background: var(--x-warn-soft); color: var(--x-warn); font-weight: 700; }
.xq-bk-part--serving { padding: 1px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--x-line); color: var(--x-ink); font-weight: 600; }

/* ---- the counter's board ------------------------------------------------------------- */
/* A way of serving sits under its bake, set in, so it reads as part of it. */
.xq-bk-row { display: grid; }
.xq-bk-sub { margin-inline-start: 32px; }

@media (forced-colors: active) {
  .xq-bk-serving, .xq-bk-oven, .xq-bk-part--warm { border: 1px solid CanvasText; }
}