/* ============================================================
   responsive.css  —  shared mobile layer (VecNine site, S145 r4)
   Loaded site-wide. The DESKTOP layout is the default/untouched
   layer; this file only adds a mobile layer beneath it.

   HARD RULE for anything added here:
     every declaration must be EITHER
       (a) inside an @media (max-width: …) block, OR
       (b) a provably desktop-invisible safety rule — i.e. it can
           only ever take effect when content would otherwise
           overflow a narrow screen (scroll wrappers, max-width
           on media). A full-width desktop window must look the
           same before and after.

   Standard breakpoint scale (use these going forward instead of
   inventing new widths per page):
       mobile : max-width 600px   — phones; single column
       tablet : max-width 900px   — nav + side panels collapse
       wide   : min-width 1200px  — large-desktop enhancements
   ============================================================ */

/* ---- Desktop-invisible safety ------------------------------------- */

/* Horizontal-scroll viewport for wide tables / fixed-width grids.
   When the child fits (always, at desktop widths) there is no
   scrollbar and nothing changes; it only scrolls on a narrow screen.
   This is the standard wrapper used across the site (.tbl-scroll). */
.tbl-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Media never overflows its column. Affects only images that would
   otherwise be wider than their container — virtually never the case
   at desktop widths, so desktop rendering is unchanged. */
img{max-width:100%;}

/* ---- Phones (max-width 600px) ------------------------------------- */
@media (max-width:600px){

  /* Keep shrunk images in proportion. */
  img{height:auto;}

  /* Long unbreakable strings (sequences, URLs) wrap instead of
     pushing the page wide. */
  body{overflow-wrap:break-word;}

  /* Comfortable touch targets on real controls. Inline text links and
     the small inline tag/badge spans are intentionally left alone. */
  button,
  .btn, a.btn, a.button,
  input[type="submit"], input[type="button"],
  .compose-trigger, .composer-submit, .composer-cancel{
    min-height:44px;
  }
}