/* Phones (decided 2026-11-02, a pass over every page of StemLot Vendor): what
   changes on a narrow screen beyond each page's own layout. Loaded last. */

/* A secondary action inside a form reads as one, not as a heading. */
.orders-quantity-toggle .text-button { color: #1a1a1a; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  /* Rows of choices stay on one line and scroll sideways, the chosen one in view
     (revealChosen in ui.js), a fade at the right edge saying there is more:
     order and sample status, My work's filters, a company's sections, the
     Companies filters and the sorting of Stats' listings. */
  .orders-filters, .sales-filters, .company-tabs, .company-directory-filters, .stats-table thead tr {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  :is(.orders-filters, .sales-filters, .company-tabs, .company-directory-filters, .stats-table thead tr)::-webkit-scrollbar { display: none; }
  :is(.orders-filters, .sales-filters, .company-directory-filters, .stats-table thead tr) > * { flex: none; }

  /* Orders and Samples: the status row across the list (export and refresh are
     in the page's heading). */
  .orders-toolbar { display: block; padding: 10px 0; }
  .orders-toolbar-actions { gap: 4px; }
  .orders-filters { gap: 6px; min-width: 0; padding: 2px 28px 2px 16px; }
  .orders-filters a { white-space: nowrap; }

  /* My work: four filters in a row, not a grid of two by two. */
  .sales-filters { gap: 6px; padding: 10px 28px 10px 16px; overflow-y: hidden; }
  .sales-filters .text-button { width: auto; min-width: 0; padding: 8px 14px; white-space: nowrap; }

  /* A company's sections and the Companies filters. */
  .company-tabs { gap: 22px; padding-right: 28px; }
  .company-tabs a { flex: none; white-space: nowrap; }
  .company-directory-filters { gap: 6px; padding-right: 28px; }
  .company-directory-filters .check-option { flex: none; white-space: nowrap; }

  /* Stats' listings: the sort buttons in one row. */
  .stats-table thead tr { padding-right: 28px; }

  /* Settings: the list is one step back (← Settings), so no row of sections. */
  .settings-tabs { display: none; }

  /* An empty list says so in a few lines, not half a screen. */
  .empty-state, .sales-empty { min-height: 0; padding: 28px 16px; gap: 8px; }
  .empty-state .empty-icon { width: 40px; height: 40px; margin-bottom: 0; }

  /* An order's buyer: short facts two to a row, the address on a row of its own. */
  .orders-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .orders-facts > .orders-fact-wide { grid-column: 1 / -1; }

  /* An invoice's lines: the item across the screen, then quantity, unit price
     and amount under it, each named (on paper it stays a table). */
  .orders-invoice-lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .orders-invoice-lines, .orders-invoice-lines tbody { display: block; }
  .orders-invoice-lines tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .orders-invoice-lines td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  .orders-invoice-lines td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .orders-invoice-lines td:last-child { text-align: right; font-weight: 600; }
  .orders-invoice-lines td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; color: var(--muted); font-size: 11px; font-weight: 550; }
  .orders-invoice-lines td small { font-weight: 400; }
  .orders-invoice-totals { margin-top: 0; }

  /* Stats: compact tiles, two to a row. */
  .analytics-metrics { gap: 8px; }
  .analytics-metrics .panel, .analytics-metrics .panel:first-child { min-height: 0; padding: 14px 16px; gap: 6px; border-radius: 12px; }
  .analytics-metrics strong { font-size: 22px; letter-spacing: -.4px; }
}