/*
 * The till. §P5: designed for the least confident member of staff, on a cheap
 * Android phone, at a counter with a queue. Big targets, strong contrast, and
 * as few things on screen at once as the job allows.
 */

/* ── The bill ───────────────────────────────────────────────────────────── */
.till-bill {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-block-end: var(--space-4);
}

.till-bill__head { text-align: center; }

.till-bill__total {
  font-size: 2.5rem;
  line-height: 1.1;
  margin: 0 0 var(--space-2);
  font-variant-numeric: tabular-nums;
}

.till-bill__empty { text-align: center; padding: var(--space-4) 0; }

.till-bill__balance {
  margin: var(--space-2) 0 0;
  font-size: var(--text-lg);
}

.till-bill__balance--clear { color: var(--color-notice); font-weight: 600; }

.till-bill__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

/* ── Lines on the bill ──────────────────────────────────────────────────── */
.lines { list-style: none; margin: 0; padding: 0; }

.line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-block-start: 1px solid var(--color-border);
}

.line__money { font-weight: 700; font-variant-numeric: tabular-nums; }
.line__remove { color: var(--color-alert); }
.line__remove form { margin: 0; }

.line__section {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}

/* ── Counter tabs ───────────────────────────────────────────────────────── */

/*
 * THE SAME OBJECT AS THE LIGHT SWITCH, and now built out of the same parts.
 *
 * These were separate pale boxes with the chosen one filled in terracotta —
 * five buttons in a row, each announcing itself, and no sign that they were one
 * choice rather than five actions. The light switch had already solved exactly
 * this: a wooden plate, positions cut into it, and the chosen position PRESSED
 * IN rather than painted a different colour.
 *
 * So the row is one plate, every tab is a detent on it, and the current one is
 * the switch's own socket — --switch-socket with the knob's two inset edges,
 * dark along the top where the rim shadows what has gone into it and lit along
 * the bottom where the floor of the socket catches the bulb.
 *
 * WHAT IS NOT COPIED is the sliding knob. The light switch has three positions
 * of equal width, which is what lets one knob travel by whole steps; these rows
 * are two to five tabs of whatever width their words need — "All" beside
 * "Waiting for the shop" — so a knob would have to be measured in JavaScript on
 * every render. The socket is drawn on the chosen tab instead. Same material,
 * same press, no arithmetic.
 */
.counter-tabs {
  display: flex;
  gap: 0;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  margin-block-end: var(--space-4);
  padding: 4px;
  border: 1px solid var(--plaque-edge-dark);
  border-radius: var(--radius-md);
  background:
    linear-gradient(var(--plaque-veil), var(--plaque-veil)),
    var(--plaque-image) center / cover no-repeat;
  box-shadow: inset 0 1px 0 var(--plaque-edge-lit), var(--shadow-card);
}

