/*
 * Restaurant R5 — the sales channels (sale-channel.js, channels-html.js, views-channels.js): the chip row above the cart
 * with the platform's order number, the pay sheet of an order its platform pays, and the back office's channels. Every
 * colour is a token (tokens.css, with its dark values): a channel's hue is one of the ten section hues, drawn as its
 * chip's edge beside its name (never colour alone); spacing is logical; every control is at least 44 px, the pay 60.
 */

.channel {
  display: grid;
  gap: var(--s-2);
  margin-block-end: var(--s-2);
}

.channel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.channel__chip {
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: var(--s-3);
  border: 1px solid var(--line-control);
  border-inline-start-width: 6px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
}

.channel__chip[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.channel__chip--amber {
  border-inline-start-color: var(--hue-0);
}
.channel__chip--sea {
  border-inline-start-color: var(--hue-1);
}
.channel__chip--green {
  border-inline-start-color: var(--hue-2);
}
.channel__chip--rose {
  border-inline-start-color: var(--hue-3);
}
.channel__chip--violet {
  border-inline-start-color: var(--hue-4);
}
.channel__chip--slate {
  border-inline-start-color: var(--hue-5);
}
.channel__chip--red {
  border-inline-start-color: var(--hue-6);
}
.channel__chip--olive {
  border-inline-start-color: var(--hue-7);
}
.channel__chip--gold {
  border-inline-start-color: var(--hue-8);
}
.channel__chip--blue {
  border-inline-start-color: var(--hue-9);
}

.channel__ref {
  display: grid;
  gap: var(--s-1);
}

.channel__ref input {
  min-block-size: 44px;
  font-size: var(--t-body);
}

.channel__pays {
  color: var(--muted);
}

.channel__set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: var(--s-2) var(--s-3);
}

.channel__set .check,
.channel__hue {
  min-block-size: 44px;
}

.channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.channel-row {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.channel-row--off {
  opacity: 0.7;
}

.channel-row .btn {
  min-block-size: 44px;
}

.pay-platform {
  display: grid;
  gap: var(--s-2);
}

.pay-platform__total {
  font-size: var(--t-title);
  font-weight: 700;
}

.pay-platform .btn--pay {
  min-block-size: 60px;
}

.ktag--channel {
  font-weight: 700;
}