/* Responsive layout: which elements belong to which width class.
   ONE copy, served from public/ so `expo start` (dev) and the exported build
   read the same file. It used to be duplicated here and inline in
   web/index.html, which is a fact stored twice and therefore a fact that drifts.

   CSS media queries are evaluated by the browser layout engine, so they are
   right on first paint. JS width detection is not — `useIsMobile()` reads
   `screen.width` at mount and refreshes only on resize, and every phone-layout
   bug this app has had traced back to that difference. Prefer these classes.

   `.desktop-only` / `.mobile-only` say what they do. Their predecessors were
   `.admin-sidebar` / `.admin-hamburger` / `.admin-mobile-header`, named after
   the one place they were first used, which is not a detail: an author asking
   "how do I hide this on a phone?" does not search for `.admin-sidebar`, so the
   chat history column shipped with no width handling at all and the web app
   rendered as a squished desktop on Android for six weeks (AMB-698). */
@media (max-width: 767px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: flex !important; }
}
@media (min-width: 768px) {
  .desktop-only { display: flex !important; }
  .mobile-only { display: none !important; }
}

/* The collection action row (CollectionToolbar) is ONE row on a phone — that is
   the whole point of moving Add and Search onto FABs. It must therefore SHRINK
   its sort control rather than wrap, which is what iOS does ("Recently added" →
   "Re…"). Measured on a 393px phone the row wants ~7px more than it has, so
   without this it wraps and the chrome doubles in height for the sake of a few
   pixels. `min-width: 0` on the children is what actually permits the shrink —
   a flex item's default `min-width: auto` refuses to go below its content. */
@media (max-width: 767px) {
  .collection-chrome-row { flex-wrap: nowrap !important; }
  .collection-chrome-row > * { min-width: 0; }
}

/* Card grids (lib/cardGrid.ts). The ideal card width is a width-class decision,
   so it lives here rather than in a JS `isMobile` branch: on a phone two ~160px
   columns, on a desktop the per-surface default the call site passes in.
   `min-width: 0` stops an item outgrowing the track it was placed in — without
   it a long unbroken title pushes its column wide and the page with it. */
@media (max-width: 767px) {
  :root { --card-min: 160px; --card-gap: 8px; }
}
.card-grid > * { min-width: 0; }