.counter-tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  background: none;
  color: var(--color-on-plaque-muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.counter-tab:hover { color: var(--color-on-plaque); }

/* The chosen position, pushed into the plate. */
.counter-tab--on {
  background: var(--switch-socket);
  color: var(--color-on-plaque);
  box-shadow:
    inset 0 2px 3px rgb(0 0 0 / 55%),
    inset 0 -1px 0 var(--plaque-edge-lit);
}

/* ── The goods ──────────────────────────────────────────────────────────── */
.goods {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  /* A tile is as tall as what is on it. Stretched to the tallest in its row,
     a package beside two products left them as boards of empty wood. Also what
     keeps masonry_controller.js from growing a tile it has just measured. */
  align-items: start;
}

/*
 * Masonry, once masonry_controller.js has arrived: the rows become a 1px ruler
 * and each tile spans as many as it is tall, plus one gap — so the next tile
 * tucks in under the shortest column instead of waiting for the row to end.
 * The gap between tiles is the space left under each, which is why the row gap
 * goes to nothing here and the column gap stays the one number for both.
 */
.goods--masonry {
  grid-auto-rows: 1px;
  row-gap: 0;
}

.good {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.good__name { font-size: var(--text-base); margin: 0 0 var(--space-1); }
.good__category { margin: 0; font-size: var(--text-sm); }

.good__measures { display: flex; flex-direction: column; gap: var(--space-2); }

.add-measure { display: flex; gap: var(--space-2); }

.add-measure__qty {
  width: 4.5rem;
  min-height: var(--tap-target);
  padding: 0 var(--space-2);
  font: inherit;
  text-align: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}

.add-measure__go {
  flex: 1;
  justify-content: space-between;
  text-align: start;
}

.add-measure__price { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Held bills ─────────────────────────────────────────────────────────── */
.held { list-style: none; margin: 0; padding: 0; }

.held__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-block-start: 1px solid var(--color-border);
}

.held__item:first-child { border-block-start: 0; }
.held__item form { margin: 0; }

/* ── Ways of paying ─────────────────────────────────────────────────────── */
.tenders { display: flex; flex-direction: column; gap: var(--space-2); }

/*
 * A disclosure keeps one thing on screen at a time: the seller taps "Cash" and
 * only the cash fields appear. <summary> is styled as a button, so the arrow
 * marker has to go.
 */
.disclosure summary {
  list-style: none;
  width: 100%;
}

.disclosure summary::-webkit-details-marker { display: none; }

.disclosure__body {
  padding: var(--space-3);
  margin-block-start: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* ── Figures on a cash-up ───────────────────────────────────────────────── */
.figures { display: grid; gap: var(--space-2); margin: 0; }

.figure {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.figure dt { color: var(--color-text-muted); }
.figure dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.figure--strong { font-size: var(--text-lg); border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-2); }

.variance--exact { color: var(--color-notice); font-weight: 700; }
.variance--off   { color: var(--color-alert); font-weight: 700; }

.card--attention { border-color: var(--color-warning); background: var(--color-warning-bg); }

/* ── The receipt ────────────────────────────────────────────────────────── */
.receipt {
  max-width: 26rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

.receipt__head { text-align: center; margin-block-end: var(--space-4); }
.receipt__shop { color: var(--color-action); margin-block-end: var(--space-1); }
.receipt__meta { text-align: center; }

.receipt__lines {
  list-style: none;
  margin: var(--space-4) 0;
  padding: var(--space-3) 0;
  border-block: 1px solid var(--color-border);
}

.receipt__lines li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}

.receipt__what { display: flex; flex-direction: column; }
.receipt__money { font-variant-numeric: tabular-nums; white-space: nowrap; }

.receipt__totals { margin: 0; }

.receipt__totals div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}

.receipt__totals dd { margin: 0; font-variant-numeric: tabular-nums; }

.receipt__grand {
  font-size: var(--text-xl);
  font-weight: 700;
  border-block-start: 1px solid var(--color-border);
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
}

.receipt__thanks { text-align: center; margin-block-start: var(--space-5); color: var(--color-text-muted); }

/* Only staff see this: the customer who opens the link gets the receipt alone. */
.receipt__staff {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-4);
  border-block-start: 1px dashed var(--color-border-strong);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.receipt__staff .field__input { font-size: var(--text-sm); }

/*
 * "Take payment" is the one control that must never need hunting for. A bill
 * with ten lines on it pushes the top of the screen out of reach, so this sits
 * at the bottom of the viewport and stays there. The page gets matching bottom
 * padding so the bar never covers the last thing on it.
 */
.till-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-block-start: 1px solid var(--color-border-strong);
  box-shadow: 0 -2px 12px rgb(43 27 20 / 10%);
}

.till-bar__total {
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.till-bar__pay { flex: 1; }

/*
 * The room a fixed bar has to be given, on .page and NOT on .page__body.
 *
 * It was on .page__body, which is right for the till — that page ends there —
 * and wrong for the storefront, where .storefront-footer is a SIBLING that
 * comes after it. The catalogue cleared the bar and the footer scrolled
 * straight underneath it, so the shop's own name and number were the one thing
 * the Basket button covered. .page contains both.
 */
body:has(.till-bar) .page { padding-block-end: calc(var(--tap-target-lg) + var(--space-6)); }

@media (min-width: 48rem) {
  .till-bar {
    inset-inline: auto 0;
    max-width: var(--content-max);
    margin: 0 auto;
    left: 0;
  }
}

/* ── Recording a delivery ───────────────────────────────────────────────── */
.receipt-line {
  padding: var(--space-3);
  margin-block-end: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.receipt-line__numbers {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.counter-tabs--small .counter-tab {
  flex: 0 0 auto;
  min-height: var(--tap-target);
  font-size: var(--text-sm);
}

/* A photograph behind a control is the first thing to drop for somebody who has
   asked for more contrast — the same fallback .lightswitch__slot carries. */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .counter-tabs { background: var(--color-surface-sunken); }
  .counter-tab { color: var(--color-text-muted); }
  .counter-tab:hover,
  .counter-tab--on { color: var(--color-text); }
  .counter-tab--on { background: var(--color-surface); }
}

/* ── Asking a phone for the money ───────────────────────────────────────── */
.stk {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px dashed var(--color-border-strong);
}

.stk__title {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-block-end: var(--space-3);
}

/* Nothing is sent to a real phone until the credentials land, and the seller
   should never be in any doubt about that. */
.stk__stub {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.stk-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  border-inline-start: 4px solid var(--color-border-strong);
}

.stk-status--succeeded { border-inline-start-color: var(--color-notice); }
.stk-status--waiting   { border-inline-start-color: var(--color-accent); }
.stk-status--overdue,
.stk-status--timed_out { border-inline-start-color: var(--color-warning); }
.stk-status--cancelled,
.stk-status--failed    { border-inline-start-color: var(--color-alert); }

/*
 * The new-order cue. The sound is the extra; THIS is the part that works in a
 * noisy shop with the phone face down on the counter.
 */
.order-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-block-end: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 600;
}

.order-alert__count {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}