/* The menu's screens on a page that takes orders (screens/ordering.js,
   dish-picker.js): the table page today, pickup on the link next. Built from
   the classes menu-link.css and shop.css already have (.sh-card-row, .sh-add,
   .sh-stepper, .sh-basketbar) so the cards and the basket plate are the shop
   link's (boards S2, S3); only what does not exist there is here, prefixed ml-
   (the menu's) or tb- (the table's own views). Colours only through the tokens,
   so the dark palette follows. */

/* ── A dish card that takes orders ────────────────────────────────────────── */
/* The row (Add, or what is on the order and the stepper) is the card's last
   line, across its width. The text's button loses its reach below the text: the
   row is under it. A photo card gives the price pill, which hangs 12 px under
   the photo, room before the row. */
html.dd-app .ml-dish-ord { flex-wrap: wrap; row-gap: 10px; }
html.dd-app .ml-dish-ord.ml-dish-has-photo { padding-bottom: 12px; row-gap: 22px; }
html.dd-app .ml-dish-ord .ml-dish-main { margin-bottom: 0; padding-bottom: 0; }
html.dd-app .ml-dish-ord .ml-ord-row { flex: 0 0 100%; }

/* ── The bar at the foot: basket, and the waiter's call ───────────────────── */
html.dd-app .ml-ordbar { display: flex; align-items: stretch; gap: 10px; }
html.dd-app .ml-ordbar > .sh-basketbar, html.dd-app .ml-ordbar > .dd-btn { flex: 1 1 0; min-width: 0; width: auto; }
/* The call beside the basket is the tonal action (never a white button with a
   green edge), as tall as the plate. */
html.dd-app .ml-callbtn {
  flex: none; min-height: 52px; box-sizing: border-box; padding: 0 18px; border: 0; border-radius: 26px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  background: var(--tonal-fill); color: var(--tonal-ink); font-size: 15px; font-weight: 600; cursor: pointer;
}
/* Alone it is the filled plate: the bell and its words in the middle. */
html.dd-app .ml-callplate { justify-content: center; gap: 8px; padding: 0 20px; }
html.dd-app .ml-callplate svg { flex: none; }
/* Beside the basket on a phone only the bell is drawn, in a round button; its
   words stay for a screen reader. */
@media (max-width: 439px) {
  html.dd-app .ml-callbtn { width: 52px; padding: 0; }
  html.dd-app .ml-callbtn-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ── The dish's choices to pick ───────────────────────────────────────────── */
html.dd-app .ml-picker, html.dd-app .ml-picker-groups { display: flex; flex-direction: column; gap: 18px; }
html.dd-app .ml-choices .dd-picks { margin-top: 4px; }

/* ── Pickup on the menu link (pickup/controller.js, screens/pickup-*.js) ──── */
/* The way in under the venue's name: the screen's one filled plate with what the
   venue says under it; "Your order" beside it is the tonal one. */
html.dd-app .pk-wrap { display: flex; flex-direction: column; gap: 14px; }
html.dd-app .pk-entry { display: flex; flex-direction: column; gap: 6px; }
html.dd-app .pk-sub { margin: 0; text-align: center; font-size: 14px; line-height: 20px; color: var(--paper-dim); }
html.dd-app .pk-active { margin: 0; font-size: 14px; line-height: 20px; color: var(--paper-dim); }
html.dd-app .pk-entry .dd-btn { width: 100%; }
/* The basket: a line's choices sit under its name; the times are a row of chips. */
html.dd-app .pk-line .sh-fine { margin-top: 2px; }
html.dd-app .pk-when { display: flex; flex-direction: column; gap: 8px; }
html.dd-app .pk-bill-row { align-items: flex-start; padding: 8px 0; }
html.dd-app .pk-bill-row .sh-bill-qty, html.dd-app .pk-bill-row .sh-bill-sum { padding-top: 2px; }
/* The restaurant's number on the order page is a link drawn as the tonal button. */
html.dd-app .sh-actions a.dd-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* ── The table's own views ────────────────────────────────────────────────── */
html.dd-app .tb-context { padding: 2px 0 6px; }
/* A phone has no room for the three places above a category or a dish. */
@media (max-width: 719px) { html.dd-app .tb-seg-deep { display: none; } }
html.dd-app .dd-order .ml-cat-title { margin: 8px 0 4px; }