/*
 * Restaurant R8 — the check and the pickup orders (views-table.js, views-pickup.js, table-html.js, prebill.js). Every
 * colour is a token (tokens.css, with its dark values); a state is said in words too (never colour alone); spacing is
 * logical; every control is at least 44 px and the payment's at least 60 px.
 */

.ftable--paid_seated {
  border-color: var(--info);
  background: var(--info-bg);
}

/*
 * Browser drive defect 8: two fixed sides like the sale screen — the menu (with the seat and course strips over it) on
 * the start side, the check (with its tabs over it) on the end side — so the menu is on screen at 1366×768 and never
 * changes side after a split. Each side is a column of its own: an inserted strip or tab row grows its side only.
 */
.ord-body {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.ord-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-inline-size: 0;
}

@media (min-width: 900px) {
  .ord-body {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .ord-body--closed {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ord-round {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-2);
  margin-block-end: var(--s-2);
  background: var(--surface);
}

.ord-round--failed {
  border-color: var(--warn);
  background: var(--warn-bg);
}

.ord-failed {
  color: var(--warn);
  font-weight: 700;
}

.ord-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
}

.ord-line {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
}

.ord-line--void {
  text-decoration: line-through;
  color: var(--muted);
}

.ord-line__name {
  flex: 1;
}

.ord-tag {
  font-size: 0.85em;
  padding-inline: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--muted);
}

.ord-note {
  color: var(--warn);
}

.ord-mini {
  min-block-size: 44px;
  min-inline-size: 44px;
}

.ord-pending {
  border: 1px dashed var(--line-control);
  border-radius: var(--r-card);
  padding: var(--s-2);
  margin-block: var(--s-2);
}

.ord-actions .btn {
  min-block-size: 60px;
}

.ord-tiles {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  margin-block-start: var(--s-2);
}

.ord-tile {
  min-block-size: 64px;
  display: grid;
  align-content: center;
  gap: var(--s-1);
  padding: var(--s-2);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  text-align: start;
}

.ord-tile:disabled {
  opacity: 0.55;
}

.ord-pickup,
.ord-payform {
  display: grid;
  gap: var(--s-2);
  margin-block: var(--s-2);
}

/* the pay form's fields fit the check's column (a field's intrinsic width ran past it at 1366 px) */
.ord-payform {
  grid-template-columns: minmax(0, 1fr);
}

.ord-payform .input {
  inline-size: 100%;
  box-sizing: border-box;
}

.ord-due {
  font-size: 1.25em;
  font-weight: 700;
}

.ord-methods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  border: 0;
  padding: 0;
  margin: 0;
}

.ord-methods legend {
  font-weight: 600;
  margin-block-end: var(--s-1);
}

/* Browser drive defect 3: `.form label` stacks a field over its words; a radio and its word are one row, one target */
.form .ord-method,
.form .ord-attest {
  min-block-size: 44px;
  flex-direction: row;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.form .ord-method {
  min-inline-size: 120px;
  padding-inline: var(--s-3);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  background: var(--surface);
  cursor: pointer;
}

.form .ord-method:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.ord-method input,
.ord-attest input {
  min-block-size: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  padding: 0;
}

.ord-pickups {
  list-style: none;
  margin-block: var(--s-3) 0;
  margin-inline: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.ord-pickup-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  min-block-size: 44px;
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}