/*
 * Restaurant R9 (0308): the void sheet, the floor's move and merge, the expo and the void reasons. Every colour, size,
 * radius and shadow is a token of tokens.css; every direction is LOGICAL (inline/block, start/end); touch targets are
 * at least 44 px (tests/architecture/restaurant-r9-rules.test.ts).
 */

/* ---------------------------------------------------------------- the void sheet */
.vd-lines,
.vd-reasons,
.vd-prepared {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-2) 0;
  border: 0;
  border-block-start: 1px solid var(--line);
}
.vd-lines legend,
.vd-reasons legend,
.vd-prepared legend {
  font-weight: 700;
  padding-block-end: var(--s-1);
}
.vd-line {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  inline-size: 100%;
  min-block-size: 44px;
}
.vd-line input {
  inline-size: 1.4rem;
  block-size: 1.4rem;
}
.vd-reasons .chip-btn,
.vd-prepared .chip-btn {
  min-block-size: 44px;
}
.vd-reason--comp {
  border-color: var(--good);
}
.vd-tag {
  display: inline-block;
  padding-inline: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--warn-bg);
  color: var(--ink);
  font-size: var(--t-caption);
}
.vd-actions {
  border-block-start: 1px dashed var(--line);
  padding-block-start: var(--s-2);
}
.vd-actions .btn {
  min-block-size: 44px;
}
.vd-picking {
  border: 2px dashed var(--accent);
  background: var(--accent-soft);
}

/* ---------------------------------------------------------------- the expo */
.expo {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-3);
}
.expo-head h1 {
  margin: 0;
}
.expo-allday {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-2);
}
.expo-allday ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.expo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--s-3);
}
.expo-card {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--e1);
}
.expo-card--complete {
  border-color: var(--good);
  background: var(--good-bg);
}
.expo-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.expo-card__head h2 {
  margin: 0;
  font-size: var(--t-title);
}
.expo-state {
  font-weight: 700;
}
.expo-station h3 {
  margin: 0;
  font-size: var(--t-label);
  color: var(--muted);
}
.expo-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.expo-item {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: var(--s-1);
  border-block-end: 1px solid var(--line);
}
.expo-item--ready .expo-status {
  color: var(--good-ink);
  font-weight: 700;
}
.expo-item--voided {
  text-decoration: line-through;
  color: var(--muted);
}
.expo-card .btn {
  min-block-size: 44px;
}

/* ---------------------------------------------------------------- the void reasons */
.vr-list {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  padding-block: var(--s-1);
  border-block-end: 1px solid var(--line);
}
.vr-row--off {
  color: var(--muted);
}