/* Handy (design 3.2; batch F, f5): phone 390x844, density low, 48 px top row, 56 px bottom bar, content at least
   75 % of the height. Drinks first: one scrolling chip row, compact tiles with the category colour as a border,
   the pinned "Enviar ronda" above the bottom bar, sheets with their primary pinned at the bottom. Long press
   hardening on tiles (HANDY-COMPETITION.md rank 2): no callout, no selection, no drag, touch-action
   manipulation. Wholly inside @layer app; colours only through tokens. */
@layer app {
  .app-handy .content { padding-bottom: calc(var(--touch-keypad) + var(--space-4)); }
  .app-handy.has-send-bar .content { padding-bottom: calc(var(--touch-keypad) + var(--touch-primary) + var(--space-5)); }

  /* Top row: the table name is the door to the table sheet (La cuenta, Cobrar). */
  .app-handy .topbar-table { margin-right: auto; font-size: var(--font-size-400); font-weight: 700; border-color: transparent;
    background: transparent; padding: 0 var(--space-2); }

  /* Mesas by zone, one truthful state per row, minutes that never wrap. */
  .app-handy .zone-head { font-size: var(--font-size-200); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
    margin: var(--space-4) 0 var(--space-2); }
  .app-handy .row-state { font-size: var(--font-size-200); color: var(--text-muted); }
  .app-handy .row-min { white-space: nowrap; }

  /* Carta: one scrolling chip row, then the overflow for Fotos or Lista. */
  .app-handy .carta-row { display: flex; flex-wrap: nowrap; gap: var(--touch-gap); overflow-x: auto; overscroll-behavior-x: contain;
    padding-bottom: var(--space-2); margin-bottom: var(--space-2); scrollbar-width: none; }
  .app-handy .carta-row .chip { flex: none; white-space: nowrap; }
  .app-handy .carta-row .chip-more { margin-left: auto; }
  .app-handy .carta-overflow { display: flex; justify-content: flex-end; gap: var(--touch-gap); margin-bottom: var(--space-2); }

  /* Compact tiles: three across on a phone, a short media box, the category colour as the border. */
  .app-handy .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-handy .tile-wrap { display: flex; min-width: 0; }
  .app-handy .tile-wrap .tile { flex: 1; min-width: 0; border-width: 2px; border-color: var(--cat-fill, var(--border)); padding: var(--space-1); }
  .app-handy .tile-wrap .tile-media { aspect-ratio: auto; min-height: var(--touch-keypad); }
  .app-handy .tile-wrap .tile-name { font-size: var(--font-size-200); overflow-wrap: anywhere; }
  .app-handy .tile-wrap .tile-price { font-size: var(--font-size-200); }
  .app-handy .tile-wrap .tile-cat { display: none; }
  .app-handy .tile { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
  .app-handy .tile img { -webkit-user-drag: none; }
  @media (min-width: 700px) {
    .app-handy .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }

  /* The pinned send bar sits above the bottom bar. */
  .app-handy .send-bar { position: sticky; bottom: var(--touch-keypad); z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--surface); border-top: 1px solid var(--border); }
  .app-handy .send-bar .send-last { flex: 1 1 40%; min-width: 0; justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-handy .send-bar .send-now { flex: 1 1 50%; }
  .app-handy .send-bar .reason { flex-basis: 100%; }

  /* Ticket lines are tap targets. */
  .app-handy .line { padding: 0; }
  .app-handy .line-btn { flex: 1; justify-content: flex-start; width: 100%; border-color: transparent; background: transparent;
    padding: 0 var(--space-3); text-align: left; }
  .app-handy .line-mods { color: var(--text-muted); font-size: var(--font-size-200); }
  .app-handy .line.is-void .line-name { text-decoration: line-through; }
  .app-handy .line-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--font-size-200); }

  /* Sheets: groups, and the primary pinned at the bottom of the scrolling sheet. */
  .app-handy .sheet-group { margin: var(--space-2) 0; }
  .app-handy .sheet-group .h { font-size: var(--font-size-200); margin: var(--space-2) 0 var(--space-1); }
  .app-handy .sheet-price { font-size: var(--font-size-300); color: var(--text-muted); font-weight: 400; }
  .app-handy .sheet-pin { position: sticky; bottom: calc(-1 * var(--space-4)); margin: var(--space-3) calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4); background: var(--surface); border-top: 1px solid var(--border); }
  .app-handy .sheet-pin .btn-primary { flex: 1; }

  /* Batch G (g5). Rank 9: the read-back under a line's name (pase, comensal, añadidos with prices, nota); the
     supplement marker; each held pase under its header with Marchar; the sent rounds folded below. */
  .app-handy .line-name { min-width: 0; }
  .app-handy .line-read { display: block; color: var(--text-muted); font-size: var(--font-size-200); font-weight: 400; overflow-wrap: anywhere; }
  .app-handy .line-price { margin-left: auto; white-space: nowrap; }
  .app-handy .supl { color: var(--text-muted); font-size: var(--font-size-200); }
  .app-handy .pase { margin: var(--space-5) 0 var(--space-2); }
  .app-handy .pase-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .app-handy .pase-head .h { margin: 0; font-size: var(--font-size-300); }
  .app-handy .sent-rounds { margin-top: var(--space-5); border-top: 1px solid var(--border); }
  /* Rank 11: offline, one line on the first view; the details sheet one tap away. */
  .app-handy .offline-line { justify-content: flex-start; gap: var(--space-2); margin: var(--space-2) var(--space-4); width: auto; }

  /* The checkout (web/platform/checkout.js markup). */
  .app-handy .checkout-due { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin: var(--space-2) 0; }
  .app-handy .checkout-amount { font-size: var(--font-size-600); }
  .app-handy .checkout-modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--touch-gap); }
  .app-handy .btn-pay { min-height: var(--touch-primary); font-weight: 700; font-size: var(--font-size-400); }
  .app-handy .checkout-hint { font-size: var(--font-size-400); font-weight: 700; margin: var(--space-3) 0 var(--space-1); }
  .app-handy .checkout-ref { font-size: var(--font-size-800); font-weight: 700; letter-spacing: 0.08em; text-align: center; margin: var(--space-2) 0; }
  .app-handy .checkout-change { font-size: var(--font-size-500); font-weight: 700; }

  /* Batch H (h5). The staff menu door in the top row; the step-up sheet above the sent-line sheet it confirms; the
     ready banner on Mesas; Listos per line with its age and Servido; the Mover líneas check boxes. */
  .app-handy .topbar-menu { border-color: transparent; background: transparent; padding: 0 var(--space-2); }
  .app-handy .sheet-stepup { z-index: 11; }
  .app-handy .ready-banner { justify-content: flex-start; gap: var(--space-2); font-weight: 700; }
  .app-handy .ready-line { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
  .app-handy .ready-line .btn-small { margin-left: auto; }
  .app-handy .ready-age { display: block; }
  .app-handy .move-lines { list-style: none; margin: 0; padding: 0; }
  .app-handy .move-line { width: 100%; justify-content: flex-start; border: 0; background: transparent; color: var(--text); text-align: left; }
  .app-handy .move-line .box { flex: none; width: var(--space-5); height: var(--space-5); border: 2px solid var(--border); border-radius: var(--space-1); }
  .app-handy .move-line[aria-checked="true"] .box { background: var(--accent); border-color: var(--accent); }
  .app-handy .move-line:disabled { color: var(--text-muted); }
  .app-handy .move-line .line-state { margin-left: auto; font-size: var(--font-size-200); }
}