/* ============================================================
   PIXELSOFT FILMS — shared mobile refinements.
   Loaded AFTER each page's inline <style>, so equal-specificity
   rules win by source order. EVERYTHING lives inside a
   max-width media query, so the desktop layout is never touched.
   Uses the same --psf-* tokens each page declares in :root.
   ============================================================ */

/* ---- phones & small tablets (portrait) ---- */
@media (max-width: 640px) {
  /* tighter page gutters; the sidebar already drops to a top bar < 900px */
  .wrap { padding-left: 16px; padding-right: 16px; padding-top: 22px; padding-bottom: 70px; }

  /* page title + primary action stack full-width */
  h1 { font-size: 22px; }
  .head { flex-direction: column; align-items: stretch; gap: 10px; }
  .head .newbtn, .head a.newbtn { text-align: center; }

  /* filter chips scroll in one row; the search box goes full width */
  .controls { flex-direction: column; align-items: stretch; gap: 10px; }
  .controls input { width: 100%; min-width: 0; }
  .chips { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 3px; }
  .chip { flex: 0 0 auto; }

  /* card padding eases in a bit */
  .card { padding-left: 16px; padding-right: 16px; }

  /* list rows: keep a comfortable tap target */
  .row { padding: 12px 13px; }

  /* tab strips scroll sideways instead of stacking into tall rows */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { white-space: nowrap; flex: 0 0 auto; }

  /* real touch targets on the common buttons (min-height only — never
     change display, so full-width block buttons keep their width) */
  .newbtn, .btn, .btn-solid, .go, .cancel { min-height: 42px; }

  /* inputs render at >=16px so iOS Safari doesn't zoom the page on focus */
  input, select, textarea { font-size: 17px !important; }

  /* nothing should force the page wider than the screen */
  img, video { max-width: 100%; }
  pre, table { max-width: 100%; overflow-x: auto; }
}

/* ---- very small phones ---- */
@media (max-width: 380px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  h1 { font-size: 20px; }
}