/* TrayBar: the ground at the foot of the page (sheet 1c): what is staged on the left, each a
   two-part chip, its kind in mono capitals on the darker grey and its words in the interface face on
   the lighter; on the right a quiet line and one button, white on the ground (the primary button
   inside `.on-ground`, base.css). The chips are square, cut from the ground; the button is round. */
.tray-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-5) var(--space-2);
  background: var(--color-ground);
  font-size: var(--text-quiet);
}

/* What is staged takes the room there is and wraps inside it, so the note and the button never
   leave the line they are on — until there is not room for both, at which point the whole end of
   the bar drops to a line of its own rather than being drawn over the chips. That is a phone
   (found by measuring at 390 px, 8 Oct 2026, once the customer's tray was anchored at the foot and
   so always on screen): `flex: 1 1 0` let this block shrink to nothing while its chips kept their
   own width and ran under the note. The basis is what says "below this, wrap". */
.tray-bar-items {
  flex: 1 1 14rem;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tray-bar-end {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
}

.tray-bar-note {
  color: var(--color-muted);
  font-size: var(--text-label);
}

/* One chip is never wider than the bar: its words give way first and wrap inside it (the rule three
   below), so a long subject cannot push the chip out from under the bar's own edge. */
.tray-item {
  display: inline-flex;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  background: var(--color-on-ground-raised);
  font-size: var(--text-label);
}

.tray-item-kind {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2);
  background: var(--color-on-ground-kind);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-chip);
  text-transform: uppercase;
  line-height: 1;
}

/* The words wrap inside the chip rather than running past it. Not an ellipsis: the × that takes
   this change back rides at the end of these words, and a cut-off chip would be one with no way
   out of it. */
.tray-item-words {
  min-width: 0;
  padding: var(--space-1) var(--space-3);
  overflow-wrap: anywhere;
}

/* **The cue that the button is waiting** (Reed, 8 Oct 2026): a ring of the ground's own white grows
   out of the button and fades, once, whenever what would be sent changes. A box-shadow and not a
   size, a border or a margin, so nothing on the page moves; the page flips one of these two classes
   on, which is how the same animation is restarted without a frame of script (`TrayBar`'s `cue`). */
.tray-bar-press {
  display: inline-flex;
  border-radius: var(--radius-button);
}

.tray-bar-cue-a,
.tray-bar-cue-b {
  animation: tray-cue var(--duration-tray-cue) ease-out;
}

.tray-bar-cue-b {
  animation-name: tray-cue-again;
}

@keyframes tray-cue {
  from {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-on-ground) 55%, transparent);
  }
  to {
    box-shadow: 0 0 0 var(--space-3) transparent;
  }
}

@keyframes tray-cue-again {
  from {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-on-ground) 55%, transparent);
  }
  to {
    box-shadow: 0 0 0 var(--space-3) transparent;
  }
}

/* Somebody who has asked for less motion is told the same thing by the ring standing still for its
   moment rather than growing. */
@media (prefers-reduced-motion: reduce) {
  .tray-bar-cue-a,
  .tray-bar-cue-b {
    animation-timing-function: step-end;
  }
}