/* Per-item price chip — the figure beside the plate total when one plate holds several items.
 *
 * WHY IT LOOKS LIKE THIS: the per-item price first shipped as trailing text after the big number
 * (" · $8.00 each") at 62% size, and it read as a footnote — people had to go looking for the one
 * figure they actually wanted. Making it BIGGER was the wrong fix: it would compete with the plate
 * total, and the plate total is what gets quoted for the run.
 *
 * So it earns attention by becoming its own OBJECT instead of louder text — a bordered two-segment
 * pill on its own line. Segmentation does the work: the count sits in its own compartment, the
 * price carries the accent colour. At 12.5px it is smaller than the old inline text was, and far
 * easier to find.
 *
 * Everything is expressed in the app's own custom properties, so light theme, the graphite theme
 * and any future palette all follow without a second rule.
 */

.topUnitPrice {
  display: inline-flex;
  align-items: stretch;
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 999px;
  overflow: hidden;
  line-height: 1;
  font-size: 12.5px;
  letter-spacing: .03em;
  white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

/* Load-bearing. `hidden` sets display:none at a LOWER precedence than the display:inline-flex
   above, so without this the chip stays visible at quantity 1 — showing "x1 / $15.99 each"
   next to an identical plate total, which reads as a bug. */
.topUnitPrice[hidden] { display: none; }

.topUnitPrice .unitChipCount {
  padding: 7px 10px;
  font-weight: 800;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.topUnitPrice .unitChipValue {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 12px;
  font-weight: 800;
  color: var(--accent);
  /* The whole point is comparing this against the plate total directly above it, and digits that
     shift width as the price changes make that comparison harder than it needs to be. */
  font-variant-numeric: tabular-nums;
}

.topUnitPrice .unitChipValue i {
  font-style: normal;
  font-weight: 700;
  font-size: .78em;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .62;
}

/* The strip stacks right-aligned on desktop but goes full width on narrow screens, where a pill
   pinned to the right edge reads as detached from the number it belongs to. */
@media (max-width: 620px) {
  .topUnitPrice { margin-top: 6px; font-size: 12px; }
  .topUnitPrice .unitChipCount { padding: 6px 9px; }
  .topUnitPrice .unitChipValue { padding: 6px 10px; }
}