/*
 * Restaurant R11 (0310): the split screen, the table's check tabs, the card at the table and a check's discount. 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-r11-rules.test.ts).
 */

/* ---------------------------------------------------------------- the split */
.sp-count {
  align-items: center;
}
.sp-count__n {
  min-inline-size: 2.5rem;
  text-align: center;
  font-weight: 700;
}
.sp-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--s-3);
  margin-block: var(--s-3);
}
.sp-check {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: var(--s-2) var(--s-3);
}
.sp-check h2 {
  margin-block: 0 var(--s-2);
  font-size: 1.05rem;
}
.sp-lines,
.sp-discs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  border-block-start: 1px solid var(--line);
  padding-block: var(--s-1);
}
.sp-line__qty {
  font-weight: 700;
}
.sp-line__name {
  flex: 1 1 8rem;
}
.sp-line__moves {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.sp-mini,
.sp-tab {
  min-block-size: 44px;
  min-inline-size: 44px;
}
.sp-vat {
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------- the table's check tabs */
/* Browser drive defect 2: a tab is a 44 px pill however tall its neighbours are — never stretched into an oval */
.sp-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: var(--s-2);
}
.sp-tab {
  block-size: auto;
  max-block-size: 56px;
  padding-inline: var(--s-3);
}
.sp-tab[aria-current='page'] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---------------------------------------------------------------- the card at the table, the discount */
.sp-card,
.sp-discount {
  border-block-start: 1px solid var(--line);
  padding-block: var(--s-2);
}
.sp-card__total {
  font-size: 1.3rem;
  font-weight: 700;
}
.sp-kind {
  display: flex;
  gap: var(--s-3);
  border: 0;
  padding: 0;
}
.sp-kind label,
.sp-disc {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
}