/* Orders layer 12, phone-width fix 2026-10-06 (Oct 5 sweep, finding 1).
   The host dashboard's order inbox has six columns and My orders has five.
   At 390px the two documents measured 591px and 477px wide, so the last
   column — the Open button that takes you into an order — sat past the
   right edge, and because every other element on the page stopped at 390
   there was nothing to suggest the page scrolled sideways. Accepting an
   order is the one thing a host does on a phone, with a guest waiting.

   Below 640px each row becomes a card and each cell a line inside it. No
   markup changed: the header row is hidden because every cell reads for
   itself (a time, a name, the drinks, curbside, a status pill), and the
   action lands at the foot of the card as a full-width 44px target.
   1280px is untouched — everything here lives inside the media query.
   To roll back, delete this stylesheet's one <link> line in layout.php:
   the tables then return to Direction 05 exactly as they were. */

@media (max-width: 640px) {
  .orders,
  .orders > thead,
  .orders > tbody,
  .orders > tfoot { display: block; width: 100%; }

  /* the table's own frame goes; each row carries its own */
  .orders {
    border: 0; background: transparent;
  }

  .orders tr {
    display: block;
    background: var(--paper);
    border: 1px solid var(--rule);
    margin: 0 0 10px;
    padding: 11px 13px;
  }
  .orders tr:last-child { margin-bottom: 0; }

  /* The header row is the FIRST row of both tables (neither has a <thead>),
     and its labels are redundant once a row is a card. Hide the cells and
     the row, so a <thead> added later is covered too. */
  .orders th { display: none; }
  .orders tr:first-child { display: none; }

  .orders td {
    display: block;
    border: 0;
    padding: 2px 0;
    font-size: .95rem;
  }
  .orders td:empty { display: none; }

  /* "when" is context, not the point of the card */
  .orders td:first-child { font-size: .8rem; color: var(--muted); }

  /* the action cell is last in both tables: its own shelf, thumb-sized */
  .orders td:last-child {
    margin-top: 9px;
    padding-top: 11px;
    border-top: 1px solid var(--rule-soft);
  }
  .orders td:last-child .btn {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    font-size: .9rem;
    line-height: 44px;
    text-align: center;
  }
}