/* SmartTPV (design 3.4): terminal portrait 720x1280 or a phone 390x844, one action per screen, money
   read at arm's length (14 px floor, the amount and the attempt reference large). Wholly inside
   @layer app. */
@layer app {
  .tpv { max-width: 720px; width: 100%; margin: 0 auto; }
  .tpv-screen { display: flex; flex-direction: column; gap: var(--space-3); }
  .tpv-title { font-size: var(--font-size-500); }
  .bill-row { min-height: var(--touch-primary); }
  .bill-due { font-size: var(--font-size-400); font-weight: 700; }
  .guest-chips { margin-top: var(--space-2); }
  .tpv-amount { font-size: var(--font-size-700); font-weight: 700; margin: var(--space-3) 0; text-align: center; }
  .tip-line { display: flex; flex-direction: column; gap: var(--space-2); }
  .tip-option { font-size: var(--font-size-300); }
  .tpv-start { width: 100%; }
  .handoff { align-items: center; text-align: center; padding: var(--space-5) 0; }
  .attempt-ref { font-size: var(--font-size-800); font-weight: 700; letter-spacing: 0.12em; margin: 0;
    padding: var(--space-3) var(--space-5); border: 2px solid var(--border); border-radius: var(--radius-l); background: var(--surface); }
  .handoff-note { font-size: var(--font-size-400); max-width: 32em; }
  .handoff-wait { margin-top: var(--space-4); }
  .unknown-body { font-size: var(--font-size-400); font-weight: 700; }
  .manager-hint { margin-top: var(--space-3); }
  .result-pill { font-size: var(--font-size-500); align-self: flex-start; }
  .receipt-qr { overflow-wrap: anywhere; font-size: var(--font-size-200); }
  .totals { display: grid; grid-template-columns: 1fr max-content; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0; }
  .totals dd { margin: 0; text-align: right; }
  .totals .total { font-weight: 700; font-size: var(--font-size-400); }
  @media (max-width: 480px) {
    .tpv-amount { font-size: var(--font-size-600); }
    .attempt-ref { font-size: var(--font-size-700); }
  }
}