/* ── Companies page ──────────────────────────────────────────
   The list+detail split view is painted with inline styles
   (pages/companies.js) rather than the shared `.companies-layout`/
   `.company-detail` grid in main.css, so the desktop layout below and its
   mobile breakpoint both live here instead. */

/* Detail panel — fixed width on desktop, matches the list/detail split
   used elsewhere (e.g. ticket-detail.css's 320px sidebar column). */
.company-detail-panel {
  width: 320px;
  min-width: 280px;
}

/* Below the mobile breakpoint a fixed 320px side panel next to a flex:1
   list inside an `overflow:hidden` row would either overflow the 375px
   viewport or squeeze the list to unusable width. Stack list above detail
   instead, each full width. */
@media (max-width: 640px) {
  .companies-layout {
    flex-direction: column;
  }

  .company-detail-panel {
    width: 100%;
    min-width: 0;
    border-left: none;
    border-top: 1px solid var(--color-border);
    max-height: 60vh;
  }
}